Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Intro Duca o Ajax

    Enviado por

    afst
    2 visualizações10 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    2 visualizações10 páginas

    Intro Duca o Ajax

    Enviado por

    afst

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 10

    AJAX

    AJAX acrnimo de Asynchronous JavaScript And XML. um tipo de programao que se tornou popular in 2005 pela Google (com Google Suggest). AJAX no uma nova linguagem de programao, mas uma nova forma de utilizar os padres existentes. Com o AJAX se pode criar aplicaes WEB melhores, mais rpidos e mais amigveis. AJAX baseado em JavaScript e requisies HTTP. Com AJAX, o JavaScript se comunica diretamente com o servidor utilizando o objeto XMLHttpRequest do JavaScript. Com este objeto se pode trocar dados com um servidor WEB sem a necessidade de recarregar a pgina. AJAX utiliza a transferncia de dados assncrona entre o navegador e o servidor WEB, permitindo que as pginas WEB faam pequenas requisies ao servidor WEB no lugar de uma pgina inteira. Esta tecnologia independe do servidor WEB. AJAX baseado nos seguintes padres WEB: JavaScript, XML, HTML, CSS. Em um cdigo JavaScript tradicional, se desejar receber qualquer informao do banco de dados ou um arquivo do servidor, ou enviar uma informao do usurio para um servidor, ter-se- criar um formulrio HTML e enviar por GET ou POST dados para o servidor. O usurio ter que clicar no boto SUBMIT para enviar e receber as informaes, esperar que o servidor para responder e ento uma nova pgina ser carregada com os resultados. Porque o servidor retorna uma nova pgina cada vez que o usurio submete uma entrada, as aplicaes web so lentas e menos amigveis. Para uma aplicao tradicional, uma pgina pode fazer uma requisio para, e receber uma resposta do servidor WEB sem a necessidade de recarregar a pgina. O usurio ficar na mesma pgina e no notar que o script requisitou pginas, ou enviou dados para o servidor em background.

    Objeto XMLHttpRequest
    Utilizando o objeto XMLHttpRequest, o programador web pode atualizar uma pgina com dados do servidor sem necessidade de recarregar a pgina. O Google em http://www.google.com/webhp?complete=1&hl=en fez com que AJAX se tornasse popular. Google Suggest esta utilizando objeto XMLHttpRequiest para criar uma interface web dinmica, quando o usurio inicia digitando na caixa de pesquisa, um JavaScript envia as letras para o servidor e o servidor retorna uma lista de sugestes. O objeto XMLHttpRequest suportado por Internet Explorer 5 ou superior, Safri 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Nestscape 7.

    Primeira aplicao AJAX


    Primeiro, ser criado um formulrio padro HTML com dois campos: nome e hora. O campo nome ser preenchido pelo usurio e o campo hora ser preenchido utilizando-se AJAX.

    O arquivo HTML ter o nome testeAjax.html, e seu contedo ser:


    <html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html>

    Destaca-se que o formulrio no possui o boto Submit.

    Suporte AJAX do navegador


    A chave do AJAX o objeto XMLHttpRequest. Navegadores diferentes utilizam mtodos diferentes para criar o objeto XMLHttpRequest Internet Explorer utiliza um ActiveXObject, enquanto que outros navegadores utilizam um objeto JavaScript chamado XMLHttpRequest. Para criar este objeto e trabalhar com navegadores diferentes, ser utilizado o comando try and catch.
    <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Seu navegador no suporta AJAX!"); return false; } } } } </script> <form name="myForm"> Nome: <input type="text" name="nome" /> Time: <input type="text" name="time" /> </form> </body> </html>

    Primeiro cria-se uma varivel xmlHttp para manter o objeto XMLHttpRequest. Ento tenta-se criar o objeto com XMLHttp=new XMLHttpRequest(). Isto serve para os navegadores Firefox, Opera e Safri. Se falhar tenta-se com xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") que serve para o Internet Explorer 6.0+, se tambm falhar, tentar xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que serve para o Internet Explorer 5.5+. Se nenhum dos trs mtodos funcionarem, o usurio possui um navegador muito desatualizado dever ser avisado que no suporta AJAX.

    A propriedade onreadystatechange
    Depois de uma requisio para o servidor, precisa-se uma funo que possa receber o dado que retornado pelo servidor. A propriedade onreadystatechange armazena a funo que processar a resposta do servidor. O cdigo abaixo define uma funo vazia e inicializa a propriedade onreadystatechange ao mesmo tempo.
    xmlHttp.onreadystatechange=function() { // Deve-se escrever um cdigo }

    A propriedade readyState
    A propriedade readyState carrega a situao (status) da reposta do servidor (servers reponse). Cada vez que muda o valor de readyState, a funo onreadystatechange ser executada. Tabela de possveis valores para a propriedade de onreadystatechange.
    Valor 0 1 2 3 4 Descrio A requisio A requisio A requisio A requisio A requisio no foi inicializada foi configurada. foi enviada esta sendo processada esta completa

    No exemplo abaixo, apresenta-se um teste (if) na funo onreadystatechange para testar se a resposta esta completa, ou seja, que o dado foi recebido.
    xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Recebido dos dados do servidor. } }

    A propriedade responseText
    O dado enviado de volta do servidor pode ser recuperado com a propriedade responseText. No exemplo ser colocado a hora no campo de entrada na propriedade responseText.
    xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }

    Enviando uma requisio ao servidor


    Para enviar uma requisio ao servidor utiliza-se o mtodo open() e o mtodo send(). O mtodo open() requer trs argumentos. O primeiro argumento define qual mtodo utilizar quando estiver enviando a requisio (GET ou POST). O segundo argumento especifica a URL do script no servidor. O terceiro argumento especifica que a requisio deve ser manipulada assincronamente. O mtodo send() envia a requisio para o servidor. Se assumir que os arquivos HTML e PHP esto na mesma pasta, o cdigo pode ficar:
    xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);

    A funo AJAX ser executada quando o usurio digita algo no campo nome. O arquivo testeAjax.html agora fica parecido com o seguinte cdigo:
    <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Seu navegador no suporta AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } xmlHttp.open("GET","hora.php",true); xmlHttp.send(null); } </script> <form name="myForm"> Nome: <input type="text" onkeyup="ajaxFunction();" name="nome" /> Hora: <input type="text" name="time" /> </form> </body> </html>

    O cdigo baixo apresenta a hora do servidor e deve ser gravado com o nome hora.php. A propriedade responseText armazenar a data que retorna do servidor.
    <? $d = getdate(); print str_pad($d['hours'],2,"0", STR_PAD_LEFT) .':'.str_pad($d['minutes'],2,"0",STR_PAD_LEFT) .':'.str_pad($d['seconds'],2,"0", STR_PAD_LEFT); ?>

    Abaixo se apresenta o resultado da execuo dos scripts apresentados at o momento. A cada letra digitada apresentado a hora do sistema sem a necessidade de recarregar a pgina.

    Exemplo XML com AJAX


    AJAX pode ser utilizado para uma comunicao interativa com arquivo XML. O cdigo da pgina HTML abaixo apresenta uma lista de nomes que conforme a escolha apresenta os detalhes em uma rea especial.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <script src="selectcd.js"></script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <p> <div id="txtHint"><b>A informao do CD ser apresenta aqui.</b></div> </p> </body> </html>

    Na linha 15 existe um div denominado txtHint que utilizado como um repositrio das informaes recuperadas do servidor WEB. Quando o usurio seleciona um dado, a funo denominada showCD executada. A execuo da funo ativada pele evento onchange. O cdigo JavaScript armazenado no arquivo selectcd.js:
    var xmlHttp function showCD(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcd.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true);

    xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }

    A funo showCD() executada quando usurio selecionar um item da caixa de seleo. 1. Chama a funo GetXmlHttpObject para criar um objeto XMLHTTP. 2. Define o URL (nome do arquivo) para ser enviado para o servidor. 3. Adiciona um parmetro (q) para a URL com o contedo do campo de entrada. 4. Adiciona um nmero randmico para prevenir que o servidor utilize um arquivo em cach. 5. Chama a funo stateChanged() quando um mudana disparada. 6. Abre o objeto XMLHTTP com a URL dada. 7. Envia um requisio http para o servidor.

    A pgina PHP
    A pgina chamada pelo JavaScript um arquivo PHP denominado getcd.php. A pgina abaixo escrita em PHP 5 utiliza a biblioteca XMLDOM para carregar um documento XML.
    <?php $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { //Process only element nodes

    if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo($cd->item($i)->nodeName); echo(": "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br />"); } } ?>

    Quando a consulta enviada do JavaScript para o PHP ocorre: PHP cria um objeto XMLDOM do arquivo cd_catalog.xml. Todos os elementos (nodetypes=1) (Artistas) entram em um lao para encontrar um nome que seja igual ao nome enviado do JavaScript. O CD contendo o nome do artista encontrado. A informao do lbum enviada para o txtHint. Documento XML denominado cd_catalog.xml.
    <?xml version="1.0" encoding="ISO-8859-1"?> <!-- Edited with XML Spy v2007 (http://www.altova.com) --> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> </CATALOG>

    Exemplo AJAX para Select Box gerado com JAVA


    AJAX pode ser utilizado para requisitar um trecho de cdigo para ser inserido na pgina HTML. O cdigo da pgina HTML abaixo apresenta uma lista de estados que conforme a escolha apresenta as cidades do estado selecionado.
    <html> <body> <script type="text/javascript"> var xmlHttp; function GetXmlHttpObject(){ var xmlHttp=null; try{ xmlHttp=new XMLHttpRequest();// Firefox e similares }catch (e){// Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } //catch IE return xmlHttp; } //function GetXmlHttpObject() function buscaMunJs(str){ xmlHttp=GetXmlHttpObject() var url="http://10.68.15.67:8080/modulos/BuscaMunicipio"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } // function BuscaMunJs(str) function stateChanged(){ if (xmlHttp.readyState==4){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } // if } // function stateChanged() </script> <table> <tr> <td>UF</td> <td> <select name='p_uf' onchange='buscaMunJs(this.value)'> <option value='0'>Escolher</option> <option value='12' >AC</option> <option value='27' >AL</option> () <option value='17' >TO</option> </select> </td> </tr> <tr> <td>Municpio</td><td> <span id="txtHint"></span></td> </tr> </table> </body> </html>

    Vale notar agora que o campo que ser atualizado agora <span> ao invs de <div>, mas o javascript de chamada da url praticamente idntico, ento o que muda a atribuio da resposta ao elemento HTML (nesse caso o txtHint).

    Arquivo JAVA utilizado para gerar o componente Select


    Segue trecho do Servlet (JAVA) que consulta um banco de dados e, baseado no parmetro estado (q) retorna um select box com as cidades como opes.
    protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String uf = request.getParameter("q"); ()//consiste parametro out.println("<select name='p_ibge_ajax' onchange='preencheIBGE(this.value)'>"); out.println("<option value='0'>Escolher</option>"); ()//inicializa Banco de Dados List estados = bdSession.createSQLQuery("select m.ibge, m.nome from mapas.shp_munic m where trunc(m.ibge/10000) = " + uf + " order by nome").list(); Iterator estados_iter = estados.iterator(); while(estados_iter.hasNext()){ Object[] municipio = (Object[])estados_iter.next(); out.println("<option value='" + (Integer) municipio[0] + "'>" + (String) municipio[1] + "</option>"); } ()//finaliza conexo c/ Banco de Dados out.println("</select>"); out.close(); }

    A resposta do Servlet o cdigo fonte de um componente Select contendo as cidades do estado recebido como parmetro. Esse contedo visualizado no navegador no lugar do span do HTML, porm o cdigo fonte da pgina no alterado. Pgina HTML antes da seleo do estado:

    Aps seleo o componente aparece sem atualizar a pgina:

    Você também pode gostar