Aplicações Web altamente

interativas com Ajax

Guilherme Blanco
 O que é AJAX?
• Suporte por parte dos navegadores introduz
novos recursos, possibilitando as páginas
uma vez estáticas se tornarem ricas
• Diferentes tecnologias tendenciam a novas
metolodogias para desenvolver aplicações
Web interativas
 O que é AJAX?
• AJAX = Asynchronous Javascript And Xml
• 18 de fevereiro de 2005: Jesse James Garret, criador do site
Adaptative Path LLC publicou um artigo entitulado “Ajax:
A New Approach to Web Applications”
• Garret explica como ele acredita que aplicações Web estão
fechando o abismo entre a Web e as aplicações Desktop
tradicionais. Citou novas tecnologias e alguns projetos da
Google para demonstrar como formas de interação com o
usuário usualmente em aplicações desktop podem ser
usadas em aplicações Web
 O que é AJAX?
• Resumo:
AJAX não é uma tecnologia. É um conjunto de tecnologias
formando uma tecnologia que incorpora:
- Apresentação em formato Standards: XHTML + CSS
- Exibição dinâmica e interativa com DOM
- Intercâmbio de dados e manipulações usando XML e
XSLT
- Recuperação de dados assincronamente usando
XmlHttpRequest
- JavaScript coordenando todos os elementos acima
- Uma linguagem server-side; no nosso caso, PHP
AJAX – Modelo de aplicação

Cortesia do livro Profesional Ajax – WROX Press 2006, de Nicholas C. Zackas

AJAX – Modelo de Interação

Fonte: Adaptative Path LLC

 AJAX – Objetivos Gerais
• Usuários em foco
• Conservar recursos
• Ser acessível
• Privacidade
 AJAX – Princípios de Design
• Tráfego mínimo
• Forma de interatividade Ajax explícita para o usuário
• Sem distrações
• Convenções estabelecidas
• Interação contínua, ou seja, evite carregar páginas inteiras
 AJAX - Técnicas
• Hidden Frame
• Hidden Iframe
• XMLHttpRequest
 AJAX – Hidden Frame/Iframe
• Pattern
 AJAX – Hidden Frame/Iframe
• Prós
- Tecnologia antiga, amplamente utilizada
- Mantém o suporte ao histórico nativo do browser
• Contras
- Em caso de falha, não há como saber
 AJAX – Hidden Frame/Iframe
• Exemplo de Hidden Frame
 AJAX – Hidden Frame/Iframe
• Exemplo de Hidden IFrame
Outras modificações não são
necessárias. Pode-se eliminar a
index.html deixaria de existir e a
display.html passaria a ser a nova
index.html
 AJAX – XMLHttpRequest
• Pattern: Similar ao modelo de aplicação
ilustrado para a metodologia Ajax
 AJAX – XMLHttpRequest
• Prós
- Código mais limpo
- Acesso a cabeçalhos HTTP
• Contras
- Sem o recurso de histórico nativo do browser
- Somente IE: Controles ActiveX são desabilitados
por muitas pessoas
 AJAX – XMLHttpRequest
• IE
function createXmlHttp() {
var aVersions = [“MSXML2.XMLHttp.5.0”, “MSXML2.XMLHttp.4.0”, “MSXML2.XMLHttp.3.0”,
“MSXML2.XMLHttp”, “Microsoft.XMLHttp”];

for (var i = 0; i < aVersions.length; i++) {

try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) {}
}

throw new Error(“MSXML is not installed!”);

}

• Mozilla
var oXmlHttp = new XMLHttpRequest();
 AJAX – XMLHttpRequest
function createXmlHttp() {
if (typeof XMLHttpRequest != undefined) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
var aVersions = [“MSXML2.XMLHttp.5.0”, “MSXML2.XMLHttp.4.0”,
“MSXML2.XMLHttp.3.0”, “MSXML2.XMLHttp”, “Microsoft.XMLHttp”];

for (var i = 0; i < aVersions.length; i++) {

try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) {}
}
}

throw new Error(“XMLHttp object could not be created!”);

}
 AJAX – XMLHttpRequest
• Método OPEN
- Request Type
- URL
- Async
• Método ONREADYSTATECHANGE
- Propriedade readyState = 0: Uninitialized
- 1: Loading
- 2: Loaded
- 3: Interactive
- 4: Complete
 AJAX – XMLHttpRequest
var oXmlHttp = createXmlHttp();
oXmlHttp.open(“GET”, “info.txt”, true);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
alert(“Info.txt foi obtido!”);
}
}
oXmlHttp.send(null);
 AJAX – XMLHttpRequest
• responseXML
• responseText
• status
• getResponseHeader(s)
• getAllResponseHeaders()
• setRequestHeader(s, s2)
• send(s|null)
AJAX – XMLHttpRequest
AJAX – Desempenho
AJAX – Desempenho
AJAX – Desempenho
 AJAX – Outras considerações
• “Same Origin Policy”
• “Cache Control”
 AJAX – Frameworks em PHP
• HTML AJAX http://pear.php.net/package/HTML_Ajax
• XOAD http://www.xoad.org
• XAjax http://xajax.sourceforge.net
• SAjax http://www.modernmethod.com/sajax
• pAjax http://www.phpclasses.org/pajax