Treinamento AJAX
Waelson Negreiros
Email: [email protected]
Blog: http://waelson.com.br
Agenda






O que é Ajax?
Por que usar?
Quando usar?
Arquitetura Web
XML
Minha Primeira Aplicação Ajax
O que é Ajax?



Solução Client-Side;
Assyncronous JavaScript And XML
Não é uma linguagem;
Por que usar?

Comunicação HTTP ineficiente;




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 e a comunicação assíncrona


Pequenos trechos podem ser transmitidos
assincronamente;
Permite usar a aplicação enquanto os dados são
transferidos;
Por que usar?
Por que usar?
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.
Arquitetura Web


Baseada no protocolo HTTP;
Protocolo leve, não mantém estado;
Arquitetura Web

Exemplo: Pedido / Resposta
XML





Metalinguagem;
Definida pela W3C;
Define informações estruturadas;
Usada para troca de informações;
Estrutura em árvore;
XML
Minha Primeira Aplicação Ajax

Definição da Tela
Minha Primeira Aplicação Ajax

Passos




Recupere o XMLHttpRequest;
Crie um request;
Obtenha a resposta;
Trate a resposta
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");
Minha Primeira Aplicação Ajax
Minha Primeira Aplicação Ajax
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;
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.
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
Fonte: Introdução a Ajax (Helder Rocha)
http://www.argonavis.com.br