PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

Tamanho: px

Começar a partir da página:

Download "PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda"

Augusto Baltazar Marroquim Faro
8 Há anos
Visualizações:

1 PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda

2 INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML.

3 INTRODUÇÃO Ao pesquisar sobre o assunto são encontradas as seguintes afirmações: AJAX vem do inglês Assynchronous Javascript and XML; AJAX não é uma linguagem de programação, mas uma técnica de criar aplicações para web melhores, mais rápidas e mais interativas. AJAX não é uma tecnologia e sim uma metodologia de utilizar diferentes tecnologias em conjunto. O google foi uma das pioneiras a utilizar esta g g p metodologia e apresentar ao mundo o AJAX.

melhores, mais rápidas e mais interativas.

4 INTRODUÇÃO As grandes vantagens do uso desta metodologia é que não é necessário esperar para que a página seja carregada a cada interação. E a medida que é utilizada a aplicação a mesma vai se moldando às necessidades do usuário. Com AJAX, o Javascript se comunica diretamente com o servidor por meio de objetos. Com esses objetos o Javascript pode tratar dados com o servidor web sem recarregar a página.

E a medida que é utilizada a aplicação a mesma vai se moldando às necessidades do usuário.

5 INTRODUÇÃO Utilizando o Javascript tradicional, ao fazer uma requisição ou enviar uma informação para um banco de dados, é necessário criar um formulário HTML e fazer com que o usuário clique no botão de submit. Em seguida, o usuário deve aguardar uma outra página com as respostas enviadas pelo servidor. Isso faz aplicações rodarem lentamente e resulta em pouca interação com o usuário.

6 INTRODUÇÃO Como mencionado, com AJAX o Javascript se comunica diretamente com o servidor através de um objeto chamado XMLHttpRequest. Além disso, pode-se atualizar dinamicamente apenas partes do sistema, sem atualizar toda a página.

7 EXEMPLO Executar o arquivo testesemajax.html Digitar um nome e clicar em Enviar Note que toda a página é carregada novamente Com Ajax pode ser utilizado um botão de verificar se existe login ou por evento do cursor.

8 TRADICIONAL X AJAX

9 AJAX Como mencionado, a comunicação entre o Javascript e o servidor é realizada pelo objeto: XMLHttpRequest. Isso permite a comunicação assíncrona com o servidor, sem necessidade da atualização da página por completo.

Isso permite a comunicação assíncrona com o servidor,

10 FLUXO CLÁSSICO É retornado uma página inteira! i

11 FLUXO AJAX É retornado apenas dados!

12 OBJETO XMLHTTPREQUEST A Microsoft implementou nos IE s como um objeto ActiveX enquanto que em outros browsers implementaram de forma nativa. Por esse motivo, é necessário sempre verificar se o browser do usuário trabalha com XMLHTTP ou XMLHttpRequest. Vamos criar o objeto que faz a comunicação com o servidor.

Por esse motivo, é necessário sempre verificar se o browser do usuário

13 function IniciaAjax() { var req; ajax.js try { req = new ActiveXObject( Microsoft.XMLHTTP"); // Internet Explorer } catch(e) { try { req = new ActiveXObject( Msxml2.XMLHTTP"); } catch(ex) { try { req = new XMLHttpRequest(); // Mozilla, Safari,... } catch(exc) { alert( Este browser não tem recursos para uso do Ajax!"); req = null; } } } return req; }

XMLHTTP"); } catch(ex) { try { req = new XMLHttpRequest(); // Mozilla, Safari,.

14 Vamos testar o código de iniciar o Ajax. <head> <script type="text/javascript" src="ajax.js"></script> <title>testando o AJAX</title> </head> <body> <p> Reparem que este texto não será atualizado</p> <input type="button" value="clique para iniciar o ajax" onclick="iniciaajax();" /> </body> princ.html Colocar um alert(req); antes do return no arquivo ajax.js. j

será atualizado</p> <input type="button" value="clique para iniciar o ajax"

16 Após o objeto de conexão estar pronto, podemos começar a nos comunicar com o servidor. Para isso usaremos o método OPEN do objeto. Este método permite abrir um documento, passar parâmetros e capturar uma resposta. Este método funciona com o auxílio do método SEND. OPEN: aceita 5 parâmetros: open("método ", "URL ", sinaldesincronização,, "nomeusuário", "senha"); Sendo: método (GET ou POST) e URL obrigatórios a informação. Sinaldesincronização: se desejamos que seja síncrona ou assíncrona. Exemplo: xmlhttp = new XMLHttpRequest(); t() xmlhttp.open("get", "/dados.xml");

OPEN: aceita 5 parâmetros: open("método ", "URL ", sinaldesincronização,, "nomeusuário", "senha"); Sendo: método (GET ou POST) e URL

17 O método SEND ativa a conexão e faz a requisição de informações ao documento aberto pelo método OPEN. Aceita apenas um único parâmetro, onde este, é usado apenas quando estamos passando dados extras para o documento aberto pelo método POST.

Aceita apenas um único parâmetro, onde este, é usado apenas

18 Função de requisitar documento: function Requisitar(arquivo){ var reqajax = IniciaAjax(); if (reqajax){ // tipo requisição, url, modo requisição assincrona ou não reqajax.open("get", arquivo, true); Adicionar em ajax.js reqajax.onreadystatechange = function(){ mostraresposta(reqajax); }; // método get não precisa enviar nenhum valor no send reqajax.send(null); } }

open("get", arquivo, true); Adicionar em ajax.js reqajax.

19 Adicionar no princ.html: princ.html <input type="button" value="clique para requisitar algo" id="ajax.js" onclick="requisitar(this.id);" />

20 A propriedade onreadystatechange nos permite associar uma função (ou código Javascript) para ser executado toda vez que o evento de mudança de estado do objeto XMLHttpRequest for alterado. Ou seja, podemos definir i o que o script fará quando o objeto XMLHttpRequest confirmar que recebeu um retorno do documento web.

21 0(Não Iniciado): 1(Carregando): 2(Carregado): 3(Incompleto): 4(Completo): readystate O Objeto foi criado mas o método open() não foi chamado ainda. O método open() foi chamado mas a requisição não foi enviada ainda. A requisição foi enviada. Uma parte da resposta do servidor foi recebida. Todos as informações foram recebidas e a conexão foi fechada com sucesso.

22 status 200 OK 304 OK, mas sem alteração do texto 404 Página não encontrada responsetext String que contém os dados retornados pelo servidor web.

23 A propriedade responsetext contém o retorno do A propriedade responsetext contém o retorno do documento web acessado na forma de uma string, ou seja, devolve o resultado como um texto.

24 Adicionar em ajax.js Mostrar os dados: function mostraresposta(reqajax) { if (reqajax.readystate == 4) { if(reqajax.status == 200 reqajax.status == 304) { var inserir = document.getelementbyid("local"); inserir.innerhtml i i = reqajax.responsetext; } else { alert("houston we have a problem!"+req +req.statustext); } } }

25 Adicionar no princ.html: princ.html <div id="local"> </div>

26 princ.html Utilizar o método Post adicionar no princ.html: <form id="form" action="dados.php" onsubmit="enviar(); return false;"> <p> Informe seu Nome: <input type="text" id="nome" name="nome" nome /></p> <input type="submit" value="clique para enviar"/> </form>

27 ajax.jsjs Adicionar no ajax.js: function Enviar(arquivo) { var reqajax = IniciaAjax(); if (reqajax){ reqajax.open("post", document.forms.form.action, true); reqajax.setrequestheader("content-type", equest eade te t "application/x- www-form-urlencoded"); reqajax.onreadystatechange = function(){ mostraresposta(reqajax); }; var datapost = 'nome='+document.getelementbyid('nome').value; reqajax.send(datapost); } }

28 <?php $nome = $_REQUEST["nome"]; if (!empty($nome)) echo "Bem vindo $nome"; else echo "Nome não informado";?> dados.php

29 BONS TUTORIAIS Segue uma lista de bons tutorias sobre AJAX. Ajax Sistemas para Linux Consulta ao banco com PHP e AJAX

Documentos relacionados

Ajax Asynchronous JavaScript and Xml

Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicações Web mais interativas, responsivas, e fáceis de usar que aplicações Web tradicionais. Numa aplicação Web tradicional quando se prime