ارسال درخواست (AJAX Request)
می خواهیم «ارسال درخواست آژاکس» را یاد بگیریم. آژاکس (AJAX) یعنی درخواست به سرور بدون رفرش کامل. مثل وقتی فقط امتیاز بازی آپدیت می شود.
ارسال با open و send
برای فرستادن درخواست، از متدهای open() و send() استفاده کن. open تنظیمات را می گیرد. send واقعاً می فرستد.
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
GET یا POST؟
GET ساده و سریع است. اما برای داده زیاد، فرم ها، یا دورزدن کش، از POST استفاده کن. POST محدودیت طول ندارد و برای ورودی کاربر امن تر است.
درخواست های 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();
برای ارسال مثل فرم HTML، هدر و بدنه تعیین کن.
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
پارامتر url در open()
url مسیر یک فایل روی سرور است. می تواند txt یا xml باشد. یا اسکریپت های سروری مانند asp و php باشد.
xhttp.open("GET", "ajax_test.asp", true);
آسنکرون؛ چرا true؟
درخواست ها را آسنکرون بفرست. آسنکرون یعنی جاوااسکریپت منتظر پاسخ نمی ماند. پس بقیه کد اجرا می شود.
xhttp.open("GET", "ajax_test.asp", true);
onreadystatechange برای دریافت پاسخ
وقتی پاسخ رسید، این رویداد اجرا می شود. وضعیت 4 و کد 200 یعنی موفق.
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();
درخواست سنکرون (Sync)
برای سنکرون، پارامتر سوم را false بگذار. اما این کار توصیه نمی شود. چون کل اسکریپت تا پاسخ متوقف می ماند.
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
هشدار: سنکرون در استاندارد وب در حال حذف است. ابزارهای مدرن هم درباره اش اخطار می دهند.
پیوندهای داخلی
ساخت شیء XMLHttpRequest را ببین. سپس به پاسخ سرور با XMLHttpRequest برو. برای مرور، ارسال درخواست آژاکس را دوباره باز کن.
جمع بندی سریع
- open تنظیمات است؛ send ارسال می کند.
- GET سریع است؛ POST برای داده زیاد بهتر است.
- برای کش نشدن، شناسه یکتا به URL بده.
- از onreadystatechange برای واکنش به پاسخ استفاده کن.
- سنکرون نرو؛ آسنکرون همیشه بهتر است.