AJAX درخواست (AJAX Request)
درخواست AJAX یعنی فرستادن پیام به سرور، بدون رفرش صفحه. این کار سریع است و تجربه کاربر را بهتر می کند. «شیء XMLHttpRequest» ابزار اصلی این درخواست هاست.
ارسال درخواست با open و send
با open(method, url, async) نوع و مقصد را تعیین کن. سپس با send() بفرست.
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
نکته: پارامتر async بهتر است true باشد تا صفحه قفل نشود.
URL: فایل روی سرور
آدرس می تواند .txt، .xml یا فایل داینامیک مثل .asp و .php باشد.
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_test.asp", true);
xhttp.send();
GET یا POST؟
GET ساده و سریع است. اما برای داده زیاد یا ورودی کاربر، POST بهتر است.
- برای دورزدن کش، GET را یکتا کن.
- برای فرم ها، POST پایدارتر است.
GET ساده
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "demo_get.asp");
xhttp.send();
GET بدون کش (Cache-Busting)
const xhttp = new XMLHttpRequest();
const url = "demo_get.asp?t=" + Math.random();
xhttp.open("GET", url);
xhttp.send();
GET با پارامترهای Query
const xhttp = new XMLHttpRequest();
const url = "demo_get2.asp?fname=Henry&lname=Ford";
xhttp.open("GET", url);
xhttp.send();
POST ساده
const xhttp = new XMLHttpRequest();
xhttp.open("POST", "demo_post.asp");
xhttp.send();
POST شبیه ارسال فرم
const xhttp = new XMLHttpRequest();
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
هشدار: هدر درست بفرست تا سرور داده را مثل فرم بخواند.
درخواست همگام (Synchronous)؛ چرا بد است؟
اگر false بدهی، صفحه تا پاسخ، قفل می شود. این کار پیشنهاد نمی شود.
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
نکته: مقدار پیش فرض async برابر true است؛ سومی را می توان حذف کرد.
گام های عملی درخواست AJAX
- یک شیء
XMLHttpRequestبساز. - با
openروش، آدرس، و ناهمگام را بده. - برای دریافت پاسخ، رویداد مناسب را تنظیم کن.
- با
sendدرخواست را بفرست.
برای مقدمات، به AJAX معرفی برو. برای پاسخ ها، ادامه بحث را در AJAX پاسخ ببین. همچنین جایگزین ساده تر را در Fetch API بررسی کن.
جمع بندی سریع
- درخواست AJAX با XHR و متدهای
openوsendاست. - GET سریع است؛ POST برای فرم و داده زیاد بهتر است.
- پارامتر
asyncراtrueنگه دار. - برای کش، آدرس GET را یکتا کن.