A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

AJAX Programação na Internet Secção de Programação - ISEL-DEETC-LEIC Luis Falcão - Nuno Datia –

Apresentações semelhantes


Apresentação em tema: "AJAX Programação na Internet Secção de Programação - ISEL-DEETC-LEIC Luis Falcão - Nuno Datia –"— Transcrição da apresentação:

1 AJAX Programação na Internet Secção de Programação - ISEL-DEETC-LEIC Luis Falcão - lfalcao@cc.isel.ipl.ptlfalcao@cc.isel.ipl.pt Nuno Datia – datia@isel.ipl.ptdatia@isel.ipl.pt

2 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 2 Autores e contributos Autores –Nuno Datia Contributos –Luís Falcão

3 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 3 Sumário O que é o AJAX Arquitectura AJAX Objecto XMLHttpRequest Exemplos JSON

4 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 4 O que é o AJAX AJAX é (foi) o acrónimo de Asynchronous JavaScript and XML Podemos olhar para esta tecnica de duas formas distintas: –Como sendo um conjunto de tecnologias e standards –Como sendo uma arquitectura

5 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 5 Casos de sucesso GMail – http://mail.google.comhttp://mail.google.com Google Suggest - http://www.google.com/webhp?complete=1&hl=en http://www.google.com/webhp?complete=1&hl=en Start.com portalStart.com Google Maps - http://maps.google.com/http://maps.google.com/ MSN Virtual Earth - http://virtualearth.msn.com/http://virtualearth.msn.com/ Flickr Photo Sharing website – http://www.flickr.comhttp://www.flickr.com

6 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 6 AJAX - as tecnologias O AJAX não é por si só uma tecnologia, mas sim um conjunto de tecnologias standard: –Utiliza HTML e CSS para a apresentação de conteúdo –Utiliza o DOM para oferecer páginas interactivas e dinâmicas –Utiliza XML (entre outros) para troca de dados –As Trocas assíncronas de dados são efectuadas utilizando o objecto XMLHttpRequest –Utiliza o JavaScript como linguagem, que cola todas estas tecnologias

7 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 7 AJAX – a mudança de arquitectura O AJAX permitiu actualizar a arquitectura base das aplicações WEB –Server Side Events: Os componentes podem fazer pedidos ao servidor para obter informações, sem obrigar ao carregamento total da página –Asincronismo: Os pedidos (parciais) ao servidor não bloqueiam a interacção com o browser. Maior aproximação entre aplicações WEB e Desktop

8 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 8 Modelo aplicacional clássico vs AJAX(iano) Clássico AJAX Adaptado de : http://www.adaptivepath.com/publications/essays/archives/000385.php

9 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 9 Modelo aplicacional clássico vs AJAX(iano) cont. Modelo de comunicação síncrono

10 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 10 Modelo aplicacional clássico vs AJAX(iano) cont. Modelo de comunicação assíncrono

11 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 11 Arquitectura AJAX Entre os quais, os vossos próprios!

12 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 12 Vantagens Aumento da usabilidade da interface das aplicações WEB Possível ter aplicações mais ricas, com mais interacções, sem recorrer a plugins de terceiros (e.g. Macromedia Flash) Aplicações requerem menos largura de banda – apenas é descarregado o necessário Interface respondem mais rapidamente (embora estejam mais dependentes da rapidez da rede)

13 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 13 Desvantagens O suporte das diferentes tecnologias utilizadas é diferente consoante o browsers Butão de back passa a não funcionar como esperado O URI não se altera com a alteração do estado da aplicação O recurso a Javascript aumenta o processamento no cliente Os pedidos apenas podem ser endereçados ao domínio de onde foi originado o pedido inicial (mas é mais seguro !) A depuração do código é mais difícil

14 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 14 XMLHttpRequest É um objecto Javascript, responsável por: –Enviar pedidos HTTP –Receber as respostas a esses pedidos –Efectuar o parsing da resposta Infelizmente, a sua instanciação é dependente do browser, nomeadamente: var xhr = new XMLHttpRequest(); Firefox ( de acordo com a recomendação W3C) e Internet Explorer 7 var xhr = new ActiveXObject("Msxml2.XMLHTTP"); Internet Explorer 6 Internet Explorer 5 var xhr = new ActiveXObject("Microsoft.XMLHTTP");

15 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 15 XMLHttpRequest (cont.) interface XMLHttpRequest { attribute EventListener onreadystatechange; readonly attribute unsigned short readyState; readonly attribute DOMString responseText; readonly attribute Document responseXML; readonly attribute unsigned short status; readonly attribute DOMString statusText; void open(in DOMString method, in DOMString url); void open(in DOMString method, in DOMString url, in boolean async); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); void setRequestHeader(in DOMString header, in DOMString value); void send(); void send(in DOMString data); void send(in Document data); void abort(); DOMString getAllResponseHeaders(); DOMString getResponseHeader(in DOMString header); };

16 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 16 HelloWorld … span.addEventListener("click",mouseClick,false); … function mouseClick(evt){ xhr.onreadystatechange=processData; xhr.open("GET","cgi/HelloAjax.exe"); xhr.send(); } function processData() { if (xhr.readyState == 4 /*COMPLETE*/) { alert(xhr.responseText); } Do lado do cliente … Try to hit me! … Indicação do handler para processar a resposta Indicação do pedido a efectuar ao servidor Só aqui o pedido é enviado para o o servidor ! A resposta só está totalmente disponível quando o estado é 4. Processa-se o conteúdo da resposta

17 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 17 HelloWorld(cont.) void main() { cout << "HTTP/1.1 200 OK" << endl; cout << "Content-Type: text/plain" << endl; cout< { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com.br/6/1695996/slides/slide_17.jpg", "name": "2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 17 HelloWorld(cont.) void main() { cout << HTTP/1.1 200 OK << endl; cout << Content-Type: text/plain << endl; cout<

18 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 18 XMLHttpRequest – atributo readyState 0: (Uninitialized) - O método send() ainda não foi evocado 1: (Loading) - o método send() foi evocado, encontrando-se o pedido a ser processado 2: (Loaded) - o método send() foi completado e a resposta recebida 3: (Interactive) - A resposta está a ser processada 4: (Completed) - A resposta foi processada e pode ser consultada Esta propriedade tem 5 valores possíveis

19 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 19 XMLHttpRequest – responseText vs responseXML Ambos os atributos são utilizados para obter o resultado do pedido AJAX, embora em situações diferentes O atributo responseText tem o conteúdo do corpo da resposta, sem nenhum tratamento adicional Funciona com qualquer tipo MIME O atributo responseXML obriga a que o tipo MIME da resposta seja terminado em XML (text/xml, application/xml, etc ) É feito parsing sobre a resposta O resultado é um objecto que implementa a interface Document Caso contrário o valor é null

20 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 20 HelloXML Note-se que para obter a resposta a um pedido AJX utilizando a propriedade responseXML, a resposta tem de ser um documento XML bem formado function processData() { if (xhr.readyState == 4 /*COMPLETE*/ && xhr.responseXML) { var div = document.getElementById("div1"); var root = xhr.responseXML; for(var i=0; i < root.childNodes.length; ++i) div.appendChild(root.childNodes[i]); div.appendChild(document.createElement("p")); } Data

21 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 21 XMLHttpRequest - síncrono vs assíncrono O objecto XMLHttpRequest também suporta pedidos síncronos! Como não existe bloqueio da interface, é possível serem enviados vários pedidos AJAX É possível abortar um pedido feito, evocando o método abort() do objecto XMLHttpRequest void open(in DOMString method, in DOMString url, in boolean async); A evocação da método send() não provoca bloqueio. Embora na recomendação este seja o valor por omissão, não é garantido isso nas implementações actuais. true O método send() é bloqueante, não retornando enquanto não for recebida a resposta do servidor. false

22 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 22 JSON (JavaScript Object Notation) É um formato baseado na notação literal para objectos do Javascript ( Standard ECMA-262 3rd Edition - December 1999 )Standard ECMA-262 3rd Edition - December 1999 JSON é um formato de texto independente da linguagem É utilizado para troca de dados JSON contém duas estruturas base: –Uma colecção de pares nove/valor (tabela de hash) –Uma lista ordenada de valores ( array )

23 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 23 JSON (cont) Adaptado : http://json.org {"bindings": [ {Event": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, {"Event": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, {"Event": "PRIVMSG", "method": "randomURI", "regex": "^random.*"} ] }

24 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 24 JSON em Javascript Como o JSON se inspirou na notação literal para objectos do EcmaScript, tudo o que é necessário fazer é avaliar a string recebida pelo objecto XMLHttpRequest: Por questões de segurança, em vez de se utilizar a função eval, deve-se utilizar um parser JSON, o qual só aceitará texto nesse formato Ver em http://www.json.org/json.js var jSonObj = eval("("+xhr.responseText+")");

25 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 25 HelloJSON {"time": "07:05:52 PM." "server":localhost"} function processData() { if (xhr.readyState == 4 /*COMPLETE*/ ) { var jSonObj = eval("("+xhr.responseText+")"); … for(var p in jSonObj) { … //processar as propriedades } } Do lado do servidor É boa prática que o tipo MIME enviado seja apllication/json

26 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 26 Recursos AJAX Dojo: http://dojotoolkit.comhttp://dojotoolkit.com Prototype: http://prototype.conio.net/ JSON-RPC: http://json-rpc.org/ Script.aculo.us: http://script.aculo.us DWR: https://dwr.dev.java.net/ Backbase: http://www.backbase.com SmartClient: http://www.isomorphic.com Ajax.NET: http://ajax.schwarz-interactive.de/ SAJAX: http://www.modernmethod.com/sajax/ UI & Remote Toolkits

27 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 27 Recursos JSON JSON em JavaScript: http://www.json.org/js.htmlhttp://www.json.org/js.html JSON em C#: http://www.json.org/js.htmlhttp://www.json.org/js.html JSON C++: http://jsoncpp.sourceforge.net/http://jsoncpp.sourceforge.net/

28 2000 - 2006 ©ISEL/DEETC/SP – Programação na Internet 28 Bibliografia Pragmatic Ajax: A Web 2.0 Primer Justin Gehtland Pragmatic Bookshelf, 2006 http://www.w3.org/TR/XMLHttpRequest/ (Working Draft)http://www.w3.org/TR/XMLHttpRequest/ http://json.org/


Carregar ppt "AJAX Programação na Internet Secção de Programação - ISEL-DEETC-LEIC Luis Falcão - Nuno Datia –"

Apresentações semelhantes


Anúncios Google