This document discusses Ajax and usability. It covers topics like Web 2.0, how Ajax works using XMLHttpRequest to enable asynchronous communication and DOM manipulation with JavaScript. Examples are given of how Ajax improves usability, such as autocomplete, dynamic menus and uploading files without page refreshes. The conclusion is that Ajax transfers control of navigation flow from the server to the browser.

1. SEAD 2006
Usabilidade
com
Ajax
CHRISTIANO MILFONT - cmilfont@gmail.com Fortaleza, Ceará. 29/09/2006

2. Ajax
Set 29 by Milfont in ROTEIRO >>
Add a comment/0 trackback(s)
1. WEB 2.0
2. XMLHttpRequest
3. COMO FUNCIONA.
4. USABILIDADE.
5. EXEMPLOS.
6. CONCLUSÃO.

3. Ajax
Set 29 by Milfont in AJAX >> WEB 2.0 >>
Add a comment/0 trackback(s)

4. Ajax
Set 29 by Milfont in AJAX >> WEB 2.0 >>
Add a comment/0 trackback(s)
Apresentação com XHTML e CSS
XMLHttpRequest
na comunicação
assíncrona
Trocando dados
Interação
e manipulando
com DOM
com XML e XSLT
Tudo temperado com javascript

5. Ajax
Set 29 by Milfont in AJAX >> XMLHttpRequest >>
Add a comment/0 trackback(s)
XMLHttpRequest foi
criado pela MS para o
Outlook Web Access
como objeto ActiveX e
incorporado aos
padrões do W3C.
quot;Asynchronous JavaScript + XMLquot;

6. Ajax
Set 29 by Milfont in AJAX >> XMLHttpRequest >>
Add a comment/0 trackback(s)
new XMLHttpRequest();
new ActiveXObject(quot;Msxml2.XMLHTTP”);
new ActiveXObject(quot;Msxml2.XMLHTTP.3.0”);
new ActiveXObject(quot;Microsoft.XMLHTTP”);
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else {
if(window.ActiveXObject){
request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;);
}else{
request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;);
}
}

7. Ajax
Set 29 by Milfont in AJAX >> XMLHttpRequest >>
Add a comment/0 trackback(s)
var theUrl = quot;sead.do?page=AjaxXML”;
request.onreadystatechange ={
if(request.readyState ==4){
if(request.status == 200){
var ajaxResponse = request.responseXML;
//MANIPULA O XML
}
ReadyState
if(request.status == 404){
0 – Uninitiated
//PROCESSA ERRO
}
1 – Loading
...
2 – Loaded
}
3 – Interactive
};
4 - Complete
request.open(quot;POSTquot;, theUrl, true);
request.send(null);

8. Ajax
Set 29 by Milfont in AJAX >> COMO FUNCIONA >>
Add a comment/0 trackback(s)
Com Ajax,
Controle do
transferimos o
fluxo de
controle de
navegação da
fluxo de
aplicação é
navegação
feito no lado
para o
servidor.
Browser.

9. Ajax
Set 29 by Milfont in AJAX >> COMO FUNCIONA >>
Add a comment/0 trackback(s)
O servidor passa a fornecer dados e não conteúdo.
O controle de apresentação é definido no Browser

10. Ajax
Set 29 by Milfont in AJAX >> COMO FUNCIONA >>
Add a comment/0 trackback(s)

11. Ajax
Set 29 by Milfont in AJAX >> COMO FUNCIONA >>
Add a comment/0 trackback(s)
Modelo Tradicional.
Modelo Ajax.

12. Ajax
Set 29 by Milfont in AJAX >> USABILIDADE >>
Add a comment/0 trackback(s)
Interação com submissão de formulários.
Auto-completar.
Efeitos como Fade, Colapse, etc...
Slider
Menus dinâmicos
TreeView
Modal
Upload sem refresh
...

13. Ajax
Set 29 by Milfont in AJAX >> USABILIDADE >>
Add a comment/0 trackback(s)
Mashup
Combinação de conteúdo
de mais de uma fonte

14. Ajax
Set 29 by Milfont in AJAX >> USABILIDADE >>
Add a comment/0 trackback(s)
Efeitos

15. Ajax
Set 29 by Milfont in AJAX >> CONCLUSÃO >>
Add a comment/0 trackback(s)
http://www.milfont.org