AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho
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.
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
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
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
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
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
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
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
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; };
XMLHttpRequest
Bibliotecas Mais Utilizadas - JQuery: $.ajax(); - MooTools new Ajax(); - Prototype new Ajax.Request(); - Extjs Ext.Ajax.request(); - Dojo dojo.xhrPost() e dojo.xhrGet();
Exemplo de Código <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 Prático
Aplicações de Grande Porte
Aplicações de Grande Porte
Referências Wikipedia (en) W3Schools.com W3C http://en.wikipedia.org/wiki/Ajax_(programming) 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/
AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho