Fundamentos do uso do fetch em AJAX

Agora vamos ver como carregar parte de uma página usando AJAX. Vamos supor que na nossa página index.html haja uma div e um botão (aqui está o conteúdo da body):

public/index.html<div></div>
<button>click me</button>

Suponha que também tenhamos a página ajax.html, que contém três parágrafos (sem tags de página, apenas parágrafos):

public/ajax.html<p>1</p>
<p>2</p>
<p>3</p>

Vamos fazer com que, ao clicar no botão na página index.html, o conteúdo da página ajax.html seja carregado dentro da div.

Para isso, primeiro vamos obter referências aos nossos elementos em variáveis:

public/client.jslet div    = document.querySelector('div');
let button = document.querySelector('button');

Vamos adicionar um manipulador de evento de clique ao botão:

public/client.jsbutton.addEventListener('click', function() {
  // aqui faremos a requisição AJAX
});

Agora vamos fazer a requisição AJAX. Para isso, usamos a função fetch, que recebe como parâmetro o endereço da página cujo conteúdo desejamos obter. Vamos especificar o endereço da página ajax.html no nosso servidor:

public/client.jsbutton.addEventListener('click', function() {
  let result = fetch('/ajax.html'); 
});

O resultado de fetch será uma Promise. Isso acontece porque fazer uma requisição de página via AJAX é uma operação assíncrona, pois levará algum tempo até que a página nos responda.

Vamos obter o resultado da Promise:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html'); 
  
  promise.then(function(response) {
    // a resposta do servidor está na variável response
  });
});

Vamos simplificar, eliminando a variável desnecessária:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(function(response) {
    
  });
});

Vamos simplificar usando uma função arrow:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    
  });
});

Vamos apresentar de uma forma mais legível:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      
    }
  );
});

A variável response contém um objeto bastante complexo da classe Response:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(response => {
    console.log(response); // objeto da classe Response
  });
});

Estudaremos este objeto em profundidade nas próximas lições, mas por enquanto precisamos do mais básico - obter o texto da página solicitada. Para isso, existe o método text neste objeto. No entanto, este método não retorna o texto da página, mas uma Promise com seu texto:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      console.log(response.text()); // exibirá Promise
    }
  );
});

Para acessar o texto da página, é necessário processar a Promise obtida de response.text mais uma vez:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text); // texto da página
    }
  );
});

Então, finalmente obtivemos o texto da página solicitada e podemos, por exemplo, inseri-lo na nossa div:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/ajax.html').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      div.innerHTML = text;
    }
  );
});