treinamento ajax 02

Treinamento AJAX

Waelson NegreirosEmail: waelson@gmail.comBlog: 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