Tuto JS - #14 L'Objet XMLHttpRequest (Ajax)

Il est temps de passer aux choses sérieuses ! Je vous propose aujourd'hui de découvrir comment créer des requêtes asynchrones en JavaScript grâce à l'objet XMLHttpRequest. Vous avez peut-être déjà entendu parler de ces requêtes asynchrones sous le nom d'Ajax, acronyme de « Asynchronous JavaScript And XML » (rien avoir avec le produit de nettoyage :p).

Les états possible du "readyState" :
- 0 : Requête non initialisée
- 1 : Connexion au serveur établie
- 2 : Requête reçue
- 3 : Requête en cours de traitement
- 4 : Requête terminée et réponse prête

Quelques statuts HTTP :
- 200 : Requête OK
- 403 : Accès interdit
- 404 : Page (ou fichier) introuvable
- 500 : Erreur interne du serveur

🔗 Une liste de toutes les réponse HTTP possibles est disponible sur w3schools.

Code vu dans ce tuto :

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>TUTO JS - #14 L'Objet XMLHttpRequest (Ajax)</title>
	<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>


<h1>TUTO JS - #14 L'Objet XMLHttpRequest (Ajax)</h1>
<div id="demo"></div>

<form id="formreq">
	<input type="text" placeholder="Fichier à récupérer..." id="input-fichier">
	<input type="submit">
</form>


<script src="js/app.js"></script>
</body>
</html>

js/app.js

function requete(fichier) {
	var demo = document.getElementById("demo");
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
		console.log(this);
		if (this.readyState == 4 && this.status == 200) {
			demo.innerHTML = this.responseText;
			// var data = this.response;
			// var utilisateurs = data.utilisateurs;
			// console.log(utilisateurs);
			// for (var i = 0; i < utilisateurs.length; i++) {
			// 	demo.innerHTML += utilisateurs[i].prenom + " ("+ utilisateurs[i].age +") ";
			// }
		} else if (this.readyState == 4 && this.status == 404) {
			alert('Erreur 404 :/');
		}
	};

	xhr.open("GET", "async/"+fichier, true);
	xhr.responseType = "text";
	xhr.send();
}

document.getElementById("formreq").addEventListener("submit", function(e) {
	e.preventDefault();

	var fichierARecuperer = document.getElementById("input-fichier").value;
	console.log(fichierARecuperer);
	requete(fichierARecuperer);

	return false;
});

async/texte.txt (texte brut)

Ceci est un texte très intéressant sur les requêtes asynchrones, ou pas...

async/donnees.txt (données JSON)

{
	"utilisateurs":[
		{"prenom":"Jean","age":22,"sexe":"h"},
		{"prenom":"David","age":38,"sexe":"h"},
		{"prenom":"Anna","age":18,"sexe":"f"}
	]
}

Tuto JS - #14 L'Objet XMLHttpRequest (Ajax)

A propos de l'auteur

Votre commentaire

Commentaires 0

Articles / Vidéos

Échange

Ressources