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 ساده:

مثال

1xhttp.open("GET", "demo_get.asp", true);
2xhttp.send();


مشاهدهٔ نتیجه


در مثال بالا، شما ممکن است یک نتیجه Cache شده دریافت کنید. برای جلوگیری از این امر، یک ID (به فارسی: شناسه) به خصوص به URL اضافه کنید:

مثال

1xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
2xhttp.send();


مشاهدهٔ نتیجه


اگر شمامی خواهید اطلاعاتی را با روش GET ارسال کنید، اطلاعات خود را به URL اضافه کنید:

مثال

1xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
2xhttp.send();


مشاهدهٔ نتیجه


درخواست های POST

یک درخواست POST ساده:

مثال

1xhttp.open("POST", "demo_post.asp", true);
2xhttp.send();


مشاهدهٔ نتیجه


برای ارسال داده همانند یک فرم HTML به صورت POST، به وسیله متد setRequestHeader() یک HTTP header اضافه کنید. داده‌ای را که می‌خواهید ارسال کنید را در متد send() مشخص کنید:

مثال

1xhttp.open("POST", "ajax_test.asp", true);
2xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
3xhttp.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 تعریف می‌شود:

مثال

1xhttp.onreadystatechange = function() {
2  if (this.readyState == 4 && this.status == 200) {
3    document.getElementById("demo").innerHTML = this.responseText;
4  }
5};
6xhttp.open("GET", "ajax_info.txt", true);
7xhttp.send();


مشاهدهٔ نتیجه


شما در مورد onreadystatechange در فصل آینده مطالب بیشتری را خواهید آموخت.

درخواست های همزمان

برای اجرای یک درخواست به صورت هزمان، مقدار پارامتر سوم در متد open() را به false تغییر دهید:

xhttp.open("GET", "ajax_info.txt", false);

گاهی اوقات async=false برای تست کردن استفاده می‌شود. شما همچنین می‌توانید درخواست‌های همزمان را در کدهای قدیمی‌تر جاوا اسکریپت بیابید.

ازآنجایی که کد برای دریافت پاسخ سرور صبر خواهد کرد، نیازی به تابع onreadystatechange نیست:

مثال

1xhttp.open("GET", "ajax_info.txt", false);
2xhttp.send();
3document.getElementById("demo").innerHTML = xhttp.responseText;


مشاهدهٔ نتیجه

استفاده از حالت همزمان در XMLHttpRequest (async = false) توصیه نمی‌شود چرا که جاوا اسکریپت اجرای کد را تا زمانی که پاسخ سرور آماده شود متوقف می‌کند. اگر سرور مشغول یا کند باشد، نرم‌افزار دچار هنگ می‌شود یا متوقف می‌گردد.

حالت همزمان در XMLHttpRequest در حال حذف از استاندارد وب است، اما این فرایند حذف ممکن است چندین سال طول بکشد.

ابزارهای توسعه مدرن به گونه ای در حال طراحی هستند که درباره استفاده از حالت همزمان هشدار دهند و ممکن است یک خطای InvalidAccessError در زمان استفاده از حالت همزمان ایجاد کنند.

منابع آموزشی