BDWeb : AJAX Licence 3 ère Année Fabrice Lefèvre 2010
Asynchronous Javascript + XML nom donné à un ensemble de techniques préexistantes dépend essentiellement de XMLHttpRquest, un objet coté client utilisable en JavaScript existe depuis IE4 (objet Active X nommé alors XMLHTTP) en mai 2006 : Ajax: une nouvelle approche pour les applications Web de JJ Garrett il ne s agit pas d un langage de programmation mais d une façon nouvelle d utiliser des standards existants AJAX est l art d échanger des données avec un serveur web, de modifier des parties de pages web, sans devoir recharger la page en entier L3S2 BDWeb 2
Objectifs Bonne répartition des ressources = sollicite plus les postes clients, et moins le serveur et le réseau. Ajax effectue les traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur. La création de pages web dynamiques auparavant se faisait coté serveur. Les modifications ou interrogations faites par l utilisateur sont des requêtes envoyées au serveur, créant une nouvelle page transmise au navigateur à travers le réseau Internet en utilisant des services web, ou un langage intégré dans la page comme PHP. Ce n'est plus nécessaire. Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière L3S2 BDWeb 3
Technique composite Ajax est une technique qui fait usage des éléments suivants : HTML. CSS pour la présentation de la page. JavaScript (ECMAScript) pour les traitements locaux, et DOM (Document Object Model) qui accède aux éléments de la page ou du formulaire ou aux éléments d'un fichier XML pris sur le serveur (avec la méthode getelementbytagname par exemple)... l'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone. si besoin, DOMparser permet la manipulation d un document XML. PHP ou un autre langage de scripts peut être utilisé coté serveur. L3S2 BDWeb 4
Un modèle différent L3S2 BDWeb 5
Principes de fonctionnement Les fonctions JavaScript identifient les éléments de la page grâce au DOM et communiquent avec le serveur par l'objet XMLHttpRequest. Pour recueillir des informations sur le serveur cet objet dispose de deux méthodes : open : établit une connexion. send : envoie une requête au serveur. Les données fournies par le serveur seront récupérées dans les champs responsexml ou responsetext de l'objet XMLHttpRequest. S'il s'agit d'un fichier xml, il sera lisible dans responsexml par les méthodes de Dom. L3S2 BDWeb 6
Notion d état Asynchrone Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readystate de XMLHttpRequest. Les états de readystate sont les suivants (seul le dernier est vraiment utilisé en pratique) : 0: non initialisé. 1: connexion établie. 2: requête reçue. 3: réponse en cours. 4: terminé. L3S2 BDWeb 7
Objet XMLHttpRequest Permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs. Attributs readystate le code d'état passe successivement de 0 à 4 qui signifie "prêt". status 200 est ok, 404 si la page n'est pas trouvée. responsetext contient les données chargées dans une chaîne de caractères. responsexml contient les données chargées sous forme xml, les méthodes de DOM servent à les extraire. onreadystatechange propriété activée par un évènement de changement d'état. On lui assigne une fonction. L3S2 BDWeb 8
Objet XMLHttpRequest Permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs. Méthodes open(mode, url, boolean) mode: type de requête, GET ou POST url: l'endroit ou trouver les données, un fichier avec son chemin sur le disque. boolean: true (asynchrone) / false (synchrone). en option on peut ajouter un login et un mot de passe. send("chaine") null pour une commande GET. L3S2 BDWeb 9
Créer une instance if (window.xmlhttprequest) // Objet de la fenêtre courant { xhr = new XMLHttpRequest(); // Firefox, Safari,... else if (window.activexobject) // Version Active { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE L3S2 BDWeb 10
Récupère la réponse du serveur xhr.onreadystatechange = function(){ // instructions de traitement de la réponse if (xhr.readystate == 4) { // Reçu, OK else { // Attendre... Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé. ; L3S2 BDWeb 11
La requête xhr.open('get', 'http://monserveur/fic.xml', true); xhr.send(null); Deux méthodes de XMLHttpRequest sont utilisées: - open: commande GET ou POST, URL du document, true pour asynchrone. - send: avec POST seulement, données à envoyer au serveur. L3S2 BDWeb 12
Un exemple complet <html><head> <script type="text/javascript"> var http = false; if(navigator.appname == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP"); else { http = new XMLHttpRequest(); function valider(utilisateur) { http.open("get", "ajax_validate.php?nom=" + utilisateur, true); http.onreadystatechange=function() { if(http.readystate == 4) { document.getelementbyid('aide').innerhtml = http.responsetext; http.send(null); </script> </head> <body><h1>proposez votre nom d'utilisateur :</h1> <form> <input type="text" onkeyup="valider(this.value)" /> <div id="aide"></div> </form> </body></html> L3S2 BDWeb 13
Un exemple complet... <?php function valider($nom) { if($nom == '') { return ''; if(strlen($nom) < 3) { return "<span id=\"warn\">ce nom est trop court.</span>\n"; switch($nom) { case 'fabrice': case 'roland': case 'bob': case 'joe': return "<span id=\"warn\">ce nom est déjà pris.</span>\n"; return "<span id=\"notice\">ce nom est acceptable.</span>\n"; echo valider(trim($_request['nom']));?> L3S2 BDWeb 14
Un exemple complet... a tester @ L3S2 BDWeb 15
Pas toujours aussi simple Aspect asynchrone les actions ne s'effectuent pas en séquence pour suivre l'ordre des instructions mais elles s'effectuent selon la disponibilité du serveur. Alors que des instructions de requêtes sont lancées, mais que le résultat n'est pas encore obtenu, les instructions suivantes sont exécutées. Pour contourner cette difficulté, on utilisera des callbacks, des fonctions passées en paramètres d'autres fonctions L3S2 BDWeb 16
Utilisation de callback function retrieve(url) { var xhr = createxhr(); xhr.onreadystatechange=function() { if(xhr.readystate == 4 && xhr.status == 200) { var content = xhr.responsetext; document.storage.innerhtml = "Contenu du fichier <a href=\""".url."\">".url."</a> : ".content; ; url = url + "?nocache=" + Math.random(); xhr.open("get", url, true); xhr.send(null); function write(url, data, fun) { var xhr = createxhr(); xhr.onreadystatechange=function() { if(xhr.readystate == 4) { if(fun!= null) fun("ajax_seqactions.txt"); ; xhr.open("post", url, true); xhr.send(data); L3S2 BDWeb 17
Utilisation de callback... a tester @ L3S2 BDWeb 18
Inconvénients Si JavaScript est désactivé, Ajax ne peut fonctionner. Il faut demander au lecteur de l'activer parmi les options du navigateur. Si l'on charge les données à afficher de façon dynamique, elles ne font pas partie de la page et elles ne sont pas prises en compte par les moteurs de recherche. L'aspect asynchrone fait que les modifications se font avec un délai (si le traitement sur le serveur est long), ce qui peut être déconcertant. Le bouton de retour en arrière peut se trouver désactivé. Cela peut être corrigé. L3S2 BDWeb 19
Conclusions Technologie prometteuse mais très évolutive de nouveaux standards, ou variantes commencent déjà à exister Utilisation de frameworks/librairies pour simplifier le development (surtout coté serveur mais les deux existent) AjaxAC, Xajax, Tiny Ajax... et bien sur la Google AJAX Librairies API (qui en fait regroupe les autres librairies) Fonctionnement hors-ligne GEARS L3S2 BDWeb 20