Avant l'existence de la fonctionnalité Ajax, il était possible d'atteindre le même objectif en utilisant une "iframe" cachée. Les deux liens ci-dessous présentent cette ancienne pratique :

Avec Ajax, la communication entre le navigateur et le serveur se réalise grâce à la fonction XMLHttpRequest ou alors un objet ActiveX sur les anciennes versions d'Internet Explorer.

En raison d'incompatibilités entre les navigateurs ainsi qu'une certaine difficulté d'utilisation de la fonction XMLHttpRequest, la mise en oeuvre d'Ajax se fait à travers de librairie qui simplifie la vie du développeur. Pour ma part, j'ai choisi d'utiliser le framework Prototype.

Prototype : "a Javascript framework"

Prototype est une librairie javascript. Elle fournit principalement une collection de fonctions et d'objets qui simplifient certaines actions javascript.
Cette catégorie de fonctions ou d'objets qui n'apportent pas de fonctionnalités mais qui simplifient la vie du développeur sont généralement nommées "Helper".

Exemple de code javascript :

alert( document.getElementById('foobar').value );

Le même code avec une fonction "helper" de prototypejs :

alert( $('foobar').value );

Cette exemple est une bonne illustration du concept "helper", ici prototype ne propose pas une nouvelle fonctionnalité mais simplifie l'accès à noeud de l'arbre DOM à partir de son index.

Parmit les fonctionnalités les plus utiles de la librairie prototype, je peux citer les objets Ajax.Request et Ajax.Updater. Ce sont elles qui simplifient l'utilisation de XMLHttpRequest. Je vais présenter ci-dessous des exemples d'utilisations de ces deux objets.

Page d'exemple 1 - Ajax.Request

Une des fonctionnalités les plus basiques d'Ajax est l'envoi de variables à un script (PHP en l'occurrence) et de récupérer un résultat. Au niveau du navigateur, cette opération s'effectue en Javascript.

Dans ce premier exemple, le but est de calculer le produit de deux nombres. L'opération de calcul sera réalisée par un script PHP. Je sais... cet exemple n'a que peu d'intérêt car javascript permet de réaliser cette opération... mais mon objectif est de proposer un exemple simple.

Tout d'abord, voici la page html principale :

Les lignes 26 et 27 contiennent des balises de formulaires permettant à l'utilisateur de saisir les deux nombres dont je souhaite réaliser le produit.

La balise textarea ligne 28 a pour objectif d'afficher le résultat de l'opération.

La balise hyperlien des lignes 30 à 33 permet d'exécuter l'opération de calcul en appelant la méthode javascript "executer_calcul".

La ligne 04 charge la librairie javascript prototype permettant d'utiliser ensuite l'objet "Ajax.Request".

Le code javascript des lignes 08 à 18 réalisent la requête Ajax.
Le premier paramètre (request.php) du constructeur de l'objet Ajax.Request contient l'url du script à contacter.
Le second paramètre du constructeur contient un tableau associatif (équivalent à un objet avec des propriétés) qui contient des options à passer au constructeur.

La première option nommée method contient le type de méthode de transmission de paramètres.
L'option nommée parameters permet de transmettre un ou plusieurs paramètres au script appelé. Ces paramètres sont envoyés sous la forme d'un tableau associatif. Dans le cas ici présent, deux paramètres sont envoyés via la méthode de transfert POST du protocole HTTP. Par la suite, dans le script PHP, il est possible de récupérer ces variables via $_POST['var1'] et $_POST['var2'].

De la ligne 14 à 17, l'option onSuccess contient une fonction javascript qui sera exécutée uniquement si le script PHP a fini son exécution avec succès.

Il est possible de passer de nombreuses autres options au constructeur Ajax.Request, ces options sont détaillées dans la documentation de prototype.

À noter que Ajax.Request fonctionne en mode asynchrone. C'est à dire que l'interpréteur Javascript du navigateur ne va pas attendre la fin de l'exécution de la requête Ajax pour passer à l'instruction suivante. Dans le cas ici présent, l'interpréteur va passer à la ligne 19 sans se préoccuper du code présent dans l'option onSuccess. Cette dernière sera exécutée en parallèle.

La fonction appelé lors de l'événement onSuccess contient deux lignes (15 et 16). Le paramètre transport de la fonction anonyme contient des informations relatives au résultat de la requête exécutée. Ici la fonction utilise uniquement la propriété responseText du paramètre transport. Cette propriété contient le texte brut renvoyer par le script request.php. À la ligne 16, ce texte est copié dans la balise textarea identifié via l'index resultat.

S'en est fini du coté de la page principale, maintenant regardons du coté du script request.php.

Ce script calcul uniquement le produit des deux valeurs envoyer en POST et affiche le résultat dans une phrase. C'est ce texte qui est copié dans dans la balise textarea lors de l'exécution de la fonction javascript enclenché par l'événement onSuccess de l'objet Ajax.Request.

Le résultat d'une requête ajax est uniquement véhiculé par la sortie standard (je ne sais pas si cela se dit dans le cadre de php) du script PHP, par conséquent le format de la sortie sera toujours une chaîne de caractères plus ou moins longue. Par la suite, dans l'exemple trois, nous verrons comment il est possible de renvoyer simplement des structures de données plus complexe.

Voilà, maintenant vous savez comment réaliser des requêtes Ajax :)

Exemple 2 - Ajax.Updater

Étudions maintenant un autre objet de la librairie prototype : Ajax.Updater.

Voici l'exemple :

Le principe est globalement identique à l'exemple 1 mis à part que l'objet Ajax.Updater n'a pas d'événement onSuccess. Cet objet permet de remplacer le contenu d'une balise html par le résultat d'une requête exécutée. Ici l'élément remplacé est le contenu de la balise p qui a pour index resultat.

Aucun changement au niveau du script request.php.

Exemple 3 - Ajax.Request + JSON

Reprenons l'exemple 1 et supposons que je souhaite que le script request.php ne renvoie pas une seule valeur mais plusieurs ! Sous quel forme puis-je retourner les données et facilement les lire ou les parser en Javascript ? La solution la plus élégante est d'écrire ma structure de donnée en respectant la syntaxe javascript et de faire évaluer cette chaîne par la fonction eval de javascript.

Passons à un exemple...

du coté du script php j'ai ceci :

Cette chaîne de caractères correspond à une déclaration objet javascript avec comme contenu uniquement des propriétés.

À la ligne 4, la variable result se voit attribuer le résultat de la requête, la chaîne de caractères est interprétée par la fonction javascript eval. Il est ensuite possible d'accéder aux propriétés var1 et var2 comme le montrent les lignes 6 et 7.

Ce format de communication de données qui consiste à utiliser la syntaxe de javascript pour définir une structure de données est appelé JSON.

JSON (JavaScript Object Notation) est un format de structure de données générique (source : article wikipedia).

Voici le code source complet de l'exemple 3 qui reprend les concepts présentés dans les précédents paragraphes.

La page principale :

Le script appelé via Ajax.Request :

La ligne 03 contient une nouvelle fonction de PHP 5.2 : json_encode qui permet de transformer une structure de données PHP au format Javascript c'est à dire JSON.

Pour avoir le même type de fonction (json_encode) avec une version PHP inférieur à 5.2, il était nécessaire de recourir à une extension ou alors à une librairie écrite en PHP. À noter que cette dernières est beaucoup plus lente que les librairies compilées.

D'autres part, il est tout à fait possible de réaliser l'opération inverse de json_encode en utilisant la fonction PHP json_decode. De même en javascript il est possible de réaliser l'opération inverse de eval en utilisant la méthode foobar.toJSONString() qui retourne une chaîne de caractère. Cette dernière n'est pas disponible nativement dans javascript, voici par exemple une librairie "The open source code of a JSON parser and JSON stringifier" qui fournit la méthode toJSONString.

Téléchargement des exemples

Vous pouvez télécharger les trois exemples en utilisant le lien suivant : exemples_ajax_php_prototype.tar.gz

Bibliographie