Tutorial: AJAX (Asynchronous Javascript e XML)
- Uma breve história
- Onde usar AJAX?
- O que é AJAX?
- Como ele trabalha?
- AJAX e DHTML
- A classe XMLHttpRequest
- Construindo uma requisição, passo por passo
- Exemplos
- Usando um arquivo externo
- Como construir um site em AJAX?
- Desvantagens do AJAX
- Especificações
AJAX é somente um nome que designa uma série de ferramentas que anteriormente existiam.
A parte principal é o XMLHttpRequest, uma classe usada no JavaScript, que foi implementada no Internet Explorer desde sua versão 4.0.
O mesmo conceito é algumas vezes nomeado para XMLHTTP, antes mesmo do nome AJAX ser comumente usado.
O uso do XMLHttpRequest em 2005 pelo Google, no Gmail e GoogleMaps tem contribuído para o sucesso deste formato. Mas o nome AJAX por si só é que tem feito está tecnologia tão popular.
Para construir um site dinâmico, mas somente para salvar recursos.
Para fazer uso de uma série de recursos, este é o melhor meio para se fazer o uso de todo o processamento do computador do cliente ao invés de somente o servidor. AJAX permite uma performance de processamento no computador cliente (em JavaScript) com dados vindos do servidor.
O processamento da página web é formada somente no lado servidor, usando serviços web ou scripts PHP, anteriormente as páginas são enviadas pela internet.
Mas com AJAX pode seletivamente modificar uma parte de uma página mostrada pelo navegador, e atualizada sem a necessidade de recarregar a página com todas as imagens, menus, etc…
Por exemplo, campos de formulário, modificações do usuário, podem ser processadas e o resultado imediatamente mostrado na mesma página.
O que é AJAX?
AJAX é uma série de tecnologias, suportadas por um navegador, incluindo estes elementos:
- HTML e CSS para apresentação.
- JavaScript (ECMAScript) para processamento local, e DOM (Document Object Model) para acessar dados dentro da página ou para acessar elementos do arquivo XML lido do servidor (com o método getElementByTagName por exemplo)…
- A classe XMLHttpRequest para leitura ou envio de dados do servidor asynchronously.
opcionalmente…
- A classe DomParser vai ser usada.
- PHP ou outro linguagem de script vai ser usada no servidor.
- XML e XSLT para processar dados se retornado em formato XML.
- SOAP pode ser usado para dialogar com o servidor.
A palavra “Asynchronous”, designa que a resposta do servidor será processada quando disponível, sem esperar e sem congelamento da página.
Como ele trabalha?
AJAX usa um modelo de programação com demonstração e eventos. Estes eventos são ações do usuário, estes chamam funções associadas para os elementos de uma página.
Interatividade é representada através de formulários e botões. DOM permite juntar elementos de uma página com ações e também para extrair dados de um arquivo XML providenciado pelo servidor.
Para obter dados de um servidor, a classe XMLHttpRequest providencia dois métodos:
- open: cria uma conexão.
- send: envia uma requisição para o servidor.
Dados fornecidos pelo servidor vão ser encontrados em atributos do objeto XMLHttpRequest:
- responseXml para um arquivo XML ou
- responseText para um texto puro.
Tome nota que um novo objeto XMLHttpRequest é criado para cada novo arquivo a ser carregado.
Nós temos que esperar para cada dado que for disponível para ser processado, e para este propósito, o estado de disponibilidade de dados é obtido através do atributo readyState do XMLHttpRequest.
Estados do readyState a seguir (somente o ultimo é realmente necessário):
0: não iniciado.
1: conexão estabelecida.
2: requisição recebida.
3: resposta em processo.
4: terminado.
AJAX e DHTML
DHTML tem o mesmo propósito e este também, como AJAX, uma série de padrões:
- HTML,
- CSS,
- JavaScript.
DHTML permite mudar o conteúdo das páginas através de comandos do usuário ou através de textos enviados pelo usuário.
AJAX permite também enviar requisições asynchronously e carregar dados pelo servidor.
A classe XMLHttpRequest
Permite interatividade com o servidor, através de seus métodos e atributos.
Atributos
readyState
o código muda sucessivamente dos valores 0 para 4 que representa se está terminado (”ready”).
status
200 está ok
404 se a página não for encontrada.responseText
guarda os dados carregados como uma string de caracteres.
responseXml
guarda um arquivo XML carregado, métodos DOM permitem extrair seus dados.
onreadystatechange
propriedade que possuí o ponteiro para a função que é invocada quando o evento readystatechange é chamado.
Métodos
open(mode, url, boolean)
mode: tipo de requisição, GET ou POST.
url: o local do arquivo, com um caminho.
boolean: true (asynchronous) / false (synchronous).
opcionalmente, um login e uma senha podem ser passados como argumento.send(“string”)
null para um commando GET.
Construindo uma requisição, passo por passo
Primeiro passo: criar uma instância
Este é justo uma instância classica da classe, mas duas opções precisam ser tentadas, para compatibilidade com navegadores.
if (window.XMLHttpRequest) // Objeto da janela corrente
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else
if (window.ActiveXObject) // versão ActiveX
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
ou exceções poderão ser usadas:
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // tentando Internet Explorer
}
catch(e) // falhou
{
xhr = new XMLHttpRequest()
}
Segundo passo: esperando por uma resposta
A resposta e seu futuro processamento estão incluidos em uma função e o retorno da função será associados para o atributo onreadystatechange do objeto previamente criado.
xhr.onreadystatechange = function() { /* instruções para o processamento da resposta */ };
if (xhr.readyState == 4)
{
// recebido, OK
} else
{
// esperando...
}
Terceiro passo: fazendo a requisição
Dois métodos da XMLHttpRequest são usados:
- open: comando GET ou POST, URL do documento, true para asynchronous.
- send: com post somente, os dados para serem enviados para o servidor.
A requisição abaixo lê um documento no servidor.
xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);
xhr.send(null);
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new XMLHttpRequest(); }
catch(e)
{
xhr = new ActiveXObject(Microsoft.XMLHTTP);
}xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn=”Received:” + xhr.responseText;
else
document.ajax.dyn=”Error code ” + xhr.status;
}
};xhr.open(GET, “data.txt”, true);
xhr.send(null);
}
</script>
</head><body>
<FORM method=”POST” name=”ajax” action=”">
<INPUT type=”BUTTON” value=”Submit” ONCLICK=”submitForm()”>
<INPUT type=”text” name=”dyn” value=”">
</FORM>
</body>
</html>
Comentários sobre o código:
new ActiveXObject(Microsoft.XMLHTTP)
Este é o construtor para o Internet Explorer.
new XMLHttpRequest()
Este construtor é para qualquer outro navegador incluindo Firefox.
http.onreadystatechange
Uma função anônima é associada para o indicador de evento.
http.readyState == 4
O estado 4 indica que a resposta está pronta e enviada pelo servidor.
http.status == 200
Este estado indica ok, senão algum código de erro é retornado, 404 por exemplo.
http.open( “POST”, “data.xml”, true);
POST ou GET
URL do script para executar.
true para asynchronous (false para synchronous).
http.setRequestHeader(”Content-Type”, “application/x-www-form-urlencoded”);
Este é para POST somente.
http.send(document.getElementById(”TYPEDTEXT”).value);
Envia os dados para o servidor. Dados vindos da variável “TYPEDTEXT” preenchidos no formulário pelo usuário.
Obter dados por XML
Para obter dados por um arquivo XML nós temos de trocar está linha:
document.ajax.dyn="Received:" + xhr.responseText;
por este código:
var doc = xhr.responseXML; /* associando o arquivo XML para uma variável */
var element = doc.getElementsByTagName('root').item(0); /* ler o primeiro elemento */
document.ajax.dyn.value= element.firstChild.data; /* associando o conteúdo para o formulário */
O texto lido é posto dentro do body da página, e não dentro da marcação textfield. O código abaixo troca o objeto textfield do formulário e a segunda parte troca a associação dentro da função JavaScript.
<p id="zone">
... algum texto para troca ...
</p>
document.getElementById("zone").innerHTML = "Recebido:" + xhr.responseText;
Enviando texto pelo método POST
Um texto é enviado para o servidor e é escrito para um arquivo. A chamada para o método “open” muda, o argumento é POST, a url é o nome para um arquivo ou script que vai receber os dados enviados, e este precisa ser processado. E o método “send” tem agora um valor como argumento para um string de parâmetros.
xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
The parameter of the send method is in format of the HTML POST method. When several values are sent, they are separated by the ampersand symbol:
var data = "file=" + url + "&content=" + content;
É simples incluir um arquivo JavaScript. Está linha vai ser incluída no cabeçalho (marcação head) da página HTML:
<script src="ajax.js" type="text/javascript"></script>
E a função é chamada nesta declaração:
var xhr = createXHR();
Como construir um site em AJAX?
Seu programa JavaScript, integrado com a página web, enviará requisições para o servidor para carregar arquivos para reconstruir as páginas. Os documentos recebidos são processados com os métodos DOM ou parsers XML e os dados são usados para atualizar as páginas.
Desvantagens
- Se o JavaScript não está ativado, AJAX não poderá funcionar. O usuário precisar ser avisado para atribuir o JavaScript nas opções do navegador, com a marcação “noscript”.
- Desde que os dados são carregados dinamicamente, estes não são parte da página, e as chaves usadas dentro do script não são usadas pelos buscadores (ex.: Google).
- O modo asynchronous muda a página com intervalos (quando o processamento no servidor demora algum tempo), isto pode ser um incomodo.
- O botão de retorno é desativado (este não é o caso dos exemplos providos aqui). Este será sobrepassado.
Especificações
AJAX é baseado nestas especificações:
- XML 1, HTML 4.0, DOM 2, por W3C
- ECMAScript 1.5 (padrão para JavaScript) por ECMA.
- Especificação W3C para XMLHttpRequest.
- Códigos de estados HTTP 1.1 (404 etc…).
Obs: Esta página foi traduzida do site XUL de Denis Sureau para o português.
Se você gostou deste artigo, então veja estes...
Criatividade em Jogos JavaScript by Mounter on May 25th, 2008
Para quem quer ver o que é possível de se fazer em uma linguagem simples e poderosa como o JavaScript poderá ir ao site do .
Aprendendo a ser WebDesign by Mounter on June 7th, 2008
Aos que estão interessados em começar na área de WebDesign e afins, hoje pretendo dar uma pequena explicação sobre as .
Alterar CSS usando JavaScript by Mounter on May 19th, 2008
Para muitos como eu, que buscam dar uma incrementada no site, tornando-o mais dinamico e com alguns efeitos simples, exemplo, alterar a classe de um div ao passar o mouse sobre ele (div:houver?) e vendo que esse efeito não é possível por CSS, resolvi fazer este artigo com alguns links para sites ensinando o mesmo e um exemplo usado em um site meu.
Menus para seu site by Mounter on May 28th, 2008
Para quem queria ver como expor um menu popup ou flutuante em seu site, fiz aqui uma pequena lista de sites em portugues e inglês do assunto.
Tutoriais AJAX by Mounter on May 27th, 2008
Para quem está na busca para desenvolver mais seu conhecimento sobre AJAX e o JavaScript, aqui irei dar uma lista de tutoriais e sites que podem ser acessados em busca do seu aprimoramento nas técnicas de criação de sites dinâmicos.
