Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicaes Web mais interactivas, responsivas, e fceis de usar

r que aplicaes Web tradicionais. Numa aplicao Web tradicional quando se prime um boto uma pgina carregada. Ajax permite criar uma nova gerao de aplicaes Web, onde JavaScript, HTML dinmico, e XML tornam a aplicao semelhante a uma aplicao desktop responsiva e dinmica. Normalmente, numa aplicao Web, o utilizador preenche informao de um formulrio, clica num boto, o browser envia um pedido ao Servidor, e enquanto o Servidor no responde a pgina fica inactiva. Quando o servidor responde (para cada pedido envia uma nova pgina html completa e actualizada com novos dados) o browser redesenha completamente a pgina. Ajax usa um modelo de pedido/resposta diferente para obter aplicaes mais rpidas. A pgina Web efectua o pedido atravs de uma funo JavaScript, em vez de submeter o formulrio Web. Cdigo JavaScript faz o pedido ao Servidor que responde s com os dados que a pgina necessita, sem cdigo de anotaes ou de apresentao. Quando o browser recebe a resposta do servidor invoca cdigo JavaScript, que actualiza dinamicamente a pgina Web, alterando apenas o necessrio. A maior parte da pgina no muda, apenas as partes da pgina que necessitam ser actualizadas. Para o Servidor Web nada muda, apenas responde ao pedido. S que o pedido em vez de ser uma pgina completa, apenas dos dados necessrios. As aplicaes Web Ajax, alm de possibilitarem uma interaco com o Servidor sem a necessidade do browser ter de carregar e desenhar uma pgina completa, so assncronas, porque o cdigo JavaScript efectua um pedido assncrono ao Servidor. Aps o pedido ser efectuado, pode-se continuar a trabalhar no formulrio Web ao mesmo tempo que o Servidor processa o pedido. Quando o Servidor envia a resposta, cdigo JavaScript actualiza parte da pgina sem que o utilizador tenha que estar espera. O poder das aplicaes Ajax reside nos pedidos assncronos combinados com a actualizao de pginas sem necessidade de as recarregar. Cdigo JavaScript de uma Aplicao Ajax Uma aplicao Web Ajax, em vez de submeter um formulrio ao Servidor, usa cdigo JavaScript para efectuar o pedido e no fica espera da resposta (mantendo a pgina Web activa). Quando o servidor envia a resposta, cdigo JavaScript actualiza uma parte da pgina com os novos valores recebidos em vez de recarregar a pgina inteira. Deve-se usar Ajax quando se pretende apenas actualizar parte de uma pgina, tal como mudar imagens, actualizar campos de texto ou responder ao utilizador. Quando se pretende uma mudana significativa da pgina deve-se permitir que o utilizador submeta o formulrio. Se um browser no permite a execuo de cdigo JavaScript no possvel executar uma aplicao Web Ajax. Um utilizador de uma aplicao Web Ajax tem de ter o browser

configurado com permisso de JavaScript. Geralmente os browsers, por omisso, esto configurados para permitir execuo de cdigo JavaScript. Uma aplicao assncrona para efectuar pedidos ao servidor usa o objecto Javascript XMLHttpRequest. Mas diferentes browsers tm maneiras diferentes de criar este objecto. Assim vamos necessitar de uma funo JavaScript para criar este objecto. Podemos dividir o cdigo JavaScript necessrio para uma aplicao Ajax interactuar com o Servidor em trs funes: 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 funo criarObjectoXMLHttpRequest() cria o objecto XMLHttpRequest. Existem diferentes maneiras de o criar dependente do browser. O objecto XMLHttpRequest possui vrias propriedades e funes. open("GET", url, true) Esta funo inicializa a ligao ao servidor. onreadystatechange Propriedade que permite atribuir uma funo 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 funo callback (neste exemplo actualizarPagina). necessrio colocar esta propriedade antes de chamar send() para que o browser saiba que funo chamar quando obtiver a resposta do servidor.

send(null) Esta funo envia o pedido ao servidor. null significa que no se envia nenhum dado no pedido. Se necessrio, pode-se enviar dados adicionais aos contidos no url. readyState Propriedade que contm o estado do pedido efectuado ao servidor: 0 - Ligao no inicializada (Uninitialized) O objecto XMLHttpRequest foi criado, mas no inicializado. 1 - Ligao inicializada (Loading) O objecto XMLHttpRequest sabe como ligar e o que pedir mas ainda no enviou pedido. 2 - Resposta em progresso (Loaded) O pedido j foi enviado, o status e cabealho da resposta j esto disponveis, mas a resposta ainda no. 3 - Obtendo a resposta do servidor (Interactive) Os dados esto a ser carregados no objecto XMLHttpRequest, mas ainda no terminaram. 4 - Resposta do servidor pronta (Completed) A resposta est disponvel 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 cdigo de status. O cdigo de status indica o que aconteceu durante o pedido. H uma diferena entre o readystate do pedido e o status do mesmo pedido. O readystate informa o estado de processamento do pedido (inicializao, 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 funo callback e reporta o erro se existir, porque para um pedido assncrono, o callback a nica maneira de podermos escrever cdigo 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 pgina Web usamos o DOM (Document Object Model). Se alterarmos uma pgina Web usando o DOM, o browser actualiza a pgina imediatamente. DOM Muitas vezes os campos de texto so usados para entrar texto. Possuem uma propriedade "value" que permite colocar ou obter o valor do texto directamente. Os elementos span ou div no possuem a propriedade "value", porque semelhana de muitos outros elementos html no se usam para entrar texto. Ex. - Actualizao do campo de texto com id="id1":
var enderecoCliente = objXMLHttpRequest.responseText; document.getElementById("id1").value = enderecoCliente;

Ex. - Actualizao do span com id=" id2":

var enderecoCliente = objXMLHttpRequest.responseText; document.getElementById("id2"). childNodes[0].nodeValue = enderecoCliente;

Formulrio Web php sem Ajax Consideremos o seguinte formulrio Web que pede ao Servidor informao 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.
<?php srand((double)microtime() * 1000000); $totalVendas = rand(0,1000); ?> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Pgina 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 vendas1.php Sempre que se premir Actualizar Vendas toda a pgina recarrega. S um nmero mudado mas a aplicao redesenha a pgina inteira. O Servidor recebe o pedido, e envia a quantidade de vendas dentro de uma pgina HTML. O Browser carrega a pgina que recebe e mostra-a no ecr.

Formulrio Web php com Ajax Ajax permite actualizar as vendas sem recarregar a pgina.

<?php srand((double)microtime() * 1000000); $totalVendas = rand(0,1000); ?> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Pgina 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 vendasAjax1.php

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

Ficheiro respostaAjax1.php Alteraes efectuadas: O boto submit cujo efeito era submeter o formulrio foi substitudo por um boto javaScript em que o evento clique chama a funo javaScript efectuarPedido(). As aplicaes assncronas efectuam pedidos usando um objecto javaScript e no uma submisso de um formulrio. O cdigo javaScript cria um objecto XMLHtpRequest, abre uma ligao assncrona ao Servidor com o pedido respostaAjax1.php, atribui propriedade onreadystatechange a funo javaScript actualizarPagina que contm o cdigo de actualizao da pgina, e envia o pedido ao Servidor. O browser coloca a resposta do Servidor na propriedade responseText do objecto XMLHttpRequest. A funo javaScript actualizarPgina l esta resposta e coloca-a no elemento html com o id "produtos-vendidos". O envio dos pedidos ao Servidor assim como a recepo das respostas do Servidor so tratados pelo browser Web e no directamente pelo cdigo javaScript. Quando o browser obtm a resposta de um pedido assncrono, invoca cdigo javaScript e disponibiliza a resposta do Servidor. Numa aplicao assncrona o browser, em vez de efectuar a submisso de um formulrio, corre uma funo javaScript associada a um dado evento. Esta funo cria o objecto XMLHttpRequest, configura-o, e diz ao browser para enviar um pedido ao Servidor. O pedido efectuado pelo browser e no directamente pelo cdigo javaScript. O browser retorna o controlo ao utilizador porque se trata de um pedido assncrono. Quando o Servidor responde o browser corre a funo atribuda 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 funo atribuda 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 esto guardados no objecto XMLHttpRequest.

No exemplo seguinte (vendasAjax2,php) o elemento html span destinado colocao do valor das vendas foi substitudo por um campo de texto (elemento html input type=text). Os objectos do DOM (Document Object Model) campos de texto e reas de texto tm a propriedade value, propriedade de leitura e escrita, que permite ler ou escrever um valor nesses objectos.
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>

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 pgina com muitas imagens, se se regressa a essa pgina os grficos surgem rapidamente. Se se efectua um pedido a um programa servidor, o browser tambm 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 aplicao Ajax executa uma funo JavaScript desencadeada pela ocorrncia de um evento. A funo JavaScript cria um objecto XMLHttpRequest e envia um pedido a um URL. O pedido enviado ao servidor pelo browser e no directamente pelo cdigo JavaScript. O servidor envia a resposta ao browser que chama a funo 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 parmetro fictcio e dar-lhe um valor diferente de cada vez

que efectuarmos um pedido. Podemos gerar um nmero aleatrio 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 boto Actualizar Vendas recebia sempre o mesmo valor. A desactivao do caching de pginas s funciona para as pginas que se carregam directamente, quer digitando o URL na barra de endereos, quer clicando num hyperlink. Para os pedidos desencadeados por cdigo javaScript o Internet Explorer no oferece possibilidade de controlar. Mas mesmo que fosse possvel desligar o caching, poderia haver sempre utilizadores que no o fariam, pelo que devemos mudar o URL do pedido.
function efectuarPedido() { criarObjectoXMLHttpRequest(); var url = "respostaAjax1.php"; url = url + "?ficticio=" + new Date().getTime(); objXMLHttpRequest.open("GET", url, true); objXMLHttpRequest.onreadystatechange = actualizarPagina; objXMLHttpRequest.send(null); }

Parte do Ficheiro vendasAjax3.php