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

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

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

let div    = document.querySelector('div');
let button = document.querySelector('button');

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

button.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:

button.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:

button.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:

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

Vamos simplificar usando uma função arrow:

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

Vamos apresentar de uma forma mais legível:

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

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

button.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:

button.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:

button.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:

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

Existem três botões e uma div. No servidor, existem três páginas. Faça com que cada botão carregue na div a página correspondente.

Suponha que haja cinco páginas no servidor. Faça com que o primeiro clique no botão carregue a primeira página, o segundo clique - a segunda, e assim por diante, até que as páginas se esgotem.