Â
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"} ] }â
Votre commentaire