AJAX

1. AJAX

2. Introduction • Objectifs • 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

3. AJAX URL + paramètres Le client Le serveur (navigateur) (HTTP) URL + paramètres 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

4. 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

5. XMLHttpRequest • 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;

6. XMLHttpRequest • Asynchrone : on utilise des callbacks xmlhttp.onreadystatechange= function(){ // Requête aboutieif(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);

7. 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;

8. 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);  } )

9. 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});