View
107
Download
3
Category
Preview:
Citation preview
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
Recommended