cefet_front_end

JavaScript parte 7

Ajax

Hoje veremos

Requisições síncronas
Ajax: requisições assíncronas
- Em vanilla JavaScript
- Com ajuda de jQuery
- Usando fetch

Requisições Síncronas

Como funcionam as requisições

Revisando:
- O modelo de requisição-resposta
- Vendo as requisições realizadas
Síncrono vs assíncrono

Relembrando, o protocolo HTTP

É um protocolo na camada de aplicação

Conjunto de regras bem definidas descrevendo como entidades se comunicam.
- É a “língua falada” pelo navegador e pelo servidor web
Modelo requisição → resposta

Navegador requisita algo e Servidor responde

Requisição:

  GET /index.html HTTP/1.1
  Host: www.twitter.com

Resposta:

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Content-Type: text/html; charset=UTF-8
Content-Length: 131

<!DOCTYPE html>
<html>
<head>
  <title>Twitter</title>
</head>
<body>
  Olá mundo, este é um tweet.
</body>
</html>

Síncrono vs assíncrono

Uma requisição tradicional é síncrona, ou seja, enquanto ela está sendo feita, o navegador “deixa o usuário esperando”
Uma requisição assíncrona é disparada e “esquecida”. Quando sua resposta chega, uma função JavaScript é chamada
- O usuário pode continuar usando a página enquanto a resposta chega

Páginas dinâmicas

:globe_with_meridians: Exemplo do Fumaceiro

Ajax

Requisições assíncronas

Foto do personagem Deadpool enfrentando um limpador multiuso AJAX

Exemplo antigão (XMLHttpRequest)
Exemplo com jQuery
Exemplo com fetch

Ajax

É a sigla para Asynchronous JavaScript and XML
- Um nome melhor seria requisição assíncrona
Surgiu no Internet Explorer, nos anos 2000, por Jesse Gareth
Originalmente, usava-se JavaScript para fazer uma requisição de dados ao servidor, que respondia no formato XML (em vez de HTML)
Hoje em dia, responde-se com qualquer objeto reconhecido pelo navegador (o mais comum é JSON)
Podemos ver as requisições Ajax (XHR) da página:

(1) O `XMLHttpRequest` (antigão)

Cada requisição Ajax é um objeto XMLHttpRequest. Exemplo do Twitter:

let requisicao = new XMLHttpRequest();
requisicao.onreadystatechange = callbackMaisTweets;
requisicao.responseType = 'json';
requisicao.open('GET', '/tweets/pagina/5');
requisicao.send();

Uma callback (definida em onreadystatechange) é invocada a cada mudança de estado da requisição (veja nos próximos 2 slides)
Referência e Tutorial na MDN

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);
    }
  }
}

Invocada a cada alteração de estado
- da requisição XMLHttpRequest

A resposta foi isto:

{
"quantidade": 20,
"arrayComNovosTweets": [
  {
    "autor": "Sensacionalista",
    "texto": "Grupo de pessoas que sabem tudo
              cria novo grupo: Vegetarianos
              pró carne mal passada",
    "curtidas": 2
  } /* mais 19 tweets aqui... */
]
}

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

Basicamente, precisamos de fazer algo apenas quando a requisição chega ao estado 4 DONE

Exemplo do Fumaceiro (versão vanilla js)

Uma página de um jogo com informações + avaliações
Como nem todos usuários lêem avaliações, elas não são carregadas inicialmente
- Isso foi feito para carregar a página mais rápido
Ao clicar no botão “Mostrar avaliações”, fazemos uma requisição Ajax para pegá-las e, então, as mostramos

// 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

O jQuery possui uma abstração do objeto XMLHttpRequest para facilitar a realização de requisições Ajax. Exemplo:

  $.ajax({
    url: '/tweets/pagina/5',
    dataType: 'json',
    success: function(resposta) {
      let novosTweets = resposta.arrayComNovosTweets;
      novosTweets.forEach(colocaTweetNaPagina);
    }
  });

Existe $.getJSON({...}), equivalente a $.ajax({...}) com o dataType: 'json'

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

Mais recentemente, foi introduzida nova forma: fetch(...)
Ele envia uma requisição Ajax e retorna uma Promessa

Promessa: algo que pode dar certo, ou errado.

Formato:

fetch(url, opcoes)
  .then(callbackSucesso)
  .catch(callbackErro);

Referência do Fetch na MDN

Exemplo do Fumaceiro (versão fetch)

showReviewsEl.addEventListener('click', () => {
  fetch('xcom-reviews.json')                        // retorna uma *promessa*
    .then(respostaBruta => respostaBruta.json())    // arrow function
    .then(resposta => {
      // a resposta é um objeto js que contém uma propriedade avaliacoes
      let avaliacoes = resposta.avaliacoes;

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

Usos comuns de Ajax

Pegar novas informações depois que a página carregou. Exemplos:
- Carregar mais tweets
- Carregar mais produtos
- Carregar avaliações, comentários
- Carregar a próxima fase de um jogo
Avisar ao back-end que algo mudou, sem sair da página. Exemplos:
- Botão curtir
- Enviar um comentário
- Adicionar produto ao carrinho
Pegar informações de outros sites (se eles permitirem)
- Basta usar uma URL absoluta, por exemplo, colocando https://swapi.dev/api/films/1/ como a URL

Erro ao fazer o AJAX

Os navegadores têm uma política de permissões diferente para quando acessamos uma página via o protocolo file:// que proíbe o uso de requisições Ajax, dentre outras coisas
Para contornar a restrição, precisamos hospedar nosso arquivo em um servidor Web e acessar a página usando o protocolo HTTP
1. Navegue até seu diretório com o arquivo index.html pelo terminal
2. Use um servidor http simples em python
  - Python versão 2.x
    $ python -m SimpleHTTPServer
  - Python versão 3.x
    $ python -m http.server 8000
3. Acesse http://localhost:8000 no navegador

Referências

Mozilla Developer Network (MDN)
Artigo que batizou a técnica de Ajax, de Jesse James Garret

cefet_front_end

JavaScript parte 7

Ajax

Hoje veremos

Requisições Síncronas

Como funcionam as requisições

Relembrando, o protocolo HTTP

Navegador requisita algo e Servidor responde

Síncrono vs assíncrono

Ajax

Requisições assíncronas

Ajax

(1) O XMLHttpRequest (antigão)

Estados de um XMLHttpRequest

Exemplo do Fumaceiro (versão vanilla js)

(2) Ajax mais facinho com jQuery

Exemplo do Fumaceiro (versão jQuery)

(3) Ajax usando fetch

Exemplo do Fumaceiro (versão fetch)

Usos comuns de Ajax

Erro ao fazer o AJAX

Referências

(1) O `XMLHttpRequest` (antigão)

Estados de um `XMLHttpRequest`