Aplicativos WEB - 10 - Dados33

Prévia do material em texto

Aplicativos WEB
Professor Paulo José de Carlo Almeida
Requerendo dados de uma API
Browser
XMLHTTPREQUEST
WEB / HTTP / HTTPS
API
GET
HTML
JS
GET
JSON
Acesso a API de CEP
var btnpegar;
function aoCarregarPagina() {
 btnpegar = document.getElementById("btnpegar");
 btnpegar.addEventListener('click', requerercep);
}
function requerercep() {
 var ajax = new XMLHttpRequest();
 var cep = document.getElementById("txtcep").value;
// Seta tipo de requisição e URL com os parâmetros
 ajax.open("GET", "https://viacep.com.br/ws/" + cep + "/json/", true);
// Envia a requisição
 ajax.send();
// Cria um evento para receber o retorno.
 ajax.onreadystatechange = function () {
 // Caso o state seja 4 e o http.status for 200, é porque a requisiçõe deu certo.
 if (ajax.readyState == 4 && ajax.status == 200) {
 var data = ajax.responseText;
 // Retorno do Ajax
 console.log(data);
 var obj = JSON.parse(data);
 console.log(obj);
 alert(obj.logradouro);
 }
 }
}
3
Acesso a API de CEP – Forma mais funcional
var btnpegar;
function aoCarregarPagina() {
 btnpegar = document.getElementById("btnpegar");
 btnpegar.addEventListener('click', requerercep);
}
function requerercep() {
 var ajax = new XMLHttpRequest();
 var cep = document.getElementById("txtcep").value;
// Seta tipo de requisição e URL com os parâmetros
 ajax.open("GET", "https://viacep.com.br/ws/" + cep + "/json/", true);
// Envia a requisição
 ajax.send();
// Cria um evento para receber o retorno.
 ajax.onreadystatechange = function () {
 // Caso o state seja 4 e o http.status for 200, é porque a requisiçõe deu certo.
 if (ajax.readyState == 4 && ajax.status == 200) {
 var data = ajax.responseText;
 // Retorno do Ajax
 console.log(data);
 var obj = JSON.parse(data);
 console.log(obj);
 alert(obj.logradouro);
 }
 }
}
4
Guardando dados no Navegador
É possível guardar dados no navegador para que ao longo da navegação possamos recorrer a eles sempre que necessário
É importante lembrar que guardar dados sem nenhum tipo de estrutura é uma prática arriscada e pode levar a equívocos
sessionStorage
sessionStorage acessa um objeto Storage de sessão para a origem atual. 
sessionStorage é semelhante a localStorage; a diferença é que, enquanto os dados localStorage não expiram, os dados sessionStorage são limpos quando a sessão da página termina.
Uma sessão da página dura enquanto o navegador estiver aberto e sobrevive durante as recargas e restaurações da página.
Abrir uma página em uma nova guia ou janela cria uma nova sessão com o valor do contexto de navegação de nível superior, que difere de como os cookies de sessão funcionam.
Abrir várias guias / janelas com a mesma URL cria sessionStorage para cada guia / janela.
Fechar uma guia / janela encerra a sessão e limpa os objetos sessionStorage.
Teste
localStorage
A localStorage propriedade somente leitura permite acessar um Storage objeto para a Document origem do; os dados armazenados são salvos nas sessões do navegador. 
localStorage é semelhante a sessionStorage, exceto que, embora os dados armazenados localStorage não tenham tempo de expiração, os dados armazenados sessionStorage são limpos quando a sessão da página termina, ou seja, quando a página é fechada.
teste