Começando com Ajax

O modo de padrão para fazer Ajax é usar o objeto XMLHttpRequest, conhecido como XHR por seus amigos. Use XHR diretamente, ou por meio das bibliotecas Ajax salvadoras como Prototype ou JQuery. Como nós usamos XHR "manualmente"? Para começar, nós precisamos obter uma referência para ele:


if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}

Nós podemos então abrir uma conexão para um URL:

xhr.open(
“GET”,
“my-dynamic-content.jsp?id=”
+encodeURI(myId),
true
);

Especificar uma função de retorno de chamada para receber a resposta:

xhr.onreadystatechange = function(){
processReqChange(req);
}

e então enviar a requisição:

xhr.send(null);

O servidor pode estar ocupado, ou a rede pode estar lenta. Nós não queremos sentar por perto sem fazer nada até a resposta chegar, e por termos associado a função de retorno de chamada, nós não temos de fazer isso. Este é o guia de cinco minutos para o impaciente. Para aqueles que gostam de saber os detalhes, nós listamos os detalhes completos do objeto XHR abaixo.

Method Name	Parameters and Descriptions
open(method, url, async)	abre uma conexão para um URL method = verbo HTTP (GET, POST, etc.) url = url a ser aberto, pode incluir querystring async = se faz requisição assíncrona
onreadystatechange	associa um objeto função como retorno de chamada(similar a onclick, onload, etc. no modelo de evento do browser)
setRequestHeader (namevalue)	adiciona um cabeçalho à requisição HTTP
send(body)	envia a requisição body = texto a ser usado como requisição
abort()	faz com que o XHR pare de esperar pela resposta
readyState	nível no ciclo de vida da resposta (somente populado após send() ser chamado)
httpStatus	O código de retorno HTTP (inteiro, somente populado após a resposta alcançar o estado carregado)
responseText	corpo da resposta como um texto JavaScript (somente configurado após a resposta alcançar o readyState interativo)
responseXML	corpo da resposta como um objeto documento XML (somente configurado após a reposta alcançar o readyState interativo)
getResponseHeader (name)	lê um cabeçalho de resposta pelo nome
getAllResponseHeaders()	Obtém um array de todos os nomes de cabeçalho de resposta

Tradução de: CRANE, Dave. Getting Started in Getting Started with Ajax. Disponível em www.dzone.com