AJAX - Enviar uma solicitação para um servidor
O objeto XMLHttpRequest é usado para trocar dados com 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 objeto XMLHttpRequest:
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) |
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 a entrada do usuário (que pode conter caracteres desconhecidos), POST é mais robusto e seguro que GET.
Solicitações GET
Uma solicitação GET simples:
Exemplo
xhttp.open("GET", "demo_get.asp", true);
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(), true);
xhttp.send();
Se você deseja enviar informações com o método GET, adicione as informações à URL:
Exemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Solicitações POST
Uma simples solicitação POST:
Exemplo
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Para enviar dados como um formulário HTML, adicione um cabeçalho HTTP com setRequestHeader(). Especifique os dados que deseja enviar no método send():
Exemplo
xhttp.open("POST", "demo_post2.asp", true);
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 |
O URL - Um arquivo em um servidor
O parâmetro url do método open() é 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
A propriedade onreadystatechange
Com o objeto XMLHttpRequest você pode definir uma função a ser executada quando a requisição receber uma resposta.
A função é definida na propriedade onreadystatechange do objeto XMLHttpResponse:
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();
O arquivo "ajax_info.txt" usado no exemplo acima é um arquivo de texto simples e se parece com isso:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Você aprenderá mais sobre onreadystatechange em um capítulo posterior.
Solicitação síncrona
Para executar uma solicitação síncrona, altere o terceiro parâmetro no método open() 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 função onreadystatechange:
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.
O XMLHttpRequest síncrono está em processo de remoção do padrão da Web, mas esse processo pode levar muitos anos.
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.