1. Treinamento AJAX
Waelson Negreiros
Email: waelson@gmail.com
Blog: http://waelson.com.br

2. Agenda
O
que é Ajax?
 Por que usar?
 Quando usar?
 Arquitetura Web
 XML
 Minha Primeira Aplicação Ajax

3. O que é Ajax?
 Solução
Client-Side;
 Assyncronous JavaScript And XML
 Não é uma linguagem;

4. Por que usar?
 Comunicação



Cada requisição uma resposta;
Cada resposta vem um página inteira;
É preciso esperar a página ser carregada para
usar a aplicação.
 Ajax


HTTP ineficiente;
e a comunicação assíncrona
Pequenos trechos podem ser transmitidos
assincronamente;
Permite usar a aplicação enquanto os dados são
transferidos;

5. Por que usar?

6. Por que usar?

7. Quando usar Ajax?
 Em
formulários (envio e validação);
 Comunicação user-to-user;
 Votação;
 Filtrar e ordenar dados;
 Sugestão de texto.

8. Arquitetura Web
 Baseada
no protocolo HTTP;
 Protocolo leve, não mantém estado;

9. Arquitetura Web

Exemplo: Pedido / Resposta

10. XML
 Metalinguagem;
 Definida
pela W3C;
 Define informações estruturadas;
 Usada para troca de informações;
 Estrutura em árvore;

11. XML

12. Minha Primeira Aplicação Ajax
 Definição
da Tela

13. Minha Primeira Aplicação Ajax
 Passos




Recupere o XMLHttpRequest;
Crie um request;
Obtenha a resposta;
Trate a resposta

14. Minha Primeira Aplicação Ajax
 Recupere
o XMLHttpRequest

Responsável pela comunicação assíncrona;

Recuperado nos browsers modelos (IE 7 e Firefox)
httpRequest = new XMLHttpRequest();

Browsers Microsoft antigos;
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");

15. Minha Primeira Aplicação Ajax

16. Minha Primeira Aplicação Ajax

17. Minha Primeira Aplicação Ajax
 Entendendo





o Método “consultarNomePorId()”
Pegue o parâmetro que será enviado ao servidor
Monte a URL para onde se deseja enviar a
requisição
Abra uma conexão com o servidor
Defina a função que será chamada quando
terminar;
Envie a requisição;

18. Minha Primeira Aplicação Ajax
 Entendendo




o Método “atualizarPagina()”
Não faça nada até que o readyState seja 4
Se a resposta da requisição for 200 (sucesso)
Use o método responseText do objeto
XMLHttpRequest para recuperar a resposta do
servidor;
Exiba a resposta na caixa de texto.

19. Minha Primeira Aplicação Ajax
 Ready



States
Pode haver 5 estados durante a requisição e
resposta assíncrona;
São lidos através da propriedade readyState
São eles:





0 – não inicializado
1 – não enviado
2 – sendo processado (cabeçalho)
3 – sendo processado (parte dos dados)
4 - concluído

20. Fonte: Introdução a Ajax (Helder Rocha)
http://www.argonavis.com.br