دليل أساسي AJAX

AJAX - معالجة الاستجابة على الخادم

يتيح لك XMLHttpRequest تعريف الوظائف التي يجب تنفيذها لمعالجة الاستجابة.

تعريف الوظيفة onreadystatechange في خصائص XMLHttpRequest.

مثال

httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

اختبار لرؤية‹/›

تعريف الخاصية onreadystatechange للوظيفة التي يجب تنفيذها عند تغيير readyState.

حفظ الخاصية readyState حالة XMLHttpRequest.

حفظ الخاصية status كود حالة XMLHttpRequest.

该statusText属性保存XMLHttpRequest对象的状态文本。

属性	描述
onreadystatechange	定义当readyState属性更改时要调用的函数
readyState	保持XMLHttpRequest的状态： 0：请求未初始化 1：服务器连接建立 2：收到请求 3：处理请求 4：请求完成并且响应准备就绪
status	返回请求的状态号： 200：“OK” 403：“Forbidden” 404：“Not Found” 有关完整列表，请访问HTTP状态代码参考
statusText	返回状态文本（例如，“OK”或“Not Found”）

服务器响应属性

下表列出了服务器响应属性：

属性	描述
responseText	以字符串形式返回响应数据
responseXML	将响应数据作为XML数据返回

responseText属性

该responseText属性以JavaScript字符串形式返回服务器响应。

مثال

document.getElementById("output").innerHTML = httpRequest.responseText;

اختبار لرؤية‹/›

responseXML属性

该responseXML属性将服务器响应作为XMLDocument对象返回。

您可以使用JavaScript DOM函数遍历XMLDocument对象。

以下示例请求文件ajax_test.xml并解析响应：

مثال

xmlDoc = httpRequest.responseXML;
tag = xmlDoc.getElementsByTagName("author");
for (let i = 0; i < tag.length; i++) {
　　　　txt += tag[i].childNodes[0].nodeValue + "<br>";
}
httpRequest.open("GET", "ajax_test.xml", true);
httpRequest.send();

اختبار لرؤية‹/›

服务器响应方法

下表列出了服务器响应方法：

方法	描述
getAllResponseHeaders()	返回标题信息
getResponseHeader()	返回特定的标头信息

getAllResponseHeaders()方法

يستعيد طريقة getAllResponseHeaders() جميع معلومات الرأس من استجابة الخادم.

مثال

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　　　　　document.getElementById("output").innerHTML = this.getAllResponseHeaders();
　　}
};

اختبار لرؤية‹/›

طريقة getResponseHeader()

يستعيد طريقة getResponseHeader() معلومات الرأس المحددة من استجابة الخادم.

مثال

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　if (this.readyState === 4 && this.status === 200) {
　　　　　document.getElementById("output").innerHTML = this.getResponseHeader("Server");
　　}
};

اختبار لرؤية‹/›

مهام AJAX متعددة

إذا كان هناك عدة مهام AJAX في الموقع، يجب إنشاء اثنين من الوظائف:

وظيفة تنفيذ Object XMLHttpRequest
كل مهمة AJAX تحتوي على وظيفة مراجعة

يجب أن تحتوي دعوة الوظيفة على URL والوظيفة التي سيتم تنفيذها عند استعداد الرد.

مثال

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
function fetchDoc(url, callback) {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState === 4 && this.status === 200) {
　　　　　　　　callback(this);
　　　　}
　　};
　　httpRequest.open("GET", url, true);
　　httpRequest.send();
}
function myFunc1(httpRequest) {
　　// يتم هنا تنفيذ action
}
function myFunc2(httpRequest) {
　　// يتم هنا تنفيذ action
}
function myFunc3(httpRequest) {
　　// يتم هنا تنفيذ action
}

اختبار لرؤية‹/›

الوظيفة المراجعة هي وظيفة يتم نقلها كمعامل إلى وظيفة أخرى.

AJAX PHP إرسال طلب AJAX