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 - Nuno Datia –

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

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

4 ©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 ©ISEL/DEETC/SP – Programação na Internet 5 Casos de sucesso GMail – Google Suggest - Start.com portalStart.com Google Maps - MSN Virtual Earth - Flickr Photo Sharing website –

6 ©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 ©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 ©ISEL/DEETC/SP – Programação na Internet 8 Modelo aplicacional clássico vs AJAX(iano) Clássico AJAX Adaptado de :

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

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

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

12 ©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 ©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 ©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 ©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 ©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 ©ISEL/DEETC/SP – Programação na Internet 17 HelloWorld(cont.) void main() { cout << "HTTP/ OK" << endl; cout << "Content-Type: text/plain" << endl; cout<

18 ©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 ©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 ©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 ©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 ©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 ©ISEL/DEETC/SP – Programação na Internet 23 JSON (cont) Adaptado : {"bindings": [ {Event": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}, {"Event": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"}, {"Event": "PRIVMSG", "method": "randomURI", "regex": "^random.*"} ] }

24 ©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 var jSonObj = eval("("+xhr.responseText+")");

25 ©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 ©ISEL/DEETC/SP – Programação na Internet 26 Recursos AJAX Dojo: Prototype: JSON-RPC: Script.aculo.us: DWR: https://dwr.dev.java.net/ Backbase: SmartClient: Ajax.NET: SAJAX: UI & Remote Toolkits

27 ©ISEL/DEETC/SP – Programação na Internet 27 Recursos JSON JSON em JavaScript: JSON em C#: JSON C++:

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


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