AJAX - استجابة الخادم
خاصية onreadystatechange
تحتفظ خاصية readyState بحالة XMLHttpRequest.
تحدد خاصية onreadystatechange وظيفة يتم تنفيذها عند تغير حالة الاستعداد.
تحتفظ خاصية الحالة وخاصية statusText بحالة كائن XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
يتم استدعاء وظيفة onreadystatechange في كل مرة تتغير فيها حالة الاستعداد.
عندما تكون حالة الجاهزية هي 4 والحالة 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();
}
ملف "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 أربع مرات (1-4) ، مرة واحدة لكل تغيير في حالة الاستعداد.
استخدام وظيفة رد الاتصال
وظيفة رد الاتصال هي وظيفة يتم تمريرها كمعامل إلى وظيفة أخرى.
إذا كان لديك أكثر من مهمة AJAX في موقع ويب ، فيجب عليك إنشاء وظيفة واحدة لتنفيذ كائن XMLHttpRequest ، ووظيفة رد اتصال واحدة لكل مهمة AJAX.
يجب أن يحتوي استدعاء الوظيفة على عنوان URL والوظيفة التي يجب الاتصال بها عندما تكون الاستجابة جاهزة.
مثال
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
خصائص استجابة الخادم
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
طرق استجابة الخادم
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
خاصية responseText
تُرجع الخاصية responseText استجابة الخادم كسلسلة JavaScript ، ويمكنك استخدامها وفقًا لذلك:
مثال
document.getElementById("demo").innerHTML = xhttp.responseText;
خاصية responseXML
يحتوي كائن XML HttpRequest على محلل XML مضمن.
تقوم الخاصية responseXML بإرجاع استجابة الخادم ككائن XML DOM.
باستخدام هذه الخاصية ، يمكنك تحليل الاستجابة ككائن XML DOM:
مثال
اطلب الملف cd_catalog.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",
"cd_catalog.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();