Fundamentos del uso de fetch en AJAX

Veamos ahora cómo cargar parte de una página usando AJAX. Supongamos que en nuestra página index.html hay un div y un botón (aquí se muestra el contenido de body):

<div></div>
<button>click me</button>

Supongamos que también tenemos la página ajax.html, que contiene tres párrafos (sin etiquetas de página, solo párrafos):

<p>1</p>
<p>2</p>
<p>3</p>

Hagamos que al hacer clic en el botón en la página index.html, el contenido de la página ajax.html se cargue en el div.

Para ello, primero obtengamos referencias a nuestros elementos en variables:

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

Añadamos un controlador de clic al botón:

button.addEventListener('click', function() {
	// aquí realizaremos la solicitud AJAX
});

Ahora realicemos la solicitud AJAX. Para esto se utiliza la función fetch, que recibe como parámetro la dirección de la página cuyo contenido queremos obtener. Especificamos la dirección de la página ajax.html en nuestro servidor:

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

fetch devolverá una promesa como resultado. El hecho es que solicitar una página mediante AJAX es una operación asíncrona, ya que pasará algún tiempo antes de que la página nos responda.

Obtengamos el resultado de la promesa:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// la respuesta del servidor está en la variable response
	});
});

Simplifiquemos, eliminando la variable innecesaria:

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

Simplifiquemos, usando una función flecha:

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

Presentémoslo de una forma más legible:

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

La variable response contiene un objeto bastante complejo de la clase Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // objeto de la clase Response
	});
});

Estudiaremos este objeto en profundidad en las siguientes lecciones, pero por ahora necesitamos lo más simple: obtener el texto de la página solicitada. Para esto, en este objeto existe el método text. Sin embargo, este método no devuelve el texto de la página, sino una promesa con su texto:

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

Para obtener el texto de la página, es necesario procesar la promesa obtenida de response.text una vez más:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // texto de la página
		}
	);
});

Finalmente, hemos obtenido el texto de la página solicitada y podemos, por ejemplo, insertarlo en nuestro div:

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

Se dan tres botones y un div. En el servidor hay tres páginas. Haz que cada uno de los botones cargue en el div la página correspondiente.

Supongamos que hay cinco páginas en el servidor. Haz que el primer clic en el botón cargue la primera página, el segundo clic - la segunda, y así sucesivamente, hasta que se acaben las páginas.