cefet_web

JavaScript parte 8

JSON, Web Storage, Ajax e Star Wars :stars:

Roteiro

  1. JSON
  2. Web Storage
  3. Ajax
  4. Guerras Estelares 🌠

JSON

Notação de objetos em JavaScript

Origem e características do JSON

Formato JSON

JSON vs XML

[
  {
    "nome": "JavaScript - The Good Parts",
    "autores": ["Douglas Crockford"],
    "ano": 2005
  },
  {
    "nome": "Node.js in Action",
    "autores": ["Mike Cantelon", "Mark Harter"],
    "ano":  2014
  }
]

JSON vs XML

<livros>
  <livro nome="JavaScript - The Good Parts" ano="2005">
    <autores>
      <autor>Douglas Crockford</autor>
    </autores>
  </livro>
  <livro nome="Node.js in Action" ano="2014">
    <autores>
      <autor>Mike Cantelon</autor>
      <autor>Mark Harter</autor>
    </autores>
  </livro>
</livros>

Serialização e Desserialização

JSON no navegador

Serialização: JSON.stringify(…)

JSON.stringify({})                    // '{}'
JSON.stringify(true)                  // 'true'
JSON.stringify('foo')                 // '"foo"'
JSON.stringify([1, 'false', false])   // '[1,"false",false]'
JSON.stringify({ x: 5 })              // '{"x":5}'
JSON.stringify({ x: 5, y: 6 })        // '{"x":5,"y":6}' ou '{"y":6,"x":5}'

JSON.stringify({ uno: 1, dos: 2 }, null, 4); // <-- parâmetro spacer       
// saída formatada 🌟:
// '{
//      "uno": 1,
//      "dos": 2
// }'

Desserialização: JSON.parse(…)

Web Storage

Salvando dados na página

Por que e o que salvar?

O Web Storage

localStorage e sessionStorage

localStorage

Exemplo de uso do localStorage (1/2)

Exemplo de uso do localStorage (2/2)

Principais métodos do localStorage

sessionStorage

Formato de armazenamento

Ajax

Requisições assíncronas

Foto do personagem Deadpool enfrentando um limpador multiuso AJAX

  1. Exemplo antigão (XMLHttpRequest)
  2. Exemplo com jQuery
  3. Exemplo com fetch

Ajax

(1) O XMLHttpRequest (antigão)

function callbackMaisTweets() {
  if (requisicao.readyState === 4) {  // 4: DONE (resp. recebida)
    if (requisicao.status === 200) {  // 200: código Ok do HTTP
      // a resposta chegou e foi um arquivo
      // .json com um array de tweets:
      let novosTweets = requisicao.response.arrayComNovosTweets;
      novosTweets.forEach(colocaTweetNaPagina);
    } else {
      console.log('Erro ao carregar mais tweets. Código HTTP: '
        + requisicao.status);
    }
  }
}

Estados de um XMLHttpRequest

0 UNSENT ~ open() ainda não foi invocado

1 OPENED ~ send() ainda não foi invocado

2 HEADERS_RECEIVED ~ send() foi invocado e os cabeçalhos da resposta já estão disponíveis (chegaram)

3 LOADING ~ fazendo download da resposta

4 DONE ~ operação finalizada

Exemplo do Fumaceiro (versão vanilla js)

// no clique, faz um Ajax para pegar o xcom-reviews.json
showReviewsEl.addEventListener('click', () => {
  let requisicao = new XMLHttpRequest();
  requisicao.open('GET', 'xcom-reviews.json');
  requisicao.responseType = 'json';
  requisicao.onreadystatechange = () => {
    // chegando a resposta, põe as avaliações na página
    if (requisicao.readyState === 4) {
      if (requisicao.status === 200) {
        // a resposta é um objeto js que tem 'avaliacoes'
        let avaliacoes = requisicao.response.avaliacoes;

        reviewsEl.innerHTML = '';
        avaliacoes.forEach(criaAvaliacaoNaPagina);
      }
    }
  }

  requisicao.send();
});

{
  "avaliacoes": [
    {
      "autor": "Astolfo Lombardi",
      "recomenda": true,
      "comentario": "Um jogo de ETs sinistrões",
      "curtidas": 18
    },
    {
      "autor": "Eymael Fortunato",
      "recomenda": true,
      "comentario": "Rola uma parada sadia entre
                     humanos e aliens neste jogo #sqn",
      "curtidas": 7
    } /* ...+2 avaliações */
  ]
}

(2) Ajax mais facinho com jQuery

Exemplo do Fumaceiro (versão jQuery)

$('#show-reviews').click(() => {
  $.ajax({
    url: 'xcom-reviews.json',
    dataType: 'json',
    success: resposta => {
      // a resposta é um objeto js que contém uma propriedade avaliacoes
      let avaliacoes = resposta.avaliacoes;
      // limpamos a <div id="reviews">...</div>
      $reviews.empty();
      // percorremos as avaliacoes, colocando elementos na página
      avaliacoes.forEach(criaAvaliacaoNaPagina);
    }
  });
});

(3) Ajax usando fetch

Exemplo do Fumaceiro (versão fetch)

showReviewsEl.addEventListener('click', () => {
  fetch('xcom-reviews.json')                        // retorna uma *promessa*
    .then(resposta => resposta.json())              // lê a resp. como JSON
    .then(dados => {
      // a resposta é um objeto js que contém uma propriedade avaliacoes
      let avaliacoes = dados.avaliacoes;

      reviewsEl.innerHTML = '';
      avaliacoes.forEach(criaAvaliacaoNaPagina);      
    });
  });
});

fetch (na MDN)

Algumas opções de fetch

fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    body: JSON.stringify(data) // deve ter mesmo "Content-Type" do header
  })
  .then(resposta => resposa.json())
  .then(....)
}

Guerras Estelares :stars:

Intro nas estrelas

Usos comuns de Ajax

Intro nas Estrelas

Referências

  1. Capítulo 12 do livro “Head First: JavaScript”
  2. Apêndice E do livro “JavaScript - The Good Parts”
  3. Mozilla Developer Network (MDN)

Erro ao fazer o AJAX (slide oculto :P)