L'ajax, produit ménager pour les railleurs, est une technologie intégrée dans tous les navigateurs web récents qui apporte une nouvelle dimension dans la conception d'un site internet : les actions des utilisateurs sont plus rapides et les pages web plus interactives.
Cet article explique :
Comment implémenter un appel ajax standard en utilisant xmlhttprequest
Comment utiliser facilement ajax sur son site à l'aide d'un framework minimaliste
Ce qu'il faut savoir :
Connaître les fondamentaux du développement Web (html, javascript, php)
Que signifie A.J.A.X. ?
Définition
AJAX signifie Asynchronous Javascript And XML, ce n'est pas un nouveau langage c'est une technologie basé sur le javascript.
En effet le j de ajax signifie javascript. Le javascript est un langage de scripting client qui est intégré nativement dans les navigateurs. Ce langage servait initialement à effectuer des contrôles de cohérences sur les champs d'un formulaire ou encore à ouvrir des popups. Historiquement ce langage a été introduit dans le navigateur Netscape dans les année 1995 et c'est que bien plus tard qu'il est devenu un standard.
Le premier a d'ajax signifie asynchronous. De ce faite, avec cet technologie, il va être possible d'interagir de façon asynchrone avec un serveur Web et ceci depuis le poste client grâce au javascript. L'échange est basé sur le protocole http, l'ajax est donc parfaitement compatible avec les serveur Web sans aucun paramétrage supplémentaire.
Le x signifie XML. Les données échangées entre le client et le serveur peuvent donc s'effectuer en XML. Ceci est possible depuis que le composant D.O.M. (Document Object Model) a été standardisée et implémentée en javascript. Avec ce composant il est possible de modifier ou de créer dynamiquement la sémantique d'une page Web
Historique
Historiquement c'est Microsoft qui a intégré cette technologie le premier dans un activex dès la sortie internet explorer 5. Le composent javascript implémenté s'appelle xmlhttprequest. Ce composant, depuis, a été standardisé et intégré de façon native dans les navigateurs Web récent. Seulement cette technologie est restée très longtemps méconnue et les développeurs utilisaient plutôt des iframe, c'est à dire une page de taille définie inclue dans la page Web, qu'ils rechargeaient en javascript.
Périmètre d'application de cette technologie
L'ajax est une technologie que l'on peux utiliser sur un site grand public. En effet, que ce soit sous windows, macintosh ou linux, il existe des navigateurs compatibles.
En revanche l'ajax reposant sur le javascript, cette technologie peux être désactivé par l'utilisateur qui n' a pas confiance et qui pense que l'utilisation de script sur son navigateur peux engendrer un trou de sécurité pour son ordinateur. L'utilisation de la balise HMTL permet de signifier à l'utilisateur que le site qu'il visite nécessite l'utilisation de script pour fonctionner.
Il faut savoir aussi qu'au niveau du référencement naturel, les robots crawler ne lise pas le javascript, cela signifie qu'ils ne pourront pas indexer du contenu générer en ajax.
Pour ses deux raisons il est toujours conseillé de développer une version simple, sans utilisation de script, pour les moteurs de recherche et pour les utilisateurs qui utilisent par exemple des navigateurs facilitant l'accessibilité. Puis une version enrichie qui proposera des fonctionnalités plus avancées en ajax. Un simple lien sur la page d'accueil peux permettre à l'utilisateur de choisir quelle version il souhaite visiter.
Domaine d'application
En utilisant l'ajax et ses technologies sous-jacentes, il est désormais possible de recharger une petite partie de la page et non plus de tout recharger. En effet, grâce au composent xmlhttprequest, il est possible de demander sur un simple clic sur un lien du contenu au serveur Web, et de modifier la partie de la page concernée dynamiquement. Tout le monde y trouve son compte, l'administrateur Web voit sa bande passante diminuée car moins d'échanges sur le réseau, l'utilisateur voit les actions de son site plus rapides et aussi plus confortables visuellement (moins d'effets de clignotement du à l'affichage d'une page blanche le temps que la page se recharge)
Mise en pratique d'une fonctionnalité A.J.A.X. ?
Nous allons maintenant rentrer dans le détail de cette technologie en détaillant un exemple concret qui est applicable en l'état sur son site web.
Exemple d'utilisation
Prenons l'exemple d'une inscription sur un forum, la plupart du temps il est demandé de choisir un login et un mot de passe. Le login doit être unique car il identifie de façon unitaire la personne.
Comment cela se passe t-il au niveau des échanges de façon classique :
l'utilisateur arrive sur la page de création de compte,
il saisit les informations demandées puis clique sur le bouton de validation,
le navigateur envoi les données renseignées au serveur via une requête http,
le serveur récupère les informations et vérifie les informations,
le serveur exécute un traitement serveur pour vérifier les informations et inscrire la personne,
le serveur renvoi une page affichant que tout s'est bien passé ou s'il y a eu une erreur lors de la création du compte et indique alors le problème,
le navigateur affiche la page reçu du serveur.
Cet exemple montre que tant que l'utilisateur n'a pas trouvé un login qui n'existe pas encore, l'ensemble du processus va itérer, c'est à dire que le formulaire va être transférer à chaque fois et se ré afficher sur la page de l'utilisateur engendrant un effet de clignotement.
Avec l'apparition de l'ajax et de ses possibilités, il peut être judicieux de permettre à l'utilisateur de vérifier si le login qu'il a choisi n'est pas déjà pris, avant de soumettre l'ensemble du formulaire au serveur pour son inscription.
Le développement de base d'un fonctionnalité ajax
Pour réaliser cette action il va être nécessaire de créer un formulaire, ainsi qu'une fonction javascript dans une page html et aussi du code serveur dans un fichier php. Dans cet exemple j'ai choisi d'utiliser php comme langage serveur car c'est le plus accessible au niveau des hébergeurs. Mais avant cela voyons comment contacter le serveur depuis la page Web en utilisant le javascript et l'objet xmlhttprequest.
Instanciation du composant
La première étape est celle de l'instanciation de l'objet xmlhttprequest.
Nous allons nous placer dans la cas simple d'un navigateur qui intègre de façon native le xmlhttprequest (ce qui est le cas de mozilla firefox mais aussi d'internet explorer 7). Plus tard nous gérerons les cas des versions plus anciennes des navigateurs qui ont des méthodes d'instanciation différentes
xhr = newXMLHttpRequest();
Préparation de la requête
La deuxième étape est celle de la préparation de la requête. Il faut se représenter la page de formulaire html qui contient une balise form nommée formulaire ainsi qu'un champs texte nommé login. La requête est de type GET c'est à dire de la même nature qu'une url que l'on saisirait dans la barre d'url de son navigateur. Une requête http est composée du nom du site, d'éventuellement du chemin de la page, puis du nom de la page et enfin des paramètres optionnels à passer à la page. Ceux-ci s'écrivent de la forme :
?var1=valeur1
Si l'on veux passer plusieurs paramètres il faut séparer les couples clefs/valeurs par un &:
?var1=valeur1&var2=valeur2&var3=valeur3
Il faut savoir que tous les caractères ne sont pas autorisés dans une url ou plutôt ils sont convertis sous une séquence %xx ou xx est le code du caractères, c'est pour cela que nous utilisons la fonction globale du javascript encodeURIComponent qui va réalisé l'encodage.
Le dernier paramètre, de cette fonction d'ouverture de connexion, ayant pour valeur booléenne true signifie que le type de la requête est asynchrone. Tous les navigateurs supportent ce mode. L'usage de ce paramètre avec la valeur booléenne false, établit une requête du type synchrone, mais cet usage peux poser des problèmes. En effet dans ce mode le navigateur va se figer (pas de possibilité d'annuler) tant que le serveur n'aura pas répondu. La bonne idée est plutôt d'utiliser le mode asynchrone. Dans ce mode le navigateur ne rentre pas dans une attente active ainsi l'exécution du script continu (il est ainsi possible, bien que pas conseiller, d'envoyer plusieurs requêtes en parallèle). Il faut donc que le navigateur soit prévenu de l'état d'avancement de sa requête au serveur. Pour cela l'ajax permet de définir le nom de la fonction qui va être appelée en retour et ainsi de recevoir les données du serveur :
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 ) {
alert( xhr.responseText );
}
}
La première ligne de la fonction est un test qui vérifie que le serveur à répondu correctement et que tout le contenu de la réponse est parvenu au client. En cas de réception correcte la fonction alert javascript va afficher dans une popup grise le texte renvoyé par le serveur. Il suffit de cliquer sur le bouton ok pour fermer cette alerte.
Il faut savoir que l'objet xmlhttprequest gère deux méthodes pour lire le contenu de la réponse du serveur. La première est celle que nous avons vu précédemment, qui indique que la réponse et un contenu du type text/html. Il en existe une deuxième responseXML. En utilisant responseXML le javascript analyse la réponse du serveur comme étant un contenu du type text/xml pour le stocker dans un objet DOM. Cette objet n'est pas affichable en tant que telle il est nécessaire de la parser en utilisant les propriétés et les méthodes défini par le composant DOM. Pour récuperer le noeud racine d'un objet DOM il faut utiliser la propriété documentElement. Pour récupérer un noeud par son identifiant il faut utiliser la méthode getElementById. Voici un exemple qui afficherait le texte contenu dans la balise d'id 'msg' d'une réponse XML:
Enfin la dernière étape va être d'envoyer la requête simplement en utilisant la méthode send de l'objet. Le paramètre null signifie qu'il n'y pas de données complémentaires à envoyer vu que nous avons choisi de les transmettre sur l'url.
xhr.send(null);
Réception de la requête
Le traitement serveur s'écrit normalement comme un script serveur classique qui lirait les arguments et écrirait sur sa sortie standard en vue de l'afficher au navigateur. Il faut savoir que l'ajax encode les paramètres en UTF-8. L'UTF-8 est un mode d'encodage multi-octets, cela signifie que par exemple les caractères accentués sont encodés sur deux octets alors que les chiffres ne le sont que sur 1 octet. De plus en plus souvent, l'UTF-8 est utilisé par les applications Web parce qu'avec ce type d'encodage il est possible d'afficher tous type de caractères internationaux, dont le chinois par exemple. Seulement en France beaucoup d'hébergeur Web ne gère pas l'UTF-8, ils utilisent l'encodage ISO-8859-1. En mode ISO-8859-1 chaque caractère fait 1 octet. Dans cet encodage seul 256 caractères existent ce qui est suffisant pour encoder les caractères latin, les accents, les signes de ponctuations et les chiffres.
Nous allons nous placer dans le cas d'un serveur Web gérant de l'ISO-8859-1, il est donc nécessaire de décoder les paramètres d'entrées en UTF-8 pour les convertir en ISO-8859-1, ceci en utilisant la fonction utf8_decode(). Pour la même raison il faut spécifier au navigateur que les données retournées seront au format ISO-8859-1 en spécifiant une entête de type charset. Ceci s'effectue en php grâce à la fonction header. A remarquer que lorsque l'on utilise la fonction header il faut bien prendre soin qu'il n'y est aucun caractère avant et après les balise
<?php et ?>.
Listing 1. Code serveur, premier exemple
<?php
include( 'authent.inc.php' ); // défini la fonction
A remarquer que pour appeler une fonction ajax depuis une page html le plus simple est d'utiliser un lien. Pour se faire, il faut définir une url de clic null en spécifiant href='#' et définir un attribut onclick qui va appeler la fonction javascript. A noter la syntaxe return false; qui est nécessaire pour annuler le clic après l'appel de la fonction (le navigateur ne va pas se rendre à l'encre #)
On pourrait tout aussi bien automatiser l'appel ajax dès lors que l'utilisateur a saisi son login, en ajoutant un évenement sur la zone de saisie. Cela se traduit par l'ajout de l'attribut onChange comme ceci :
Ajouter facilement des fonctions ajax sur un site Web
Beaucoup de développeur ont voulu intégré des fonctionnalités ajax car l'exemple de base est relativement simple à mettre en oeuvre. Mais par la suite des difficultés de maintenance du code et les évolutions en sont devenues complexes. Il est nécessaire avant de se lancer dans le tout ajax de structurer, de hierarchiser ses développements. C'est ce que nous allons aborder dans cette partie en proposant l'utilisation d'un ensemble de fichier suffisament générique et réutilisable pour créer un framework ajax
Limite et inconvénient de l'ajax
L'ajax repose principalement sur l'objet xmlhttprequest qui permet de faire une requête http sur le serveur comme nous l'avons vu précédemment. En revanche pour utiliser de l'ajax sur une fonctionnalité de son site demande du développement contraignant en javascript qui est un langage très strict et pas facile à mettre au point. L'idée qui vient à l'esprit serait de proposer au travers d'une bibliothèque javascript la possibilité d'ajouter facilement ses actions ajax sur son site Web. Il convient d'abord de penser une architecture qui permette de coller à la majorité des besoins. Une fonctionnalité ajax va principalement consister à mettre à jour une partie ou plusieurs parties de la page en fonction de paramètres saisis par l'utilisateur. C'est ce que nous allons mettre au point dans cette partie, sous une forme minimaliste c'est à dire sous une forme optimiste ou tout se passe bien. Pour aller plus loin nous verrons les traitements complémentaires à rajouter pour gérer au mieux les problèmes liés au cache des navigateurs et aussi au traitement des erreurs qui pourraient survenir (serveur temporairement indisponible, page serveur en erreur d'exécution, etc)
Le framework minimaliste
L'architecture s'apparente à la notion de webservices, un webservice est une fonctionnalité distante (sur un autre serveur Web) que l'on interroge via http. Dans la page Web, en javascript nous allons simplement appeler des fonctions avec des paramètres, le framework va se charger de contacter le webservice qui va exécuter la fonction serveur demandée (exist_login par exemple), puis analyser la réponse du serveur et effectuer les différentes actions retournées par le serveur sur la page Web de l'utilisateur (affichage dans la page si le login existe ou pas). Du point de vue de l'utilisateur du framework, il faut simplement appeler une fonction serveur :
Listing 3. Code serveur, deuxième exemple avec xhr_script
functioncheck_login($login){
include('authent.inc.php');
if(!exist_login($login)){
xhr_script('alert(\''.$login.\' est disponible\');');
}else{
xhr_script('alert(\''.$login.\' est déjà utilisé\');');
}
}
Le premier arguments de xhr_call est le nom de la fonction serveur à exécuter, ensuite viennent un nombre variable de paramètres en fonction des besoins. Ici, le paramètre est le login saisi par l'utilisateur. Ensuite tout se passe du coté du serveur et des fonctions mises à disposition pour gérer les réponses au client. Dans la version basique du framework elles sont au nombre de deux. La première est celle utilisé ici xhr_script. Cette fonction php prend une chaîne en paramètre. Cette chaîne doit contenir du javascript valide qui sera exécuté au retour de l'appel http sur le navigateur de l'utilisateur. A l'identique du premier exemple, une alerte indiquant la disponibilité du pseudonyme s'affiche.
Maintenant les alertes javascript peuvent paraître un peu instruive et désagréable pour l'utilisateur. Il serait préférable d'afficher directement le message dans la page. Ceci est possible grâce au composant D.O.M. du javascript qui permet de modifier dynamiquement les éléments d'une page Web. Pour réaliser ceci nous avons donc besoin de l'extrait du code html suivant. Par rapport à la version précédente, cela consiste à rajouter une division nommé 'msg' dans la page Web et un troisième paramètre pour la fonction xhr_call :
Listing 4. Code serveur, deuxième exemple avec xhr_assign
functioncheck_login($login,$div){
include('authent.inc.php');
if(!exist_login($login)){
xhr_assign($div,$login.' est disponible');
}else{
xhr_assign($div,$login.' est déjà utilisé');
}
}
Listing 5. Code html, deuxième exemple avec xhr_assign
La deuxième fonctionnalité serveur du framework est dévoilée dans cet exemple, il s'agit de la fonction xhr_assign qui prend deux arguments, le premier est l'id de l'élément qui va recevoir le text passé en deuxième argument. Dans notre exemple $div contient la valeur msg, $login contient le login saisi par l'utilisateur.
Détail du framework
Pour mettre en place le framework xhr il est nécessaire de déposer trois fichiers dans un même répertoire.
Toute les pages HTML qui vont utiliser des fonctionnalités ajax doivent inclure avec la syntaxe suivante le fichier javascript xhr.js
// termine le xml ajax et affiche la réponse pour le navigateur
?>
Pour aller plus loin
Nous avons vu précédemment comment coder une fonction ajax en écrivant explicitement les envois des requêtes http grâce au javascript, nous avons vu aussi comment récupérer le contenu d'une réponse et aussi comment la présenter à l'utilisateur dans son navigateur. Nous avons ainsi pu montrer que cela peux s'avérer relativement laborieux dans le cas d'un site qui en ferait usage de façon intensive. On comprend ainsi l'intérêt de se servir d'un framework qui permet de faciliter l'intégration d'ajax sur un site Web. L'approche du framework 'minimaliste' a pour but de montrer une autre vision que l'on peut avoir d'une fonctionnalité ajax et aussi de se concentrer sur le développement des fonctions serveur dans le langage que l'on a l'habitude de manipuler. On laisse, ainsi au framework géré la partie contraignante et rigoureuse du javascript.
Maintenant il existe d'autre framework open source qui fédère une communauté d'utilisateur et de développeur. On peux citer xajax qui est basé sur la même approche que xhr. Il consiste aussi à appeler des fonctions serveur directement depuis un lien ou un bouton. Seulement ce framework masque complètement le javascript, car celui-ci est généré par le php en fonction des besoins de l'utilisateur de xajax. De plus, tout comme le framework xhr, il propose un ensemble de fonctionnalités serveur pour interagir avec la page Web et l'utilisateur mais celles-ci sont beaucoup plus avancé et permettent de gérer de façon maximum les actions à effectuer. On peux noter dans ce framework une approche que nous n'avons pas abordée ici qui est le branchement d'une fonction ajax sur la soumission d'un formulaire. En effet la difficulté réside dans le faite de devoir en javascript récupérer tous les éléments du formulaire pour les passer en paramètre à la fonction serveur, xajax gère cet fonctionnalité toujours sans écrire de javascript. Pour plus d'information il me reste plus qu'à vous suggérer de vous rendre à cet url pour consulter les tutoriaux de xajax http/www.xajaxproject.org/docs/xajax-in-10-minutes.php.