AJAX - O objeto XMLHttpRequest
A pedra angular do AJAX é o objeto XMLHttpRequest.
- Criar um objeto XMLHttpRequest
- Definir uma função de retorno de chamada
- Abra o objeto XMLHttpRequest
- Enviar uma solicitação para um servidor
O objeto XMLHttpRequest
Todos os navegadores modernos suportam o XMLHttpRequestobjeto.
O XMLHttpRequestobjeto pode ser usado para trocar dados com um servidor web nos bastidores. Isso significa que é possível atualizar partes de uma página web, sem recarregar a página inteira.
Criar um objeto XMLHttpRequest
Todos os navegadores modernos (Chrome, Firefox, IE, Edge, Safari, Opera) têm um XMLHttpRequestobjeto embutido.
Sintaxe para criar um XMLHttpRequestobjeto:
variable = new XMLHttpRequest();
Definir uma função de retorno de chamada
Uma função de retorno de chamada é uma função passada como parâmetro para outra função.
Nesse caso, a função de retorno de chamada deve conter o código a ser executado quando a resposta estiver pronta.
xhttp.onload = function() {
// What to do when the response is ready
}
Enviar um pedido
Para enviar uma solicitação a um servidor, você pode usar os métodos open() e send() do
XMLHttpRequestobjeto:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Exemplo
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Acesso entre domínios
Por motivos de segurança, os navegadores modernos não permitem acesso entre domínios.
Isso significa que tanto a página da Web quanto o arquivo XML que ela tenta carregar devem estar localizados no mesmo servidor.
Os exemplos no W3Schools abrem todos os arquivos XML localizados no domínio do W3Schools.
Se você quiser usar o exemplo acima em uma de suas próprias páginas da Web, os arquivos XML que você carregar devem estar localizados em seu próprio servidor.
Métodos de objeto XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Propriedades do objeto XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| 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 |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
A propriedade onload
Com o XMLHttpRequestobjeto você pode definir uma função de callback a ser executada quando a requisição receber uma resposta.
A função é definida na onloadpropriedade do XMLHttpRequestobjeto:
Exemplo
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Várias funções de retorno de chamada
Se você tiver mais de uma tarefa AJAX em um site, deverá criar uma função para executar o XMLHttpRequestobjeto e uma função de retorno de chamada para cada tarefa AJAX.
A chamada de função deve conter a URL e qual função chamar quando a resposta estiver pronta.
Exemplo
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
A propriedade onreadystatechange
A readyStatepropriedade contém o status do XMLHttpRequest.
A onreadystatechangepropriedade define uma função de retorno de chamada a ser executada quando o readyState for alterado.
A statuspropriedade e as statusTextpropriedades mantêm o status do objeto 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") |
A onreadystatechangefunção é chamada toda vez que o readyState muda.
Quando readyStatefor 4 e o status for 200, a resposta estará pronta:
Exemplo
function loadDoc() {
const 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");
xhttp.send();
}
O onreadystatechangeevento é acionado quatro vezes (1-4), uma vez para cada alteração no readyState.