Bases de l'utilisation de fetch en AJAX

Voyons maintenant comment charger une partie d'une page via AJAX. Supposons que sur notre page index.html se trouvent une div et un bouton (voici le contenu du body) :

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

Supposons que nous ayons également une page ajax.html, sur laquelle se trouvent trois paragraphes (sans les balises de page, juste des paragraphes) :

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

Faisons en sorte qu'un clic sur le bouton de la page index.html charge le contenu de la page ajax.html dans la div.

Pour ce faire, commençons par obtenir dans des variables les références à nos éléments :

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

Ajoutons un gestionnaire de clic sur le bouton :

button.addEventListener('click', function() {
	// nous exécuterons la requête AJAX ici
});

Exécutons maintenant la requête AJAX. Pour cela, on utilise la fonction fetch, qui prend en paramètre l'adresse de la page dont nous voulons obtenir le contenu. Spécifions l'adresse de la page ajax.html sur notre serveur :

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

Le résultat de fetch sera une promesse. En effet, une requête de page via AJAX est une opération asynchrone, car cela prendra un certain temps avant que la page ne nous réponde.

Récupérons le résultat de la promesse :

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// la réponse du serveur se trouve dans la variable response
	});
});

Simplifions en nous débarrassant de la variable superflue :

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

Simplifions en utilisant une fonction fléchée :

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

Représentons cela sous une forme plus lisible :

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

La variable response contient un objet assez complexe de la classe Response :

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

Nous étudierons cet objet en détail dans les prochaines leçons, mais pour l'instant, nous avons besoin de la chose la plus simple - obtenir le texte de la page demandée. Pour cela, il existe une méthode text dans cet objet. Cependant, cette méthode ne renvoie pas le texte de la page, mais une promesse avec son texte :

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

Pour accéder au texte de la page, il est nécessaire de traiter à nouveau la promesse obtenue à partir de response.text :

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // le texte de la page
		}
	);
});

Ainsi, nous avons finalement obtenu le texte de la page demandée et pouvons, par exemple, l'insérer dans notre div :

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

Trois boutons et une div sont donnés. Trois pages sont données sur le serveur. Faites en sorte que chaque bouton charge dans la div la page correspondante.

Supposons qu'il y ait cinq pages sur le serveur. Faites en sorte que le premier clic sur le bouton charge la première page, le deuxième clic - la deuxième, et ainsi de suite, jusqu'à ce qu'il n'y ait plus de pages.