با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم . در این جلسه به نحوه ارسال درخواست به سرور در AJAX به شیوه درخواست با GET یا درخواست با POST می پردازیم تا پایان این جلسه با ما همراه باشید.
از شی XMLHttpRequest برای تبادل داده ها با یک سرور Server استفاده می شود.
ار متد های ()open و ()send شی XMLHttpRequest برای ارسال درخواست به یک سرور استفاده می شود:
1 2 | xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); |
هر یک از این متد ها در جلسه آموزش شی XHR توضیح داده شده اند.
GET ساده تر و سریع تر از POST هست و می تواند در خیلی از موارد استفاده شود.
به هرحال در موارد زیر همیشه از POST استفاده کنید:
یک ارسال درخواست ساده با GET به صورت زیر می باشد:
1 2 | xhttp.open("GET", "demo_get.asp", true); xhttp.send(); |
در مثال بالا شما ممکن است یک مقدار کش شده را دریافت کنید.
برای جلوگیری از این کار، یک id منحصر به فرد به URL اضافه کنید:
1 2 | xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true); xhttp.send(); |
اگر می خواهید اطلاعات یا کوئری هایی را با GET ارسال کنید، آن ها را به URL اضافه کنید:
1 2 | xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true); xhttp.send(); |
یک ارسال درخواست ساده با POST به صورت زیر می باشد:
1 2 | xhttp.open("POST", "demo_post.asp", true); xhttp.send(); |
برای داده های POST مانند فرم HTML، هدر HTTP با ()setRequestHeader را اضافه کنید.
اطلاعاتی را که می خواهید در متد ()send ارسال کنید را مشخص کنید:
1 2 3 | xhttp.open("POST", "ajax_test.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford"); |
متد | توضیحات |
---|---|
setRequestHeader(header, value) | هدرهای HTTP را به درخواست اضافه می کند. header: نام هدر را مشخص می کند. |
پارامتر url متد open، آدرس یک فایل در سرور می باشد.
1 | xhttp.open("GET", "ajax_test.asp", true); |
فایل می تواند از هر نوعی باشد. مانند txt. xml. یا اسکریپت های سرور مانند asp. php. (که اعمالی را روی سرور اقبل از ارسال پاسخ انجام می دهند.)
در خواست های سرور باید به صورت Asynchronous (غیر همزمان) باشد.
پارامتر async متد ()open باید به درستی تنظیم شود:
1 | xhttp.open("GET", "ajax_test.asp", true); |
با این روش، جاوا اسکریپت لازم نیست تا منتظر پاسخ سرور بماند و در عوض می تواند کار های زیر را انجام دهد:
با شی XHR شما می توانید تابعی برای اجرا در هنگام دریافت پاسخ از سرور تعریف کنید.
این تابع در خاصیت onreadystatechange تعریف می شود:
1 2 3 4 5 6 7 | xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); |
برای اجرای یک درخواست همزمان، پارامتر سوم در متد ()open را به false تغییر دهید:
1 | xhttp.open("GET", "ajax_info.txt", false); |
گاهی اوقات async = false برای تست سریع استفاده می شود. شما همچنین درخواست های همزمان را در کد جاوا اسکریپت قدیمی پیدا خواهید کرد.
از آنجا که کد برای تکمیل سرور منتظر است، نیازی به یک تابع onreadystatechange وجود ندارد:
1 2 3 | xhttp.open("GET", "ajax_info.txt", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText; |
جلسه ارسال درخواست به سرور در AJAX نیز به پایان رسید.
در جلسه بعد به آموزش دریافت پاسخ از سرور در Ajax خواهیم پرداخت.با ما همراه باشد.