أحدث البرامج التعليمية وتطوير الشبكة
 

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

❮ السابق التالي الفصل ❯

يستخدم الكائن مدعوم لتبادل البيانات مع الخادم.

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

لتقوم بإرسال طلب إلى خادم، ونحن نستخدم 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 الطلبات

بسيطة GET الطلب:

مثال

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
انها محاولة لنفسك »

في المثال أعلاه، قد تحصل نتيجة مؤقتا. لتجنب هذا الأمر، إضافة فريد ID to the URL: ID to the 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();
انها محاولة لنفسك »

ل POST البيانات مثل نموذج HTML، إضافة HTTP header مع setRequestHeader() . تحديد البيانات التي تريد إرسالها في 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) ويضيف رؤوس HTTP لطلب

header : يحدد اسم رأس
value : تحدد قيمة رأس

عنوان الموقع - ملف على خادم

على url معلمة من open() الأسلوب، هو عنوان لملف على الخادم:

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

الملف يمكن أن يكون أي نوع من الملفات، مثل .txt و. xml. أو الملفات النصية الخادم مثل .ASP وفب (التي يمكن أن تؤدي الإجراءات على الخادم قبل إرسال الاستجابة مرة أخرى).

غير المتزامن - True أو False ؟

أجاكس لتقف على غير متزامن جافا سكريبت وإكس إم إل، وللكائن مدعوم على التصرف كما أجاكس، و async معلمة من open() طريقة لابد من تشكيل لصحيحا:

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

إرسال طلبات متزامنة هو تحسنا كبيرا لمطوري الويب. العديد من المهام التي تجرى على الخادم هي قتا طويلا جدا. قبل أجاكس، يمكن لهذه العملية يؤدي التطبيق إلى تعليق أو وقف.

مع أجاكس، جافا سكريبت لم يكن لديك لانتظار استجابة الخادم، ولكن يمكن بدلا من ذلك:

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

Async=true

عند استخدام الطبقة = "notranslate" المتزامن = صحيح، تحديد وظيفة لتنفيذه عند الرد على استعداد في OnReadyStateChange الحدث:

مثال

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
انها محاولة لنفسك »

سوف تتعلم المزيد عن onreadystatechange في فصل لاحق.

Async=false

لاستخدام async=false ، تغيير المعلمة الثالثة في open() طريقة إلى false:

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

استخدام async=false لا ينصح، ولكن لبضع طلبات الصغيرة هذه يمكن أن تكون على ما يرام.

نتذكر أن جافا سكريبت لن تستمر في تنفيذ حتى استجابة الملقم جاهزة. إذا كان الملقم مشغول أو بطيئة، فإن تطبيق تعليق أو توقف.

ملاحظة: عند استخدام async=false ، لا تكتب وظيفة onreadystatechange - وضعت للتو التعليمات البرمجية بعد send() البيان:

مثال

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯