L'AJAX est un vaste domaine, nous n'aurons pas les moyens d'en explorer toutes les possibilités, mais nous allons en étudier les aspects principaux. Ce chapitre va servir à vous présenter le concept, ses avantages et ses inconvénients. Nous verrons aussi quelles sont les technologies employées pour le transfert de données.
Tenez-vous prêts, car vous allez découvrir des technologies permettant d'étendre les possibilités de vos scripts à de nouveaux domaines d'utilisation !
AJAX est l'acronyme d'Asynchronous JavaScript and XML, ce qui, transcrit en français, signifie « JavaScript et XML asynchrones ».
Derrière ce nom se
cache un ensemble de technologies destinées à réaliser de rapides mises à jour du contenu d'une page Web, sans
qu'elles nécessitent le moindre rechargement visible par l'utilisateur de la page Web. Les technologies employées
sont diverses et dépendent du type de requêtes que l'on souhaite utiliser, mais d'une manière générale le JavaScript
est constamment présent.
D'autres langages sont bien entendu pris en compte comme le HTML et le CSS, qui servent
à l'affichage, mais ceux-ci ne sont pas inclus dans le processus de communication. Le transfert de données est géré
exclusivement par le JavaScript, et utilise certaines technologies de formatage de données, comme le XML ou
le JSON, mais cela s'arrête là.
L'AJAX est un vaste domaine, dans le sens où les manières de charger un contenu sont nombreuses. Nous verrons les techniques les plus courantes dans les chapitres suivants, mais tout ne sera pas abordé.
Concrètement, à quoi peut servir l'AJAX ? Le rafraîchissement complet de la page n'est-il pas plus simple ? Eh bien, cela dépend des cas d'application !
Prenons l'exemple d'OpenClassrooms ! Ce site a recours à l'AJAX pour plusieurs de ses technologies, nous allons parler de deux d'entre elles et expliquer pourquoi nous avons besoin de l'AJAX pour les faire fonctionner correctement :
L’auto-complétion ! Lorsque vous recherchez un membre et que vous tapez les premières lettres de son pseudo dans le formulaire prévu à cet effet, vous obtenez une liste des membres dont le pseudo commence par les caractères que vous avez spécifiés. Ce système requiert de l'AJAX pour la simple et bonne raison qu'il faut demander au serveur de chercher les membres correspondant à la recherche, et ce sans recharger la page, car les caractères entrés seraient alors perdus et l'ergonomie serait plus que douteuse.
La sauvegarde automatique des textes ! OpenClassrooms intègre un outil très pratique : tout texte écrit sur un cours, une news, ou même un simple message sur le forum, est sauvegardé à intervalles réguliers dans une sorte de bloc-notes. Cette sauvegarde doit se faire de manière transparente afin de ne pas gêner le rédacteur. Le rechargement complet d'une page Web n'est donc pas envisageable. C'est donc là qu'intervient l'AJAX en permettant à votre navigateur d'envoyer tout votre texte au serveur sans vous gêner.
Dans ces deux cas, les requêtes ne sont pas superflues, elles contiennent juste les données à faire transiter, rien de plus. Et c'est là que réside l'intérêt de l'AJAX : les requêtes doivent être rapides. Par exemple, pour obtenir la liste des membres, la requête AJAX ne va pas recevoir une page complète d'OpenClassrooms (bannière, menu, contenu, etc.) ; elle va juste obtenir une liste des membres formatée de manière à pouvoir l'analyser facilement.
L'AJAX est donc un ensemble de technologies visant à effectuer des transferts de données. Dans ce cas, il faut savoir structurer nos données. Il existe de nombreux formats pour transférer des données, nous allons voir ici les quatre principaux :
Le format texte est le plus simple, et pour cause : il ne possède aucune structure prédéfinie. Il sert essentiellement à transmettre une phrase à afficher à l'utilisateur, comme un message d'erreur ou autre. Bref, il s'agit d'une chaîne de caractères, rien de plus.
Le HTML est aussi une manière de transférer facilement des données. Généralement, il a pour but d'acheminer des données qui sont déjà formatées par le serveur puis affichées directement dans la page sans aucun traitement préalable de la part du JavaScript.
Un autre format de données proche du HTML est le XML, acronyme de eXtensible Markup Language. Il permet de stocker les données dans un langage de balisage semblable au HTML. Il est très pratique pour stocker de nombreuses données ayant besoin d'être formatées, tout en fournissant un moyen simple d'y accéder.
Le plus courant est le JSON, acronyme de JavaScript Object Notation. Il a pour particularité de segmenter les données dans un objet JavaScript, il est très avantageux pour de petits transferts de données segmentées et est de plus en plus utilisé dans de très nombreux langages.
Lorsque nous parlons de « format classique », nous voulons désigner les deux premiers qui viennent d'être présentés : le texte et le HTML. Ces deux formats n'ont rien de bien particulier, vous récupérez leur contenu et vous l'affichez là où il faut, ils ne nécessitent aucun traitement. Par exemple, si vous recevez le texte suivant :
Je suis une alerte à afficher sur l'écran de l'utilisateur.
Que voulez-vous faire de plus, à part afficher cela à l'endroit approprié ? Cela va de même pour le HTML :
Je suis un paragraphe inintéressant qui doit être copié quelque part dans le DOM.
Que peut-on faire, à part copier ce code HTML là où il devrait être ? Le texte étant déjà formaté sous sa forme finale, il n'y a aucun traitement à effectuer, il est prêt à l'emploi en quelque sorte.
Le format XML est déjà autrement plus intéressant pour nous, il permet de structurer des données de la même manière qu'en HTML, mais avec des balises personnalisées. Si vous ne savez absolument pas ce qu'est le XML, il est conseillé de jeter un coup d’œil au premier chapitre du cours d'OpenClassrooms "Structurez vos données avec XML" avant de continuer.
Le XML vous permet de structurer un document comme bon vous semble, tout comme en HTML, mais avec des noms de balise personnalisés. Il est donc possible de réduire drastiquement le poids d'un transfert simplement grâce à l'utilisation de noms de balise plutôt courts. Par exemple, nous avons ici la représentation d'un tableau grâce au XML :
<?xml version="1.0" encoding="utf-8"?>
Ligne 1 - Colonne 1
Ligne 1 - Colonne 2
Ligne 1 - Colonne 3
Ligne 2 - Colonne 1
Ligne 2 - Colonne 2
Ligne 2 - Colonne 3
Ligne 3 - Colonne 1
Ligne 3 - Colonne 2
Ligne 3 - Colonne 3
Là où l'utilisation du XML est
intéressante, c'est que, en utilisant la requête appropriée, vous pouvez parcourir ce code XML avec les mêmes
méthodes que vous utilisez pour le DOM HTML,
commegetElementsByTagName()par exemple !
Comment ça se fait ? Eh bien, suite à votre requête, votre code JavaScript va recevoir une chaîne de caractères contenant un code comme celui de ce tableau. À ce stade-là, il n'est pas encore possible de parcourir ce code, car il ne s'agit que d'une chaîne de caractères. Cependant, une fois la requête terminée et toutes les données reçues, un parseur (ou analyseur syntaxique) va se mettre en route pour analyser le code reçu, le décomposer, et enfin le reconstituer sous forme d'arbre DOM qu'il sera possible de parcourir.
Ainsi, nous pouvons très bien compter le nombre de cellules (les
balises<cel>) qui existent et voir leur contenu grâce aux méthodes que
nous sommes habitués à utiliser avec le DOM HTML. Nous verrons cela dans le chapitre suivant.
Le JSON est le format le plus utilisé et le plus pratique pour nous. Comme l'indique son nom (JavaScript Object Notation), il s'agit d'une représentation des données sous forme d'objet JavaScript. Essayons, par exemple, de représenter une liste de membres ainsi que leurs informations :
{
Membre1: {
posts: 6230,
inscription: '22/08/2003'
},
Membre2: {
posts: 200,
inscription: '04/06/2011'
}
}
Cela ne vous dit rien ? Il s'agit
pourtant d'un objet classique, comme ceux auxquels vous êtes habitués ! Tout comme avec le XML, vous recevez ce code
sous forme de chaîne de caractères ; cependant, le parseur ne se déclenche pas automatiquement pour ce format. Il
faut utiliser l'objet nomméJSON, qui possède deux méthodes bien
pratiques :
La
première,parse(), prend en paramètre la chaîne de caractères à
analyser et retourne le résultat sous forme d'objet JSON ;
La seconde,stringify(),
permet de faire l'inverse : elle prend en paramètre un objet JSON et retourne son équivalent sous forme de
chaîne de caractères.
Voici un exemple d'utilisation de ces deux méthodes :
var obj = {
index: 'contenu'
},
string;
string = JSON.stringify(obj);
alert(typeof string + ' : ' + string); // Affiche : « string : {"index":"contenu"} »
obj = JSON.parse(string);
alert(typeof obj + ' : ' + obj); // Affiche : « object : [object Object] »
Le JSON est très pratique pour recevoir des données, mais aussi pour
en envoyer, surtout depuis que le PHP 5.2 permet le support des fonctions
json_decode()
et
json_encode()
.
L'AJAX est un moyen de charger des données sans recharger la page, en utilisant le JavaScript.
Dans une requête AJAX, les deux formats de données plébiscités sont le XML et le JSON. Mais les données au format texte sont permises.
Les données
reçues au format XML ont l'avantage de pouvoir être traitées avec des méthodes DOM,
commegetElementById(). Le désavantage est que le XML peut se révéler
assez verbeux, ce qui alourdit la taille du fichier.
Les données reçues au format JSON ont l'avantage d'être très concises, mais ne sont pas toujours très lisibles pour un humain. Un autre avantage est que les données sont accessibles en tant qu'objets littéraux.