1 / 18

AJAX

AJAX. Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho. O que é AJAX. A synchronous Ja vaScript and X ML. AJAX não é uma linguagem de programação, mas uma nova maneira de usar padrões existentes.

tevin
Download Presentation

AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 1995    - Java Applets (client-side) 1996    - Internet Explorer lança o <iframe> 1999    - MS cria o XMLHTTP ActiveX control no IE5             - mais tarde adotado pela Mozilla, Safari, Opera e outros como XMLHttpRequest JavaScript object 2000    - Utilizado no Outlook Web Access 2004    - Gmail 2005    - Google Maps 2005    - Surge o termo "AJAX" 2006    - 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. <html> <head> <script type="text/javascript"> 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").innerHTML=xmlhttp.responseText;   } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first Exemplo de Código

  14. Exemplo Prático

  15. Aplicações de Grande Porte

  16. Aplicações de Grande Porte

  17. Referências Wikipedia (en)         http://en.wikipedia.org/wiki/Ajax_(programming) Wikipedia (en)         http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o) W3Schools.com         http://www.w3schools.com/ajax/default.asp W3C         http://www.w3.org/TR/XMLHttpRequest/

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

More Related