Jean-Paul Dècle
AJAX
Des clés pour comprendre
AJAX
1 Javascript C'est quoi Javascript?
Javascript est un langage exécuté par votre navigateur (IE, Firefox, Opera, Safari,...).
Au contraire des langages comme PHP ou ASP qui sont exécutés côté serveur, Javascript est un langage exécuté côté client; Javascript est utile pour tout ce qui concerne les intéractions du client sur la page Web; Javascript permet ainsi d'améliorer la présentation et l'interactivité des pages Web.
Exemple de code Javascript <script type='text/javascript'> function compteCarac(idTextarea, idSpan) { var t = document.getElementById(idTextarea); var s = document.getElementById(idSpan); s.innerHTML = t.value.length; } </script> <textarea id="mazone" rows="4" cols="30" onkeyup="compteCarac('mazone', 'compteur')"></textarea> <span id="compteur">0</span> caractère(s)
jpdecle@hotmail.com Page 2 sur 15
AJAX Historique JavaScript a été créé en 1995 par Brendan Eich, informaticien américain, né en 1964, pour le compte de la Netscape Communications Corporation. JavaScript s'appelait à l'origine LiveScript et était un langage de script côté serveur, développé pour renforcer l'offre commerciale de serveur web de Mosaic Communications Corporation (devenu par la suite Netscape). Netscape travailla ensuite au développement d'une version orientée client de LiveScript. Quelques jours avant sa sortie, Netscape changea le nom de LiveScript pour JavaScript. JavaScript est décrit comme un complément à Java dans un communiqué de presse commun de Netscape et Sun Microsystems, daté du 4 décembre 1995. Cette initiative a contribué à créer auprès du public une certaine confusion entre les deux langages, proches syntaxiquement mais pas du tout dans leurs concepts fondamentaux, et qui perdure encore aujourd'hui. En mars 1996, Netscape met en œuvre le moteur JavaScript dans son navigateur web Netscape Navigator 2.0. Le succès de ce navigateur contribue à l'adoption rapide de JavaScript dans le développement web orienté client. JavaScript met en œuvre les spécifications du langage ECMAScript, un standard rédigé par l'ECMA dans le document ECMA-262. La troisième édition d'ECMAScript, parue en 1999 correspond à la version 1.5 de JavaScript. Sa mise en œuvre par Microsoft porte quant à elle le nom de JScript. Adobe pour sa part, met en œuvre ces spécifications dans son langage ActionScript.
jpdecle@hotmail.com Page 3 sur 15
AJAX
2 La syntaxe de base Script dans la partie HEAD du document HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> </title> <script type="text/javascript"> <!-// Ceci est un commentaire Javascript sur une ligne /* Ceci est un commentaire Javascript sur plusieurs lignes */ --> </script> </head> <body> </body> </html> Remarque: Les commentaires HTML restent présents dans le bloc <script></script> pour une raison historique : les premiers navigateurs n'interprétant pas le Javascript et pour éviter un affichage du texte dans la page web, les scripts étaient encadrés de commentaires; Ne pas confondre les commentaires HTML et les commentaires Javascript. Script externe <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> </title> <script type="text/javascript" src="MonFichier.js"></script> </head> <body> </body> </html>
jpdecle@hotmail.com Page 4 sur 15
AJAX Les objets prédéfinis Lorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis correspondant à la page Web, à l'état du navigateur. Ces objets prédéfinis peuvent donner beaucoup d'informations utiles. Les objets de base du navigateur sont les suivants : navigator : contient des informations sur le navigateur de celui qui visite la page window : c'est l'objet où s'affiche la page. L'objet window contient des propriétés concernant la fenêtre elle-même mais aussi tous les objets contenus dans celle-ci location : contient des informations relatives à l'adresse de la page à l'écran history: c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment document : cet objet contient les propriétés sur le contenu du document (couleur d'arrière plan, titre, ...) Ces objets sont largement dépendant du contenu de la page. La hiérarchie des objets Les objets sont organisés hiérarchiquement, de la façon suivante:
jpdecle@hotmail.com Page 5 sur 15
AJAX L'objet window L'objet window est le parent de chaque objet qui compose la page web. Les propriétés de l'objet window sont les suivantes: Propriété Description defaultStatus Message qui s'affiche par défaut dans la barre d'état du navigateur frames Tableau des cadres présents dans la fenêtre length name parent self status
top Window
Nombre de cadres Nom de la fenêtre dans laquelle on se trouve Fenêtre qui englobe celle dans laquelle on se trouve Synonyme de la fenêtre actuelle Message temporaire qui s'affiche dans la barre d'état du navigateur suite à un événement Fenêtre de plus haut niveau, celle qui contient tous les cadres Fenêtre active
Lecture seule Non, modifiable à tout moment Tous les éléments de frames sont en lecture seule Lecture seule Lecture seule Lecture seule, contient des propriétés Lecture seule, contient des propriétés Non, modifiable à tout moment Lecture seule, contient des propriétés Lecture seule, contient des propriétés
Les méthodes open() et close() Les méthodes open() et close() sont destinées à permettre l'ouverture et la fermeture de fenêtres. La syntaxe de la méthode open() admet un nombre important de paramètres :
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); Les options de la méthode open() sont les suivantes: Option
Description
directories = yes/no
Affiche ou non les boutons de navigation
location = yes/no
Affiche ou non la barre d'adresse
menubar = yes/no
Affiche ou non la barre de menu (fichier, edition, ...)
resizable = yes/no
Définit si la taille de la fenêtre est modifiable ou non
scrollbars = yes/no
Affiche ou non les ascenceurs (barres de défilement)
status = yes/no
Affiche ou non la barre d'état
toolbar = yes/no
Affiche ou non la barre d'outils
width = largeur (en pixels)
Définit la largeur de la fenêtre
height = hauteur (en pixels)
Définit la hauteur de la fenêtre
jpdecle@hotmail.com Page 6 sur 15
AJAX
Exemple
<html> <head> <script language="javascript"> function ouvrir(){ window.open("apropos.html","apropos","toolbar=0,location=0, directories=0,menuBar=0,scrollbars=1,resizable=1,width=400, height=350"); } </script> </head> <body> <input type="button" value="Ouvrir la fenĂŞtre" onclick="ouvrir()"> </body> </html>
jpdecle@hotmail.com Page 7 sur 15
AJAX
Utilisation de SimpleXML L'extension SimpleXML fournit des outils très simples et faciles à utiliser pour convertir du XML en un objet qui peut être manipulé avec ses propriétés et les itérateurs de tableaux.
L'extension SimpleXML requiert PHP 5. L'extension SimpleXML est activé par défaut. Pour la désactiver, utilisez l'option de configuration --disable-simplexml.
nouvelles.xml <?xml version="1.0" encoding="ISO-8859-1"?> <nouvelles> <nouvelle> <contenu> Mercredi: IDE – Les fichiers XML </contenu> <date>26/12/2007</date> </nouvelle> <nouvelle> <contenu> Jeudi: Les frameworks: Le modèle MVC </contenu> <date>27/12/2007</date> </nouvelle> </nouvelles> nouvelles.php <?php $nouvelles = simplexml_load_file('nouvelles.xml'); foreach($nouvelles->nouvelle as $nouvelle) { echo 'Programme : ' ,utf8_decode($nouvelle->contenu).'<br>'; echo 'Date : ' ,$nouvelle->date.'<br>'; } ?> Remarque: utf8_decode: Convertit une chaîne UTF-8 en ISO-8859-1 La méthode xpath permet de pointer directement un nœud spécifique: <? $nouvelles = simplexml_load_file('nouvelles.xml'); $xpath = '/nouvelles/nouvelle/contenu'; $nouvelle = $nouvelles->xpath($xpath) ; foreach( $nouvelle as $news ) { echo "<li>"; echo utf8_decode($news); echo "</li>"; } ?>
jpdecle@hotmail.com Page 8 sur 15
AJAX
4 DOM C'est quoi DOM?
DOM (Document Object Model: modèle objet de document) est une spécification du W3C proposant de représenter un document sous la forme d'un arbre. Les balises HTML, XML, XHTML sont des noeuds de l'arbre et les feuilles sont soit des balises sans contenu, soit le texte de la page. DOM est un langage normalisé d'interface (API: Application Programming Interface). DOM est indépendant de toute plateforme et de tout langage permet à une application de parcourir la structure du document et d'agir dynamiquement sur celui-ci. Javascript et ECMAScript utilisent DOM pour naviguer au sein du document HTML, ce qui leur permet par exemple de pouvoir récupérer le contenu d'un formulaire, le modifier, etc. DOM se divise en 3 parties :
Core DOM: modèle standard pour tout document structuré
XML DOM: modèle standard pour tout document XML
HTML DOM: modèle standard pour tout document HTML
jpdecle@hotmail.com Page 9 sur 15
AJAX
Le modèle DOM Le modèle DOM est un arbre d’objets Node (noeud). Un document est composé d'un noeud racine, de noeuds fils et d'attributs. La relation entre les noeuds est
verticale entre des noeuds enfants et des noeuds parents
horizontale entre deux nodes accolés de même niveau hiérarchique.
Exemple de document HTML
L’interface Node fournit tous les outils nécessaires au déplacement à l’intérieur de la structure du document ainsi que des méthodes pour modifier cette structure. Les propriétés sont les suivantes: attributes: liste des attributs childNodes: nœuds enfant firstChild: premier nœud enfant lastChild: dernier nœud enfant nextSibling: prochain nœud d'un type nodeName: nom du nœud nodeType: type du nœud nodeValue: valeur/contenu du nœud parentNode: nœud parent previousSibling: nœud précédent d'un type Les méthodes sont les suivantes: appendChild(): ajouter un nœud enfant cloneNode(): copier un nœud deleteData(): effacer des données en caractères getAttribute(): rechercher la valeur d'un nœud attribut getAttributeNode(): rechercher un nœud attribut hasChildNodes(): vérifier l'existence de nœuds enfants insertBefore(): insérer un nœud removeAttribute(): effacer la valeur d'un nœud attribut removeAttributeNode(): effacer un nœud attribut removeChild(): effacer un nœud replaceChild(): remplacer un nœud enfant setAttribute(): fixer la valeur d'un nœud attribut setAttributeNode(): créer un nœud attribut
jpdecle@hotmail.com Page 10 sur 15
AJAX
Utilisation du DOM Notre document XHTML est le suivant:
<div id="header"> <img src="logo.gif" alt="Logo principal" /> </div> <div id="navigation"> <ul id="nav"> <li><strong>Accueil</strong></li> <li><a href="articles.html">Articles</a></li> <li><a href="apropos.html">A propos</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="rubriques.html">Rubriques</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Le navigateur voit ce document comme une liste imbriquée de noeuds, d'attributs et de noeuds enfants:
Pour accéder à un élément du document, on utilise l'une des méthodes suivantes:
document.getElementById(ID) La méthode getElementById() retourne l'élément correspond à son ID document.getElementsByTagName(name) La méthode getElementsByTagName () retourne un tableau de tous les éléments correspondant au nom de la balise
jpdecle@hotmail.com Page 11 sur 15
AJAX L'instruction:
x=document.getElementById("nav"); permet d'accéder à la partie grisée du document:
<div id="header"> <img src="logo.gif" alt="Logo principal" /> </div> <div id="navigation"> <ul id="nav"> <li><strong>Accueil</strong></li> <li><a href="articles.html">Articles</a></li> <li><a href="apropos.html">A propos</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="rubriques.html">Rubriques</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> L'instruction:
x=document.getElementsByTagName("li"); permet d'accéder à la partie grisée du document:
<div id="header"> <img src="logo.gif" alt="Logo principal" /> </div> <div id="navigation"> <ul id="nav"> <li><strong>Accueil</strong></li> <li><a href="articles.html">Articles</a></li> <li><a href="apropos.html">A propos</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="rubriques.html">Rubriques</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> La méthode getElementsByTagName() retourne un tableau; chaque élément du tableau peut être accédé par son indice. La propriété length du tableau permet de connaître le nombre d'éléments renvoyés.
jpdecle@hotmail.com Page 12 sur 15
AJAX Utilisation de XML DOM avec PHP5 En PHP5,
les principales classes du DOM sont les suivantes : DomNode - objet nœud : documents, éléments, nœuds textuels... DomDocument - objet document (hérite de DomNode) DomElement - objet élément (hérite de DomNode) DomAttr - objet attribut (hérite de DomNode) DomNodeList - objet liste de DomNodes (ce n'est pas un tableau PHP !)
Le document DomDocument Tout traitement de XML devrait commencer par la ligne suivante, qui instancie un objet DomDocument: <?php $dom = new DomDocument(); ?> Pour charger un document XML à partir d'un fichier: <?php $dom->load('fichier.xml'); ?> Pour charger un document XML à partir d'une variable: <?php $dom->loadXML($chaineXML); ?> Il sera possible d'enregistrer le document XML de la manière suivante : <?php $dom->save('nouveauFichier.xml'); ?> L'extension DOM autorise la validation d'un document relativement au document DTD spécifié dans le document XML : <?php $dom->validate(); ?>
jpdecle@hotmail.com Page 13 sur 15
AJAX
5 AJAX C'est quoi AJAX?
AJAX (Asynchronous Javascript And XML: Javascript asynchrone et XML) est une méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une page web sans recharger la page. AJAX rend plus interactifs les sites web et offre une meilleure ergonomie ainsi qu'une réactivité améliorée en permettant de modifier interactivement une partie de l'interface web seulement. Le modèle web traditionnel est basé sur une suite de requêtes et de réponses successives, c'est-à-dire une navigation séquentielle de page web en page web. AJAX permet de ne modifier que la partie de la page web qui nécessite d'être mise à jour en créant une requête HTTP locale et en modifiant tout ou partie de la page web en fonction de la requête HTTP récupérée. AJAX n'est ni une technologie ni un langage de programmation mais une manière de développer des pages web en se basant sur les technologies suivantes : XHTML et CSS pour la présentation DOM (Document Object Model) pour la représentation en objets de la page web Javascript XML, XLS et XMLHttpRequest pour manipuler des requêtes et des réponses Les sites web utilisant AJAX bénéficient des avantages suivants : Une interface réactive car AJAX permet de modifier localement la page web ; Une rapidité d'exécution car seules les données à modifier dans la page sont échangées selon le protocole HTTP ; Une ergonomie améliorée car AJAX permet par exemple d'effectuer des contrôles en temps réel dans les formulaires en interrogeant un serveur HTTP en arrière plan. En contrepartie, le modèle AJAX possède les limites suivantes : Seuls les navigateurs récents supportant l'objet Javascript XMLHttpRequest sont capables d'interpréter correctement une page AJAX ; Les moteurs de recherche risquent de ne pas pouvoir indexer tout le contenu affiché avec AJAX; Il est nécessaire de prévoir une alternative à AJAX dans la page web, afin de ne pas gêner la navigation pour les clients non compatibles avec l'objet XMLHttpRequest.
jpdecle@hotmail.com Page 14 sur 15
AJAX L'instance de XMLHttpRequest va permettre de récupérer le contenu du fichier XML : <script type='text/JavaScript'> function go(){ var xhr_object = null; if(window.XMLHttpRequest) // Firefox xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } xhr_object.open("GET", "baladeurs.xml", false); xhr_object.send(null); if(xhr_object.readyState == 4) alert("Requête effectuée !"); } </script> </head> <body> <input type='button' value='Cliquez!' onclick='go()' /> </body> </html> 1. On crée une instance de l'objet XMLHTTPRequest sous Firefox ; 2. On crée une instance de l'objet XMLHTTPRequest sous IE ; 3. On spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête ; 4. On exécute la requête proprement dite ; 5. On affiche une boîte d'alerte dès que la requête est terminée. Lorsque la requête se termine, on reçoit des informations du serveur. Ces informations sont contenues dans la variable xhr_object.responseText ou xhr_object.responseXML, selon que le résultat est au format texte ou XML : if(xhr_object.readyState == 4) { alert("Requête effectuée !"); alert(xhr_object.responseText); }
jpdecle@hotmail.com Page 15 sur 15