AJaX Asy s nchronous s J avasc S ript p t a nd d XML

Transcrição

1 Asynchronous JavaScript and XML

2 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

3 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

4 Modelos das Aplicações WEB 3

5 AJax Engine Comunicação Assíncrona 4

6 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

7 Passos de um pedido AJAX 1. Criar objecto XmlHttpRequest 2. Iniciar comunicação -.open 3. Registar função EventHandler que vai monitorizar o estado da resposta do servidor.onreadystatechange = statehandler; 4. Fazer pedido HTTP -.send 5. Receber a resposta.responsexml.responsexml 6

8 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

9 Registo do EventHandler var xmlhttpobj; function MakeXMLHTTPCall() xmlhttpobj = CreateXmlHttpRequestObject(); if (xmlhttpobj) xmlhttpobj.open("get"," 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

10 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 (UNINITIALIZED) (1) LOADING (2) LOADED (3) INTERACTIVE (4) COMPLETED The object has been created, but not initialized (open method has not been called). 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 responsetext to get the current partial results. All the data has been received, and the complete data is available in responsebody and responsetext. Teste realizado no event handler if ( xmlhttpobj.readystate == 4 ) 9

11 Enviar informação para o servidor Open( ) inicializa a comunicação com o servidor xmlhttpobj.open("get"," 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& =bob@site.com"); 10

12 Receber informação do servidor responsetext Recebe a resposta como uma string var texto = xmlhttpobj.responsetext; // processar resposta document.getelementbyid("textbox1").value=texto; responsexml 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; Ficheiro XML. <Customer> <FirstN> Ana </FirstN>. <LastN> Sá </LastN> </Customer > 11

13 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> </Customer>. 12

14 function MakeXMLHTTPCall() xmlhttpobj = CreateXmlHttpRequestObject(); if (xmlhttpobj) xmlhttpobj.open("get"," 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

15 AutoComplete AJAX/PHP Pesquisa no Google numa página pessoal 14

16 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

17 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(" "r"); while (!feof($trata) ) $texto = fgets($trata); echo $texto; } fclose($trata);?> 16

18 EventHandler function estado() if(xmlhttprequest_obj.readystate == 4 && } XMLHttpRequest_obj.status == 200) document.getelementbyid("div_resultados").innerhtml= } XMLHttpRequest_obj.responseText; 17