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
1995
1996
1999
- Páginas são totalmente recarregadas
- Java Applets (client-side)
- Internet Explorer lança o <iframe>
- 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) {
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this
text</h2></div>
<button type="button"
onclick="loadXMLDoc()">Change
Content</button>
</body>
</html>
document.getElementById("myDiv").innerHT
ML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
http://www.w3schools.com/ajax/tryit.asp?filename=tryaja
x_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 Ricardo
Roger de Córdova Farias
Ronny Fernandes da Cruz
Tiago Coelho