treinamento ajax 02
TRANSCRIPT
![Page 2: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/2.jpg)
Agenda
O que é Ajax? Por que usar? Quando usar? Arquitetura Web XML Minha Primeira Aplicação Ajax
![Page 3: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/3.jpg)
O que é Ajax?
Solução Client-Side; Assyncronous JavaScript And XML Não é uma linguagem;
![Page 4: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/4.jpg)
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;
![Page 5: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/5.jpg)
Por que usar?
![Page 6: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/6.jpg)
Por que usar?
![Page 7: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/7.jpg)
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.
![Page 8: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/8.jpg)
Arquitetura Web
Baseada no protocolo HTTP; Protocolo leve, não mantém estado;
![Page 9: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/9.jpg)
Arquitetura Web Exemplo: Pedido / Resposta
![Page 10: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/10.jpg)
XML
Metalinguagem; Definida pela W3C; Define informações estruturadas; Usada para troca de informações; Estrutura em árvore;
![Page 11: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/11.jpg)
XML
![Page 12: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/12.jpg)
Minha Primeira Aplicação Ajax
Definição da Tela
![Page 13: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/13.jpg)
Minha Primeira Aplicação Ajax
Passos Recupere o XMLHttpRequest; Crie um request; Obtenha a resposta; Trate a resposta
![Page 14: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/14.jpg)
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");
![Page 15: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/15.jpg)
Minha Primeira Aplicação Ajax
![Page 16: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/16.jpg)
Minha Primeira Aplicação Ajax
![Page 17: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/17.jpg)
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;
![Page 18: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/18.jpg)
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.
![Page 19: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/19.jpg)
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
![Page 20: Treinamento ajax 02](https://reader036.vdocuments.mx/reader036/viewer/2022062514/558b81bcd8b42aa63b8b45b6/html5/thumbnails/20.jpg)
Fonte: Introdução a Ajax (Helder Rocha)
http://www.argonavis.com.br