Como o Ajax funciona

Postado em 10. out, 2009 por Chiavegatti.

Na linguagem javascript tradicional, quando você quer pegar alguma informação do banco de dados ou arquivo que está lá no servidor, ou então enviar alguma informação para o servidor, você precisar criar um formulário HTML e trabalhar com os métodos GET ou POST para pegar (get) ou enviar (post) dados para o servidor.

O usuário por sua vez, normalmente deve clicar no botão enviar para pegar ou enviar informações, esperar o servidor responder a requisição, e carregar a nova página com os resultados.
Por retornar uma nova página a cada vez que o usuário envia o formulário, as aplicações web tradicionais costumam ser lentas e pouco amigáveis, executando o re-carregamento da página a cada envio.
Com o Ajax, o Javascript é quem se comunica diretamente com o servidor, através do objeto XMLHttpRequest.

Com o HTTP request, a página web fica habilitada a fazer as requisições ao servidor, obter e enviar dados sem a necesidade de re-carregamento da página. O Usuário por sua vez permanece sempre na mesma página.

O usuário envia a requisição que deve ser executada e a resposta será exivida em uma camada identificada por um ID, sem recarregamento total da página em que o usuário está. Por exemplo uma div com o seguinte ID:

<div id="respostaAjax"></div>
A seguir você confere os próximos passos de como criar um objeto XMLHttpRequest e receber uma resposta do servidor.

1. Criando o objeto XMLHttpRequest

Browsers diferentes utilizam métodos diferentes para criar uma objeto XMHttpRequest. O Internet Explorer por explo usa o ActiveXObject, enquanto outros Browsers usam o objeto XMLHttpRequest.

Para criar este objeto, e para que ele funcione em todos os browsers, vamos trabalhar com um controle condicional conhecido como “try and catch”.

function ajaxFuncion()

{
var xmlHttp;
  try
{
// Opera 8.x , Firefox, Safari
xmlHttp = new XMLHttpRequest();
 }
catch(e)
 {
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Seu browser não suporta Ajax!”);
return false;
}
}
}

2. Envie uma requisição ao servidor.

Para enviar a requisição ao servidor usaremos dois métodos o open() e o send() .

O Método open() recebe normalmente 3 argumentos. O primeiro rgumento define qual o método usuaremos para enviar os dados ao servidor, se será pelo GET ou POST. O segundo argumento define qual é a página com script server-side que iremos usar para consumir a informação que queremos e o terceiro argumento define se iremos manipular os dados de forma assíncrona.

O método send() por usa vez envia a requisição ao servidor.

1
2

xmlHttpRequest.open(“GET”,”horas.asp”,true);
xmlHttpRequest.send(null);

3. Escrevendo o script server-side.

O método responseText armazena a informação retornada do servidor. No caso estamos aguadando o retorno de uma página asp que nos fornece a hora atual. o Código que a página asp deve conter é o seguinte:

1
2
3
4

<%
response.expires = now –999
response.write (time)
%>

4. Consumindo a resposta

Agora iremos consumir a resposta do servidor e exibir a informação para o usuário.

1
2
3
4
5
6
7
8
9

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4){
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(”GET”,”horas.asp”,true);
xmlHttp.send(null);
}

Continue Lendo