AJAX - XMLHttpRequest
O objeto XMLHttpRequest é usado para solicitar dados de um servidor.
Enviar uma solicitação para um servidor
Para enviar uma requisição para um servidor, usamos os métodos open() e send() do XMLHttpRequestobjeto:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
O URL - Um arquivo em um servidor
O parâmetro url do open()método é um endereço para um arquivo em um servidor:
xhttp.open("GET", "ajax_test.asp", true);
O arquivo pode ser qualquer tipo de arquivo, como .txt e .xml, ou arquivos de script de servidor como .asp e .php (que podem executar ações no servidor antes de enviar a resposta de volta).
Assíncrono - Verdadeiro ou Falso?
As solicitações do servidor devem ser enviadas de forma assíncrona.
O parâmetro assíncrono do método open() deve ser definido como true:
xhttp.open("GET", "ajax_test.asp", true);
Ao enviar de forma assíncrona, o JavaScript não precisa esperar pela resposta do servidor, mas pode:
- executar outros scripts enquanto aguarda a resposta do servidor
- lidar com a resposta depois que a resposta estiver pronta
O valor padrão para o parâmetro async é async = true.
Você pode remover com segurança o terceiro parâmetro do seu código.
O XMLHttpRequest síncrono (async = false) não é recomendado porque o JavaScript parará de ser executado até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o aplicativo irá travar ou parar.
RECEBER ou POSTAR?
GETé mais simples e rápido que POST, e pode ser usado na maioria dos casos.
No entanto, sempre use solicitações POST quando:
- Um arquivo em cache não é uma opção (atualize um arquivo ou banco de dados no servidor).
- Enviando uma grande quantidade de dados para o servidor (POST não tem limitações de tamanho).
- Enviando entrada do usuário (que pode conter caracteres desconhecidos), POST é mais robusto e seguro que GET.
Solicitações GET
Um simples GETpedido:
Exemplo
xhttp.open("GET", "demo_get.asp");
xhttp.send();
No exemplo acima, você pode obter um resultado em cache. Para evitar isso, adicione um ID exclusivo ao URL:
Exemplo
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Se você deseja enviar informações com o GETmétodo, adicione as informações à URL:
Exemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Como o servidor usa a entrada e como o servidor responde a uma solicitação, é explicado em um capítulo posterior.
Solicitações POST
Um simples POSTpedido:
Exemplo
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Para enviar dados como um formulário HTML, adicione um cabeçalho HTTP com setRequestHeader(). Especifique os dados que deseja enviar no send()método:
Exemplo
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Solicitação síncrona
Para executar uma solicitação síncrona, altere o terceiro parâmetro no open()método para false:
xhttp.open("GET", "ajax_info.txt", false);
Às vezes, async = false é usado para testes rápidos. Você também encontrará solicitações síncronas no código JavaScript mais antigo.
Como o código aguardará a conclusão do servidor, não há necessidade de uma onreadystatechange
função:
Exemplo
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
O XMLHttpRequest síncrono (async = false) não é recomendado porque o JavaScript parará de ser executado até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o aplicativo irá travar ou parar.
As ferramentas de desenvolvedor modernas são incentivadas a avisar sobre o uso de solicitações síncronas e podem lançar uma exceção InvalidAccessError quando ela ocorrer.