Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Apostila Javascript Prototype

    Enviado por

    erlimar
    105 visualizações17 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
    105 visualizações17 páginas

    Apostila Javascript Prototype

    Enviado por

    erlimar

    Direitos autorais:

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

    AJAX Sem Mistrios, Uma Introduo ao Prototype

    Anselmo Luiz den Battisti, Alexandre Semmer


    Webgenium System

    anselmobattisti@yahoo.com.br, alexandresemmer@hotmail.com
    20 de julho de 2007

    Cascavel - Paran - Brasil

    Prototype

    A Prototype uma tima biblioteca Javascript escrita por Sam Stephenson. Esta coleo de funes foi muito bem escrita e bem pensada, utiliza tcnicas de acordo com os padres atuais e alivia o trabalho do programador na hora de produzir as pginas altamente interativas que caracterizam a chamada Web 2.0. Na data em que esta apostila foi escrita a biblioteca est na verso 1.5.1.1. Ela pode ser baixada do web site http://Prototypejs.org/download, ela no possui nativamente uma verso compactada como muitas outras bibliotecas, por isto, sugerimos que a biblioteca seja compactada pois ela possui 97 Kb o que a torna pesada para algumas aplicaes. O endereo http:bananascript.com/ oferece um timo compactador de arquivos Javascripts. medida que voc ler os exemplos, caso voc tenha familiaridade com a linguagem de programao Ruby, voc notar, uma semelhana intencional entre as classes constituintes de Ruby e muitas das extenses implementadas pela Prototype.

    1.1

    Funo $

    A funo de $() equivalente ao mtodo document.getElementById(), recebendo o ID de um elemento, ele o seleciona. Os objeto selecionado podemos executar alguns mtodos da prpria linguagem Javascript como por exemplo o value() ou da Prototype como hide(), show(), addClasseName(), etc.
    1 2 3 4 5 6 7 8 9 10

    <html> <head> <t i t l e > Test Page </t i t l e > <script src=" prototype . js "></script > <script > function test () { var d = $( ' myDiv ' ) ; d . hide () ; alert (d . innerHTML) ; d . show () ;

    Cdigo 1: 'Funo $'

    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

    d . addClassName( ' active ' ) ; } </script > <style type=' text / css '> . active { color : #ff0000 ; } </style > </head> <body> <div id=" myDiv "> <p>This i s a paragraph</p> </div> <div id=" myOtherDiv "> <p>This i s another paragraph</p> </div> <input type=" button " value=" Teste " onclick=" test () ;"/><br/> </body> </html>

    1.2

    Funo $$

    A funo $$() retorna uma coleo de elementos que pertenam a uma determinada classe CSS.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

    <html> <head> <script type=" text / javascript " src=" javascripts / prototype / prototype . js "></script > <script > function test$$ () {
    / Caso o CSS no s e j a o seu f o r t e , a e x p r e s s o a b a i x o quer d i z e r ' ache t o d o s os e l e m e n t o s INPUT que e s t o d e n t r o de um elemento c u j a c l a s s e s e j a i g u a l a f i e l d que e s t e j a d e n t r o de um d i v c u j o i d s e j a loginForm '

    Cdigo 2: 'Funo $'

    var f = $$ ( ' div # loginForm . field input ' ) ; var s = '' ; for ( var i =0; i<f . length ; i++){ s += f [ i ] . value + '/ ' ; } alert ( s ) ; // shows : " j o e d o e 1 / s e c r e t /"
    //now p a s s i n g more than one e x p r e s s i o n

    30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

    f = $$ ( ' div # loginForm . field input ' , ' div # loginForm . fieldName ' ) ; s = '' ; for ( var i =0; i<f . length ; i++){ s += ( f [ i ] . value ? f [ i ] . value : f [ i ] . innerHTML ) + '/ ' ; } alert ( s ) ; // shows : " j o e d o e 1 / s e c r e t / User name : / Password : / " } </script > <div id=' loginForm '> <div class=' field '> <span class=' fieldName '>User name:</span> <input type=' text ' id=' txtName ' value=' joedoe1 '/> </div> <div class=' field '> <span class=' fieldName '>Password:</span> <input type=' password ' id=' txtPass ' value=' secret ' /> </div> <input type=' submit ' value=' login ' onclick=" test$$ () "/> </div> <input type=button value=' test $$ () ' onclick=' test$$ () ; ' />

    1.3

    Funo $A()

    A funo $A() cria um objeto Enumerable a partir de um argumento. Enumerable um tipo de estrutura implementada pelo Prototype seguindo a linha de raciocnio da linguagem Ruby. Esta estrutura muito poderosa e permite iteraes simples sem a necessidade de laos FOR. Os enumerables baseiam seu funcionamento sobre o mtodo each, neste mtodo em cada iterao e lanado como parmetro para a para a funo o elemento atual da iterao. Quando aplicamos a funo $A() sobre vetores, esta funo combinada com as extenses dos enumerables, torna mais fcil de converter ou copiar qualquer lista enumervel em um objeto de Ordem. Veja exemplo abaixo.
    1 2 3 4 5

    <script src=" prototype . js "></script > <script > function showOptions () { var someNodeList = $( ' lstEmployees ' ) . getElementsByTagName( ' option ' ) ;
    3

    Cdigo 3: 'Funo $'

    6 7 8 9 10 11 12 13 14 15 16 17 18 19

    var nodes = $A( someNodeList ) ; nodes . each ( function ( node ){ alert ( node . nodeName + ': ' + node . innerHTML) ; } </script > <s e l e c t id=" lstEmployees " s i z e=" 10 " > <option value="5">Buchanan , Steven</option> <option value="8">Callahan , Laura</option> <option value="1">Davolio , Nancy</option> </select > <input type=" button " value=" Opes " onclick=" showOptions () ;" />

    }) ;

    1.4

    Funo $F

    A funo $F() devolve o valor de algum campo de um formulrio recebendo como parmetro o ID do elemento.
    1 2 3 4 5 6 7 8 9

    <script src=" prototype . js "></script > <script > function test3 () { alert ( $F( ' userName ' ) ) ; } </script > <input type=" text " id=" userName " value=" Joe Doe "><br/> <input type=" button " value=" Test3 " onclick=" test3 () ; ">

    Cdigo 4: 'Funo $'

    HTML e DOM

    HTML (acrnimo para a expresso inglesa HyperText Markup Language, que signica Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para produzir pginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia fruto do "casamento"dos padres HyTime e SGML. HyTime um padro para a representao estruturada de hipermdia e contedo baseado em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (como udio, vdeo, etc.), conectados por hiper-ligaes. O padro independente de outros padres de processamento de texto em geral. SGML um padro de formatao de textos. No foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligaes. Os documentos HTML podem ser manipulados atravs do seu DOM. O DOM ou Document Object Model (Modelo de Objeto de Documentos) possibilita que uma pgina web seja manipulada como um conjunto de ns (elementos da pgina), permitindo acesso direto a qualquer elemento da pgina por um script Javascript. 4

    DOM representa os documentos HTML como uma hierarquia de ns que podem implementar interfaces especializadas. Por exemplo, o elemento TABLE est hierarquicamente acima dos elementos TR que est acima dos elementos TD de sua estrutura. Com a API DOM podemos criar documentos, navegar pela estrutura de um documento qualquer, incluir, alterar e apagar ns do documento (o prprio n ou seu contedo). Isso vlido tanto para pginas HTML quanto para documentos XML.

    2.1

    Easy DOM Creator

    Quando se programa utilizando AJAX muito comum a necessidade de criar objetos HTML em tempo de execuo, a nica sada trabalhar com o DOM HTML atravs do Javascript. A manipulao do DOM utilizando Javascript bastante trabalhosa sendo assim vrias bibliotecas foram escritas para facilitar o uso do DOM, em geral o uso destas bibliotecas aconselhvel pois elas agrega funes no intrusivas. O script Easy DOM Creator escrito por Michael Geary e pode ser baixado do seguinte endereo http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-Prototype , foi desenvolvido utilizando a biblioteca de Jquery, porm, funciona tambm muito bem com a Prototype tendo em vista que nica funo que o script usa da biblioteca a funo $ que funciona da mesma maneira em ambas as bibliotecas. Veja um exemplo:
    1 2 3 4 5 6 7 8 9 10 11

    var table = $ .TABLE({ Class : " MyTable " , border : 1} , $ .TBODY({} , $ .TR({} , $ .TD({} , ' Site ' ) , $ .TD({} , ' Link : ' , $ .A({ Class : ' MyLink ' , href : ' http :// www . example . com ' } , ' example . com ' ) ) ) ) ); $( ' data ' ) . appendChild ( table ) ;
    A varivel table contm a tabela, o parmetro $.TAG, onde TAG o nome da TAG HTML indica a inteno de criar uma TAG do mesmo tipo. Ao nal usa-se o appendChild para incluir o elemento criado em algum outro elemento j existente no DOM HTML, lembrando que o prprio elemento BODY pode ser utilizado como pai do elemento criado. Para denir um evento em um elemento HTML criado dinamicamente podemos trabalhar de duas maneiras, a maneira tradicional utilizar o mtodo setAttribute, nele so passados o evento e a funo que ser realizada.
    table.setAttribute('onClick',alert('teste');

    Cdigo 5: 'Exemplo de uso do Easy Dom Creator'

    A segunda maneira utilizar o observer do Prototype, com ele podemos denir qual funo ser executada quando o evento acontecer sobre o elemento especicado.
    Event.observe('ID', 'ACAO', FUNCAO);

    Isto faz com que no momento em que o elemento com o ID realizar a ACAO a FUNCAO ser disparada. A funo pode ser criada em tempo de execuo ou uma funo j existente em outros Scripts. O nome da ao deve seguir as recomendaes da W3C para o DOM Level 2 que pode ser encontrada no endereo http://www.w3.org/TR/DOMLevel-2-Events/events.html#Events-overview-terminology. A funo observe deve ser escrita aps a criao do elemento que receber a ao, para evitar isto podemos utilizar o seguinte script. Exemplo :
    Event.observe(window, 'load', function() { Event.observe('ID', 'ACAO', FUNCAO); });

    2.2

    Orientao a Objeto utilizando o

    Class

    A orientao a objetos um recurso muito valioso, durante muito tempo foi restrito a sistemas Desktop. Para o desenvolvimento de sistemas Web o framework Prototype oferece o Class.create(), isto facilita a criao de classes utilizando o Javascript. Como conseqncia imediata do uso desta tcnica temos uma signicativa melhora na legibilidade do cdigo fonte.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

    <html> <head> <t i t l e > Test Page </t i t l e > <script src=" prototype . js "></script > <script type=' text / javascript '> var Animal = Class . create () ; Animal . prototype = { i n i t i a l i z e : function (name , sound ) { this . name = name ; this . sound = sound ; }, speak : function () { alert ( this . name + " says : " + this . sound + "!" ) ; } }; var cobra = new Animal( " Silvo " , " Sheeeeeshee " ) ; cobra . speak () ; var gato= new Animal( " Miado " , " Miauouo " ) ; gato . speak () ; </script > </head> <body> </body>

    Cdigo 6: 'Classes em Javascript'

    No exemplo anterior foi criada a classe Animal, e dois objetos foram instanciados, o objeto COBRA e o objeto GATO, o mtodo initialize o mtodo executado no momento da instanciao do objeto, seria comparado ao __construct do PHP. 6

    AJAX

    AJAX (acrnimo em lngua inglesa de Asyncronous Javascript And XML) o uso sistemtico de Javascript e XML (e derivados) para tornar o navegador mais interativo com o usurio, utilizando-se de solicitaes assncronas de informaes. AJAX no somente um novo modelo, tambm uma iniciativa na construo de aplicaes web mais dinmicas e criativas. AJAX no uma tecnologia, so realmente vrias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo:
    Apresentao baseada em padres, usando XHTML e CSS; Exposio e interao dinmica usando o DOM; Intercmbio e manipulao de dados usando XML e XSLT e JSON; Recuperao assncrona de dados usando o objeto XMLHttpRequest;

    Javascript unindo todas elas em conjunto.

    O modelo clssico de aplicao Web trabalha assim: A maioria das aes do usurio na interface dispara uma solicitao HTTP para o servidor Web. O servidor processa algo recuperando dados, mastigando nmeros, conversando com vrios sistemas legados e ento retorna uma pgina HTML para o cliente. um modelo adaptado do uso original da Web como um agente de hipertexto, porm o que faz a Web boa para hipertexto no necessariamente faz ela boa para aplicaes de software. Esta aproximao possui muito dos sentidos tcnicos, mas no faz tudo que um usurio experiente poderia fazer. Enquanto o servidor est fazendo seu trabalho, o que o usurio estar fazendo? O que certo, esperando. E a cada etapa em uma tarefa, o usurio aguarda mais uma vez. Obviamente, se ns estivssemos projetando a Web do nada para aplicaes, no faramos com que os usurios esperassem em vo. Uma vez que a interface est carregada, por que a interao do usurio deveria parar a cada vez que a aplicao precisasse de algo do servidor? Na realidade, por que o usurio deveria ver a aplicao ir ao servidor toda vez? A maior vantagem das aplicaes AJAX que elas rodam no prprio navegador Web. Ento, para estar hbil a executar aplicaes AJAX, bastar possuir algum dos navegadores modernos, ou seja, lanados aps 2001, so eles: Mozilla Firefox, Internet Explorer 5+, Opera, Konqueror e Safari.

    3.1

    Poltica de Origem

    Para garantir a segurana dos usurios, os navegadores implementam a poltica de origem, nela no so permitidas que dados sejam enviados ou recebidos de um site diferente daquele que est sendo exibido pelo navegador. 7

    Figura 1: Diagrama de requisies ao servidor A poltica de origem segue 3 parmetros, protocolo, URL e a porta, caso algum destes parmetros diferir dos da pgina atualmente exibido pelo navegador, ento ocorrer uma exceo e a chamada em AJAX abortada. Infelizmente esta poltica no adotada por todos os navegadores, em particular temos o Internet Explorer da Microsoft que adota o conceito de regio segura.

    3.2

    A Classe Assncrona

    Para se fazer um pedido HTTP ao servidor usando Javascript, voc precisa de um objeto que disponibiliza essa funcionalidade. Tal classe foi primeiro introduzida no Internet Explorer sob a forma de um objeto ActiveX chamado XMLHTTP, ento, o Mozilla, o Safari e outros navegadores tambm criaram seus objetos de conexo assncrona, o objeto foi o XMLHttpRequest que suportava os mtodos e as propriedades do objeto ActiveX original da Microsoft. 8

    O cdigo abaixo mostra a forma genrica e tradicional de instanciar um objeto que prover os mecanismos para pedidos assncronos.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

    function ajaxInit () { var xmlhttp ; try { xmlhttp = new XMLHttpRequest () ; } catch ( ee ) { try { xmlhttp = new ActiveXObject ( " Msxml2 . XMLHTTP " ) ; } catch ( e ) { try { xmlhttp = new ActiveXObject ( " Microsoft . XMLHTTP " ) ; } catch (E) { xmlhttp = f a l s e ; } } } return xmlhttp ; }

    Cdigo 7: 'ajaxInit.js'

    AJAX com o Objeto AJAX do Prototype

    O Prototype oferece trs objetos para a manipulao de conexes assncronas, todos os 3 possuem mtodos comuns o que facilita o seu aprendizado. Os mtodos e opes descritos a seguir podem ser utilizados em qualquer um dos 3 tipos de objetos de conexo que o Prototype oferece.
    asynchronous :

    Determina se a chamada ser assncrona ou no, o manual no aconselha o uso de chamadas sncronas pois isto pode causar efeitos colaterais como por exemplo deadlocks, por padro true ; Dene o tipo do cabealho que ser enviado do servidor para o Javascript, por padro application/x-www-form-urlencoded;

    contentType : encoding :

    Codicao dos dados que sero enviados do cliente para o servidor, por padro UTF-8;

    method : O mtodo de envio dos dados, pode ser post ou get; parameters : Os parmetros que sero passados para o servidor, eles devem estar

    codicados no formato GET porm se o mtodo for POST o Prototype codica e insere no cabealho HTML os parmetros. Exemplo '?a=1&b=2'.

    O Ciclo de vida da chamada em AJAX possui vrias fases, para cada uma delas o Prototype disponibiliza mtodos especcos para o seu tratamento e interceptao das suas mensagens de controle. Estes so os estgios que uma conexo em AJAX pode passar durante a sua vida. 9

    Created; Initialized; Request sent; Response being received (Pode ocorrer vrias vezes, a cada novo pacote HTTP

    chegar.)

    Response received, request complete

    Para que possamos interceptar mensagens em cada uma das etapas do ciclo de vida da requisio o Prototype oferece mtodos padres para realizar a interceptao dos dados.
    onCreate : chamada no logo aps os parmetros e a url ser processada e antes

    do objeto AJAX ser invocado;

    onComplete : Assim que o objeto AJAX retorna os dados ao

    script ;

    onFailute : chamado antes do onComplete assim que um erro detectado.

    4.1

    Ajax.Updater

    O Ajax.Updater o mtodo de conexo AJAX que podemos utilizar quando os dados que vem do servidor j estaro formatados em HTML. Para a primeira atividade utilizando AJAX vamos desenvolver uma calculadora. Dois os arquivos sero desenvolvidos, o arquivo calc.php que realizar a conta e calculadora.html que enviar os dados e exibir o resultado.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    <html> <head> <t i t l e > Test Page </t i t l e > <script src=" prototype . js "></script > <script type=' text / javascript '> function calcular () { var myAjax = new Ajax . Updater ( ' resultado ' , ' calculadora . php ' , { method : ' get ' , parameters : $( calculadora ) . s e r i a l i z e () }) ; } </script > </head> <body> <form name=" calculadora " id=" calculadora "> <input type=" text " name=" v1 " id=" v1 " s i z e="3"/> + <input type=" text " name=" v2 " id=" v2 " s i z e="3"/> = <label id=" resultado "></label > <br/> <input type=" button " value=" Calc " onClick=" calcular () "/> </form> </body>
    10

    Cdigo 8: 'Calculadora HTML'

    1 2 3

    <? echo $_GET[ 'v1 ' ] + $_GET[ 'v2 ' ] ; ?>

    Cdigo 9: 'Calculadora PHP'

    O Ajax.Updater necessita de 3 parmetros, no primeiro passamos o ID do elemento que ir exibir o resultado, o arquivo PHP que ir realizar o processamento e os parmetros que sero passados para o servidor.

    4.2

    Ajax.Request

    O mtodo Ajax.Request o mais utilizado e ele possui uma srie de funes que o tornam ideal em diversas situaes.
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    <html> <head> <t i t l e > Test Page </t i t l e > <script src=" prototype . js "></script > <script type=' text / javascript '> function moveis () { new Ajax . Request ( ' moveis . php ' , { onSuccess : function ( transport , json ) { alert ( json . moveis [ 0 ] ) ; } }) ; } </script > </head> <body> <input type=' button ' value=' moveis ' onClick=' moveis () '/> </body> <?

    Cdigo 10: 'Calculadora HTML'

    Cdigo 11: 'Calculadora PHP'

    1 2 3 4 5 6 7 8 9 10 11 12 13

    ?>

    include_once ( " json . php " ) ; $json = new json () ; # vetor de mveis $a [ ] = " Cama " ; $a [ ] = " Mesa " ; $a [ ] = " Cadeira " ; $b [ ' moveis ' ] = $a ; header ( "X - JSON : " . $json >encode ($b) ) ;
    JSON

    4.2.1

    JSON (com a mesma pronuncia do nome "Jason"em ingls), um acrnimo para Javascript Object Notation, um formato leve para intercmbio de dados computacionais. JSON um subconjunto da notao de objeto de Javascript, mas seu uso no requer Javascript 11

    exclusivamente, por ser um formato muito simples e eciente ele foi portado para diversas outras linguagens como C, Python e Java. A simplicidade de JSON tem resultado na difuso do seu uso, especialmente como uma alternativa para XML em AJAX. Uma das vantagens do JSON sobre XML como um formato para intercmbio de dados neste contexto o fato de ser muito mais fcil escrever um analisador JSON. Em Javascript uma string em JSON podem ser analisado trivialmente usando a funo eval(). Isto foi importante para a aceitao de JSON dentro da comunidade AJAX devido a presena deste recurso de Javascript em todos os navegadores Web atuais, XML foi escrito para humanos ler JSON foi escrito para as mquinas entender. Na prtica, os argumentos a respeito da facilidade de desenvolvimento e performance do analisador so raramente relevados devido aos interesses de segurana no uso de eval() e a crescente integrao de processamento XML nos navegadores web modernos. Por esta razo JSON tipicamente usado em ambientes onde o tamanho do uxo de dados entre o cliente e o servidor de suma importncia (da seu uso por Google, Yahoo, etc., os quais servem milhares de usurios simultaneamente). O JSON deve ser trabalhado em ambientes onde a fonte dos dados pode ser explicitamente convel, e onde a perda dos recursos de processamento XSLT no lado cliente para manipulao de dados ou gerao da interface, no uma considerao. Enquanto JSON freqentemente posicionado "em confronto"com XML, no incomum ver tanto JSON como XML sendo usados na mesma aplicao. Por exemplo, uma aplicao no lado cliente a qual integra dados do Google Maps com dados atmosfricos atravs de SOAP, requer suporte para ambos formatos de dados. A gura 2 ilustra em forma de um autmato nito a gramtica da linguagem JSON. A string abaixo mostra um retorno das cidades do estado do Paran.

    Figura 2: String bsica Json


    { 'cidades':[ {'cdg':'1','nm':'Tupssi'}, {'cdg':'2','nm':'Toledo'}, {'cdg':'3','nm':'Cascavel'}, {'cdg':'4','nm':'Pato Branco'} ] }

    12

    Usando a funo eval 1 do Javascript podemos transformar esta string em uma estrutura de objetos facilmente manipulveis. Se usarmos a funo eval no retorno das cidades poderiamos por exemplo acessar o cdigo da cidade de Pato Branco atravs do seguinte comando:
    json = eval("("+ajax.responseText+")"); json.cidades[3].cdg;

    Na primeira linha aplicada a funo eval e seu resultado armazenado na varivel Json, na linha 2 acessado o atributo cidades, que um vetor, na posio 3 no atributo cdg. Para facilitar o uso de JSON no PHP, a partir da verso 5.2.0 foi integrada a linguagem a funo json_encode e o json_decode, estas duas funes transformam vetores em string JSON e decodicam string JSON em vetores PHP, caso voc esteja trabalhando em um servidor que possua uma verso inferior do PHP ento existem classes que fazer esta funo.
    4.2.2 Ajax.PeriodicalUpdater

    Funciona da mesma forma como o Ajax.Request, a diferena que este mtodo permite que sejam feitas chamadas AJAX sem a interveno do usurio, estas chamadas ocorrem em um determinado intervalo de segundos que congurado. Este objeto muito til durante o desenvolvimento de aplicativos de chat ou mesmo em sistema grcos de aes nas bolsas de valores. Exemplo:
    1 2 3 4 5 6 7 8 9 10

    <script src=" prototype . js "></script > <script > new Ajax . PeriodicalUpdater ( ' data ' , { method : ' get ' , frequency : 3 }) ; </script > <div id=' data '></div> <? echo time () ; ?>

    Cdigo 12: 'Relgio PHP'


    ' data . php '

    Cdigo 13: 'Relgio PHP'

    1 2 3

    Isto ir fazer com que a cada 3 segundo o navegador chame o arquivo data.php e insira em seu contedo dentro do div cujo id data.
    na especicao 1.0 do Javascript esta funo interpreta uma string como uma expresso, eval("fred=999; wilma=777; document.write(fred + wilma);") retorna 1776
    1 Introduzida

    13

    Validao de Formulrios Com AJAX

    Quando desenvolvemos formulrio em HTML temos que levar em conta vrios fatores, um deles a garantia que sero enviados para o banco de dados apenas dados vlidos quanto a sua sintaxe, datas no formato correto, nmeros onde devem ser nmeros, campos obrigatrios preenchidos, em m temos que nos certicar sobre a autenticidade dos dados. Tradicionalmente a validao dos dados feita usando Javascript, ela tem como vantagem a velocidade da validao, infelizmente ela pode ser facilmente eliminada apenas desabilitando o Javascript do navegador, ou ainda enviando os dados diretamente para a aplicao no servidor. A validao no lado do servidor por sua vez mais segura pois o usurio no consegue burla-la, porm, ela mais lenta e necessita de um refresh na pgina HTML. A soluo ento utilizar o AJAX para fazer a validao dos dados do formulrio.

    Figura 3: Validao de Formulrios em Ajax A gura 3 foi retirada do livro "AJAX and PHP", nela podemos ver claramente quais so as obrigaes de cada um dos integrantes da validao, o navegador envia para o servidor os dados a serem validados, o servidor processa e retorna mensagem de erro caso haja algum problema e mensagem de sucesso caso no hajam problemas, e o navegador ca encarregado de exibir o resultado. 14

    Cdigo 14: 'Conexo com a Base de Dados'


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

    // v e r i f i c a r s e os dados que s e r o e n v i a d o s ao s e r v i d o r so v l i d o s

    validar : function () { new Ajax . Request ( " ajax / validacao . php " , { parameters : $( ' frmFuncionario ' ) . s e r i a l i z e () , method : ' post ' , onSuccess : function ( t , json ) { $( ' nome ' ) . className = $( ' salario ' ) . className = var msgErro = "" ;
    for

    // c o l o c a o e s t i l o dos campos como normal " inputnormal " " inputnormal "

    ; ;

    // mudar a cor dos campos que e s t o com problema

    }
    for

    ( i = 0 ; i < json . campo . length ; i++) { $( json . campo [ i ] ) . className = ' inputerro ' ; ( i = 0 ; i < json . erro . length ; i++) { msgErro += json . erro [ i ]+ " <br / >" ;

    // mensagens de e r r o

    },

    } $( ' mensagem ' ) . className = " erro " ; $( ' mensagem ' ) . innerHTML = msgErro ;

    Estudo de Caso

    Para o nal desta apostila iremos criar uma mini aplicao utilizando AJAX. Ela se consistem em um formulrio e duas tabelas em uma base de dados, 4

    Figura 4: Base de Dados A primeira coisa que vamos fazer determinar a forma como trabalharemos com a base de dados, neste caso uma base Mysql acessada atravs da biblioteca de conexo nativa PDO.
    1 2 3 4 5 6

    <?php class conecta { private function __construct () {}


    /

    Cdigo 15: 'Conexo com a Base de Dados'

    15

    7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    getConexao @abstract Retorna um o b j e t o de conexo com o banco de daddos /

    } ?>

    public s t a t i c function getConexao () { try { $pdo = new PDO( " mysql : host = localhost ; return $pdo ; } catch ( Exception $e ) { die ( $e . " erro " ) ; } }

    dbname = anselmo "

    " anselmo "

    " 321 "

    );

    Um recurso muito importante no desenvolvimento de aplicativos em Ajax a abstrao de vetores em PHP atravez de nome padronizados. Cdigo 16: 'Conexo com a Base de Dados'
    1 2 3 4 5 6 7 8 9 10

    // a d i c i o n a r um dependente ao f u n c i o n r i o

    addDependente : function () { var dep = $ .LABEL({} , " Nome : " , $ .INPUT({ type : " text " , name : " nomedep [] " }) ,$ .BR({}) ) ; $( ' dependentes ' ) . appendChild (dep) ; },

    Em nosso exemplo podemos ter vrios dependentes para o mesmo funcionrio, cada input deveria ter um nome nico, porm isto impraticvel pois no sabemos sua quantidade, sendo assim podemos declarar seu nome como sendo nomedep[], desta forma ao ser recebido pelo PHP os dependentes 'automagicamente' se comportaro como um vetor.

    Concluso

    AJAX uma realidade que no deve ser utilizada em sistemas Web e Web sites de maneira indiscriminada, esta tcnica aumenta a interao do usurio com o sistema pois elimina muitos refresh desnecessrios. Este curso no tem a preteno de ser uma referncia sobre AJAX, ele um pontap inicial para que voc consiga iniciar no maravilho mundo do AJAX.

    7.1

    Para Saber Mais


    http://adaptivepath.com/publications/essays/archives/000385.php

    Artigo muito bom sobre AJAX

    Usando POST com AJAX

    http://www.dotpix.com.br/ wendel/projetos/ajax/postXMLHttpRequest/sumGet.html 16

    No use innerHTML

    http://slayeroce.com/articles/innerHTML_alternatives/#intro

    Pgina ocial do JSON

    http://www.json.org/

    DHTML

    http://www.quirksmode.org/js/cross_dhtml.html

    Exemplos em Ajax

    http://www.japs.etc.br/ajax/

    Material sobre Css

    http://www.maujor.com

    DOM XHTML e HTML

    http://www.amtechs.com/w3c/introduction.html

    17

    Você também pode gostar