Ajax – Asynchronous JavaScript and Xml

Ajax permite construir aplicações Web mais interactivas, responsivas, e fáceis de usar que aplicações Web tradicionais.

Numa aplicação Web tradicional quando se prime um botão uma página é carregada. Ajax permite criar uma nova geração de aplicações Web, onde JavaScript, HTML dinâmico, e XML tornam a aplicação semelhante a uma aplicação desktop responsiva e dinâmica.

Normalmente, numa aplicação Web, o utilizador preenche informação de um formulário, clica num botão, o browser envia um pedido ao Servidor, e enquanto o Servidor não responde a página fica inactiva. Quando o servidor responde (para cada pedido envia uma nova página html completa e actualizada com novos dados) o browser redesenha completamente a página.

Ajax usa um modelo de pedido/resposta diferente para obter aplicações mais rápidas. A página Web efectua o pedido através de uma função JavaScript, em vez de submeter o formulário Web. Código JavaScript faz o pedido ao Servidor que responde só com os dados que a página necessita, sem código de anotações ou de apresentação. Quando o browser recebe a resposta do servidor invoca código JavaScript, que actualiza dinamicamente a página Web, alterando apenas o necessário. A maior parte da página não muda, apenas as partes da página que necessitam ser actualizadas.Para o Servidor Web nada muda, apenas responde ao pedido. Só que o pedido em vez de ser uma página completa, é apenas dos dados necessários.

As aplicações Web Ajax, além de possibilitarem uma interacção com o Servidor sem a necessidade do browser ter de carregar e desenhar uma página completa, são assíncronas, porque o código JavaScript efectua um pedido assíncrono ao Servidor. Após o pedido ser efectuado, pode-se continuar a trabalhar no formulário Web ao mesmo tempo que o Servidor processa o pedido. Quando o Servidor envia a resposta, código JavaScript actualiza parte da página sem que o utilizador tenha que estar à espera.

O poder das aplicações Ajax reside nos pedidos assíncronos combinados com a actualização de páginas sem necessidade de as recarregar.

Código JavaScript de uma Aplicação Ajax

Uma aplicação Web Ajax, em vez de submeter um formulário ao Servidor, usa código JavaScript para efectuar o pedido e não fica à espera da resposta (mantendo a página Web activa). Quando o servidor envia a resposta, código JavaScript actualiza uma parte da página com os novos valores recebidos em vez de recarregar a página inteira. Deve-se usar Ajax quando se pretende apenas actualizar parte de uma página, tal como mudar imagens, actualizar campos de texto ou responder ao utilizador. Quando se pretende uma mudança significativa da página deve-se permitir que o utilizador submeta o formulário.

Se um browser não permite a execução de código JavaScript não é possível executar uma aplicação Web Ajax. Um utilizador de uma aplicação Web Ajax tem de ter o browser configurado com permissão de JavaScript. Geralmente os browsers, por omissão, estão configurados para permitir execução de código JavaScript.

Uma aplicação assíncrona para efectuar pedidos ao servidor usa o objecto Javascript XMLHttpRequest. Mas diferentes browsers têm maneiras diferentes de criar este objecto. Assim vamos necessitar de uma função JavaScript para criar este objecto.

Podemos dividir o código JavaScript necessário para uma aplicação Ajax interactuar com o Servidor em três funções:

1) criarObjectoXMLHttpRequest()2) efectuarPedido()3) actualizarPagina()

var objXMLHttpRequest = null;function criarObjectoXMLHttpRequest() { if (window.XMLHttpRequest) {

objXMLHttpRequest = new XMLHttpRequest() } else if (window.ActiveXObject) {

objXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP") }

if (objXMLHttpRequest == null)alert("Erro ao criar o objecto XMLHttpRequest!");

}

function efectuarPedido() {criarObjectoXMLHttpRequest();var url = "respostaAjax.php";objXMLHttpRequest.open("GET", url, true);objXMLHttpRequest.onreadystatechange = actualizarPagina;objXMLHttpRequest.send(null);

}

function actualizarPagina() { if (objXMLHttpRequest.readyState == 4) { var novoValor = objXMLHttpRequest.responseText; document.getElementById("id1").childNodes[0].nodeValue= novoValor; }}

A função criarObjectoXMLHttpRequest() cria o objecto XMLHttpRequest. Existem diferentes maneiras de o criar dependente do browser. O objecto XMLHttpRequest possui várias propriedades e funções.

open("GET", url, true) – Esta função inicializa a ligação ao servidor.

onreadystatechange – Propriedade que permite atribuir uma função JavaScript que vai ser chamada pelo browser sempre que o estado "readystate" muda.Sempre que o estado readystate do objecto XMLHttpRequest muda, o browser chama a função callback (neste exemplo actualizarPagina).É necessário colocar esta propriedade antes de chamar send() para que o browser saiba que função chamar quando obtiver a resposta do servidor.

send(null) – Esta função envia o pedido ao servidor. null significa que não se envia nenhum dado no pedido. Se necessário, pode-se enviar dados adicionais aos contidos no url.

readyState – Propriedade que contém o estado do pedido efectuado ao servidor:0 - Ligação não inicializada (Uninitialized)

O objecto XMLHttpRequest foi criado, mas não inicializado.1 - Ligação inicializada (Loading)

O objecto XMLHttpRequest sabe como ligar e o que pedir mas ainda não enviou pedido.

2 - Resposta em progresso (Loaded)O pedido já foi enviado, o status e cabeçalho da resposta já estão disponíveis, mas a resposta ainda não.

3 - Obtendo a resposta do servidor (Interactive)Os dados estão a ser carregados no objecto XMLHttpRequest, mas ainda não terminaram.

4 - Resposta do servidor pronta (Completed)A resposta está disponível na propriedade "responseText" do objecto XMLHttpRequest.

status – Propriedade que informa se o pedido foi executado com sucesso (status = 200).O servidor reporta problemas com o pedido usando um código de status.O código de status indica o que aconteceu durante o pedido.Há uma diferença entre o readystate do pedido e o status do mesmo pedido.O readystate informa o estado de processamento do pedido (inicialização, processamento, completo), enquanto o status informa se o pedido teve sucesso.O browser coloca, quer o readystate, quer o status no objecto XMLHttpRequest.O browser invoca sempre a função callback e reporta o erro se existir, porque para um pedido assíncrono, o callback é a única maneira de podermos escrever código para lidar com a resposta do servidor.

Se o readystate é igual a 4 o browser já colocou a resposta do servidor na propriedade responseText do objecto XMLHttpRequest.Para actualizar a página Web usamos o DOM (Document Object Model). Se alterarmos uma página Web usando o DOM, o browser actualiza a página imediatamente.

DOM

Muitas vezes os campos de texto são usados para entrar texto. Possuem uma propriedade "value" que permite colocar ou obter o valor do texto directamente.Os elementos span ou div não possuem a propriedade "value", porque à semelhança de muitos outros elementos html não se usam para entrar texto.

Ex. - Actualização do campo de texto com id="id1":var enderecoCliente = objXMLHttpRequest.responseText;document.getElementById("id1").value = enderecoCliente;

Ex. - Actualização do span com id=" id2":var enderecoCliente = objXMLHttpRequest.responseText;document.getElementById("id2"). childNodes[0].nodeValue = enderecoCliente;

Formulário Web php sem Ajax

Consideremos o seguinte formulário Web que pede ao Servidor informação sobre a quantidade de vendas de um dado produto X. O Servidor, para simular que acede a uma base de dados, gera aleatoriamente um valor.

Ficheiro vendas1.php

Sempre que se premir “Actualizar Vendas” toda a página recarrega. Só um número é mudado mas a aplicação redesenha a página inteira.O Servidor recebe o pedido, e envia a quantidade de vendas dentro de uma página HTML. O Browser carrega a página que recebe e mostra-a no ecrã.

Formulário Web php com Ajax

Ajax permite actualizar as vendas sem recarregar a página.

<?php srand((double)microtime() * 1000000); $totalVendas = rand(0,1000);?>

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Página de Vendas - sem Ajax</title></head><body> <form> <div>

texto<p />texto<p />texto<p />texto<p />texto<p /> texto<p />texto<p />texto<p />texto<p />texto<p /> texto<p />texto<p />texto<p />texto<p />texto<p />texto<p />

<table> <caption>Vendas da Empresa A</caption> <tr>

<th>Produtos X vendidos:</th><td><span id="produtos-vendidos">

<?php print $totalVendas;?>

</span></td> </tr> <tr>

<td colspan="2"> <input type="submit"value="Actualizar Vendas" /> </td>

</tr></table>

</div> </form></body></html>

Ficheiro vendasAjax1.php

<?php srand((double)microtime() * 1000000); $totalVendas = rand(0,1000);?>

<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Página de Vendas - com Ajax</title> <script type="text/javascript">

var objXMLHttpRequest = null;function criarObjectoXMLHttpRequest() { if (window.XMLHttpRequest) {

objXMLHttpRequest = new XMLHttpRequest() } else if (window.ActiveXObject) {

objXMLHttpRequest =new ActiveXObject("Microsoft.XMLHTTP")

}if (objXMLHttpRequest == null)alert("Erro ao criar o objecto XMLHttpRequest!");

}

function efectuarPedido() {criarObjectoXMLHttpRequest();var url = "respostaAjax1.php";objXMLHttpRequest.open("GET", url, true);objXMLHttpRequest.onreadystatechange = actualizarPagina;objXMLHttpRequest.send(null);

// alert("Enviado o pedido ao servidor para actualizar a pagina!");}

function actualizarPagina() {//alert("Inicio de actualizar pagina! " + objXMLHttpRequest.readyState);

if (objXMLHttpRequest.readyState == 4) { var novoTotal = objXMLHttpRequest.responseText; document.getElementById("produtos-vendidos").childNodes[0].

nodeValue= novoTotal; }}

</script></head>

<body> <form>

<div> texto<p />texto<p />texto<p />texto<p />texto<p /> texto<p />texto<p />texto<p />texto<p />texto<p /> texto<p />texto<p />texto<p />texto<p />texto<p />texto<p /><table> <caption>Vendas da Empresa A</caption> <tr> <th>Produtos X vendidos:</th>

<td><span id="produtos-vendidos"> <?php print $totalVendas;?>

</span></td> </tr> <tr>

<td colspan="2"> <input type="button" value="Actualizar Vendas" onclick="efectuarPedido();" /> </td>

</tr></table> </div>

</form></body></html>

Ficheiro respostaAjax1.php

Alterações efectuadas:

O botão submit cujo efeito era submeter o formulário foi substituído por um botão javaScript em que o evento clique chama a função javaScript efectuarPedido(). As aplicações assíncronas efectuam pedidos usando um objecto javaScript e não uma submissão de um formulário.

O código javaScript cria um objecto XMLHtpRequest, abre uma ligação assíncrona ao Servidor com o pedido respostaAjax1.php, atribui à propriedade onreadystatechange a função javaScript actualizarPagina que contém o código de actualização da página, e envia o pedido ao Servidor. O browser coloca a resposta do Servidor na propriedade responseText do objecto XMLHttpRequest. A função javaScript actualizarPágina lê esta resposta e coloca-a no elemento html com o id "produtos-vendidos".

O envio dos pedidos ao Servidor assim como a recepção das respostas do Servidor são tratados pelo browser Web e não directamente pelo código javaScript. Quando o browser obtém a resposta de um pedido assíncrono, invoca código javaScript e disponibiliza a resposta do Servidor.

Numa aplicação assíncrona o browser, em vez de efectuar a submissão de um formulário, corre uma função javaScript associada a um dado evento. Esta função cria o objecto XMLHttpRequest, configura-o, e diz ao browser para enviar um pedido ao Servidor. O pedido é efectuado pelo browser e não directamente pelo código javaScript. O browser retorna o controlo ao utilizador porque se trata de um pedido assíncrono. Quando o Servidor responde o browser corre a função atribuída à propriedade onreadystatechange do objecto XMLHttpRequest.

Os pedidos efectuados ao Servidor podem estar em diferentes estados “readystate”. De cada vez que o estado “readystate” muda, a função atribuída à propriedade onreadystatechange do objecto XMLHttpRequest é invocada. Quando o readystate é colocado em 4 o servidor já terminou o envio da resposta, e portanto é seguro usar os dados que o Servidor enviou e que estão guardados no objecto XMLHttpRequest.

<?php srand((double)microtime() * 1000000); $totalVendas = rand(0,1000); print $totalVendas;?>

No exemplo seguinte (vendasAjax2,php) o elemento html span destinado à colocação do valor das vendas foi substituído por um campo de texto (elemento html input type=”text”). Os objectos do DOM (Document Object Model) campos de texto e áreas de texto têm a propriedade “value”, propriedade de leitura e escrita, que permite ler ou escrever um valor nesses objectos.

Parte do Ficheiro vendasAjax2.php

Caching do Internet Explorer

O Internet Explorer, tal como o Opera, efectua o cache de imagens e URLs.Depois de visitar uma página com muitas imagens, se se regressa a essa página os gráficos surgem rapidamente. Se se efectua um pedido a um programa servidor, o browser também efectua o cache do resultado. Ao efectuar um pedido com o mesmo URL, sem qualquer dado diferente, em vez de reenviar o pedido, fornece logo o resultado guardado obtido no primeiro pedido.

Uma aplicação Ajax executa uma função JavaScript desencadeada pela ocorrência de um evento.A função JavaScript cria um objecto XMLHttpRequest e envia um pedido a um URL.O pedido é enviado ao servidor pelo browser e não directamente pelo código JavaScript.O servidor envia a resposta ao browser que chama a função callback especificada.Mas, se o browser efectua o cache dos URLs pedidos, guarda o URL e a resposta.Num segundo pedido ao mesmo URL, o browser detecta que já tem uma resposta para esse pedido, e retorna o mesmo resultado.Para ultrapassar o problema do caching, temos de mudar o URL do pedido todas as vezes.Para isso podemos enviar um parâmetro fictício e dar-lhe um valor diferente de cada vez

function actualizarPagina() { if (objXMLHttpRequest.readyState == 4) { var novoTotal = objXMLHttpRequest.responseText; document.getElementById("produtos-vendidos").value= novoTotal; }}

<table> <caption>Vendas da Empresa A</caption> <tr> <th>Produtos X vendidos:</th> <td><input id="produtos-vendidos" type="text" value="<?php print $totalVendas;?>

" /></td> </tr> <tr> <td colspan="2"> <input type="button" value="Actualizar Vendas"

onclick="efectuarPedido();"/> </td> </tr></table>

que efectuarmos um pedido. Podemos gerar um número aleatório ou utilizar o tempo corrente em milissegundos.

var url = " ------ ";url = url + "?ficticio=" + new Date().getTime();

getTime() retorna o tempo desde 1 de Janeiro de 1970 em milissegundos.

Com o Internet Explorer, nos programas apresentados vendasAjax1.php e vendasAjax2.php, a primeira vez que se seleccionava “Actualizar Vendas” um novo valor era recebido, mas em seguida o botão “Actualizar Vendas” recebia sempre o mesmo valor.A desactivação do caching de páginas só funciona para as páginas que se carregam directamente, quer digitando o URL na barra de endereços, quer clicando num hyperlink. Para os pedidos desencadeados por código javaScript o Internet Explorer não oferece possibilidade de controlar. Mas mesmo que fosse possível desligar o caching, poderia haver sempre utilizadores que não o fariam, pelo que devemos mudar o URL do pedido.

Parte do Ficheiro vendasAjax3.php

function efectuarPedido() {criarObjectoXMLHttpRequest();var url = "respostaAjax1.php";url = url + "?ficticio=" + new Date().getTime();objXMLHttpRequest.open("GET", url, true);objXMLHttpRequest.onreadystatechange = actualizarPagina;objXMLHttpRequest.send(null);

}