أجاكس - إرسال طلب إلى الخادم
يتم استخدام كائن 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) |
احصل أو انشر؟
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=Henry&lname=Ford", true);
xhttp.send();
طلبات POST
طلب POST بسيط:
مثال
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
لنشر بيانات مثل نموذج HTML ، أضف رأس HTTP باستخدام setRequestHeader (). حدد البيانات التي تريد إرسالها في طريقة الإرسال ():
مثال
xhttp.open("POST", "demo_post2.asp", true);
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 |
عنوان url - ملف على الخادم
معلمة url للطريقة open () هي عنوان لملف موجود على الخادم:
xhttp.open("GET", "ajax_test.asp", true);
يمكن أن يكون الملف أي نوع من الملفات ، مثل .txt و .xml ، أو ملفات البرمجة النصية للخادم مثل .asp و .php (والتي يمكنها تنفيذ إجراءات على الخادم قبل إرسال الاستجابة مرة أخرى).
غير متزامن - صحيح أم خطأ؟
يجب إرسال طلبات الخادم بشكل غير متزامن.
يجب تعيين المعلمة غير المتزامنة للطريقة open () على صحيح:
xhttp.open("GET", "ajax_test.asp", true);
من خلال الإرسال غير المتزامن ، لا يتعين على JavaScript انتظار استجابة الخادم ، ولكن يمكنها بدلاً من ذلك:
- تنفيذ البرامج النصية الأخرى أثناء انتظار استجابة الخادم
- تعامل مع الرد بعد أن يكون الرد جاهزًا
خاصية onreadystatechange
باستخدام كائن XMLHttpRequest ، يمكنك تحديد وظيفة يتم تنفيذها عندما يتلقى الطلب إجابة.
يتم تحديد الوظيفة في خاصية onreadystatechange لكائن XMLHttpResponse:
مثال
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();
ملف "ajax_info.txt" المستخدم في المثال أعلاه ، هو ملف نصي بسيط ويبدو كالتالي:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
سوف تتعلم المزيد عن onreadystatechange في فصل لاحق.
طلب متزامن
لتنفيذ طلب متزامن ، قم بتغيير المعامل الثالث في طريقة open () إلى false:
xhttp.open("GET", "ajax_info.txt", false);
أحيانًا يتم استخدام عدم التزامن = خطأ للاختبار السريع. ستجد أيضًا طلبات متزامنة في كود JavaScript أقدم.
نظرًا لأن الكود سينتظر اكتمال الخادم ، فليست هناك حاجة لوظيفة واحدة لتغيير البيانات:
مثال
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
XMLHttpRequest المتزامن (غير متزامن = خطأ) غير مستحسن لأن JavaScript سيتوقف عن التنفيذ حتى تصبح استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيتوقف التطبيق أو يتوقف.
XMLHttpRequest المتزامن قيد الإزالة من معيار الويب ، لكن هذه العملية قد تستغرق سنوات عديدة.
يتم تشجيع أدوات المطورين الحديثة على التحذير من استخدام الطلبات المتزامنة وقد تؤدي إلى استثناء InvalidAccessError عند حدوثه.