AJAX
Asynchronous JavaSctipt And XML
Nuno Dantas, 1010676
7 de Novembro de 2006
Resumo
Com o desenvolvimento da Internet apareceu de necessidade de melhorar a forma de funciona- mento das aplica¸c˜oesweb. Apesar de j´a existirem tecnologias que permitem uma grande aproxima¸c˜ao das aplica¸c˜oes normais `as aplica¸c˜oesweb , normalmente essas tecnologias dependem de plugins a instalar nos navegadoreswebe muitas vezes n˜ao s˜ao compat´ıveis com todas as plataformas ou nave- gadores. Surge ent˜ao uma tecnologia que muda esse cen´ario, o AJAX.
Conte´ udo
1 Descri¸c˜ao 7
1.1 Defini¸c˜ao de AJAX . . . 7
1.1.1 JavaScript . . . 7
1.1.2 Asynchronous . . . 7
1.1.3 XML . . . 7
2 Porque usar AJAX? 7 3 Modo funcionamento 8 4 Vantagens e desvantagens 8 4.1 Desvantagens . . . 8
4.2 Vantagens . . . 8
5 Aplica¸c˜oes 8 6 Exemplo 9 6.1 Formul´ario HTTP . . . 9
6.2 Fun¸c˜ao showhint() . . . 9
6.3 A fun¸c˜ao stateChanged() . . . 9
6.4 A p´agina HTML . . . 10
6.5 O c´odigo do JavaScript . . . 10
6.6 C´odigo PHP . . . 11
7 Navegadores que suportam AJAX 12
8 Conclus˜ao 13
1 Descri¸ c˜ ao
Ent˜ao o que ´e o AJAX?
AJAX n˜ao ´e nem uma tecnologia nova nem uma nova linguagem de programa¸c˜ao, mas sim uma nova forma de usar standards existentes. ´E uma nova metodologia de programa¸c˜ao, uma nova abordagem do uso de algumas tecnologias j´a existentes em conjunto, incluindo: HTML ou XHTML, Cascading Style Sheets,JavaScript,DOM (Document Object Model),XML,XSLT, e o objectoXMLHttpRequest do JavaScript. Combinado todas estas tecnologias no modelo AJAX, conseguimos criar aplica¸c˜oes r´apidas, com altera¸c˜oes parciais do interface sem a necessidade de carregar toda a p´aginaweb1 novamente. Esta t´ecnica faz com que as p´aginasweb respondam mais rapidamente `as ac¸c˜oes do utilizador e consegue-se uma aproxima¸c˜ao a uma aplica¸c˜ao dedesktop. Dizem na p´agina da XUL[1] que esta t´ecnica somente foi descoberta pelo Google em 2005, contribuindo para o seu sucesso usando-a no gmail e GoogleMaps.
1.1 Defini¸ c˜ ao de AJAX
AJAX ´e um diminuitivo para Asynchronous JavaScript and XML(e DHTML, CSS, etc). Esta frase foi criada por Jesse James Garrett[2] da empresa Adaptive Path, e de acordo com ele, n˜ao ´e inten¸c˜ao ser um acr´onimo mas sim uma forma mais simples de descrever a tecnologia usada.
Vamos ent˜ao ver estas partes separadamente, tal como s˜ao descritas por Ross Shannon [4]:
1.1.1 JavaScript
OJavaScript´e usado para fazer pedidos ao servidor. Quando se obt´em a resposta do servidor, geralmente
´
e usado mais JavaScript para modificar oDocument Object Model da p´agina actual de forma a mostrar ao utilizador o resultado da submiss˜ao.
1.1.2 Asynchronous
Significa que quando enviamos um pedido, esperamos pela resposta, mas podemos fazer outras coisas enquanto esperamos. A resposta provavelmente n˜ao chegar´a imediatamente, ent˜ao desenvolvemos uma fun¸c˜ao que espera pela resposta do servidor, e reage somente quando a resposta chegar.
1.1.3 XML
Os dados recebidos do servidor s˜ao ”empacotados”em XML, assim s˜ao facilmente processados pelo Ja- vaScript. Podemos tratar estes dados da forma que acharmos mais conveniente e quando eles forem necess´arios.
N˜ao ´e nada de novo, apenas fazemos um pedido de um ficheiro (que pode ser oferecido por um script que corre no servidor, escrito em PHP por exemplo), e recebemos a p´agina de resposta.
Este ´e o funcionamento normal daweb, a ´unica diferen¸ca ´e que agora estamos a fazer pedidos atrav´es doJavaScript.
2 Porque usar AJAX?
• aproxima as aplica¸c˜oes web das aplica¸c˜oes desktop.
• diminui o volume de dados transferidos entre o servidor e o navegador.
• n˜ao requer pluggins especiais nos navegadores.
• ´e baseado em standards
• tem um nome giro!
3 Modo funcionamento
E uma tecnologia que corre no navegador, logo, ´´ e independente do software de servidor web. Usa trans- ferˆencias ass´ıncronas de dados entre o navegador e o servidor web, permitindo `as p´aginas web pedir pequenos conjuntos de dados de cada vez ao servidor ao inv´es de p´aginas inteiras.
O standards abertos usados no AJAX est˜ao bem definidos, e s˜ao suportados pelos navegadores mais usados. As aplica¸c˜oes desenvolvidas em AJAX s˜ao independentes de plataforma e navegadores.
As aplica¸c˜oes web tem grandes vantagens sobre as aplica¸c˜oes de desktop, podem ter uma maior audiˆencia, s˜ao mas f´aceis de instalar e manter, e muitas vezes de maior facilidade de desenvolvimento.
Por outro lado, as aplica¸c˜oes web nem sempre s˜ao t˜ao ”ricas”e ”user-friendly”como a s aplica¸c˜oes de desktop tradicionais. O AJAX veio tornar as aplica¸c˜oeswebmais ricas, mais r´apidas, e mais us´aveis, ou seja, uma aproxima¸c˜ao `as aplica¸c˜oes desktop.
Uma aplica¸c˜ao web tradicional envia os dados preenchidos nos campos dos formul´arios para o ser- vidor. Depois do servidor processar os dados, responde com o resultado na forma de uma p´agina web completa. Como o servidor retorna uma p´agina nova sempre que o utilizador envia dados, as aplica¸c˜oes web tradicionais tornam-se lentas e tendem a n˜ao ser de f´acil utiliza¸c˜ao.
Com AJAX, as aplica¸c˜oeswebpodem enviar e receber dados sem recarregar as p´aginas completamente.
Isto ´e poss´ıvel porque se fazem pedidos HTTP ao servidor(em background), e modificando apenas algumas partes das p´aginas usando JavaScript.
Normalmente usa-se XML como o formato de suporte para receber dados do servidor, mas qualquer formato, incluindo texto simples, pode ser usado.
4 Vantagens e desvantagens
Como tudo, o AJAX tem vantagens e desvantagens:
4.1 Desvantagens
• O bot˜aoback dos navegadores n˜ao consegue voltar ao estado anterior das p´aginas. Como n˜ao s˜ao carregadas novas p´aginas, n˜ao ´e poss´ıvel voltar atr´as.
• Os URL’s n˜ao se alteram quando existem altera¸c˜oes no estado da p´agina.
• O JavaScript pode ser pesado em m´aquinas antigas e com pouco poder de processamento.
• O JavaScript pode estar desactivado(por motivos de seguran¸ca) ou at´e n˜ao dispon´ıvel em alguns navegadores.
4.2 Vantagens
• Aumenta usabilidade das aplica¸c˜oesweb
• Aplica¸c˜oesweb com anima¸c˜oes e bastante interac¸c˜oes sem necessidade de recorrer a Flash
• Poupan¸ca de largura de banda
• Apenas transferimos do servidor os dados necess´arios
• Permite criar interfaces mais r´apidos
5 Aplica¸ c˜ oes
O crescimento de aplica¸c˜oes e p´aginasweb que usam AJAX foi muito acentuado, neste momento existe um in´umero conjunto exemplos. Alguns, os seguintes, s˜ao talvez aqueles que tiveram mais destaque e que ajudaram `a prolifera¸c˜ao do uso desta tecnologia.
• Gmail, e outras aplica¸c˜oes do google
• Sclaix, uma plataforma de colabora¸c˜ao empresarial
• netvibes.com
• del.icio.us
• flickr.com
• meebo.com
Podemos associar o AJAX ao aparecimento da chamada WEB 2.0. O AJAX ´e, sem d´uvida, a base tecnol´ogica deste tipo de solu¸c˜oes.
6 Exemplo
Para demonstrar o funcionamento do AJAX podemos ver como se pode fazer um formul´ario semelhante aogoogle suggest, exemplo retirado da p´agina da w3schools[3].
6.1 Formul´ ario HTTP
O c´odigo do formul´ario, em HTML, que corre a fun¸c˜aoshowHint quando se escreve algo:
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
6.2 Fun¸ c˜ ao showhint()
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML=""
return }
xmlHttp=GetXmlHttpObject() if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request") return
}
var url="gethint.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)
xmlHttp.send(null
6.3 A fun¸ c˜ ao stateChanged()
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
document.getElementById("txtHint").innerHTML=xmlHttp.responseText }
}
6.4 A p´ agina HTML
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
6.5 O c´ odigo do JavaScript
var xmlHttp
function showHint(str) {
if (str.length==0) {
document.getElementById("txtHint").innerHTML=""
return }
xmlHttp=GetXmlHttpObject() if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request") return
}
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)
xmlHttp.send(null) }
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
} }
function GetXmlHttpObject() {
var objXMLHttp=null
if (window.XMLHttpRequest) {
objXMLHttp=new XMLHttpRequest() }
else if (window.ActiveXObject) {
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") }
return objXMLHttp }
6.6 C´ odigo PHP
Este exemplo do c´odigo PHP que corre do lado do servidorweb, pode ser implementado em muitas outras linguagens.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
$q=$_GET["q"];
//lookup all hints from array if length of q>0 if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++) {
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
} else
{
$hint=$hint." , ".$a[$i];
} } } }
// Set output to "no suggestion" if no hint where found // or to the correct values
if ($hint == "") {
$response="no suggestion";
} else {
$response=$hint;
}
//output the response echo $response;
?>
7 Navegadores que suportam AJAX
As aplica¸c˜oes que recorrem ao AJAX s´o podem funcionar em navegadores com um suporte completo para XML. Neste momento nem todos os navegadores dispon´ıveis podem funcionar com aplica¸c˜oes desenvol- vidas em AJAX - O Internet Explorer, o Mozilla Firefox, as ultimas vers˜oes Safari ou Opera tem suporte suficiente para correr aplica¸c˜oes AJAX.
Para funcionar em Internet Explorer tem que usar outro objecto, pois oXMLHttpRequests´o ´e supor- tado no IE7. Fazemos ent˜ao da seguinte forma:
function GetXmlHttpObject() {
var objXMLHttp=null
if (window.XMLHttpRequest) {
objXMLHttp=new XMLHttpRequest() }
else if (window.ActiveXObject) {
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp }
Cabe ao programador definir alternativas quando os acessos `as aplica¸c˜oes s˜ao feitos utilizando nave- gadores que n˜ao suportam a tecnologia.
8 Conclus˜ ao
Est´a claro que com esta descri¸c˜ao n˜ao seremos capazes de come¸car a escrever aplica¸c˜oes usando a me- todologia AJAX, a ideia tamb´em n˜ao era essa, era perceber como funcionam as recentes aplica¸c˜oes web que recorrem a esta tecnologia.
Para j´a, vendo os exemplos, ficamos a perceber a revolu¸c˜ao que ocoreu nas aplica¸c˜oes web gra¸cas ao AJAX. Imaginem uma aplica¸c˜aoweb que responde imediatamente aos nossosclicks, quando escrevemos algo num campo dum formul´ario, quando seleccionamos um bot˜ao ou mesmo quando arrastamos o rato pela p´agina.
Pensem no que quer dizer ass´ıncrono, ou seja, o c´odigoJavaScriptn˜ao fica parado `a espera da resposta do servidor.
Referˆ encias
[1] XUL,Ajax tutorial for creating client-side dynamic web pages, http://www.xul.fr/en-xml-ajax.html . [2] Jesse James Garrett, Ajax: A New Approach to Web Applications, http://www.adaptivepath.com,
February 2005.
[3] Refsnes Data, AJAX Tutorial, http://www.w3schools.com/ajax/default.asp . [4] Ross Shannon,AJAX, http://www.yourhtmlsource.com/javascript/ajax.html .
