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

PrimFX PrimFX Le 31 octobre 2018

 

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"}
    	]
    }​

A propos de l'auteur

PrimFX
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 20 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos sur YouTube et les articles de ce site internet. J'ai également co-fondé en 2019 l'entreprise de services informatique Single Quote et je suis en parallÚle étudiant (en informatique bien sur) :-)

Votre commentaire

Vous devez ĂȘtre connectĂ© pour poster un commentaire. Se connecter ou CrĂ©er un compte

Commentaires 0