XMLHttpRequest do AJAX

O objeto XMLHttpRequest é usado para trocar dados com o servidor.

Enviar solicitação para o servidor

Para enviar solicitações para o servidor, usamos o objeto open() e send() método:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Método Descrição
open(method, url, async)

define o tipo da solicitação

  • method：tipo de solicitação: GET ou POST
  • url：posição do servidor (arquivo)
  • async：true (assíncrono) ou false (síncrono)
send() Enviar solicitação para o servidor (usado para GET)
send(string) Enviar solicitação para o servidor (usado para POST)

GET ou POST?

GET é mais simples e mais rápido que POST, e pode ser usado na maioria das situações.

No entanto, sempre use POST nas seguintes situações:

  • Os arquivos em cache não são uma opção (atualizar arquivos ou banco de dados no servidor)
  • Enviar uma grande quantidade de dados para o servidor (POST não tem limite de tamanho)
  • Enviar entrada do usuário (pode conter caracteres desconhecidos), POST é mais poderoso e seguro que GET

Solicitação GET

Uma solicitação GET simples:

Exemplo

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Experimente Você Mesmo

No exemplo acima, você pode obter um resultado em cache. Para evitar isso, adicione um ID único à URL:

Exemplo

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Experimente Você Mesmo

Se você precisar enviar informações usando o método GET, adicione essas informações à URL:

Exemplo

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Experimente Você Mesmo

Solicitação POST

Uma solicitação POST simples:

Exemplo

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Experimente Você Mesmo

Se você precisar enviar dados POST como um formulário HTML, por favor, faça isso através de setRequestHeader() Adicione um cabeçalho HTTP. Por favor, no send() O método especifica os dados que você precisa enviar:

Exemplo

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Experimente Você Mesmo

Método Descrição
setRequestHeader(header, value)

Adicionar cabeçalhos HTTP à solicitação

  • header：definir nome do cabeçalho
  • value：definir valor de cabeçalho

url - Arquivo no servidor

Método open() url O parâmetro é o endereço do arquivo no servidor:

xhttp.open("GET", "ajax_test.asp", true);

Este arquivo pode ser de qualquer tipo, como .txt e .xml, ou arquivos de script do servidor, como .asp e .php (eles podem executar operações no servidor antes de enviar a resposta).

Assíncrono - true ou false?

Para enviar solicitações assíncronas:open() método async O parâmetro deve ser definido como true:

xhttp.open("GET", "ajax_test.asp", true);

O envio de solicitações assíncronas representa um grande avanço para os desenvolvedores web. Muitas tarefas executadas no servidor são muito demoradas. Antes do AJAX, essa operação poderia causar o congelamento ou parada do aplicativo.

Através de envio assíncrono, o JavaScript não precisa esperar pela resposta do servidor, em vez disso, pode:

  • Executar outros scripts enquanto espera a resposta do servidor
  • Tratar a resposta quando ela estiver pronta

Propriedade onreadystatechange

Através do objeto XMLHttpRequest, você pode definir a função a ser executada quando a solicitação receber uma resposta.

Esta função é executada no objeto XMLHttpResponse onreadystatechange Definido nas propriedades:

Exemplo

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Experimente Você Mesmo

Você aprenderá mais sobre onreadystatechange em capítulos posteriores.

Solicitação síncrona

Para executar solicitações síncronas, por favor, defina open() O terceiro parâmetro do método é configurado para false:

xhttp.open("GET", "ajax_info.txt", false);

Às vezes async = false é usado para testes rápidos. Você também verá solicitações síncronas em código JavaScript mais antigo.

Devido ao código esperar que o servidor seja concluído, não é necessário a função onreadystatechange:

Exemplo

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Experimente Você Mesmo

Não recomendamos o XMLHttpRequest síncrono (async = false), pois o JavaScript parará de executar até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o aplicativo pode ficar suspenso ou parar.

XMLHttpRequest síncrono está sendo removido dos padrões da Web, mas este processo pode levar muitos anos.

Ferramentas de desenvolvimento modernas são encorajadas a emitir alertas sobre a utilização de solicitações síncronas e, neste caso, pode ser lançada a exceção InvalidAccessError.