AJAX - ارسال یک درخواست به سرور
شیء XMLHttpRequest برای تبادل داده با یک سرور استفاده می‌شود. [۱]
برای ارسال یک درخواست به یک سرور، ما از متدهای send() و open() شیء XMLHttpRequest استفاده می‌کنیم:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| متد | توضیحات |
|---|---|
| open(method, url, async) | نوع درخواست را مشخص می‌کند
method: نوع درخواست: GET یا POST url: آدرس سرور (محل ذخیره فایل‌ها) async: به معنای غیرهمزمان (true) یا به معنای همزمان (false) است |
| send() | درخواست را به سمت سرور ارسال می‌کند
برای GET استفاده می‌شود |
| send(string) | درخواست را به سمت سرور ارسال می‌کند
برای POST استفاده می‌شود |
GET یا POST؟
GET نسبت به POST ساده‌تر و سریع‌تر است و می‌تواند برای موارد گوناگونی استفاده شود.
اما، همیشه از درخواست‌های POST استفاده کنید اگر:
- یک فایل کش شده یک option نباشد (بروزرسانی یک فایل یا دیتابیس روی سرور)
- ارسال حجم زیادی از داده به سمت سرور (POST هیچ گونه محدودیت اندازه‌ای ندارد)
- ارسال داده ورودی کاربر (که می‌تواند شامل کاراکترهای ناشناخته باشد)، POST بسیار قدرتمندتر و امن‌تر از GET است
درخواست های GET
یک درخواست GET ساده:
مثال
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
در مثال بالا، شما ممکن است یک نتیجه Cache شده دریافت کنید. برای جلوگیری از این امر، یک ID (به فارسی: شناسه) به خصوص به 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 به صورت POST، به وسیله متد setRequestHeader() یک HTTP header اضافه کنید. داده‌ای را که می‌خواهید ارسال کنید را در متد 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) | Header های HTTP را به درخواست اضافه می‌کند.
header: نام header را مشخص می‌کند. value: مقدار header را مشخص می‌کند. |
آدرس (URL) - یک فایل روی یک سرور
پارامتر url متد open()، آدرس یک فایل روی یک سرور است:
xhttp.open("GET", "ajax_test.asp", true);
فایل می‌تواند از هر نوعی مانند .txt و .xml یا زبان اسکریپت سرور همانند .asp یا .php (که می‌تواند عکس العملی را روی سرور قبل از ارسال نتیجه ایجاد کند) باشد.
غیرهمزمانی - True یا False؟
درخواست‌های سرور می‌بایست به صورت غیرهمزمان ارسال شوند.
پارامتر async متد open() می‌بایست مقدار true داشته باشد:
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();
شما در مورد onreadystatechange در فصل آینده مطالب بیشتری را خواهید آموخت.
درخواست های همزمان
برای اجرای یک درخواست به صورت هزمان، مقدار پارامتر سوم در متد 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 در حال حذف از استاندارد وب است، اما این فرایند حذف ممکن است چندین سال طول بکشد.
منابع آموزشی