AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho.
18
AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho
Transcript of AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias Ronny Fernandes da Cruz Tiago Coelho.
AJAX
Rodrigo Vronscki RicardoRoger de Córdova FariasRonny 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 recarregadas1995 - 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 object2000 - Utilizado no Outlook Web Access2004 - Gmail2005 - Google Maps2005 - 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
XMLHttpRequestinterface 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) 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/
AJAX
Rodrigo Vronscki RicardoRoger de Córdova FariasRonny Fernandes da Cruz
Tiago Coelho
