Ajax | Send Request & Response
💡 أول معلومة يجب عليك معرفتها هى يتم استخدام كائن XMLHttpRequest لتبادل البيانات مع خادم.
نستكمل العملية الأن:
إرسال طلب إلى الخادم
تحتاج الأن إلى تقديم الطلب، عن طريق استدعاء أساليب () open و () send لكائن طلب HTTP ، مثل هذا:
xhttpReq.open('GET', 'ajax_file.txt', true);
xhttpReq.send();
💡 توضيح معنى [ (open (url, async ] وتم شرحه بالتفصيل فى الفصل السابق:
1- () open: لاستدعاء هي طريقة طلب HTTP – GET أو POST أو HEAD أو طريقة أخرى يدعمها الخادم الخاص بك، احتفظ بالطريقة all-capitals وفقًا لمعيار HTTP ، وإلا فقد لا تقوم بعض المتصفحات (مثل Firefox) بمعالجة الطلب.
- url: هي عنوان الصفحة الذي ترسل إليها الطلب، كميزة أمان ، لا يمكنك الاتصال بعناوين URL في نطاقات الجهات الخارجية افتراضيًا تأكد من استخدام اسم النطاق الدقيق في جميع صفحاتك أو ستحصل على خطأ “تم رفض الإذن” عند الاتصال بـ () open.
- async (اختيارية): تقوم بتعيين ما إذا كان الطلب متزامن أو غير متزامن، إذا كان هذا True (الافتراضي) ، فسوف يستمر تنفيذ JavaScript ويمكن للمستخدم التفاعل مع الصفحة ختى لو لم تصل الاستجابة من الخادم.
الحصول على طلبات ( Get Request)
مثال لطلب GET:
xhttpReq.open('GET', 'test.html');
xhttpReq.send();
إذا كنت تريد إرسال معلومات باستخدام طريقة GET ، فأضف المعلومات إلى عنوان URL:
xhttpReq.open('GET', 'test.html?name=hamed&gender=male');
xhttpReq.send();
طلبات POST
نصيحة استخدم دائمًا طلبات POST عندما:
1- يكون الملف المخزن مؤقتًا ليس خيارًا (تحديث ملف أو قاعدة بيانات على الخادم).
2- تريد إرسال كمية كبيرة من البيانات إلى الخادم (ليس لدى POST قيود على الحجم).
3- تريد إرسال إدخال المستخدم (والذي يمكن أن يحتوي على أحرف غير معروفة) ، يعد POST أكثر قوة وأمانًا من GET.
مثال لطلب POST:
xhttpReq.open('POST', 'post_file.txt', true);
xhttpReq.send();
لاحظ إذا أرسلت البيانات عن طريق POST ، فقد تضطر إلى تعيين نوع MIME للطلب – على سبيل المثال ، استخدم ما يلي قبل استدعاء send () لبيانات النموذج :
xhttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
مثال لطلب :
xhttpReq.open('POST', 'post_file.txt', true);
xhttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttpReq.send("name=hamed&gender=male");
معالجة استجابة الخادم Handling the server response
عند إرسال الطلب ، قمت بتقديم اسم (وظيفة JavaScript ) للتعامل مع الاستجابة:
xhttpReq.onreadystatechange = nameFunction;
ماذا يجب أن تفعل هذه الوظيفة؟
أولاً ، تحتاج الوظيفة إلى التحقق من حالة الطلب، إذا كانت الحالة تحتوي على قيمة XMLHttpRequest.DONE (المقابلة لـرقم 4) ، فهذا يعني أنه تم تلقي استجابة الخادم الكاملة وأنه موافق لك لمتابعة معالجتها.
if (xHttpReq.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
أو هكذا:
if (xHttpReq.readyState === 4) { // ( 4 === XMLHttpRequest.DONE )
// Everything is good, the response was received.
} else {
// Not ready yet.
}
onreadystatechange :
- يحدد وظيفة ليتم استدعاؤها عند تغيير خاصية readyState.
- يتم استدعاء وظيفة onreadystatechange في كل مرة يتغير readyState.
- يتم تشغيل الحدث onreadystatechange أربع مرات (1-4) ، مرة واحدة لكل تغيير في readyState.
قائمة لقيم الأعداد في XMLHTTPRequest.readyState كما يلي:
- 0 = (uninitialized) أى (الطلب غير مهيأ).
- 1 = (loading) أى (تم تأسيس اتصال الخادم).
- 2 = (loaded) أى (تم استلام الطلب).
- 3 = (interactive) أى (طلب معالجة)
- 4 = (complete) أى (تم الانتهاء من الطلب والاستجابة جاهزة).
status:
- 200: ” موافق OK “
- 403: ” ممنوع Forbidden “
- 404: ” الصفحة غير موجودة Page Not Found “
statusText: إرجاع نص الحالة (مثل “Ok” أو “Not Found“).
بعد ذلك ، تحقق من رموز حالة استجابة HTTP الخاصة باستجابة HTTP.
في المثال التالي ، نفرق بين طلب AJAX الناجحة وغير الناجحة عن طريق التحقق من رمز الاستجابة 200 موافق.
if (xhttpReq.status === 200) {
// All Things is Perfect!
} else {
// Here is problem with the request.
// For example, the response may have a 404 (Not Found)
// or 500 (Internal Server Error) response code ..etc
}
لاحظ أن الخطوات المذكورة أعلاه صالحة فقط إذا استخدمت طلبًا غير متزامن (لـ parameter الثالث لـ () open غير محددة أو تم تعيينها على true).
إذا كنت تستخدم طلبًا متزامنًا ، فلن تحتاج إلى تحديد وظيفة ، لكن هذا الأمر لا يشجعك كثيرًا لأنه يوفر تجربة مستخدم فظيعة.
بعد التحقق من حالة الطلب ورمز حالة HTTP للاستجابة ، يمكنك القيام بكل ما تريد بالبيانات التي أرسلها الخادم، لديك خياران للوصول إلى تلك البيانات:
- xhttpReq.responseText : إرجاع استجابة الخادم كسلسلة من النص String.
- xhttpReq.responseXML : تُرجع الاستجابة ككائن XMLDocument الذي يمكنك اجتيازه باستخدام وظائف DOM.
responseText
تقوم خاصية responseText بإرجاع استجابة الخادم كسلسلة JavaScript ، ويمكنك استخدامها وفقًا لذلك:
consle.log(xhttpReq.responseText);
responseXML
يحتوي كائن XMLHttpRequest على محلل XML مضمن.
الخاصية responseXML تُرجع استجابة الخادم ككائن DOM.
أولاً ، ننشئ مستند XML صالحًا، يحتوي المستند (users_info.xml) على ما يلي:
<Users>
<user>
<name>Mohamed</name>
<age>20</age>
</user>
<user>
<name>Noor</name>
<age>30</age>
</user>
<user>
<name>Eman</name>
<age>40</age>
</user>
</Users>
باستخدام responseXML، يمكنك تحليل الاستجابة ككائن XML DOM.
اطلب الملف users_info.xml وقم بتحليل الاستجابة:
var xmlDoc = xHttpReq.responseXML;
var users = xmlDoc.getElementsByTagName('Users').item(1);
consle.log(users.firstChild.data);
xhttp.open("GET", "users_info.xml", true);
xhttp.send();
💡 يأخذ هذا الكود كائن XMLDocument المعطاة بواسطة responseXML ويستخدم طرق DOM للوصول إلى بعض البيانات الموجودة في مستند XML.
Server Response Methods
- () getResponseHeader : إرجاع معلومات Header معينة من الخادم Server.
- () getAllResponseHeaders: إرجاع كافة معلومات Header من الخادم Server.
The getAllResponseHeaders() Method
تُرجع () getAllResponseHeaders كافة معلومات Header من استجابة الخادم.
var xHttpReq = new XMLHttpRequest();
xHttpReq.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.getAllResponseHeaders()); // Note (this = xHttpReq)
}
};
The getResponseHeader() Method
إرجاع الأسلوب ()getResponseHeader معلومات Header معينة من استجابة الخادم.
var xHttpReq = new XMLHttpRequest();
xHttpReq.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.getResponseHeader("Users-Last-Week"));
}
};
xHttpReq.open("GET", "ajax_example.txt", true);
xHttpReq.send();
مثال بسيط
<!DOCETYPE html>
<html>
<head>
<title>Ajax Simple Example</title>
<meta charset="utf-8" />
</head>
<body>
<button onclick="runRequest()">Run Request</button>
<script>
function runRequest() {
var xHttpReq = new XMLHttpRequest();
xHttpReq.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
comsole.log(this.responseText);
}
};
xHttpReq.open("GET", "testing.html");
xHttpReq.send();
}
</script>
</body>
</html>
في هذا المثال:
- ينقر المستخدم على زر “Run Request”.
- معالج الأحداث يستدعي الدالة () runRequest.
- يتم تقديم الطلب ثم (onreadystatechange) يتم تنفيذ الطلب
- يتم التحقق إذا كانت الاستجابة قد وردت أم لا ، ثم تنبيه محتويات ملف testing.html.
مُلاحظات
-
XMLHttpRequest متزامن (غير متزامن = خطأ) غير مستحسن لأن JavaScript سيتوقف عن التنفيذ حتى تكون استجابة الخادم جاهزة. إذا كان الخادم مشغولاً أو بطيئًا ، فسيعلق التطبيق أو يتوقف.
-
يتم تشجيع أدوات المطور الحديثة على التحذير من استخدام الطلبات المتزامنة وقد تتسبب في حدوث استثناء InvalidAccessError عند حدوثه.
- XMLHttpRequest المتزامن قيد الإزالة من معيار الويب ، لكن هذه العملية قد تستغرق سنوات عديدة.
لا تنسي متابعتنا على مواقع التواصل الإجتماعى.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!