Unidade VI - Ajax, Cookies e Webstorage

Prévia do material em texto

Programação Web
Ajax, Cookies e Webstorage
Material Teórico
Responsável pelo Conteúdo:
Prof. Esp. Alexander Albuquerque Gobbato
Revisão Textual:
Profa. Esp. Vera Lídia de Sá Cicarone
5
•	Armazenamento de informação em JS
•	Web Storage (HTML5)
•	Ajax
 · Na unidade anterior, vimos como utilizar o jQuery para ter 
acesso aos atributos e eventos. Com javascript e jQuery 
podemos também armazenar informações localmente. Por 
meio do ajax, cookies e webstorage podemos realizar essas 
tarefas. Então, não vamos mais perder tempo e vamos praticar?
Ajax, Cookies e Webstorage
 
 Atenção
Para um bom aproveitamento do curso, leia o material teórico atentamente antes de realizar as 
atividades. É importante também respeitar os prazos estabelecidos no cronograma.
6
Unidade: Ajax, Cookies e Webstorage
Contextualização
jQuery é uma biblioteca JavaScript fornecida gratuitamente de código open source. Sua API 
é utilizada, por exemplo, como funções de navegação, criação de animações e efeitos, funções 
para registrar/tratar eventos e funções para desenvolver aplicações AJAX. Nesta unidade, iremos 
estudar também como é possível utilizar os recursos do jQuery e Javascript para armazenamento 
de informações. Então não vamos mais perder tempo e vamos trabalhar!
7
Armazenamento de informação em JS
Basicamente temos duas formas de armazenar dados no cliente:
•	 Através de cookies (modelo bem antigo de armazenamento de dados no cliente)
•	 API Web Storage (API disponibilizada com o surgimento do HTML5)
Embora a API Web Storage tenha diversas vantagens sobre o uso de cookies, iremos abordar 
os dois conteúdos, visto que também podemos manipular cookies em linguagens server-side e 
porque muitos projetos ainda utilizam esse recurso.
Cookies
São informações gravadas por uma aplicação web na máquina cliente. Para cada domínio 
da aplicação, é gerado um arquivo txt, que contém os cookies.
Os cookies são formados por um par composto de:
•	 Nome do cookie
•	 Valor do cookie
Os cookies são mantidos na máquina cliente enquanto seu prazo de “vida” não expirar ou 
enquanto o usuário não limpá-los através do navegador.
Como padrão, podemos criar cookies de até 10Kb. Isso quer dizer que podemos ter um 
cookie de 10k ou 50 cookies no máximo, que totalizam juntos 10k. Esses valores correspondem 
aos cookies de um determinado domínio. Esses valores podem variar conforme o browser.
Para que usar cookies?
Para gravar algumas informações que, posteriormente, poderemos usar em nossa aplicação web.
Em um exemplo clássico, podemos trabalhar com os cookies em um e-commerce. Enquanto 
o usuário está fazendo a escolha dos pedidos e colocando-os no carrinho de compra, podemos 
armazenar os dados dos produtos em cookies. Após a finalização da compra, gravamos os 
dados em um banco de dados e limpamos o cookie.
Vamos testar essa ideia usando o site do Submarino.
Qualquer site pode gravar cookies em sua máquina, desde que essa permissão esteja 
habilitada em seu navegador.
Um cookie não pode apagar arquivos em sua máquina e muito menos “roubar” suas senhas. 
Um site só pode acessar os cookies gravados pelo seu domínio, ou seja, uma aplicação só 
pode acessar os cookies gravados por ela.
8
Unidade: Ajax, Cookies e Webstorage
Como é composto um cookie?
Um cookie é composto por:
•	 Nome
•	 Valor
•	 Tempo (tempo de validade do cookie)
Podemos manipular os cookies em JavaScript através do comando:
 » document.cookie
Um cookie é composto basicamente por:
NAME = Valor; EXPIRES = Data; PATH = Caminho; DOMAIN = Nome_Dominio.
NAME: é uma string de caracteres usada para identificar o cookie.
EXPIRES: é a data em que o cookie deve ser removido do arquivo de cookies se ele ainda 
estiver lá. Não sendo especificada nenhuma data, o cookie terá sua validade vencida assim que 
o usuário sair do browser e encerrar a sessão.
PATH: é o nome do caminho ou URL do documento que criou o cookie (motivo privacidade).
DOMAIN: é o nome completo do domínio do servidor (ou computador central) que 
criou o cookie.
Cookies com jQuery
Podemos manipular os cookies facilmente utilizando um plugin para o jQuery
Plugin cookie para o jQuery
https://github.com/carhartl/jquery-cookie
Como utilizar:
•	 para gravar um cookie
$.cookie(“nomedocookie”, “valor do cookie”);
•	 para definir uma prazo de expiração (10 dias no exemplo)
$.cookie(“nomedocookie”, “valor do cookie”, { expires: 10 });
•	 para recuperar os dados do cookie
$.cookie(“nomedocookie”)
9
•	 para apagar um cookie
$.removeCookie(“nomedocookie”, null);
Vejamos, na prática, a utilização do cookie.
Abaixo, um formulário contendo alguns campos.
 
Abaixo o código html com os respectivos names e ids para poder ter acesso via jQuery.
Abaixo, funções que são acionadas através do id.
 A sintaxe abaixo demonstra os comandos para registrar as informações em cookies.
 
10
Unidade: Ajax, Cookies e Webstorage
A sintaxe abaixo demonstra os comandos para recuperar as informações em cookies e 
alimentar os elementos html.
 
A sintaxe abaixo demonstra os comandos para deletar as informações dos cookies.
 
A sintaxe abaixo demonstra os comandos para limpar as informações dos elementos html.
 
Web Storage (HTML5)
Com essa API, o desenvolvimento fica mais fácil e temos algumas vantagens sobre os 
cookies; a mais significativa seria a capacidade de armazenamento, que varia, de acordo com o 
navegador, de 5MB até 10MB (IE).
11
A Web Storage oferece dois tipos de armazenamento:
sessionStorage e localStorage.
•	 sessionStorage
Disponível apenas para a janela (aba) que criou o dado até que esta seja fechada.
•	 localStorage
Compartilhada por todas as janelas (abas) abertas pela aplicação, e os dados só são 
apagados caso sejam deletados pela aplicação ou pelo usuário.
Como usar (os métodos são os mesmos para o objeto sessionStorage e localStorage):
Para gravar dados:
•	 setItem(nome, valor)
Ex: localStorage.setItem(“nome”,”Maria”);
Ex: sessionStorage.setItem(“nome”,”Maria”);
Para recuperar dados gravados:
•	 getItem(nome)
Ex: localStorage.getItem(“nome”)
Ex: sessionStorage.getItem(“nome”)
Para apagar dados gravados:
Ex: localStorage.removeItem(“nome”)
Ex: sessionStorage.removeItem(“nome”)
Para apagar todos os dados do storage:
•	 clear()
Ex: localStorage.clear()
Ex: sessionStorage.clear()
Vejamos, na prática, a utilização do webstorage. Essas funções podem ser utilizadas no 
mesmo formulário que foi exibido no item de cookie.
Abaixo, funções que são acionadas através do id.
 
12
Unidade: Ajax, Cookies e Webstorage
A sintaxe abaixo demonstra os comandos para registrar as informações em localStorage.
 
A sintaxe abaixo demonstra os comandos para recuperar as informações em localStorage e 
alimentar os elementos html.
 
A sintaxe abaixo demonstra os comandos para deletar as informações dos localStorage.
 
A sintaxe abaixo demonstra os comandos para limpar as informações dos elementos html.
 
 
Ajax
O jQuery oferece uma vasta documentação para se trabalhar as requisições AJAX. Quando 
trabalhamos com AJAX, utilizamos um objeto nativo dos navegadores que permite a comunicação 
assíncrona com o servidor. 
13
Objeto XMLHttpRequest
O objeto utilizado no AJAX é o XMLHttpRequest, manipulado através de javascript e que 
efetua a comunicação com o servidor através de requisições HTTP.
É um objeto nativo padronizado nos navegadores atuais, mas implementado como controle 
ActiveX nas versões antigas do Internet Explorer, isto é, 5 e 6. Isso significa que, antes de criá-lo, 
é necessário fazer uma verificação.
Os métodos disponíveis são apenas dois: open() para abrir a requisição e send() para enviar 
os dados. E, para receber, a propriedade éa ResponseXML.
function loadXMLDoc()
 {
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 //código de retorno aqui;
 }
 }
 xmlhttp.open(“GET”,url,true);
 xmlhttp.send();
 }
Toda a comunicação e verificação é feita pela função do jQuery; precisamos apenas informar 
os dados. Sendo assim, vamos à primeira função.
$.ajax()
É a função que mais oferece funcionalidades e, devido a isso, exige um pouco mais de estudo 
para ser compreendida. E todas as funções mais específicas que serão apresentadas adiante 
utilizam esta função para iniciar as requisições.
Para haver a requisição, você precisa informar um seletor que vai dar início à execução, o 
endereço do arquivo que contém os dados que serão retornados, o tipo de dado retornado e o 
que será feito com ele.
14
Unidade: Ajax, Cookies e Webstorage
Vejamos um exemplo:
 Quando o botão “enviar” do formulário for clicado, será iniciada a requisição. Utilizando o 
método POST, que é mais seguro para dados sensíveis, em seguida enviamos a dupla variável/
valor para o arquivo ‘dados.php’. Havendo sucesso na requisição, as informações retornadas 
pelo arquivo serão mostradas em uma div.
Não chega a ser tão complicado quanto eu disse, não é mesmo?
Configurações
Vejamos, agora, as opções disponíveis. Essas informações podem ser encontradas na 
biblioteca do jQuery.
•	 asinc – Como a requisição é feita com AJAX, ela é assíncrona. Se você quiser sincronizar 
a requisição, deve setar true para esta variável. Mas aviso que pode causar instabilidade 
na aplicação.
•	 beforeSend – Para alterar o cabeçalho da requisição ou realizar operações antes do envio 
da requisição, utilize esta função.
•	 cache – As páginas requisitadas via ajax() são armazenadas pelo navegador para agilizar 
o processo. Se você não quer que a página fique em cache, atribua false.
•	 complete – Completando a requisição, esta função define o que deve ser feito. Vem depois 
das funções success e error.
•	 contentType – Define o myme type da requisição. O padrão é application/x-ww-form-
urlencoded. que é o myme type enviado quando submetemos formulários.
•	 data – São os dados que serão passados para o arquivo definido em url. O formato deve ser 
variável/valor e, se você não deixar nesta formatação, a função formatará automaticamente.
•	 dataFilter – A função é garantir que os dados retornados estejam nas diretrizes esperadas.
•	 dataType – Você define qual o tipo de dado a ser retornado pela requisição. Os valores 
possíveis são: xml, html, json, sjonp, script e text. Configurando esta opção, você permite 
uma avaliação dos dados que são retornados. Se esta opção for omitida, a função 
identifica o tipo de dado, mas não avalia.
•	 error – Função que entra em ação caso a requisição retorne erro.
•	 global – Indica se os eventos manipuladores definidos em .ajaxSend() e .ajaxError() 
valerão na requisição atual. Por padrão está setado para true.
15
•	 ifModified – Se você quer que uma requisição seja retornada somente se o conteúdo dele 
mudou em relação à última requisição, configure esta variável para true.
•	 processData – Esta variável é configurada para processar e transformar as informações 
passadas para o padrão application/x-www-form-urlencoded. Se, por algum motivo, você 
não quer esta formatação, como mandar no formato xml para o servidor, atribua false 
para esta variável.
•	 password e username– Senha e usuário a serem utilizados em caso de autenticação HTTP.
•	 successs – A requisição retornando sucesso, é executada esta função, que recebe os dados 
enviados pelo arquivo.
•	 timeout – Se você quer limitar o tempo para a execução da requisição, defina um valor 
em milissegundos. Não retornando sucesso dentro do tempo definido, uma mensagem de 
erro, configurada por você na função error, será mostrada.
•	 type – O método usado para a requisição. Aceita GET ou POST. O padrão é GET.
•	 url – Endereço do arquivo que receberá a requisição.
Existem outras configurações, mas conhecer essas acima acredito que seja suficiente para 
realizar as atividades.
Fazendo uma requisição
Vamos, então, a um exemplo aplicado do que vimos acima.
 $.ajax({
 url : ‘info.php’,
 type : ‘post’,
 data : {‘aluno’:’Prof. Gobbato’, ‘email’: ‘professorgobbato@yahoo.com.br’},
 dataType: ‘html’,
 username: ‘professor’,
 password: ‘123456’,
 beforeSend: function(){
 $(‘#carregando’).fadeIn(); 
 },
 timeout: 3000, 
 success: function(retorno){
 $(‘#resposta’).html(retorno);
 },
 error: function(erro){
 $(‘#resposta’).html(erro);
 } 
 })
16
Unidade: Ajax, Cookies e Webstorage
Vamos à explicação: a função inicia-se passando o nome do arquivo que receberá as 
informações, o tipo de requisição e os dados. O objeto data aceita a combinação de variável/
valor já encapsulada com os símbolos (& e =) ou como apresentado acima. Nesse caso, os 
dados são formatados antes de serem enviados. E fica mais organizado.
Em seguida, definimos que os dados retornados serão do tipo HTML, e também 
informamos o usuário e senha (no exemplo, o servidor exige autenticação). Antes de enviar, 
informamos ao usuário o que está acontecendo, tornando visível a div com uma animação 
de carregamento (fade in).
Em um último ajuste, é definido que a requisição deve durar, no máximo, três segundos 
(3000 milissegundos). Se esse tempo for ultrapassado, a função error entra em ação e apresenta 
uma mensagem descrevendo o erro.
Tudo acertado e a requisição sendo um sucesso, com retorno de informação, a div ‘#resposta’ 
recebe os dados.
 
17
Material Complementar
Leitura complementar sobre webstorage: 
http://diveintohtml5.com.br/storage.html
18
Unidade: Ajax, Cookies e Webstorage
Referências
JQUERY. Disponível em: http://jquery.com/
SILVA, Maurício Samy. HTML5 – A linguagem de marcação que revolucionou a web. São 
Paulo: Novatec Editora, 2010. 
______. Ajax com jQuery : requisições Ajax com a simplicidade de jQuery. São Paulo: 
Novatec Editora, 2009 
19
Anotações
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil 
Tel: (55 11) 3385-3000