أجاكس - طلب XMLHttp
يتم استخدام كائن XMLHttpRequest لطلب البيانات من الخادم.
إرسال طلب إلى الخادم
لإرسال طلب إلى خادم ، نستخدم الأسلوبين open () و send () XMLHttpRequestللكائن:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
عنوان url - ملف على الخادم
معلمة url الخاصة open()بالطريقة ، هي عنوان لملف موجود على الخادم:
xhttp.open("GET", "ajax_test.asp", true);
يمكن أن يكون الملف أي نوع من الملفات ، مثل .txt و .xml ، أو ملفات البرمجة النصية للخادم مثل .asp و .php (والتي يمكنها تنفيذ إجراءات على الخادم قبل إرسال الاستجابة مرة أخرى).
غير متزامن - صحيح أم خطأ؟
يجب إرسال طلبات الخادم بشكل غير متزامن.
يجب تعيين المعلمة غير المتزامنة للطريقة open () على صحيح:
xhttp.open("GET", "ajax_test.asp", true);
من خلال الإرسال غير المتزامن ، لا يتعين على JavaScript انتظار استجابة الخادم ، ولكن يمكنها بدلاً من ذلك:
- تنفيذ البرامج النصية الأخرى أثناء انتظار استجابة الخادم
- تعامل مع الرد بعد أن يكون الرد جاهزًا
القيمة الافتراضية للمعامل غير المتزامن هي غير متزامن = صحيح.
يمكنك إزالة المعلمة الثالثة بأمان من التعليمات البرمجية الخاصة بك.
XMLHttpRequest المتزامن (غير متزامن = خطأ) غير مستحسن لأن JavaScript سيتوقف عن التنفيذ حتى تصبح استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيتوقف التطبيق أو يتوقف.
احصل أو انشر؟
GETأبسط وأسرع من POST، ويمكن استخدامه في معظم الحالات.
ومع ذلك ، استخدم دائمًا طلبات POST عندما:
- الملف المخزن مؤقتًا ليس خيارًا (تحديث ملف أو قاعدة بيانات على الخادم).
- إرسال كمية كبيرة من البيانات إلى الخادم (POST ليس له قيود على الحجم).
- إرسال إدخال المستخدم (الذي يمكن أن يحتوي على أحرف غير معروفة) ، يعد POST أكثر قوة وأمانًا من GET.
طلبات GET
طلب بسيط GET:
مثال
xhttp.open("GET", "demo_get.asp");
xhttp.send();
في المثال أعلاه ، قد تحصل على نتيجة مخبأة. لتجنب ذلك ، أضف معرفًا فريدًا إلى عنوان URL:
مثال
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
إذا كنت تريد إرسال معلومات باستخدام GETالطريقة ، فأضف المعلومات إلى عنوان URL:
مثال
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
يتم شرح كيفية استخدام الخادم للإدخال وكيف يستجيب الخادم لطلب ما ، في فصل لاحق.
طلبات POST
طلب بسيط POST:
مثال
xhttp.open("POST", "demo_post.asp");
xhttp.send();
لنشر بيانات مثل نموذج HTML ، أضف رأس HTTP مع setRequestHeader(). حدد البيانات التي تريد إرسالها send()بالطريقة:
مثال
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
طلب متزامن
لتنفيذ طلب متزامن ، قم بتغيير المعامل الثالث في open()الطريقة إلى false:
xhttp.open("GET", "ajax_info.txt", false);
أحيانًا يتم استخدام عدم التزامن = خطأ للاختبار السريع. ستجد أيضًا طلبات متزامنة في كود JavaScript أقدم.
نظرًا لأن الكود سينتظر اكتمال الخادم ، فلا داعي onreadystatechange
لوظيفة:
مثال
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
XMLHttpRequest المتزامن (غير متزامن = خطأ) غير مستحسن لأن JavaScript سيتوقف عن التنفيذ حتى تصبح استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيتوقف التطبيق أو يتوقف.
يتم تشجيع أدوات المطورين الحديثة على التحذير من استخدام الطلبات المتزامنة وقد تؤدي إلى استثناء InvalidAccessError عند حدوثه.