إرسال طلب AJAX

بعد إنشاء جسم XMLHttpRequest (يرجى الرجوع إلى الفصل السابق)، يجب علينا إرسال الطلب إلى الخادم.

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

لإرسال الطلب إلى الخادم،نستخدم طريقتين من جسم XMLHttpRequest:

• open()

• إرسال()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

يقبل هذا الدالة open() ثلاثة معلمات:

• الإعداد الأول هو طريقة طلب HTTP - GET،POST

• المعلمة الثانية هي URL التي ستُرسل إليها الطلب

• المعلمة الثالثة الاختيارية تُحدد ما إذا كانت الطلبات متزامنة (القيمة الافتراضية هي true)

يقبل هذا النوع من send() معلمة اختيارية:

• للطلبات GET، لا يتم نقل أي قيمة

• للطلبات POST، يتم نقلاسم=قيمةل

ما هو الفرق بين طلبات HTTP GET وPOST؟

فيGETفي هذه الطريقة، سيضيف المتصفح محتوى النموذج (زوج الاسم/القيمة) إلى نهاية URL.

يُستخدم GET عادةً للاهتمامات البسيطة التي لا تهم الأمان. يقدم GET العديد من المزايا للمستخدمين البسيطين.

• يمكن تخزين طلبات GET

• تُحفظ طلبات GET في سجل التصفح

• يمكن إضافة تبويبات لطلبات GET

• لا تستخدم أبدًا طلبات GET لمعالجة البيانات الحساسة

• طلبات GET لها تحديد لطولها (فقط 2048 حرفًا)

فيPOSTفي هذه الطريقة، لا يتم عرض المحتوى في URL.

إذا كانت بيانات النموذج تحتوي على معلومات حساسة أو شخصية، فلا بد من استخدام طريقة POST دائمًا.

• لا يتم توفير طلبات POST في أي وقت للتخزين

• لا تُحفظ طلبات POST في سجل التصفح

• لا يمكن إضافة تبويبات لطلبات POST

• استخدم طلبات POST لمعالجة البيانات الحساسة

• لا يوجد تحديد لطول البيانات في طلبات POST

طلبات GET

يظهر هذا المثال كيفية إرسال طلب GET AJAX بسيط باستخدام JavaScript:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

في المثال السابق، قد تحصل على نتائج مخزنة. لتجنب ذلك، أضف عدد عشوائي إلى URL:

httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true);
httpRequest.send();

إذا كنت ترغب في إرسال معلومات باستخدام طريقة GET، أضف المعلومات إلى URL:

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

طلبات POST

يظهر هذا المثال كيفية إرسال طلب POST AJAX بسيط باستخدام JavaScript:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

إذا كنت ترغب في إرسال معلومات باستخدام طريقة POST، استخدم إعداد HTTP الربط، setRequestHeader() وأحدد البيانات التي تريد إرسالها في طريقة send() هذه:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

يقبل طريقة setRequestHeader() إثنين من المعلمات:

• يحدد الأول من هذا الطريقة (url) اسم الرأس.

• يحدد الثاني من هذا الطريقة (url) قيمة الرأس.

URL-ملف على الخادم

الثاني من هذا الطريقة (url) هو عنوان الملف على الخادم.

　　httpRequest.open("GET", "ajax_get.php", true);

يمكن لـ AJAX إرسال و استقبال أنواع مختلفة من المعلومات، بما في ذلك JSON، XML، HTML، PHP، ASP، النصوص، وما إلى ذلك.

خصائص onreadystatechange

يتيح لك XMLHttpRequest هذا تعريف الدوال التي سيتم تنفيذها لمعالجة الاستجابة.

يحدد دالة الاستجابة onreadystatechange الخاصية في XMLHttpRequest

httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　document.getElementById("output").innerHTML = this.responseText;
　　};
};

ستتعرف على مزيد من المعلومات حول الخاصية onreadystatechange في الجزء التالي من هذا الدليل.

طلبات مزامنة

يحدد الثالثة من open() طريقة الطلب هوغير مزامنةأومزامنة.

لإرسالمزامنةإذا تم الطلب، قم بتغيير الثالثة من open() إلىfalse.

إذا تم استخداممزامنةإذا تم الطلب، فلا تحتاج إلى تحديد دالة الاستجابة:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

غير مستحب استخدامهمزامنةالطلبات، لأن:

• سيوقف JavaScript تنفيذها حتى يتم استعداد استجابة الخادم

• إذا كان الخادم مشغولاً أو بطيئًا، فإن التطبيق سيكون متوقفًا أو يتوقف

• يقدم تجربة مستخدم سيئة