آموزش ویژگی onreadystatechange در آجاکس جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی onreadystatechange در آجاکس جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی onreadystatechange در آجاکس جاوااسکریپت
با استفاده از ویژگی onreadystatechange میتونیم یک تابع تعریف کنیم تا اگه وضعیت ویژگی readyState تغییر کرد بتونیم وضعیت درخواست ارسال شده بسمت سرور رو کنترل کنیم.
یعنی چی تغییر وضعیت!؟ خب ببینید دوستان وقتی درخواست به سمت سرور ارسال میشه این درخواست خب طبیعتا یک وضعیتی باید داشته باشه، مثلا آیا درخواست توسط سرور دریافت شده؟ آیا درخواست روش پردازش انجام شده؟ آیا درخواست دریافت و پردازش هم انجام شده و در نهایت آیا نتیجه درخواست آماده شده است؟؟
پس به این حالت ها میگیم وضعیت درخواست ، که میتونیم با استفاده از ویژگی onreadystatechange یک تابع رو تعریف کنیم بعدش با استفاده از ویژگی readyState خوده وضعیت رو کنترل کنیم. ( در ادامه به مثال ها توجه نمایید )
Free-Learn
| نام ویژگی | توضیح |
|---|---|
| readyState | کنترل وضعیت درخواست عدد ۰ یعنی درخواست هنوز آماده سازی نشده عدد ۱ یعنی اتصال با سرور برقرار شده عدد ۲ یعنی درخواست دریافت شده عدد ۳ یعنی پردازش روی درخواست انجام شده عدد ۴ یعنی درخواست بطور کامل دریافت و پاسخ آماده شده |
| status | ۲۰۰ = OK ۲۰۳ = Non-Authoritative Information ۲۰۴ = No Content ۴۰۰ = Bad Request ۴۰۳ = Forbidden ۴۰۴ = Not Found ۵۰۰ = Internal Server Error ۵۰۲ = Bad Gateway ۵۰۳ = Service Unavailable |
| statusText | برگشت وضعیت status بصورت رشته ( مثلا OK یا Not Found و… ) |
Free-Learn
نحوه تعریف تابع onreadystatechange
شکل کلی نحوه استفاده از تابع onreadystatechange بصورت زیر می باشد :
|
1 2 3 |
MyRequest.onreadystatechange = function() { // چک کردن وضعیت درخواست ارسالی بسمت سرور }; |
Free-Learn
نحوه چک کردن وضعیت readyState و status
|
1 2 3 4 5 |
MyRequest.onreadystatechange = function() { if ( this.readyState == 4 && this.status == 200 ) { Result.innerHTML = this.responseText; } }; |
Free-Learn
مثال از ویژگی onreadystatechange
مثال شماره ۱ : استفاده از تابع onreadystatechange
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function Load(){ const MyRequest = new XMLHttpRequest(); var Result = document.getElementById("Result"); MyRequest.onreadystatechange = function(){ if ( this.readyState == 4 && this.status == 200 ) { Result.innerHTML = this.responseText; } }; MyRequest.open("GET", "files/myfile-1.html"); MyRequest.send(); } </script> |
مثال شماره ۲ : نمایش وضعیت ویژگی status بصورت رشته یا متن ( با استفاده از statusText )
|
1 2 3 4 5 |
MyRequest.onreadystatechange = function(){ if ( this.readyState == 4 && this.status == 200 ) { Result.innerHTML = this.statusText; } }; |
Free-Learn
نکات و توضیحات
- با استفاده از ویژگی onload میتونیم کاری کنیم که وقتی پاسخ از سمت سرور آماده بود ، اون پاسخ یا نتیجه رو در صفحه به نمایش درآوریم. [ مثال ]
- حال وقتی از ویژگی onreadystatechange استفاده میکنیم دیگه نیاز نیست از onload استفاده کنیم.
