Ajax sem mistérios, uma introdução ao prototype

Anselmo Luiz Édem Battisti, Alexandre Magno Semmer Ajax sem mistérios, uma introdução ao prototype

Prototype • Biblioteca JavaScript • Características Web 2.0 • Versão 1.5.1.1 • Tamanho 97 Kb

Função $ • document.getElementById(); • Recebe como parâmetro o ID de um elemento • Alguns métodos: • hide(); • show(); • addClassName(); Mais: http://www.prototypejs.org/api/element

Função $$ • Retorna os elementos de uma classe CSS functionfuncao$$(){ var f = $$('div#myDiv .estilo'); for(x=0; x<f.length; x++){ $("retorno").innerHTML += f[x].value + "<br>"; alert("Escreveu : " + f[x].value); } }

Função $A • Cria um objeto Enumerable • Estrutura muito simples que permite iterações sem a necessidades de laços FOR var vetor = newArray("laranja", "banana", "abacate", "bicicleta"); var n = $A(vetor); n.each(function(no){ alert(no) });

Função $F • Devolve o valor de um campo em um formulário, recebendo como parâmetro o ID do elemento • Equivalente ao .value

HTML e DOM • HyperText Markup Language(Linguagem de Marcação de Hipertexto) • Document Object Model (Modelode Objetode Documentos) • DOM representa os documentos HTML como uma hierarquia de nós

Easy DOM Creator • Necessidade de criar objetos HTML em tempo de execução. • Estrutura principal da criação de HTML com Easy DOM Creator :$.TAGPAI ( { atributo1 , atributo2} ,$.TAGFILHO1({ atributo1 , atributo2} ,nome),$.TAGFILHO2({ atributo1 , atributo2} ));

Easy DOM Creator • Elementos CSS e JavaScriptvar texto = $.INPUT({type:”text”, name:”texto”, value=“”});texto.setAttribute(“onclick”,”alert(this.value)”); texto.setAttribute(“style”,”color:red”); form.appendChild(texto);

Eventos • $(id).setAttribute(“evento”,”funcao”);$(“botao”).setAttribute(“onClick”,”alert(‘ola mundo’)”); • Event.observe(“ID”, “evento”,”funcao”);Event.observe(“botao”,”onClick”,”alert(‘ola mundo’);Event.observe(window,'load',function(){ Event.observe('ID','ACAO',FUNCAO); });

Orientação a Objeto • Prototype oferece o Class.create() var Animal = Class.create(); Animal.prototype={ initialize : 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();

AJAX • Asyncronous Javascript And XML • Solicitações assíncronas de informações • Aplicações WEB mais dinâmicas e criativas • AJAX não é uma tecnologia, são varias

AJAX incorpora em seu modelo: • Apresentação baseada em padrões, usando XHTML e CSS; • Exposição e interação dinâmica usando o DOM; • Intercâmbio e manipulação de dados usando XML e XSLT e JSON; • Recuperação assíncrona de dados usando o objeto XMLHttpRequest; • Javascript unindo todas elas em conjunto.

Política de Origem • Segurança dos usuários. • 3 parâmetros: • Protocolo • URL • Porta Caso algum desses parâmetros diferir da pagina atualmente exibida, ocorrera uma exceção e a chamada ao AJAX será abortada.

A Classe Assíncrona • XMLHttpRequest FunctionajaxInit(){ Var xmlhttp; try{ xmlhttp = newXMLHttpRequest(); }catch(ee){ try{ xmlhttp = newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = newActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } } Returnxmlhttp; }

Objeto AJAX do Prototype • O Prototype oferece três objetos para a manipulação de conexões assíncronas, todos os 3 possuem métodos comuns o que facilita o seu aprendizado. • asynchronous • contentType • encoding • method • parameters

Ciclo de vida da chamada em AJAX • Created; • Initialized; • Requestsent; • Response being received ( Pode ocorrer várias vezes, a cada novo pacote HTTP chegar.) • Response received, request complete

Funções de acesso para cada fase • onCreate • onComplete • onFailute

Ajax.Updater • Utilizado quando os dados recebidos do servidor estão em formato HTML.Var myAjax = new Ajax.Updater(“ id do elemento“ ,‘pagina.php' ,{method: 'get' ,parameters:$(calculadora).serialize() });

Ajax.Request • É o mais utilizado e ele possui uma série de funções que o tornam ideal em diversas situações.New Ajax.Request(“pagina.php” ,{ onSuccess:function(retorno){ alert(retorno); } }) ;

JSON • Javascript Object Notation, é um formato leve para intercâmbio de dados computacionais. • Alternativa para XML em AJAX. • Função eval() para analisar uma string JSON.

JSON { 'cidades':[ {'cdg':'1','nm':'Tupãssi'}, {'cdg':'2','nm':'Toledo'}, {'cdg':'3','nm':'Cascavel'}, {'cdg':'4','nm':'PatoBranco'} ] }

Ajax.PeriodicalUpdater • Funciona da mesma forma como o Ajax.Updater, a diferença é que este método permite que sejam feitas chamadas AJAX sem a intervenção do usuário. New Ajax.PeriodicalUpdater('data' , 'data.php' { method: 'get' , frequency:3 });

Ajax sem mistérios, uma introdução ao prototype