Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 10 Web Dinâmica Introdução ao AJAX
AJAX Introdução AJAX = Asynchronous JavaScript and XML; Não é uma linguagem de programação; É uma técnica utilizada para criar websites rápidos e dinâmicos; 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 utiliza uma combinação de tecnologias: Objeto XMLHttpRequest, do browser (para requisitar dados/serviço ao servidor) JavaScript e HTML DOM (para mostrar ou utilizar os dados) CSS, XML, JSON (formato para transferência de dados) Ref: adaptado de w3schools.com Programação para Internet Prof. Dr. Daniel A. Furtado 2
AJAX Exemplos de Aplicações A tecnologia é amplamente utilizada (até mesmo por empresas e serviços de renome como Google Maps, Gmail, YouTube e Facebook); Por exemplo, pode-se utilizar AJAX para realizar o preenchimento automático dos campos de endereço em um formulário Web assim que o usuário informar o CEP; Outros exemplos: Sugestões de buscas no Google Ao buscar um modelo de carro na tabela FIPE, os modelos são carregados, em segundo plano, após seleção do fabricante. Ref: adaptado de w3schools.com Programação para Internet Prof. Dr. Daniel A. Furtado 3
Programação para Internet Prof. Dr. Daniel A. Furtado 4 Como AJAX Funciona 1. Ocorre um evento na página web (página carregada, botão pressionado, opção selecionada, etc.); 2. Cria-se um objeto XMLHttpRequest utilizando JavaScript; 3. Utiliza-se o objeto para enviar uma requisição HTTP ao servidor; 4. O servidor Web processa a requisição (enquanto isso, a página Web no cliente fica livre para executar outras operações*); 5. O servidor envia uma resposta de volta para a página Web; 6. A resposta é lida pela página utilizando JavaScript e uma ação apropriada é então executada (como atualização da página, apresentação de informação detalhada, etc.) *No caso da requisição ser assíncrona Ref: adaptado de w3schools.com
Como AJAX Funciona Ref: adaptado de w3schools.com Programação para Internet Prof. Dr. Daniel A. Furtado 5
Requisição Síncrona x Assíncrona Na prática, a maior parte das requisições AJAX é realizada de maneira assíncrona. Porém, também é possível realizá-la de forma síncrona. Requisição Síncrona A função JavaScript que inicia a requisição ficará bloqueada, aguardando pela resposta do servidor; Não é possível executar nenhum outro código JavaScript enquanto a requisição estiver sendo processada no servidor. Requisição Assíncrona A função JavaScript prossegue com sua execução enquanto a requisição é tratada em segundo plano. Isto significa que é possível executar outras operações com JavaScript enquanto o servidor processa a requisição; O andamento da requisição pode ser acompanhado no JavaScript por meio de eventos, sendo possível executar uma ação assim que a requisição terminar. Programação para Internet Prof. Dr. Daniel A. Furtado 6
Exemplo de Requisição Assíncrona - Método GET <script> var xmlhttp = new XMLHttpRequest(); var method = 'GET'; var url = "ARQUIVO_OU_SCRIPT_SERVICO"; xmlhttp.open(method, url, true); xmlhttp.onload = function () { if (xmlhttp.status == 200) { // Coloque aqui as operações necessárias para tratar o resultado // da requisição quando finalizada com sucesso document.getelementbyid("demo").innerhtml = xmlhttp.responsetext; } else { // Ocorreu alguma falha no processamento da requisição e o servidor // retornou um código de status diferente de '200 Ok'. // Coloque o tratamento de erro aqui. alert("ocorreu um erro ao processar a requisição: " + xmlhttp.status + xmlhttp.responsetext); } }; xmlhttp.onerror = function () { // Ocorreu um erro no processamento da requisição a nível de rede }; // Coloque o tratamento aqui alert("ocorreu um erro ao processar a requisição"); xmlhttp.send(); </script> Programação para Internet Prof. Dr. Daniel A. Furtado 7
Exemplo Anexo Testar e estudar os exemplos anexos: Exemplo1 Exemplo2A Exemplo2B Exemplo3 Programação para Internet Prof. Dr. Daniel A. Furtado 8
Métodos do Objeto XMLHttpRequest Método new XMLHttpRequest() Descrição Cria um novo objeto XMLHttpRequest open(method,url,async) send() send(string) setrequestheader() Configura a requisição, onde: method: método de requisição HTTP: GET, POST, PUT, DELETE, etc. url: local do arquivo no servidor async: true (assíncrono) ou false (síncrono) Envia a requisição para o servidor Usado para requisições GET Envia a requisição para o servidor Usado para requisições POST Adiciona um par rótulo/valor ao cabeçalho da requisição para ser enviado O arquivo pode ser de qualquer tipo, como.txt,.xml ou um arquivo de script, como.php ou.asp, o qual pode executar ações no servidor antes de enviar uma resposta de volta. Programação para Internet Prof. Dr. Daniel A. Furtado Adaptado de W3Schools.com 9
Propriedades do Objeto XMLHttpRequest Propriedade Descrição onreadystatechange Utilizado para indicar a função a ser chamada quando a propriedade readystate muda de valor readystate Mantém o estado da requisição: 0: requisição não iniciada 1: conexão com o servidor estabelecida 2: requisição recebida pelo servidor 3: requisição em processamento 4: requisição finalizada e resposta pronta responsetext responsexml status statustext Permite acessar os dados retornados na forma textual Permite acessar os dados retornados no formato XML Retorna o status-number da requisição: 200: "OK" 403: "Forbidden" 404: "Not Found" Para a lista completa acesse Http Messages Reference Retorna o status-text (isto é, "OK" ou "Not Found") Programação para Internet Prof. Dr. Daniel A. Furtado Adaptado de W3Schools.com 10
AJAX Exemplo 2 Outra Forma Programação para Internet Prof. Dr. Daniel A. Furtado 11 <!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"> <script> function mostrasugestao(str) { if (str.length == 0) { document.getelementbyid("textosugestao").innerhtml = ""; return; } else { // técnica AJAX para buscar dicas de nomes no servidor, var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid("textosugestao").innerhtml = xmlhttp.responsetext; } } xmlhttp.open("get", "ex01-buscasugestao.php?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <h3>comece a digitar um nome no campo a seguir:</h3> <form> Nome: <input type="text" onkeyup="mostrasugestao(this.value)"> </form> <p>sugestões: <span id="textosugestao"></span></p> </body></html> Ref: adaptado de w3schools.com
Enviando dados com AJAX: GET x POST Enviando dados pelo método GET, pela URL xhttp.open("get", "teste.php?primeironome=henry&ultimonome=ford", true); xhttp.send(); Enviando dados pelo método POST xhttp.open("post", "teste.php", true); xhttp.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhttp.send("primeironome=henry&ultimonome=ford"); Ref: adaptado de w3schools.com Programação para Internet Prof. Dr. Daniel A. Furtado 12
JSON JavaScript Object Notation Programação para Internet Prof. Dr. Daniel A. Furtado 13
Programação para Internet Prof. Dr. Daniel A. Furtado 14 Objetos Simples em JavaScript - Relembrando Objetos simples em JavaScript (PlainObject) podem ser utilizados para armazenar uma coleção de propriedades de entidades do mundo real; Tais objetos podem ser definidos por meio de uma lista de pares do tipo nomedapropriedade : valor, separados por vírgula e colocados entre chaves. Exemplo: var pessoa = { pnome:"john", unome:"doe", idade:50, eyecolor:"blue" }; alert(pessoa.pnome); // acessa a propriedade pnome do objeto pessoa alert(pessoa.idade); // acessa a propriedade idade do objeto pessoa Ref: adaptado de w3schools.com
Programação para Internet Prof. Dr. Daniel A. Furtado 15 JSON Introdução O que é JSON? JSON é um acrônimo para JavaScript Object Notation; É um formato para intercâmbio de dados baseado em texto; Por ser textual, é independente de linguagem. Intercâmbio de Dados Os dados trocados entre um servidor Web e um navegador são comumente do tipo texto; Como JSON é baseado em texto, pode-se converter um objeto JavaScript para JSON e então enviá-lo ao servidor; Também é possível converter uma string de dados no formato JSON (recebido do servidor) em um objeto JavaScript; Dessa forma, os dados podem ser convertidos diretamente em objetos JavaScript, sem a necessidade de executar procedimentos complexos para processamento do texto e extração dos dados. Ref: adaptado de w3schools.com
Programação para Internet Prof. Dr. Daniel A. Furtado 16 JSON - Sintaxe A sintaxe do formato JSON é derivada da notação de objetos em JavaScript: Os dados são organizados em pares (nome : valor), separados por vírgula; Objetos são colocados entre chaves; Vetores são colocados entre colchetes. Em JSON, os nomes das propriedades (keys) devem ser strings colocadas sempre entre aspas duplas*; { "nome":"elon", "sobrenome":"musk", "idade": 45 } *Ao contrário dos objetos simples em JavaScript, onde é permitido ter os nomes de campos sem aspas. Ref: adaptado de w3schools.com
Recebendo dados JSON do servidor Objetos em PHP podem ser convertidos para o formato JSON por meio da função json_encode Uma string JSON é convertida para um objeto JavaScript por meio do método JSON.parse Código no servidor (PHP) <?php $myobj->name = "John"; $myobj->age = 30; $myobj->city = "New York"; $myjson = json_encode($myobj); echo $myjson;?> Código no cliente (JavaScript) var xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { var myobj = JSON.parse(this.responseText); var div = document.getelementbyid("demo"); div.innerhtml = myobj.name; }; xmlhttp.open("get", "demo_file.php", true); xmlhttp.send(); OBS: Arrays em PHP também podem ser convertidos para JSON. Veja exemplo em https://www.w3schools.com/js/js_json_php.asp Programação para Internet Prof. Dr. Daniel A. Furtado Adaptado de W3Schools.com 17
AJAX com JQuery Programação para Internet Prof. Dr. Daniel A. Furtado 18
Utilizando AJAX por meio da biblioteca jquery Uma outra maneira de efetuar uma requisição AJAX é utilizando o método $.ajax da biblioteca jquery: $.ajax({ url: /* endereco do arquivo no servidor, entre aspas */, type: /* método de envio: GET, POST, PUT ou DELETE, entre aspas */, async: /* true para assíncrona ou false para síncrona */, datatype: /* o tipo dos dados esperados como resposta do servidor pode ser xml, json, script ou html */, data: /* dados a serem enviados: objeto JavaScript, string ou array */, success: function(result) { }, // Tratar aqui a resposta do servidor // quando a requisição é finalizada com sucesso. // Processar os dados recebidos // É RECOMENDADO CONFIRMAR O SUCESSO, pois em alguns casos // o script no servidor pode encerrar notificando sucesso mesmo // na presença de erros, como em casos de erros de sintaxe de código, por exemplo. // (veja mais detalhes no arquivo Ex-04-endereco.html). error: function(xhr, status, error) { } }); // tratar aqui quando ocorrer um erro alert(status + error + xhr.responsetext); Programação para Internet Prof. Dr. Daniel A. Furtado 19
Programação para Internet Prof. Dr. Daniel A. Furtado 20 AJAX com jquery Testar e analisar cuidadosamente os exemplos anexos: Exemplo4 Exemplo5
Programação para Internet Prof. Dr. Daniel A. Furtado 21 Método $.load $(selector).load(url,data,callback); $("#div1").load("demo_test.txt");
Referências www.w3schools.com/ajax api.jquery.com/jquery.ajax/ Programação para Internet Prof. Dr. Daniel A. Furtado 22