در این جلسه با روش های ارسال درخواست های ایجکس به سرور آشنا می شوید، دو روش برای ارسال درخواست به سرور وجود دارد، روش POST و روش GET که در این جلسه روش کار با هر کدام آموزش داده شده و با هم مقایسه می شوند.
شیء XMLHttpRequest برای تبادل داده با یک سرور استفاده می شود.
ارسال یک درخواست به یک سرور
برای ارسال یک درخواست به سرور، از روش open () و ارسال () از شی XMLHttpRequest استفاده می کنیم:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| توصیف | متد |
| نوع درخواست را مشخص می کند
method: نوع درخواست: GET یا POST url: محل سرور (فایل) async: درست (ناهمزمان) یا نادرست (همگام) |
open(method, url, async) |
| درخواست را به سرور ارسال می کند (مورد استفاده برای GET) | send() |
| درخواست را به سرور ارسال می کند (برای POST استفاده می شود) | send(string) |
GET یا POST؟
GET ساده تر و سریع تر از POST است و می تواند در اکثر موارد استفاده شود.
با این حال، همیشه از درخواست های POST زمانی استفاده کنید که:
- ارسال مقدار زیادی از اطلاعات به سرور (POST محدودیت اندازه ندارد).
- ارسال ورودی کاربر (که ممکن است شامل شخصیت های ناشناخته باشد)، POST قوی تر و امن تر از GET است.
درخواست های Get
یک درخواست GET ساده:
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
در مثال بالا، ممکن است نتیجه ی ذخیره شده (کش شده) را دریافت کنید. برای جلوگیری از این، یک شناسه منحصر به فرد به URL اضافه کنید:
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
اگر می خواهید اطلاعات را با روش GET ارسال کنید، اطلاعات را به URL اضافه کنید:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
درخواستهای POST
یک درخواست POST ساده:
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
برای داده های POST مانند یک فرم HTML، هدر HTTP با setRequestHeader () را اضافه کنید. اطلاعاتی را که می خواهید در متد send ارسال کنید مشخص کنید:
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: نام هدر را مشخص می کند و value: مقدار هدر را مشخص می کند
url – یک فایل در یک سرور
پارامتر url از متد open ، آدرس یک فایل در یک سرور است:
xhttp.open("GET", "ajax_test.asp", true);
فایل می تواند هر نوع فایل، مانند .txt و .xml، یا فایل های اسکریپت سرور مانند .asp و .php باشد (که می تواند قبل از ارسال پاسخ، اقدامات روی سرور انجام دهد).
آسنکرون – true یا false؟
درخواست سرور باید به صورت یکپارچه ارسال شود. پارامتر async متد open باید به درستی تنظیم شود:
xhttp.open("GET", "ajax_test.asp", true);
با ارسال غیر همزمان، جاوا اسکریپت مجبور نیست که پاسخ سرور را منتظر بگذارد، بلکه می تواند به جای آن:
- اجرای دیگر اسکریپت ها در حالی که منتظر پاسخ سرور است
- وقتی درگیر پاسخ می شوید که پاسخ آماده شده باشد.
خاصیت onreadystatechange
با استفاده از شی XMLHttpRequest، می توانید یک تابع را برای زمانی که درخواست پاسخ را دریافت می کند تعریف کنید.
این تابع در ویژگی onreadystatechange شیء XMLHttpResponse تعریف می شود:
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 تغییر دهید:
xhttp.open("GET", "ajax_info.txt", false);
گاهی اوقات async = false برای تست سریع استفاده می شود. همچنین درخواست های همزمان را تنها در کدهای جاوا اسکریپت قدیمی پیدا می شوند و از آنجا که کد برای تکمیل سرور منتظر است، نیازی به یک تابع onreadystatechange وجود ندارد:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
نکته: بهتر است بدانید که در حال حاضر، XMLHttpRequest همگام (async = false) توصیه نمی شود، زیرا جاوا اسکریپت توقف می کند تا پاسخ سرور آماده شود و اگر سرور شلوغ یا کند باشد، برنامه قطع و یا متوقف خواهد شد. XMLHttpRequest همزمان در حال حذف شدن از استاندارد وب است، اما این روند می تواند سالها طول بکشد.