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

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

AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho.

Apresentações semelhantes


Apresentação em tema: "AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho."— Transcrição da apresentação:

1 AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho

2 O que é AJAX Asynchronous JavaScript and XML. AJAX não é uma linguagem de programação, mas uma nova maneira de usar padrões existentes. AJAX é a arte de trocar dados com um servidor e atualizar partes de uma página web sem ter que recarregar toda a página, assim criando páginas rápidas e dinâmicas.

3 História 90s - Páginas são totalmente recarregadas Java Applets (client-side) Internet Explorer lança o MS cria o XMLHTTP ActiveX control no IE5 - mais tarde adotado pela Mozilla, Safari, Opera e outros como XMLHttpRequest JavaScript object Utilizado no Outlook Web Access Gmail Google Maps Surge o termo "AJAX" W3C lança o primeiro rascunho do XMLHttpRequest

4 Princípios O NAVEGADOR HOSPEDA A APLICAÇÃO - Navegador recebe documento mais complexos - Documento é mantido com o navegador por toda a sessão - Documento decide manipular ou passar informação ao servidor - Informações podem ser persistidas no cliente

5 Princípios O SERVIDOR FORNECE DADOS - Menor fluxo de dados. Trafego de dados relevantes - Retorno pode ser código Javascript, XML ou Texto - Maior tráfego no início da sessão - Eficiência ao longo do tempo

6 Princípios INTERAÇÃO FLEXÍVEL E CONTÍNUA - Maior rendimento na utilização da página (tempo) - Similaridade com aplicações Desktop - Melhora na usabilidade - Servidor trabalha junto com usuário, uma vez que há troca de dados, conforme o usuário interage com a interface

7 Princípios A CODIFICAÇÃO REQUER DISCIPLINA - Código dura do início ao fim da sessão - Deve manter performance - Eficiência na comunicação com servidor - Deve abstrair o mundo real, sem que o usuário se preocupe com velocidade, comunicação ou performance

8 Desvantagens - Páginas sucessivas não são registradas no Histórico - Páginas são difíceis de serem marcadas Favoritas - WebCrawlers não executam Javascript - Smartphones podem não suportar XMLHttpRequest - Pode haver um excesso de requisições ao servidor - Código complexo pode ser difícil de manter, debugar e testar

9 XMLHttpRequest - O objeto de JavaScript pra realizar requisições sem recarregar a página - Um dos parâmetros que recebe pra abrir uma conexão (método open()) é um boolean indicando se a requisição é sincrona ou asíncrona - Requisições sincronas bloqueiam (travam) a página até a requisição concluir - Se a requisição for asíncrona a página não é bloqueada e o cliente pode continuar navegando enquanto a requisição é realizada: isso é AJAX

10 XMLHttpRequest interface XMLHttpRequest : XMLHttpRequestEventTarget { // event handler attributes attribute Function onreadystatechange; // states const unsigned short UNSENT = 0; const unsigned short OPENED = 1; const unsigned short HEADERS_RECEIVED = 2; const unsigned short LOADING = 3; const unsigned short DONE = 4; readonly attribute unsigned short readyState; // request void open(DOMString method, DOMString url); void open(DOMString method, DOMString url, boolean async); void open(DOMString method, DOMString url, boolean async, DOMString? user); void open(DOMString method, DOMString url, boolean async, DOMString? user, DOMString? password); void setRequestHeader(DOMString header, DOMString value); void send(); void send(Document data); void send([AllowAny] DOMString? data); void abort(); // response readonly attribute unsigned short status; readonly attribute DOMString statusText; DOMString getResponseHeader(DOMString header); DOMString getAllResponseHeaders(); readonly attribute DOMString responseText; readonly attribute Document responseXML; };

11 XMLHttpRequest

12 Bibliotecas Mais Utilizadas - JQuery: $.ajax(); - MooTools new Ajax(); - Prototype new Ajax.Request(); - Extjs Ext.Ajax.request(); - Dojo dojo.xhrPost() e dojo.xhrGet();

13 Exemplo de Código function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHT ML=xmlhttp.responseText; } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } Let AJAX change this text Change Content x_first

14 Exemplo Prático

15 Aplicações de Grande Porte

16

17 Referências Wikipedia (en) Wikipedia (en) W3Schools.com W3C

18 AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho


Carregar ppt "AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho."

Apresentações semelhantes


Anúncios Google