AJAX

Introduction Objectifs Prérequis : Les commandes AJAX avec JavaScript et jQuery AJAX n’est pas un nouveau langage, mais une utilisation particulière du JavaScript  Pas grand-chose de nouveau à savoir Prérequis : HTML JavaScript jQuery (pour la partie AJAX et jQuery) Notions de programmation client-serveur

AJAX Le client Le serveur URL + paramètres (navigateur) (HTTP) Pages HTML avec AJAX La page est modifiée sans rechargement. Le Javascript peut contacter le serveur web (en arrière plan) pour obtenir de nouvelles informations et modifier la page en conséquence. 3

AJAX Asynchronous JavaScript and XML JavaScript peut envoyer des requêtes au serveur web, en arrière plan, sans recharger la page web principale AJAX n’est pas un langage de programmation, c’est une technique Suggestions dans Google, édition inline dans Flicker, mises à jour automatique dans Twitter… Nouvel objet : XMLHttpRequest

XMLHttpRequest Exemple synchrone (c’est-à-dire bloquant, à éviter) if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); }else{ // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } Exemple synchrone (c’est-à-dire bloquant, à éviter) xmlhttp.open("GET", "/citation.php?id=12", false); xmlhttp.send(null); document.getElementById("cit").innerHTML = xmlhttp.responseText;

XMLHttpRequest Asynchrone : on utilise des callbacks xmlhttp.onreadystatechange = function(){ // Requête aboutie if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ elem.innerHTML = xmlhttp.responseText; } // Page non trouvée if (xmlhttp.status == 404) { // Traitement erreur } } xmlhttp.open("GET", url, true); xmlhttp.send(null);

Exemple : auto-complétion / suggestion <form> Saisir un mot : <input type="text" id="txt1" /> </form> <p>Suggestions: <span id="suggest"></span></p> function showHint(){ if(this.value.length == 0){ document.getElementById("suggest").innerHTML=""; return; } xmlhttp = new XMLHttpRequest(); var url = "suggest.php?txt=" + this.value; xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ document.getElementById("suggest").innerHTML = xmlhttp.responseText; }; xmlhttp.open("GET", url, true); xmlhttp.send(null); document.getElementById("txt1").onkeyup = showHint;

AJAX avec jQuery (1/2) // Charge le contenu de l’URL // dans l’élément $("#id").load("http://...") // Charge le contenu de l’URL // dans un élément identifié // #p1, et met le tout dans // l’élément #id $("#id").load("http://... #p1") // Charge le contenu de l’URL dans l’élément, et gère le // résultat avec : // - responseTxt = le contenu // - statusTxt = le statut de l’appel AJAX // - xhr = l’objet XMLHttpRequest // (voir le cours sur AJAX) $("#id").load("http://...", function(responseTxt,statusTxt,xhr){     if(statusTxt=="success")       alert("OK");     else if(statusTxt=="error")       alert("erreur:"+xhr.status+": "+xhr.statusText);   } )

AJAX avec jQuery (2/2) // Appelle le script « script.jsp » (ou script.php, ou script.asp…) // avec la méthode GET et traite le résultat avec : // - data = les données renvoyées par le script // - status = le statut de l’appel $.get("script.jsp", function(data,status){ // Traitement   } ); // Appelle le script « script.jsp » (ou script.php, ou script.asp…) // avec la méthode POST, avec optionnellement des paramètres, et // traite le résultat avec : // - data = les données renvoyées par le script // - status = le statut de l’appel $.get("script.jsp", "paramètres", function(data,status){ // Traitement   } );