O objeto XMLHttpRequest é usado para solicitar dados de um servidor.
Para enviar uma solicitação a um servidor, usamos os métodos open() e send() do objeto XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Especifica o tipo de solicitação
método: o tipo de solicitação: GET ou POST
url: a localização do servidor (arquivo)
assíncrono: verdadeiro (assíncrono) ou falso (síncrono)
Envia a solicitação ao servidor (usado para GET)
Envia a solicitação ao servidor (usado para POST)
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).
As solicitações do servidor devem ser enviadas de forma assíncrona.
O parâmetro assíncrono do open() o método deve ser definido como verdadeiro:
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:
execute 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.
XMLHttpRequest síncrono (async=false) não é recomendado porque o JavaScript irá pare de executar até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o o aplicativo irá travar ou parar.
GET ou solicitação POST?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 (atualizar um arquivo ou banco de dados no servidor).
Envio de uma grande quantidade de dados para o servidor (o POST não tem limitações de tamanho).
Ao enviar a entrada do usuário (que pode conter caracteres desconhecidos), o POST é mais robusto e seguro que o GET.
Uma simples solicitação GET:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
No exemplo acima, você pode obter um resultado em cache. Para evitar isso, adicione um ID exclusivo ao URL:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Se você deseja enviar informações com o método GET, adicione as informações à URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
Como o servidor usa a entrada e como o servidor responde a uma solicitação será explicado em um capítulo posterior.
Uma simples solicitação POST:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
Para POST dados como um formulário HTML, adicione um cabeçalho HTTP com setRequestHeader(). Especifique os dados que deseja enviar no método send():
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
Adiciona cabeçalhos HTTP à solicitação
cabeçalho: especifica o nome do cabeçalho
valor: especifica o valor do cabeçalho
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 são usados para testes rápidos. Você também encontrará solicitações síncronas em código JavaScript mais antigo.
Como o código aguardará a conclusão do servidor, não há necessidade de um onreadystatechange função:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
XMLHttpRequest síncrono (async=false) não é recomendado porque o JavaScript irá pare de executar até que a resposta do servidor esteja pronta. Se o servidor estiver ocupado ou lento, o o aplicativo irá travar ou parar.
Ferramentas modernas para desenvolvedores são incentivadas a alertar sobre o uso solicitações síncronas e pode gerar uma exceção InvalidAccessError quando isso ocorrer.