Programação Web

Material Teórico
Ajax, Cookies e Webstorage

Responsável pelo Conteúdo:

Prof. Esp. Alexander Albuquerque Gobbato

Revisão Textual:
Profa. Esp. Vera Lídia de Sá Cicarone
 Ajax, Cookies e Webstorage

• 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?

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.

5
 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!

6
 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.

7
 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”)

8
• 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.

9
 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).

10
 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.

11
 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.

12
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.

13
 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.

14
 • 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’: ‘[email protected]’},
dataType: ‘html’,
username: ‘professor’,
password: ‘123456’,
beforeSend: function(){
$(‘#carregando’).fadeIn();
},
timeout: 3000,
success: function(retorno){
$(‘#resposta’).html(retorno);
},
error: function(erro){
$(‘#resposta’).html(erro);
}
})

15
 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.

16
Material Complementar

Leitura complementar sobre webstorage:

http://diveintohtml5.com.br/storage.html

17
 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

18
Anotações

19
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000