Upload
fleur-mcconnell
View
10
Download
0
Embed Size (px)
DESCRIPTION
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: - PowerPoint PPT Presentation
Citation preview
Anselmo Luiz Édem Battisti, Alexandre Magno Semmer
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
function funcao$$(){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 = new Array("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 JavaScript
var 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 XMLHttpRequestFunction 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 = false; }
}}
Return xmlhttp;}
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
});