AJaX
Asynchronous JavaScript and
XML
AJaX
Ajax
Um nome para um novo tipo de aplicações na Web
Técnica de desenvolvimento de aplicações para criar
páginas mais interactivas
Não é uma nova tecnologia
Ajax= JavaScript + DHTML + DOM + …
Páginas Web usam Javascript para fazer chamadas
assíncronas a páginas no servidor
Permite ao utilizador continuar a interagir com a página
enquanto não é retornada a resposta
Apenas parte da página é actualizada, não há refresh
de toda a página
Melhoria na navegação
Objecto JavaScript - XMLHttpRequest
1
AJaX
Defining Ajax
Ajax isn’t a technology. It’s really several technologies,
each flourishing in its own right, coming together in
powerful new ways. Ajax incorporates:
standards-based presentation using XHTML and CSS;
dynamic display and interaction using the Document
Object Model;
data interchange and manipulation using XML and
XSLT;
asynchronous data retrieval using XMLHttpRequest;
and JavaScript binding everything together.
[Ajax: A New Approach to Web Applications]
Jesse James Garrett (O “pai” do Ajax)
2
AJaX
Modelos das Aplicações WEB
3
AJaX
AJax Engine – Comunicação Assíncrona
4
AJaX
Objecto XMLHttpRequest
Objecto JavaScript suportado por todos os
principais Browser
Existe desde o IE 5.0 como um objecto
ActiveX !!
Responsável pela comunicação assíncrona
com o servidor
5
AJaX
Passos de um pedido AJAX
1.
2.
3.
Criar objecto XmlHttpRequest
Iniciar comunicação - .open
Registar função – EventHandler – que vai
monitorizar o estado da resposta do servidor
.onreadystatechange = stateHandler;
4.
5.
Fazer pedido HTTP - .send
Receber a resposta –
.responseXML
.responseXML
6
AJaX
Criar objecto XMLHttpRequest
Nos
browsers mais recentes
var xmlHttpObj = new XMLHttpRequest();
No IE 5.0 e 6.0
var xmlHttObj= new ActiveXObject(“Microsoft.XMLHTTP”);
ou
var xmlHttObj= new ActiveXObject(“Msxml2.XMLHTTP”);
Detecção do Browser
if (window.XMLHttpRequest)
{// IE 7.0 ou FireFox 2.0
…
Deve-se fazer função para detectar tipo de browser e devolver
o objecto
CreateXmlHttpRequestObject()
7
AJaX
Registo do EventHandler
var xmlHttpObj;
function MakeXMLHTTPCall()
{
xmlHttpObj = CreateXmlHttpRequestObject();
if (xmlHttpObj)
{
xmlHttpObj.open("GET","http://ajaxdemo/DataFile.xml", true);
xmlHttpObj.onreadystatechange = stateHandler;
xmlHttpObj.send(null); }
...
Event Handler
}
function stateHandler()
{
if ( xmlHttpObj.readyState == 4 )
{
var doc = xmlHttpObj.responseXML;
// código de processamento do XML recebido
…
8
AJaX
Evento onreadystatechange
Chamado sempre que a propriedade readystate é alterada
Registo do Event Handler
xmlHttpObj.onreadystatechange = stateHandler;
A propriedade readystate permite saber o estado do pedido
0
The object has been created, but not initialized (open method
(UNINITIALIZED) has not been called).
(1) LOADING
The object has been created, but the send method has not been
called.
The send method has been called and the status and headers are
available, but the response is not yet available.
Some data has been received. You can call responseBody and
(3) INTERACTIVE
responseText to get the current partial results.
All the data has been received, and the complete data is
(4) COMPLETED
available in responseBody and responseText.
(2) LOADED
Teste realizado no event handler
if ( xmlHttpObj.readyState == 4 ) { …
9
AJaX
Enviar informação para o servidor
Open( ) inicializa a comunicação com o servidor
xmlHttpObj.open("GET","http://.../DataFile.xml",
true);
Método GET ou POST
URL do pedido
Tipo de ligação: True = assíncrona ; false= síncrona
Send( ) faz o pedido HTTP e opcionalmente envia informação
xmlHttpObj.send(null);
xmlHttpObj.send("name=Bob&[email protected]");
10
AJaX
Receber informação do servidor
responseText
Recebe a resposta como uma string
Ficheiro
XML
….
var texto = xmlHttpObj.responseText;
// processar resposta
document.getElementById("TextBox1").value=texto;
responseXML
<Customer>
<FirstN>
Ana
</FirstN>
<LastN>
Sá
</LastN>
</Customer
>
….
Recebe a resposta como um documento XML. Este
documento pode ser processado usando DOM.
var doc = xmlHttpObj.responseXML;
// processar resposta
var nodelist = doc.getElementsByTagName("Firstname");
var nome= nodelist[0].childNodes[0].nodeValue;
11
AJaX
Exemplo de pedido de um ficheiro
<div id="divResults">
….
<input onclick="MakeXMLHTTPCall();" type="button“
…
<div id="divResults"> {no results}</div>
Ficheiro XML
….
<Customer>
<Firstname>Joe</Firstname>
<Lastname>Bloggs</Lastname>
<email>[email protected]</email>
</Customer>
….
12
AJaX
function MakeXMLHTTPCall()
{
xmlHttpObj = CreateXmlHttpRequestObject();
if (xmlHttpObj)
{
xmlHttpObj.open("GET","http://www.dei.isep.ipp.pt/ARQSI/DataFile.xml", true);
xmlHttpObj.onreadystatechange = stateHandler;
xmlHttpObj.send(null);
}
xmlHttpObj.send(null);
}
function stateHandler()
{
if ( xmlHttpObj.readyState == 4 )
{
var texto = xmlHttpObj.responseText;
document.getElementById("divResults").childNodes[0].nodeValue = texto;
}
}
13
AJaX
AutoComplete AJAX/PHP
Pesquisa no Google numa página pessoal
14
AJaX
AutoComplete AJAX/PHP
Chama uma página servidora que devolve uma
pesquisa no Google
<body><h3>Google com AJAX :</h3>
Pesquisar –
<input id =“texto" type ="text“ onKeyUp=“pesquisa()">
<div id = "div_resultados"></div> </body>
Evento onKeyUp
function pesquisa( )
{…
var input=document.getElementById(“texto").value;
datasource="google_ajax.php?q=" + input;
getInfo(datasource);
…
15
AJaX
Chamada JavaScript assíncrona
function getInfo(dataSource)
{
XMLHttpRequest_obj = createXMLHttpRequest();
if(XMLHttpRequest_obj){
XMLHttpRequest_obj.open("GET", dataSource,true);
XMLHttpRequest_obj.onreadystatechange = estado;
XMLHttpRequest_obj.send(null);
…
Página PHP – faz chamada ao Google e devolve resultado
<?php
/*handler para tratar a info vinda do google*/
$trata = fopen("http://www.google.pt/search?hl=en&q=" .$_GET["q"], "r");
while ( !feof($trata) )
{ $texto = fgets($trata);
echo $texto;
}
fclose($trata);
?>
http://www.dei.isep.ipp.pt/~losa/ajaxphp/google_ajax_teste.html
16
EventHandler
function estado()
{
if(XMLHttpRequest_obj.readyState == 4 &&
XMLHttpRequest_obj.status == 200)
{
document.getElementById("div_resultados").innerHTML=
XMLHttpRequest_obj.responseText;
}
}
17