Beaucoup de dicussion se font présentement sur les avantages, les capacités et les opportunités qu'apportent l'approche AJAX aux développement d'interfaces Web plus riches que les pages Web statiques conventionnelles.
Dans cette présentation, nous ferons un survol très rapide de AJAX en construisant un exemple simplifié.
On laisse tomber les animations non ergonomiques du temps du dHTML pour arriver à effectuer des activités vraiment utiles.
L'exemple peut servir à effectuer de la navigation dans un blogue en chargeant un fil RSS.
Oui, mais on peut générer ce type de navigation côté serveur, de façon encore plus simple!
D'accord, l'exemple semble plus où moins pratique, mais imaginez que vous ayiez à votre portée plusieurs documents RDF qui définissent plusieurs relations sur un nombre élevé de documents, vous pourriez construire un système de navigation et de recherche avec comme base cet exemple.
L'exemple est quand même tout simple :-) !
XMLHttpRequest est un composant initialement créé par Microsoft, servant à effectuer une requête à un serveur distant.
La réponse de cette requête peut être lue sous forme :
responseTextresponseXML qui retourne un objet document XMLLes états de la requête sont accessibles par la propriété readyState
La réponse HTTP est accessible par les propriétés status (le code, ex:200) et statusText (le message textuel).
La propriété onreadystatechange contiendra une référence vers la fonction ou la méthode à appeler lorsque l'état de la requête change.
Le composant rend accessible les méthodes suivantes :
open pour créer une requête send pour envoyer une requête abort pour avorter une requête Pour presque toutes les applications, l'utilisation de XMLHttpRequest est identique d'un fureteur à l'autre sauf pour sa création.
Internet Explorer utilise un contrôle ActiveX, provenant de la librairie XML de Microsoft (msxml.dll). Comme plusieurs versions de cette librairie existe et pour assurer une compatibilité descendante, il est nécessaire d'effectuer quelques validation pour créer l'objet :
try {
var aObj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
var aObj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
var aObj = false;
}
}
Les autres fureteurs (Firefox, Opera 8 et Safari) l'implémentent nativement :
var xmlhttp = new XMLHttpRequest();
Plus d'information sur MSXML est disponible sur le site de Microsoft, ici .
En encapsulant le tout dans une fonction, et en rajoutant une gestion d'erreur presque innexistante, nous obtiendrons ceci :
function getNewXMLHTTP() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
var aObj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
var aObj = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
return aObj;
}
function executeExemple()
try {
var xmlHttp = getNewXMLHTTP();
} catch(e) {
alert("Pour une raison ou une autre,il y a eu une erreur
sur cette page et la gestionnaire d'erreur est
trop paresseux pour faire de quoi d'utile. Désolé.");
}
}
Deux façons d'effectuer une requête, asynchrone et synchrone
Manière synchrone, le javascript après l'appel ne sera exécuté que lorsque la requête sera teerminée.
var xmlHttp = getNewXMLHTTP();
xmlHttp.open("GET", "/ajax/rss-a-html.xsl", false);
xmlHttp.send(null);
La méthode open reçoit en paramètre le type de requête (GET, POST, TRACE, PUT, HEAD) et le url de celle-ci et si la requête est synchrone ou non.
La méthode send reçoit en paramètre le querystring pour une requête GET ou HEAD ou le corps de la requête (qui peut être du XML) pour POST ou PUT.
Dans notre cas, nous envoyons rien, donc null.
La manière asynchrone utilise le paramètre true, nous devons définir une fonction qui servira de procédure de rappel lorsque le fichier sera chargé.
var xmlHttp = getNewXMLHTTP();
xmlHttp.open("GET", "/blogue/rss.php", true);
xmlHttp.onreadystatechange=rsstestversion2;
xmlHttp.send(null);
function rsstestversion2() {
if (xmlHttp.readyState==4) {
transform(xmlHttp.responseXML);
}
}
La fonction rsstestversion2 sera exécutée à chaque fois que l'état de la requête sera modifiée. Celle-ci peut avoir 5 états :
Nous atttendons évidemment l'état 4 (Complété).
Nous pourrions, vérifier lors de l'état 2 (chargé) si la réponse HTTP est bien un 200 OK, lancer une exception puis avorter la requête avec la méthode abort si ce n'est pas le cas.
Voici pour terminer quelques ressources utiles pour effectuer cette étape:
Lors de la dernière étape nous avons chargé en mémoire 2 documents XML :
Nous allons ensuite transformer le document RSS en XHTML à l'aide du document XSLT.
L'infoset XHTML résultant sera ensuite ajouté à notre document XHTML.
Les transformations XSLT sont moins répandues dans les applications AJAX puisque quelques fureteurs ne le supporte pas très bien (Internet Explorer 5 entre autres).
Pour les fureteurs respectant les normes DOM nous utiliserons la classe XSLTProcessor. Pour Internet Explorer, la méthode transformNode du document XML.
Pour modifier le XHTML résultant, il est préférable d'utiliser les méthodes XML DOM appendChild, toutefois, Internet Explorer a parfois de la difficulté avec ces méthodes. L'attribut innerHTML sera alors utilisé.
if (window.XSLTProcessor) {
var proc = new XSLTProcessor();
proc.importStylesheet(xmlHttp.responseXML);
var newDoc = proc.transformToDocument(xmlObject);
var testDoc = newDoc.getElementById("menuRSS");
document.getElementById("ajaxrsstest2").appendChild(testDoc);
} else {
document.getElementById("ajaxrsstest2").innerHTML = xmlObject.transformNode(xmlHttp.responseXML);
}
Nous pouvons aussi aller chercher un élément précis à l'intérieur du document résultant avec les méthodes du DOM.
Un tutoriel XSLT est en dehors des objectifs de ce tutoriel, toutefois, nous pouvons spécifier quelques particularité de notre transformation.
Une attention particulière doit être donnée aux espaces de noms. Chacun de ceux-ci doivent être présent dans le document XSLT.
RSS 1.0 est un document composite avec plusieurs espaces de noms (RSS, Dublin Core, RDF, etc...).
L'espace de nom pour les éléments locaux pour le document RSS est RSS et pour le XSLT, XHTML est l'espace de noms par défaut.
Nous devons utiliser l'espace de noms RSS pour accéder aux noeuds du document à transformer.
Le XSLT transformera le fil RSS de notre blogue (DotClear ici) en une simple liste de liens XHTML que nous pourions sur le coeur nous en disant utiliser comme menu dynamique.
Le document RSS à transformer.
Le code XSLT :
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet
version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:rss="http://purl.org/rss/1.0/"
>
<xsl:output method="xml" version="1.0" encoding="iso-8859-1" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
/>
<xsl:template match="/">
<ul id="menuRSS">
<xsl:apply-templates select="//rss:item" />
</ul>
</xsl:template>
<xsl:template match="rss:item">
<li><a>
<xsl:attribute name="href">
<xsl:value-of select="rss:link" />
</xsl:attribute>
<xsl:value-of select="rss:title" />
</a></li>
</xsl:template>
</xsl:stylesheet>
Utilisez les boutons pour voir l'exemple et le code résultant.
Diapo à venir
Diapo à venir
Information à venir
Information à venir
Information à venir
Information à venir
Copyright 2005 Benoit Piette, certains droits réservés.