AJAX - استجابة الخادم
- الصفحة السابقة طلب AJAX
- الصفحة التالية ملف XML لـ AJAX
خاصية onreadystatechange
readyState
الخاصية تحتوي على حالة XMLHttpRequest.
onreadystatechange
تعرف الدالة التي يتم تنفيذها عند تغيير خاصية readyState.
status
الخاصية statusText
الخاصية تحتوي على حالة XMLHttpRequest.
خصائص استجابة الخادم | طريقة |
---|---|
onreadystatechange | تم تعريف الدالة التي يتم استدعاؤها عند تغيير الخاصية readyState. |
readyState |
تم حفظ حالة XMLHttpRequest.
|
status |
للحصول على قائمة كاملة، يرجى زيارة دليل رسائل Http |
statusText | تم رجوع نص حالة (مثل "OK" أو "Not Found") |
كلما readyState سيتم استدعاء دالة onreadystatechange.
عندما يتغير readyState
بالنسبة ل 4
،status
بالنسبة ل 200
عندما تكون الاستجابة جاهزة:
مثال
function loadDoc() { var xhttp = new XMLHttpRequest(); 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(); }
ملاحظة:onreadystatechange
تُتم إطلاقها خمس مرات (0-4)، كل مرة readyState
كلها تتغير.
استخدام الدوال الاستدعاء
الدالة الاستدعاء هي دالة يتم تمريرها كمعامل إلى دالة أخرى.
إذا كان لديك عدة مهام AJAX في موقعك، يجب عليك إنشاء دالة تنفيذ XMLHttpRequest وكذلك دالة استدعاء مرتبطة لكل مهمة AJAX.
الوظيفة يجب أن تحتوي على URL والدالة التي سيتم استدعاؤها عند استعداد الاستجابة.
مثال
يجب أن يحتوي هذا الدالة على URL و الدالة التي سيتم استدعاؤها عند استعداد الاستجابة. loadDoc("url-1", myFunction1); loadDoc("url-2", myFunction2); function loadDoc(url, cFunction) { var xhttp; xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { xhttp = new XMLHttpRequest(); } }; cFunction(this); xhttp.send(); } xhttp.open("GET", url, true); function myFunction2(xhttp) { } function myFunction1(xhttp) { function myFunction2(xhttp) { }
// العمل هنا
خصائص استجابة الخادم | طريقة |
---|---|
خصائص responseText | خصائص |
responseXML | الحصول على بيانات الاستجابة في شكل نص |
الحصول على بيانات الاستجابة في شكل XML
طريقة استجابة الخادم | طريقة |
---|---|
getResponseHeader() | وصف |
getAllResponseHeaders() | من الخادم، يمكنك الحصول على معلومات رأس معينة |
من خلال الخادم، يمكنك الحصول على جميع معلومات الرأس
خصائص responseText
خصائص responseText، تُرجع استجابة الخادم كنص JavaScript، لذا يمكنك:
مثال
document.getElementById("demo").innerHTML = xhttp.responseText;
خصائص responseXML
يحتوي XML HttpRequest على معالج XML مدمج.
ResponseXML
الخصائص تُرجع استجابة الخادم كمنتج XML DOM.
باستخدام هذا الخصائص، يمكنكتحليلللمعالجة XML DOM:
مثال
طلب ملف music_list.xml،ثم قم بتحليل الاستجابة:
xmlDoc = xhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) { txt += x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("demo").innerHTML = txt; xhttp.open("GET", "music_list.xml", true); xhttp.send();
ستتعلم الكثير عن XML DOM في هذا الفصل من DOM في هذا الدليل.
طريقة getAllResponseHeaders()
getAllResponseHeaders()
تستعيد هذه الطريقة جميع المعلومات الرأسية من استجابة الخادم.
مثال
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.getAllResponseHeaders(); } };
طريقة getResponseHeader()
getResponseHeader()
يستعيد هذا الطريقة معلومات رأسية محددة من استجابة الخادم.
مثال
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified"); } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send();
- الصفحة السابقة طلب AJAX
- الصفحة التالية ملف XML لـ AJAX