Enviar Requisição AJAX

Após criar o objeto XMLHttpRequest (ver o capítulo anterior), devemos enviar a solicitação para o servidor.

Enviar solicitação para o servidor

Para enviar a solicitação para o servidor, usamos dois métodos do objeto XMLHttpRequest:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

O método open() aceita três parâmetros:

• O primeiro parâmetro é o método de solicitação HTTP-GET, POST

• O segundo parâmetro é a URL para onde você enviará a solicitação

• O terceiro parâmetro opcional configura se a solicitação é assíncrona (o padrão é true)

O método send() aceita um parâmetro opcional:

• Para solicitações GET, não passar nenhum valor

• Para solicitações POST, passarnome=valorpara

Requisições HTTP: GET vs POST?

emGETNo método, o navegador colocará o conteúdo do formulário (nome/pares de valores) ao final da URL.

GET geralmente é usado em formulários simples onde não se preocupa com a segurança. GET oferece muitos benefícios para formulários simples.

• As solicitações GET podem ser armazenadas em cache

• As solicitações GET ficam no histórico do navegador

• As solicitações GET podem adicionar favoritos

• Nunca use solicitações GET ao lidar com dados sensíveis

• As solicitações GET têm limite de comprimento (apenas2048caracteres)

emPOSTNo método, o conteúdo não é exibido na URL.

Se os dados do formulário contiverem informações sensíveis ou pessoais, sempre use POST.

• As solicitações POST nunca são armazenadas em cache

• As solicitações POST não ficam no histórico do navegador

• As solicitações POST não podem adicionar favoritos

• Use solicitações POST ao lidar com dados sensíveis

• As solicitações POST não têm limite de comprimento de dados

Solicitação GET

O exemplo a seguir mostra como enviar uma solicitação Ajax GET simples usando JavaScript:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

No exemplo acima, você pode obter resultados armazenados em cache. Para evitar isso, adicione um número aleatório à URL:

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

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

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

Solicitação POST

O exemplo a seguir mostra como enviar uma solicitação Ajax POST simples usando JavaScript:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Se você deseja enviar informações usando o método POST, use o setRequestHeader() para configurar os cabeçalhos HTTP e especifique os dados a serem enviados no método send():

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

O método setRequestHeader() aceita dois parâmetros:

• O primeiro parâmetro especifica o nome do cabeçalho

• O segundo parâmetro especifica o valor do cabeçalho

URL-O arquivo no servidor

O segundo parâmetro (url) do método open() é o endereço do arquivo no servidor.

　　httpRequest.open("GET", "ajax_get.php", true);

O AJAX pode enviar e receber várias formatos de informações, incluindo JSON, XML, HTML, PHP, ASP, texto, etc.

Propriedade onreadystatechange

O objeto XMLHttpRequest permite que você defina funções a serem executadas para lidar com as respostas.

A função de resposta onreadystatechange é definida na propriedade do objeto XMLHttpRequest.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

Você aprenderá mais sobre a propriedade onreadystatechange na parte posterior deste tutorial.

Requisição Síncrona

O terceiro parâmetro do método open() especifica se a requisição éAssíncronoouSíncrono.

Para enviarSíncronoPara fazer a requisição, altere o terceiro parâmetro do método open() parafalse.

Se for usadoSíncronoSe a requisição for feita, não é necessário especificar a função de resposta:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

Não recomendado para usarSíncronoRequisição, porque:

• O JavaScript parará de executar até que o servidor esteja pronto para responder

• Se o servidor estiver ocupado ou lento, o aplicativo ficará suspenso ou parado

• Traz uma má experiência do usuário