Ajax sem mistérios, uma introdução ao prototype
-
Upload
fleur-mcconnell -
Category
Documents
-
view
16 -
download
0
description
Transcript of Ajax sem mistérios, uma introdução ao prototype
![Page 1: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/1.jpg)
Anselmo Luiz Édem Battisti, Alexandre Magno Semmer
![Page 2: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/2.jpg)
Prototype
Biblioteca JavaScript Características Web 2.0 Versão 1.5.1.1 Tamanho 97 Kb
![Page 3: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/3.jpg)
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
![Page 4: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/4.jpg)
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);
}}
![Page 5: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/5.jpg)
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)});
![Page 6: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/6.jpg)
Função $F
Devolve o valor de um campo em um formulário, recebendo como parâmetro o ID do elemento
Equivalente ao .value
![Page 7: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/7.jpg)
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
![Page 8: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/8.jpg)
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} ));
![Page 9: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/9.jpg)
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);
![Page 10: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/10.jpg)
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); });
![Page 11: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/11.jpg)
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();
![Page 12: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/12.jpg)
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
![Page 13: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/13.jpg)
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.
![Page 14: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/14.jpg)
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.
![Page 15: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/15.jpg)
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;}
![Page 16: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/16.jpg)
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
![Page 17: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/17.jpg)
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
![Page 18: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/18.jpg)
Funções de acesso para cada fase
onCreate onComplete onFailute
![Page 19: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/19.jpg)
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()
});
![Page 20: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/20.jpg)
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);}
}) ;
![Page 21: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/21.jpg)
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.
![Page 22: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/22.jpg)
JSON
{'cidades':[{'cdg':'1','nm':'Tupãssi'},{'cdg':'2','nm':'Toledo'},{'cdg':'3','nm':'Cascavel'},{'cdg':'4','nm':'PatoBranco'}]}
![Page 23: Ajax sem mistérios, uma introdução ao prototype](https://reader036.fdocumentos.com/reader036/viewer/2022062720/568134c2550346895d9be6b9/html5/thumbnails/23.jpg)
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
});