La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier Tannier AJAX. Programmation Web JavaScript Xavier Tannier Introduction Objectifs – Les commandes AJAX avec JavaScript et.

Présentations similaires


Présentation au sujet: "Xavier Tannier AJAX. Programmation Web JavaScript Xavier Tannier Introduction Objectifs – Les commandes AJAX avec JavaScript et."— Transcription de la présentation:

1 Xavier Tannier AJAX

2 Programmation Web JavaScript Xavier Tannier Introduction Objectifs – Les commandes AJAX avec JavaScript et jQuery – AJAX nest 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 Programmation Web Xavier Tannier JavaScript AJAX 3 Le clientLe 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. URL + paramètres

4 Programmation Web JavaScript Xavier Tannier 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 nest pas un langage de programmation, cest une technique Suggestions dans Google, édition inline dans Flicker, mises à jour automatique dans Twitter… Nouvel objet : XMLHttpRequest 4

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

6 Programmation Web JavaScript Xavier Tannier 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); 6

7 Programmation Web JavaScript Xavier Tannier Saisir un mot : Suggestions: Exemple : auto-complétion / suggestion 7 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 Programmation Web Xavier Tannier JavaScript AJAX avec jQuery (1/2) // Charge le contenu de lURL // dans lélément $("#id").load("http://...") // Charge le contenu de lURL // dans un élément identifié // #p1, et met le tout dans // lélément #id $("#id").load("http://... #p1") // Charge le contenu de lURL dans lélément, et gère le // résultat avec : // - responseTxt = le contenu // - statusTxt = le statut de lappel AJAX // - xhr = lobjet 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); } ) 8

9 Programmation Web Xavier Tannier JavaScript 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 lappel $.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 lappel $.get("script.jsp", "paramètres", function(data,status){ // Traitement } ); 9


Télécharger ppt "Xavier Tannier AJAX. Programmation Web JavaScript Xavier Tannier Introduction Objectifs – Les commandes AJAX avec JavaScript et."

Présentations similaires


Annonces Google