Tutorial Básico de AJAX

AJAX - O servidor processa a resposta

Este objeto XMLHttpRequest permite que você defina funções a serem executadas para lidar com a resposta.

A função de resposta onreadystatechange está definida nas propriedades do objeto XMLHttpRequest.

Exemplo

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

Teste e veja‹/›

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

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

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

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

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

服务器响应属性

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

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

responseText属性

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

Exemplo

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

Teste e veja‹/›

responseXML属性

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

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

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

Exemplo

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

Teste e veja‹/›

Métodos de resposta do servidor

A tabela a seguir lista os métodos de resposta do servidor:

Método	Descrição
getAllResponseHeaders()	Retornar informações de título
getResponseHeader()	Retornar informações específicas do cabeçalho

Método getAllResponseHeaders()

O método getAllResponseHeaders() retorna todas as informações de cabeçalho da resposta do servidor.

Exemplo

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

Teste e veja‹/›

Método getResponseHeader()

O método getResponseHeader() retorna informações específicas do cabeçalho da resposta do servidor.

Exemplo

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

Teste e veja‹/›

Múltiplas tarefas AJAX

Se houver várias tarefas AJAX no site, deve ser criado duas funções:

Uma função para executar o objeto XMLHttpRequest
Cada tarefa AJAX tem uma função de callback

A chamada da função deve conter a URL e a função a ser chamada após a resposta estar pronta.

Exemplo

fetchDoc("url-1", myFunc1);
fetchDoc("url-2", myFunc2);
fetchDoc("url-3", myFunc3);
função 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();
}
função myFunc1(httpRequest) {
　　//　ação vai aqui
}
função myFunc2(httpRequest) {
　　//　ação vai aqui
}
função myFunc3(httpRequest) {
　　//　ação vai aqui
}

Teste e veja‹/›

As funções de callback são funções passadas como parâmetros para outra função.

AJAX PHP Enviar solicitação AJAX