Programação para Internet Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 6 – Web Dinâmica – Introdução ao AJAX

AJAX – Introdução 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. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplos de Aplicações Google Maps, Gmail, Youtube, Facebook Formulários de endereços (preenchimento automático do endereço assim que o CEP é digitado); Diversas outras. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplos de Aplicações Ao consultar a tabela FIPE, os modelos de carros são carregados após seleção do fabricante. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplos de Aplicações Sugestões de buscas do Google Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Como AJAX Funciona Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX utiliza uma combinação de tecnologias Objeto XMLHttpRequest JavaScript/DOM CSS XML, JSON (formato para transferência de dados) Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Objeto XMLHttpRequest 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(); Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Método open do 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. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Qual método usar: GET ou POST 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; Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Método send do objeto XMLHttpRequest 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(); Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Utilizando o método GET para enviar dados 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(); Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Utilizando o método POST 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"); Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Propriedade readyState 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 Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

O Evento onreadystatechange 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. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Propriedade responseText Caso o servidor retorne algum dado na forma textual, utilize a propriedade responseText para resgatá-lo; Exemplo: document.getElementById("myDiv").innerHTML=xmlhttp.responseText; Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – procedimento padrão Crie o objeto XMLHttpRequest; 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. 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; Utilize o método send para enviar a requisição. Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplo 1 <html><head><meta charset="UTF-8"><script> function showHint(str) { if (str.length == 0) document.getElementById("txtHint").innerHTML = ""; return; } else var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() if (xmlhttp.readyState == 4 && xmlhttp.status == 200) document.getElementById("txtHint").innerHTML = xmlhttp.responseText; xmlhttp.open("GET", "gethint.php?q=" + str, true); xmlhttp.send(); </script></head> <body> <p><b>Comece a digitar um nome no campo a seguir</b></p> <form> Nome: <input type="text" onkeyup="showHint(this.value)"> </form> <p>Sugestões: <span id="txtHint"></span></p> </body></html> Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplo 1 <?php // arquivo gethint.php // vetor de nomes $a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = "Gunda"; $a[] = "Hege"; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris"; $a[] = "Eve"; $a[] = "Evita"; $a[] = "Sunniva"; $a[] = "Tove"; $a[] = "Unni"; $a[] = "Violet"; $a[] = "Liza"; $a[] = "Elizabeth"; $a[] = "Ellen"; $a[] = "Wenche"; $a[] = "Vicky"; Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

AJAX – Exemplo 1 // obtem o parametro q da URL $q = $_REQUEST["q"]; $dica = ""; if ($q !== "") { $q = strtolower($q); $len=strlen($q); foreach($a as $name) if (stristr($q, substr($name, 0, $len))) if ($dica == "") $dica = $name; else $dica .= ", $name"; } // Exibe "nenhuma sugestao" se nenhuma dica foi encontrada echo $dica === "" ? "nenhuma sugestao" : $dica; ?> Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools

Referências www.w3schools.com/ajax Programação para Internet - Prof. Dr. Daniel A. Furtado - w3schools