XMLHttpRequest لـ AJAX

يستخدم obj XMLHttpRequest لتبادل البيانات مع الخادم.

إرسال طلب إلى الخادم

لإرسال طلب إلى الخادم، نستخدم obj XMLHttpRequest open() و send() الطريقة:

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 دائمًا في الحالات التالية:

  • ملفات المخزنة ليست خيارًا (تحديث ملفات الخادم أو قاعدة البيانات)
  • إرسال بيانات كبيرة إلى الخادم (لا يوجد حد لحجم POST)
  • إرسال إدخال المستخدم (يمكن أن يحتوي على أحرف غير معروفة)، POST أكثر قوة وأمانًا

طلب GET

طلب GET بسيط:

مثال

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

جرب بنفسك

في الأمثلة السابقة، قد تحصل على نتائج مخزنة. لتجنب هذا، أضف ID فريد إلى 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();

جرب بنفسك

إذا كنت ترغب في إرسال بيانات مثل نموذج 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، قد يؤدي هذا إلى تعطيل أو توقف التطبيق.

من خلال إرسال متزامن، لا يجب أن ينتظر JavaScript رد الخادم، بل يمكنه:

  • تنفيذ سكربتات أخرى أثناء انتظار رد الخادم
  • معالجة الرد عند استعداده

سمة 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 استثناء عند حدوث ذلك.