AJAX - XMLHttpRequest

جسم XMLHttpRequest برای تبادل داده‌ها با سرور استفاده می‌شود.

درخواست به سرور ارسال کنید

برای ارسال درخواست به سرور، از جسم XMLHttpRequest استفاده می‌کنیم open()} و send() روش:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
روش توضیح
open(method, url, async)

نوع درخواست را تعیین می‌کند

  • methodنوع درخواست: GET یا POST
  • urlموقعیت سرور (فایل)
  • asynctrue (اسناددهی) یا false (همزمان)
send() درخواست به سرور ارسال کنید (برای GET استفاده می‌شود)
send(string) درخواست به سرور ارسال کنید (برای POST استفاده می‌شود)

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=Bill&lname=Gates", true);
xhttp.send();

شما خودتان امتحان کنید

درخواست POST

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

مثال

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

شما خودتان امتحان کنید

اگر می‌خواهید داده‌های POST مانند فرم HTML ارسال کنید، از طریق setRequestHeader() یک سربرگ HTTP اضافه کنید. لطفاً در send() مطالعه‌ای که تعیین می‌کند داده‌هایی که باید ارسال کنید:

مثال

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

شما خودتان امتحان کنید

روش توضیح
setRequestHeader(header, value)

سرآیند‌های HTTP را به درخواست اضافه کنید

  • headerتعیین کنید نام سرآیند
  • valueتعیین کنید ارزش سرآیند

url - فایل روی سرور

روش url پارامتر، آدرس فایل روی سرور است:

xhttp.open("GET", "ajax_test.asp", true);

این فایل می‌تواند هر نوع فایل باشد، مانند .txt و .xml، یا فایل‌های اسکریپت سرور مانند .asp و .php (که می‌توانند قبل از ارسال پاسخ در سرور عمل کنند).

غیر همزمان - true یا false؟

برای ارسال درخواست‌های غیر همزمان،open()} روش async پارامتر باید تنظیم شود به true:

xhttp.open("GET", "ajax_test.asp", true);

ارسال درخواست‌های غیر همزمان یک پیشرفت بزرگ برای توسعه‌دهندگان وب است. بسیاری از وظایف انجام شده بر روی سرور بسیار زمان‌بر هستند. قبل از AJAX، این عمل می‌توانست برنامه را به تعلیق درآورد یا متوقف کند.

با ارسال غیر همزمان، جاوااسکریپت لازم نیست منتظر پاسخ سرور باشد، بلکه می‌تواند:

  • در حالی که منتظر پاسخ سرور هستید، اسکریپت‌های دیگر را اجرا کنید
  • پاسخ را در حالت آماده‌سازی پردازش کنید

خصوصیت onreadystatechange

از طریق شیء XMLHttpRequest می‌توانید تابعی را تعریف کنید که در صورت دریافت پاسخ درخواست اجرا می‌شود.

این تابع در شیء XMLHttpResponse وجود دارد: onreadystatechange در属性 تعریف شده:

مثال

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 برای تست سریع استفاده می‌شود. شما همچنین در کدهای قدیمی‌تر JavaScript درخواست‌های همزمان را مشاهده خواهید کرد.

به دلیل اینکه کد منتظر تکمیل سرور است، نیازی به تابع onreadystatechange نیست:

مثال

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

شما خودتان امتحان کنید

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

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

ابزارهای توسعه مدرن تشویق می‌شوند که هشدارهایی در مورد درخواست‌های همزمان ارائه دهند و در این حالت ممکن است خطای InvalidAccessError رخ دهد.