sexta-feira, 27 de janeiro de 2017

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




Nenhum comentário:

Postar um comentário