AJAX O objeto XMLHttpRequest

Índice

A pedra angular do AJAX é o objeto XMLHttpRequest.

Crie um objeto XMLHttpRequest
Defina uma função de retorno de chamada
Abra o objeto XMLHttpRequest
Envie uma solicitação para um servidor

O objeto XMLHttpRequest

Todos os navegadores modernos suportam o objeto XMLHttpRequest.

O objeto XMLHttpRequest pode ser usado para trocar dados com um servidor web por trás do cenas. Isto significa que é possível atualizar partes de uma página web, sem recarregando a página inteira.

Crie um objeto XMLHttpRequest

Todos os navegadores modernos (Chrome, Firefox, IE, Edge, Safari, Opera) possuem um objeto XMLHttpRequest integrado.

Sintaxe para criar um objeto XMLHttpRequest:

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.

Neste caso, a função de retorno de chamada deve conter o código a ser executado quando o a resposta está 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 Objeto XMLHttpRequest:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

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.

Todos os exemplos em W3Schools abrem arquivos XML localizados no domínio W3Schools.

Se você quiser usar o exemplo acima em uma de suas próprias páginas da web, os arquivos XML carregados devem estar localizados em seu próprio servidor.

Métodos de objeto XMLHttpRequest

new XMLHttpRequest(): Cria um novo objeto XMLHttpRequest
abort(): Cancela a solicitação atual
getAllResponseHeaders(): Retorna informações do cabeçalho
getResponseHeader(): Retorna informações específicas do cabeçalho
open(method, url, async, user, psw): Especifica o

método da solicitação: o tipo de solicitação GET ou POST
url: o local do arquivo
assíncrono: verdadeiro (assíncrono) ou falso (síncrono)
usuário: nome de usuário opcional
psw: senha opcional
send(): Envia a solicitação ao servidor
Usado para solicitações GET
send(string): Envia a solicitação ao servidor.
Usado para solicitações POST
setRequestHeader(): Adiciona um par rótulo/valor ao cabeçalho a ser enviado

Propriedades do objeto XMLHttpRequest

onload: Define uma função a ser chamada quando a solicitação for recebida (carregada)
onreadystatechange: Define uma função a ser chamada quando a propriedade readyState for alterada
readyState: Contém o status do XMLHttpRequest.
0: solicitação não inicializada
1: conexão do servidor estabelecida
2: solicitação recebida
3: processamento de solicitação
4: solicitação concluída e resposta pronta
responseText: Retorna os dados de resposta como uma string
responseXML: Retorna os dados de resposta como dados XML
status: Retorna o número do status de uma solicitação
200: "OK"
403: "Proibido"
404: "Não encontrado"
Para uma lista completa acesse o Http Referência de mensagens
statusText: Retorna o texto do status (por exemplo, "OK" ou "Não encontrado")

A propriedade onload

Com o objeto XMLHttpRequest você pode definir uma função de retorno de chamada a ser executada quando a solicitação recebe uma resposta.

A função é definida na propriedade onload do objeto XMLHttpRequest:

Exemplo

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Múltiplas funções de retorno de chamada

Se você tiver mais de uma tarefa AJAX em um site, deverá criar uma função para executando o objeto XMLHttpRequest e uma função de retorno de chamada para cada Tarefa AJAX.

A chamada de função deve conter o URL e qual função chamar quando o a resposta está 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 propriedade readyState contém o status do XMLHttpRequest.

A propriedade onreadystatechange define uma função de retorno de chamada a ser executada quando o readyState for alterado.

A propriedade status e as propriedades statusText contêm o status do objeto XMLHttpRequest.

onreadystatechange: Define uma função a ser chamada quando a propriedade readyState for alterada
readyState: Contém o status do XMLHttpRequest.
0: solicitação não inicializada
1: conexão do servidor estabelecida
2: solicitação recebida
3: processamento de solicitação
4: solicitação concluída e resposta pronta
status: 200: "OK"
403: "Proibido"
404: "Página não encontrada"
Para obter uma lista completa, vá para Referência de mensagens HTTP
statusText: Retorna o texto do status (por exemplo, "OK" ou "Não encontrado")

A função onreadystatechange é chamada toda vez que o readyState muda.

Quando readyState for 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();
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

O evento onreadystatechange é acionado quatro vezes (1-4), uma vez para cada alteração no readyState.