Tutoriales básicos de AJAX

AJAX - El servidor procesa la respuesta

Este objeto XMLHttpRequest le permite definir la función a ejecutar para manejar la respuesta.

La función de respuesta onreadystatechange se define en las propiedades del objeto XMLHttpRequest.

Ejemplo

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

Prueba y mira‹/›

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

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

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

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

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

服务器响应属性

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

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

responseText属性

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

Ejemplo

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

Prueba y mira‹/›

responseXML属性

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

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

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

Ejemplo

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();

Prueba y mira‹/›

Métodos de respuesta del servidor

La tabla a continuación enumera los métodos de respuesta del servidor:

Método	Descripción
getAllResponseHeaders()	Devolver información de título
getResponseHeader()	Devolver información específica de la cabecera

Método getAllResponseHeaders()

El método getAllResponseHeaders() devuelve todas las cabeceras de la respuesta del servidor.

Ejemplo

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

Prueba y mira‹/›

Método getResponseHeader()

El método getResponseHeader() devuelve información específica de la cabecera de la respuesta del servidor.

Ejemplo

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

Prueba y mira‹/›

Múltiples tareas AJAX

Si hay múltiples tareas AJAX en un sitio web, debe crear dos funciones:

Una función para ejecutar el objeto XMLHttpRequest
Cada tarea AJAX tiene una función de devolución de llamada

La llamada a la función debe incluir la URL y la función a llamar después de que la respuesta esté lista.

Ejemplo

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) {
　　//　acción aquí
}
function myFunc2(httpRequest) {
　　//　acción aquí
}
function myFunc3(httpRequest) {
　　//　acción aquí
}

Prueba y mira‹/›

La función de devolución de llamada se pasa como parámetro a otra función.

AJAX PHP Enviar solicitud AJAX