Ajax
Transcription
Ajax
Licence professionnelle Management Internet et applications dans l’entreprise Ajax (Asynchronous Javascript And XML) Ce n’est pas une nouvelle technologie, mais une utilisation astucieuse et liée de différentes technologies existantes (XHTML, CSS, javascript, XML, XSL et DOM). L’objectif est de diminuer le transit sur le réseau en ne rechargeant, à partir du serveur Web, qu’une partie des pages Web et pas des pages entières. Avantages et inconvénients Une partie des pages est mise à jour de manière asynchrone (donc non bloquante), ce qui donne plus de fluidité à l’affichage des pages et provoque moins de temps d’attente. Le trafic sur le réseau est donc diminué : il suffit d’envoyer les données, de récupérer les éléments de la réponse et de les positionner à l’endroit voulu sur la page au lieu de recharger une page entière. La gestion de la page peut être facilitée, car il suffit de mettre à jour sur le serveur des fichiers de taille réduite, parfois même seulement au format texte. Par contre, le code est TRES délicat à mettre en œuvre, d’où risque d’augmentation du temps de développement et des coûts. Une bonne connaissance des différentes technologies est indispensable. Ajax est basé sur l’existence d’un objet javascript appelé XMLHttpRequest qui ne fonctionne pas avec les anciennes versions des navigateurs ou si l’interpréteur javaScript est désactivé. L’historique et les retours à la page précédente ne permettent plus de faire marche arrière, des parties de page ayant été modifiées depuis le chargement initial. Le référencement des pages Web est plus difficile à réaliser, une même page pouvant avoir au fil du temps des contenus très différents. L’objet XmlHttpRequest Initialement inventé en 1998 par Microsoft pour Internet Explorer, l’objet XMLHttpRequest est un objet JavaScript qui permet d’obtenir des données à l’aide de requêtes http : • • • • Il est créé par le moteur javaScript du navigateur Il est utilisé pour effectuer une requête http vers le serveur Le serveur fournit une réponse au navigateur Le navigateur fait afficher le résultat dans une partie de la page Web, ce qui évite de recharger toute la page. Il a maintenant été implémenté dans Mozilla, Opéra, Netscape et Konqueror. Il nécessite que la page Web soit dans un environnement client-serveur (donc Apache ou easyPHP activé). Création et propriétés de l’objet XmlHttpRequest Pour Internet Explorer, on initialise l’objet par : var xhr = new ActiveXObject("Microsoft.XMLHTTP"); ou var xhr = new ActiveXObject("Msxml2.XMLHTTP"); Pour les autres navigateurs, on utilise l’objet natif par : var xhr = new XMLHttpRequest() ; D’où une méthode d’initialisation générale dans la fonction getXmlHttpRequest() à regarder dans le fichier xrh0.html. Propriétés Description Retourne l’état de la requête 0 : non initialisé 1 : ouverture (open s’est exécuté, début du transfert) 2 : envoyé (données transférées) 3 : en cours (données en réception) 4 : prêt (données entièrement reçues) readyState 1 Licence professionnelle Management Internet et applications dans l’entreprise Gestionnaire d’événement ; doit se voir affecter une fonction afin d’exécuter une action lors d’un changement d’état de l’objet Renvoie le code numérique de la réponse du serveur http ; notamment : 200 : OK 403 : accès interdit 404 : page non trouvée 500 : erreur interne au serveur Renvoie le message lié au code numérique de la réponse du serveur http Réponse du serveur à la requête réussie sous forme de chaîne de caractères Réponse du serveur à la requête réussie sous forme d’un document XML onreadystatechange status statusText responseText responseXML Méthodes (les plus utilisées) open("méthode", mode) "url du Description Initialise la requête vers le serveur méthode="GET" pour recevoir des données du serveur méthode="POST" pour en envoyer vers le serveur url du fichier : fichier à exécuter sur le serveur mode=false pour mode asynchrone (sans blocage) mode=true pour mode synchrone Effectue la requête avec éventuellement envoi de données Avec GET, send(null) Avec POST, send("var1=val1&var2=val2&…") Permet de spécifier la nature de l’en-tête Annule la requête fichier", send(données) setRequestHeader(...) abort() Exemples d’utilisation d’Ajax Transfert d’un fichier test.txt du serveur vers le poste client • Affichage d’une fenêtre alert quand le fichier est chargé : xrh1.html. A noter : le code associé à onreadystatechange (c-à-d le traitement à effectuer quand la requête a réussi) doit obligatoirement être défini avant l’instruction send. • Affichage du texte dans une fenêtre alert : xrh2.html • Affichage du texte dans un champ de texte : xrh3.html. On utilise la méthode javaScript getElementById("nom") de l’objet document qui parcourt le document à la recherche du nœud identifié par l’attribut id="nom". • Affichage du contenu d’un fichier XML dans une fenêtre alert : xrh4.html. • Affichage du texte dans le corps de la page : xrh7.html. On utilise la méthode javascript getElementById("nom") sur un nœud de type <div> et on isole la fonction d’affichage. • Affichage du contenu d’un fichier XML dans le corps de la page : xrh7bis.html. • Découpage en fonctions distinctes réalisant la connexion, la requête et l’affichage : xrh8.html. Utilisation de pages PHP sur le serveur • Utilisation simple d’un fichier PHP : xrh10.html qui fait appel à la page carrecube.php. • Passage de paramètres à une page PHP : xrh11.html demande un entier via une liste de sélection ; après validation, la table correspondante s’affiche. Le passage d’un ou de plusieurs paramètres via Ajax se fait obligatoirement par la méthode POST. Le fichier carrecuben.php récupère la valeur du paramètre. 2 Licence professionnelle Management Internet et applications dans l’entreprise Exercice Enregistrer le xrh12.html. fichier xrh11.html sous le nom Le modifier afin d’obtenir l’affichage ci-contre avec trois boutons proposant les carrés et les cubes de 10 entiers à partir de 1, de 11 ou de 21. Le compléter ensuite afin de voir s’afficher, à chaque clic sur l’un des boutons, une des trois tables en passant le paramètre ad hoc à la page carrecuben.php. Illustrations ci-dessous. Affichage du résultat d’une interrogation de base de données mySQL par PHP Soit la base mySQL appelée images, créée à l’aide du fichier images.dump suivant associée : images.dump CREATE TABLE pays (id tinyint(4) NOT NULL AUTO_INCREMENT, nom varchar(20), PRIMARY KEY(id), UNIQUE id(id)); CREATE TABLE images (num tinyint(4) NOT NULL AUTO_INCREMENT, titre varchar(20), pays tinyint(4), comment varchar(255), PRIMARY KEY (num), UNIQUE id (num)); INSERT INSERT INSERT INSERT INSERT INTO INTO INTO INTO INTO pays pays pays pays pays VALUES(1,'Mexique'); VALUES(2,'Australie'); VALUES(3,'Brésil'); VALUES(4,'Maroc'); VALUES(5,'Tunisie'); insert insert insert insert insert insert insert insert insert insert insert insert insert insert insert insert into into into into into into into into into into into into into into into into images images images images images images images images images images images images images images images images values(1, "cactus.jpg", 1, "Le cactus, embleme du Mexique"); values(2, "carte.jpg", 1, "Carte du Mexique"); values(3, "musiciens.jpg", 1, "Des musiciens"); values(4, "sydney.jpg", 2, "L'opéra de Sydney"); values(5, "ayers-rock.jpg", 2, "Ayers Rock, montagne sacree"); values(6, "ayers-rock2.jpg", 2, "Ayers Rock, au centre du pays"); values(7, "monts-olgas.jpg", 2, "Les monts Olgas"); values(8, "mato-grosso.jpg", 3, "Le Mato Grosso"); values(9, "porto-allegre.jpg", 3, "Porto Alegre"); values(10, "sao-paulo.jpg", 3, "Sao Paulo"); values(11, "tanger.jpg", 4, "Tanger, ville mythique"); values(12, "merzouga.jpg", 4, "Merzouga"); values(13, "ouzoud.jpg", 4, "Les chutes de Ouzoud"); values(14, "carte-tunisie.jpg", 5, "Carte de Tunisie"); values(15, "guellela.jpg", 5, "Guellela"); values(16, "monastir.jpg", 5, "Monastir"); La page liste-pays.php ci-dessous interroge la base de données images et propose de choisir un pays parmi ceux figurant dans la table pays de la base : 3 Licence professionnelle Management Internet et applications dans l’entreprise Fichier liste-pays.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-aquiv="Content-type" content="text/html charset=iso-8859-1" /> <script type="text/JavaScript"> function getXmlHttpRequest() { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas XMLHTTPRequest"); xhr = false; } } function afficheImages() { getXmlHttpRequest() ; xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { menu = xhr.responseText; document.getElementById("modele").innerHTML = menu ; } } xhr.open("POST", "images.php", true); xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); selection=document.getElementById("pays"); idpays = selection.options[selection.selectedIndex].value ; xhr.send("idpays="+idpays); } </script> </head> <body> <form name="formulaire" action="#"> <table> <tr><td><label for="pays">Pays</label></td> <td><select name="pays" id="pays" onchange="afficheImages()"> <option value="">Choisir un pays</option> <? mysql_connect("localhost", "root",""); mysql_select_db("images"); $query=mysql_query("select * from pays"); while ($row=mysql_fetch_assoc($query)) { echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; } ?> </select></td></tr> 4 Licence professionnelle Management Internet et applications dans l’entreprise <tr><td><label for="images">Images</label></td> <td><span id="modele"> <select name="images"> <option value="">Images correspondantes</option> </select> </span></td></tr> </table> </form> </body> </html> Lorsqu’un pays est choisi, la fonction afficheImages() demande au serveur d’effectuer la page images.php qui permet d’obtenir la liste des images correspondant au pays choisi, sans rechargement complet de la page : Fichier images.php <?php echo "<select name='images'>"; if (isset($_POST["idpays"])) { mysql_connect("localhost", "root",""); mysql_select_db("images"); $query=mysql_query("select num, titre from images where pays=".$_POST["idpays"]); while ($row=mysql_fetch_assoc($query)) { echo "<option value='".$row["num"]."'>".$row["titre"]."</option>"; } } echo "</select>"; ?> Exercice Ecrire une page liste-images.php proposant la liste des images disponibles. Lorsqu’une image est sélectionnée, une page commentaires.php faire afficher le commentaire correspondant. 5