≡

Utiliser XMLHttpRequest pour faire des requêtes AJAX.

#1 Apprendre à utiliser XMLHttpRequest

Un objet construit avec le constructeur XMLHttpRequest permet de faire des requêtes AJAX. Aujourd'hui pour faire des requêtes AJAX il existe des objets plus élaborés qui cachent pas mal de détails d'implémentation et qui utilisent les promesses 😎. Je pense à Fetch voir à Axios.

Alors vous pouvez faire du Fetch sans connaître XMLHttpRequest mais à mon avis vous avez intérêt à étudier les deux. Et comme je le dis souvent quand on apprend JavaScript on apprend pas seulement JavaScript mais aussi l'histoire de JavaScript 😀.

Je vais faire un exemple d'une requête GET avec l'objet XMLHttpRequest.

Tout d'abord il faut construire un objet au moyen du constructeur XMLHttpRequest. Le plus souvent on nomme cet objet xhr.
Ensuite je commence par installer un gestionnaire d'événement à l'aide de addEventListener pour attendre une réponse. Notez bien que je commence par attendre une réponse à une demande que je n'ai pas encore faite. Pour le gestionnaire d'événement j'utilise ici addEventListener pour bien faire comprendre que nous sommes dans le cadre d'une programmation événementielle. Je pourrais utiliser xhr.onload mais on a peut être plus l'habitude de addEventListener pour gérer des événements.
Dans le gestionnaire d'événements je prends la peine d'afficher les différentes valeurs de la propriété xhr.readyState. Les valeurs de cette propriété nous informent sur l'état d'avancement de notre requête.

MDN
Ensuite je fais un xhr.open pour ouvrir la connexion. Le premier argument spécifie le type (la méthode) de la requête. Ici je vais faire un 'GET'. Ensuite je dois préciser l'uri c'est à dire la partie serveur de l'url. A cette uri on ajoute la query string de la requête. Ici la chaîne ?name=Tuto Dev Web. La query string ce sont des couples nom de paramètre=valeur de paramètre. On a vu ça dans le tuto sur les requêtes HTTP. Pour une requête GET il n'est pas nécessaire d'Url encoder la query string. On le fera lorsque l'on fera un exemple avec une requête POST. Le dernier paramètre est optionnel et sert à préciser si on veut une requête synchrone ou une requête asynchrone. La valeur true correspond à asynchrone, c'est la valeur par défaut. La valeur false qui correspond à synchrone est obsolète. En général on ne met pas ce true. Je le mets ici parce que j'en parle.
Enfin il faut faire un xhr.send pour envoyer la requête. Je mets la valeur null comme argument car le corps d'une requête GET est vide. On fera une requête POST dans le prochain tuto et on mettra la query string à cet endroit là.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<script>
		console.log('Début');
		const xhr = new XMLHttpRequest;
		// Je mets un addEventListener pour que l'on comprenne bien que l'on est
		// dans le cadre d'une programmation événementielle
		// On peut aussi écrire xhr.onload = function() {}
		xhr.addEventListener(
			'readystatechange',
			() => {
				console.log(`readyState => ${xhr.readyState}`);
				if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
					console.log(xhr.responseText);
				}
			}
		);
		// La query string de la requête est à la fin de l'Uri
		const uri = '/V2/TUTO/CHAPITRE/JAVASCRIPT/63-XMLHttpRequest/exe/name.php?name=Tuto Dev Web';
		// Le true demande une requête asynchrone. 
		// C'est la valeur par défaut de l'argument
		xhr.open('GET',uri,true); 
		// L'argument du send c'est le body de la requête
		// Comme avec get il n'y en a pas je mets null
		xhr.send(null);
		console.log('Fin');
	</script>
</body>
</html>

Ci-dessous je mets le code PHP qui se trouve côté serveur. Je récupère le paramètre de la query string dans la supergobale $_GET['name']. Je fais ensuite un tirage au sort d'une valeur entre 1 et 10. Valeur que je vais utiliser pour mettre en sommeil le processus PHP avec un sleep(). De cette manière je provoque un retard aléatoire. J'élabore ensuite une réponse que je renvoie avec un echo.

Tester le code

Ci-dessous sur la trace de l'exécution on peut voir quatre déclenchements de l'événement readystatechange. Vous avez la signification des valeurs dans le tableau ci-dessus . Ceci explique que l'on s'intéresse à la réponse que lorsque l'opération d'entrée sortie asynchrone est terminée c'est à dire lorsque le xhr.readyState est égal à XMLHttpRequest.DONE (La constante DONE vaut 4).
L'autre condition est que le code de retour de la requête xhr.status soit égal 200. Ce qui signifie qu'au niveau http tout s'est déroulé correctement.

En utilisant les outils de développement on peut voir que le paramètre de la requête a été url encoder. Les espaces de la chaîne Tuto Dev Web on été remplacés par des %20. Au niveau programmation il n'y a rien eu à faire. Ca s'est fait "tout seul". Ce n'est pas le cas lors d'une requête POST.