O objeto XMLHttpRequest é usado para trocar dados com um servidor.
Envia uma solicitação para um servidor
Para enviar um pedido a um servidor, usamos o open() e send() métodos do objeto XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| Método | Descrição |
|---|---|
| open(method, url, async) | Especifica o tipo de pedido method : o tipo de solicitação: GET ou POST url : o servidor (arquivo) localização async : true (assíncrono) ou false (síncrono) |
| send() | Envia o pedido para o servidor (usado para GET ) |
| send(string) | Envia o pedido para o servidor (usado para POST ) |
GET ou POST ?
GET é mais simples e mais rápido do que POST , e pode ser utilizado na maioria dos casos.
No entanto, sempre use POST solicitações quando:
- Um arquivo em cache não é uma opção (atualizar um arquivo ou banco de dados no servidor).
- O envio de uma grande quantidade de dados para o servidor ( POST não tem limitações de tamanho).
- Envio de entrada do usuário (que pode conter caracteres desconhecidos), POST é mais robusto e seguro do que GET .
GET solicitações
Um simples GET pedido:
No exemplo acima, você pode obter um resultado em cache. Para evitar isso, adicione um único ID to the URL: ID to the URL:
Exemplo
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send(); Tente você mesmo " Se você deseja enviar esta informação com o GET método, adicione as informações para o URL:
Exemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Tente você mesmo " POST pedidos
Um simples POST pedido:
Para POST de dados como um formulário HTML, adicione um HTTP header com setRequestHeader() . Especificar os dados que deseja enviar na send() método:
Exemplo
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Tente você mesmo " | Método | Descrição |
|---|---|
| setRequestHeader(header, value) | Adiciona cabeçalhos HTTP para a solicitação header : especifica o nome do cabeçalho value : especifica o valor do cabeçalho |
O url - Um arquivo em um servidor
O url parâmetro 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 pode executar ações no servidor antes de enviar a resposta de volta).
Asynchronous - True ou False ?
AJAX está para Asynchronous JavaScript e XML, e para o objeto XMLHttpRequest para se comportar como AJAX, o async parâmetro do open() método tem de ser definida como true:
xhttp.open("GET", "ajax_test.asp", true);Enviando solicitações assíncronas é uma grande melhoria para desenvolvedores web. Muitas das tarefas executadas no servidor são muito demorado. Antes de AJAX, esta operação pode causar o aplicativo para travar ou parar.
Com AJAX, o JavaScript não tem que esperar a resposta do servidor, mas pode:
- executar outros scripts enquanto aguarda a resposta do servidor
- lidar com a resposta quando a resposta pronta
Async=true
Ao usar class = "notranslate" async = true, especifique uma função a ser executada quando a resposta está pronto no evento onreadystatechange:
Exemplo
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Tente você mesmo " Você vai aprender mais sobre onreadystatechange em um capítulo posterior.
Async=false
Para usar async=false , altere o terceiro parâmetro na open() método para false:
xhttp.open("GET", "ajax_info.txt", false);Usando async=false não é recomendado, mas para alguns pequenos pedidos este pode ser ok.
Lembre-se de que o JavaScript não vai continuar a executar, até que a resposta do servidor está pronto. Se o servidor estiver ocupado ou lenta, o aplicativo irá travar ou parar.
Nota: Quando você usa async=false , não escreva uma função onreadystatechange - basta colocar o código após o send() declaração:
Exemplo
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Tente você mesmo "