curso de gestão da informação prof. dr. daniel a. furtado módulo 6 – web dinâmica –...

Programação para InternetCurso de Gestão da Informação

Prof. Dr. Daniel A. FurtadoMódulo 6 – Web Dinâmica – Introdução ao AJAX

Universidade Federal de UberlândiaFaculdade de Computação

Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools 2

AJAX = Asynchronous JavaScript and XML.

AJAX não é uma nova linguagem de programação, mas uma nova maneira de usar padrões já existentes;

AJAX é uma técnica utilizada para criar websites rápidos e dinâmicos;

AJAX possibilita trocar dados com o servidor e atualizar partes de uma página web sem precisar recarregar a página inteira;

Com AJAX, a comunicação com o servidor pode ser realizada de forma assíncrona (em segundo plano), sem interromper as funcionalidades da página corrente.

AJAX – Introdução


Google Maps, Gmail, Youtube, Facebook

Formulários de endereços (preenchimento automático do endereço assim que o CEP é digitado);

Diversas outras.

AJAX – Exemplos de Aplicações


Ao consultar a tabela FIPE, os modelos de carros são carregados após seleção do fabricante.



Sugestões de buscas do Google



Como AJAX Funciona


Objeto XMLHttpRequest

JavaScript/DOM

CSS

XML, JSON (formato para transferência de dados)

AJAX utiliza uma combinação de tecnologias


Disponibilizado em todas as versões mais novas dos principais navegadores, como o Internet Explorer, Firefox, Google Chrome, Safari e Opera;

O objeto permite: Atualizar a página sem recarregá-la; Solicitar dados ao servidor depois que a página é carregada; Receber dados do servidor depois que a página é carregada; Enviar dados em segundo plano;

Sintaxe para criá-lo dentro de um script JavaScript: var xmlhttp = new XMLHttpRequest();

Objeto XMLHttpRequest


O método open utilizado para especificar o tipo da requisição a ser realizada, a URL do arquivo no servidor e se a requisição deve ser tratada de maneira síncrona ou assíncrona; Síncrona: a função JavaScript ficará aguardando pela resposta do

servidor; Assíncrona: a função JavaScript prossegue com sua execução

enquanto a requisição é tratada em segundo plano;

Sintaxe: open(method,url,async), onde:

method: é o tipo da requisição: GET ou POST;url: o local do arquivo no servidor;async: true para requisição assíncrona ou false, para síncrona.

Método open do objeto XMLHttpRequest


O método GET é mais simples e mais rápido que o método

POST e pode ser utilizado na maioria dos casos;

Entretanto, o método POST deve ser utilizando quando:

É necessário enviar grandes quantidades de dados para o servidor

(POST não tem limite de tamanho);

É necessário enviar dados fornecidos pelo usuário, pois é mais robusto e

seguro que o método GET;

Qual método usar: GET ou POST


O método send do objeto XMLHttpRequest é utilizado para enviar efetivamente a requisição;

Sintaxe: send(string), onde string é utilizada apenas com o método POST;

Exemplo:

xmlhttp.open("GET","script.php",true);xmlhttp.send();

Para evitar resultados em cache, pode-se utilizar o método JavaScript random para gerar uma URL única a cada chamada:

xmlhttp.open("GET","script.php?t=" + Math.random(),true);xmlhttp.send();

Método send do objeto XMLHttpRequest


Com o método GET, os dados são enviados ao servidor utilizando a própria URL;

Exemplo:

xmlhttp.open("GET","script.php?pnome=Henry&unome=Ford",true);xmlhttp.send();

Utilizando o método GET para enviar dados


Com o método POST, os dados podem ser enviados ao servidor como um argumento do método send;

Entretanto, é necessário enviar um cabeçalho utilizando o método setRequestHeader;

Exemplo:xmlhttp.open("POST","script.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("pnome=Henry&unome=Ford");

Utilizando o método POST para enviar dados


A propriedade readyState do objeto XMLHttpRequest armazena o estado atual do objeto, que varia de 0 a 4:

0: requisição não iniciada;1: conexão com o servidor estabelecida;2: requisição recebida;3: processando requisição;4: requisição encerrada e com a resposta pronta.

A propriedade readyState é comumente utilizada com a propriedade status, cujo valor pode ser:

200: "OK"404: Page not found

Propriedade readyState


Utilizado para indicar uma função a ser executada quando a requisição tiver sido processada e o resultado estiver pronto;

Quando readyState for igual a 4 e status for igual a 200, significa que a resposta está pronta.

O Evento onreadystatechange


Caso o servidor retorne algum dado na forma textual, utilize a propriedade responseText para resgatá-lo;

Exemplo: document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Propriedade responseText


1. Crie o objeto XMLHttpRequest;

2. Para chamadas assíncronas, especifique uma função para o evento onreadystatechange do objeto XMLHttpRequest. Esta função será chamada quando a operação requisitada for concluída.

3. Utilize o método open do objeto para indicar o tipo de requisição, a URL do script e se a requisição deve ser síncrona ou assíncrona;

4. Utilize o método send para enviar a requisição.

AJAX – procedimento padrão

AJAX – Exemplo 11. <html><head><meta charset="UTF-8"><script>2. function showHint(str) 3. {4. if (str.length == 0) 5. { 6. document.getElementById("txtHint").innerHTML = "";7. return;8. } 9. else 10. { 11. var xmlhttp = new XMLHttpRequest();12. xmlhttp.onreadystatechange = function() 13. {14. if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 15. {16. document.getElementById("txtHint").innerHTML =

xmlhttp.responseText;17. }18. }19. 20. xmlhttp.open("GET", "gethint.php?q=" + str, true);21. xmlhttp.send();22. }23. }24. </script></head>25. <body>26. <p><b>Comece a digitar um nome no campo a seguir</b></p>27. <form> Nome: <input type="text" onkeyup="showHint(this.value)"> </form>28. <p>Sugestões: <span id="txtHint"></span></p>29. </body></html>

Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools18

AJAX – Exemplo 11. <?php // arquivo gethint.php2. // vetor de nomes3. $a[] = "Anna";4. $a[] = "Brittany";5. $a[] = "Cinderella";6. $a[] = "Diana";7. $a[] = "Eva";8. $a[] = "Fiona";9. $a[] = "Gunda";10. $a[] = "Hege";11. $a[] = "Inga";12. $a[] = "Johanna";13. $a[] = "Kitty";14. $a[] = "Linda";15. $a[] = "Nina";16. $a[] = "Ophelia";17. $a[] = "Petunia";18. $a[] = "Amanda";19. $a[] = "Raquel";20. $a[] = "Cindy";21. $a[] = "Doris";22. $a[] = "Eve";23. $a[] = "Evita";24. $a[] = "Sunniva";25. $a[] = "Tove";26. $a[] = "Unni";27. $a[] = "Violet";28. $a[] = "Liza";29. $a[] = "Elizabeth";30. $a[] = "Ellen";31. $a[] = "Wenche";32. $a[] = "Vicky";


AJAX – Exemplo 11. // obtem o parametro q da URL2. $q = $_REQUEST["q"];

3. $dica = "";

4. if ($q !== "") 5. {6. $q = strtolower($q);7. $len=strlen($q);8. foreach($a as $name) 9. {10. if (stristr($q, substr($name, 0, $len))) 11. {12. if ($dica == "") 13. $dica = $name;14. else15. $dica .= ", $name"; 16. }17. }18. }

19. // Exibe "nenhuma sugestao" se nenhuma dica foi encontrada20. echo $dica === "" ? "nenhuma sugestao" : $dica;21. ?>



www.w3schools.com/ajax

Referências

curso de gestão da informação prof. dr. daniel a. furtado módulo 6 – web dinâmica –...

Documents