English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base AJAX

AJAX - Le serveur traite la réponse

L'objet XMLHttpRequest vous permet de définir la fonction à exécuter pour traiter la réponse.

La fonction de réponse onreadystatechange est définie dans les attributs de l'objet XMLHttpRequest.

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

该onreadystatechange属性定义当readyState更改时要执行的函数。

该readyState属性保存XMLHttpRequest对象的状态。

该status属性保存XMLHttpRequest对象的状态代码。

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

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

服务器响应属性

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

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

responseText属性

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

document.getElementById("output").innerHTML = httpRequest.responseText;
Voyons si‹/›

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();
Voyons si‹/›

Méthodes de réponse du serveur

Le tableau suivant liste les méthodes de réponse du serveur :

MéthodeDescription
getAllResponseHeaders()Retourner des informations de titre
getResponseHeader()Retourner des informations spécifiques de header

Méthode getAllResponseHeaders()

La méthode getAllResponseHeaders() retourne toutes les informations de header de la réponse du serveur.

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

Méthode getResponseHeader()

La méthode getResponseHeader() retourne des informations spécifiques du header de la réponse du serveur.

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

Tâches AJAX multiples

Si plusieurs tâches AJAX sont présentes sur un site, il est conseillé de créer deux fonctions :

  • Une fonction pour exécuter l'objet XMLHttpRequest

  • Chaque tâche AJAX a une fonction de rappel

L'appel de la fonction doit inclure l'URL et la fonction à appeler après que la réponse soit prête.

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 va ici
}
function myFunc2(httpRequest) {
　　//　action va ici
}
function myFunc3(httpRequest) {
　　//　action va ici
}
Voyons si‹/›

La fonction de rappel est une fonction passée en tant que paramètre à une autre fonction.

AJAX PHPEnvoyer une requête AJAX