[Plan du site]
Vous êtes ici ---
> Le Site du Zér0
> Les tutoriels
> Non-Officiels
> Site Web
> PHP
> Langage, bibliothèques et fonctions
> Lecture du tutoriel
[xAjax] Applications AJAX faciles avec PHP et xAjax !
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour à tous !
Comme c'est indiqué dans le titre, ce tuto est consacré à la librairie xAjax !
C'est pas du produit pour nettoyer l'évier, ce truc ???
xAjax est une librairie Open Source toujours en développement, qui permet de déployer des applications AJAX puissantes, et très facilement en ayant des bases en PHP (attention je me permets d'insister, xAjax ce n'est pas AJAX, ce n'est qu'un moyen d'en faire très facilement !).
AJAX signifie
Asynchronous Javascript And XML : ce type d'application permet de maintenir une communication entre le serveur et le client, sans que celui-ci n'ait besoin de recharger la page.
N'avez-vous jamais rêvé d'un
chat où vous n'avez pas besoin de recharger la page ? Ou encore d'un formulaire de connexion qui ne charge pas une nouvelle page pour vous afficher un message d'erreur, vous disant "
Mot de Passe erroné !" ?
Voilà à quoi sert xAjax ! Je ne vous fais pas baver plus longtemps, roulez jeunesse !
Niveau: 3/10 - Débutant
Je tiens d'abord à vous prévenir : en écrivant ce tuto, je pars du principe que vous connaissez les bases du PHP, c'est-à-dire que vous savez faire des conditions (if...elseif...else), des boucles (while, for), et aussi que vous connaissez XHTML (pour afficher les données). Si vous ne connaissez pas ça, ne continuez pas : vous risqueriez de perdre du temps (déjà que je ne suis pas le pro de l'explication...). De légères connaissances en Javascript sont utiles mais pas indispensables.
Voilà, c'est téléchargé ?... Bon, continuons !
Concrètement, que va faire xAjax ?
Voyons deux cas, le premier sans xAjax, et le second avec xAjax.
Sans xAjax, on aurait le schéma suivant :
1- L'utilisateur appelle une page
2- Le serveur génère la page
3- Le serveur renvoie la page finale
4- La page est affichée par le navigateur de l'utilisateur
5- Fin des échanges entre le serveur et l'utilisateur (impossible de mettre les informations de la page à jour sans actualiser et recommencer le schéma depuis le n°1).
Avec xAjax, on aurait ceci :
1- L'utilisateur appelle une page
2- Le serveur génère la page
3- Le serveur renvoie la page finale
4- La page est affichée par le navigateur de l'utilisateur
5- xAjax
maintient une connexion asynchrone avec le serveur en effectuant des requêtes en tâches de fond, et va mettre à jour notre page sans rechargement, de manière totalement transparente pour l'utilisateur, en recommençant le schéma au n°2 (nous sautons donc le point n°1, l'utilisateur n'as pas besoin d'effectuer une action pour que la page se mette à jour).
Vous voyez bien ici quelle est
l'utilité de xAjax : soumettre des requêtes au serveur de façon transparente (en tâche de fond), et modifier la page grâce aux résultats retournés !
Qu'est-ce qu'une librairie PHP ?
C'est une page regroupant un ensemble de fonctions qui vont nous permettre de réaliser des actions (normalement longues, répétitives, difficiles et rébarbatives) de façon simple, en les appelant dans notre script.
Un exemple : nous souhaitons gérer un caddie dans notre galerie marchande :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <?php
function total_caddie($caddie)
{
//Calcule le montant total des achats
}
function nombre_articles($caddie)
{
//Retourne le nombre d'articles présents dans le caddie
}
function ajouter_article($produit, $caddie)
{
//Va ajouter un article à notre caddie
}
//etc...
?>
|
Grâce à cet ensemble de fonctions PHP, il sera très simple pour le programmeur de calculer facilement le montant du caddie, par exemple en appelant simplement la fonction
total_caddie() 
.
Néanmoins, dans notre librairie xAjax, ça ne se présente pas de cette façon (ouvrez le fichier, vous verrez) !
Compliquons un peu les choses. Nous venons de regrouper du code dans des fonctions ; eh bien nous pouvons regrouper nos fonctions dans des classes. Vous voyez,
c'est un peu comme des boîtes : le Code est contenu dans la boîte Fonction, et la boîte Fonction est contenue dans la boîte Classe. On appelle ces fonctions des
méthodes.
Chaque boîte Classe sert à faire quelque chose ; pour xAjax, nous allons nous servir de deux classes de la librairie : l'une sert à "
configurer et générer le Javascript", l'autre sert à "
gérer les résultats".
Ainsi, notre librairie xAjax se présente de cette façon :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 | <?php
class xajax($chemin_xajax) //La classe qui va nous permettre de générer le Javascript
{
function fonction1() //Premiere fonction
{
//Code...
}
function fonction2() //Seconde fonction
{
//Code...
}
function fonction3() //Troisieme fonction
{
//Code...
}
//etc...
}
class xajaxResponse() //La classe qui va nous permettre de gérer les réponses de xajax
{
function fonction1() //Premiere fonction
{
//Code...
}
function fonction2() //Seconde fonction
{
//Code...
}
function fonction3() //Troisieme fonction
{
//Code...
}
//etc...
}
|
Vous voyez : ce n'est pas bien compliqué pour le moment. Bien sûr, vous ne connaissez pas les fonctions qui se trouvent dans la librairie et ce qu'elles font, c'est normal, étant donné que je vais vous l'apprendre dans ce tuto !
Pour pouvoir appeler nos méthodes,
il faut créer une instance d'une classe.
Oulà... Cachez cet air ébahi !
Pour reprendre notre exemple des boîtes, créer une instance d'une classe signifie ouvrir la boîte pour avoir accès à toutes les fonctions de la classe. Voilà un exemple, nous avons notre classe caddie avec les fonctions pour calculer le total, etc. à l'intérieur :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | <?php
class caddie
{
function total_caddie($caddie)
{
//Calcule le montant total des achats
}
function nombre_articles($caddie)
{
//Retourne le nombre d'articles présents dans le caddie
}
function ajouter_article($produit, $caddie)
{
//Va ajouter un article à notre caddie
}
//etc...
}
$caddie_client = new caddie(); //On crée une instance de la classe caddie (en gros, on ouvre la boite caddie)
$caddie_client->total_caddie($achats_du_client); //On appelle la fonction total_caddie() qui se trouve dans la classe
$caddie_client->ajouter_article('pull_over', $achats_du_client); //On appelle la fonction ajouter_article
//etc...
?>
|
Voilà : vous venez de comprendre le principe de la Programmation Orientée Objet (POO). Les bases de la POO que je viens de vous donner ici sont suffisantes pour comprendre la suite du tuto.
Si vous en savez plus sur la POO : tant mieux !
Sinon, voici un super tuto sur le Site du Zér0 :
Tuto sur la POO.
| Bilan de cette Introduction : |
|---|
| - Retenez bien ce que signifie "créer une instance d'une classe", car ce vocabulaire sera utilisé plusieurs fois dans ce tuto ! |
| - Retenez bien que les fonctions qui sont contenues dans les classes s'appellent des méthodes ! |
Maintenant que nous sommes au point avec la POO, commençons !
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <?php
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page xajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript();/*Fonction afficher le javascript de la page*/ ?>
</head>
<body>
<div id="block"></div>
</body>
</html>
|
Vous allez penser que je suis un sadique de vous coller ce pâté devant le nez, mais si on s'y penche bien, vous verrez que vous connaissez presque toutes les lignes. On va les décomposer ensemble :
Code : PHP1
2
3 | <?php
require_once('./xajax_core/xajax.inc.php');
?>
|
Dans un premier temps, on indique à PHP qu'il doit inclure notre librairie xAjax à la page. La librairie se trouve dans le répertoire
xajax_core ("core" qui signifie le "coeur" de la librairie).
Code : PHP1
2
3 | <?php
$xajax = new xajax(); //On crée une instance de la classe xajax
?>
|
Voilà une ligne bien obscure dans vos pensées... oui, oui, je vois cela dans vos yeux

.
En fait, ce n'est pas si dur ! On a créé une instance de xajax, et grâce à cet objet, on va pouvoir appeler toutes les méthodes qui se trouvent dans la classe xajax !
Comme je le disais plus haut, cet objet va nous permettre de générer le Javascript de la page. Il est donc
indispensable !
Code : PHP1
2
3 | <?php
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax
?>
|
Ici, on fait un appel à la méthode
processRequest(). J'ai eu du mal au début à comprendre à quoi elle pouvait servir. En fait elle va ordonner à xAjax de générer le Javascript de notre page une fois que nous lui auront fournit toutes les informations qui lui sont nécessaires (nom des fonctions etc...).
Attention, il faut mettre cette fonction en début de page avant d'avoir envoyé des informations au navigateur !!! (Comme les headers, ou les session_start si vous voulez.)
Code : PHP1
2
3 | <?php
$xajax->printJavascript();//Fonction qui va afficher le javascript de la page
?>
|
La seconde méthode indispensable,
printJavascript(), va afficher le Javascript généré sur notre page XHTML. En effet, les applications AJAX reposent en grosse partie sur Javascript, mais pas besoin de connaître beaucoup ce langage pour utiliser xAjax ! Et c'est cela l'avantage, on ne s'embête plus avec le langage capricieux qu'est Javascript, xAjax s'en occupe !
| Premier Bilan : |
|---|
| - bien retenir comment l'on crée une instance de xajax et quel est son rôle |
| - puis on fait appel ensuite à la méthode processRequest() avant d'envoyer des infos au navigateur |
| - enfin, on fait appel à la méthode printJavascript() entre les balises <HEAD></HEAD> pour afficher le Javascript |
C'est bien joli tout ça, mais j'ai toujours rien sur mon écran moi : c'est normal ?
En effet, c'est normal ; disons que nous avons appris là le strict minimum à mettre dans une page pour exécuter une application AJAX.
A chaque fois que vous utilisez xAjax, il faut créer votre objet xajax(), et appeler les méthodes nécessaires (processRequest() et printJavascript()). Retenez bien cela, c'est indispensable !!!
Maintenant que vous connaissez les bases, passons concrètement à l'utilisation de xAjax.
Ce qu'on souhaite faire avec cette librairie, c'est exécuter du code en asynchrone (sans rechargement de la page).
Comment programmer mon code qui sera exécuté en asynchrone ?
Tout simplement en PHP !

Et c'est ça, l'avantage !
Il faut écrire le code à exécuter dans une
fonction PHP, et
l'enregistrer avec une méthode xAjax que je vais vous donner :
Code : PHP1
2
3 | <?php
$xajax->register(XAJAX_FUNCTION, 'MaFonctionPHP');
?>
|
Au final, vous aurez ceci dans votre page :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <?php
function MaFonctionPHP(argument1, argument2,...)
{
//code à exécuter
}
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->register(XAJAX_FUNCTION, 'MaFonctionPHP'); //Déclaration de la fonction MaFonctionPHP
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page xajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript();/*Fonction qui va afficher le javascript de la page*/ ?>
</head>
<body>
<div id="block"></div>
</body>
</html>
|
Vous devriez comprendre sans encombre la totalité de ce code ; si ce n'est pas le cas, je vous conseille de relire le tuto depuis le début...
Petit point très important : il faut mettre le processRequest() avant d'envoyer des informations au navigateur, mais après avoir enregistré vos fonctions !!!
Ne mettez pas d'echo, ni de print ni aucune fonction PHP, qui serait susceptible d'envoyer des informations au navigateur dans vos fonctions ; en effet à ce stade, on n'affiche plus avec PHP, mais avec des méthodes de xajax que je vais vous décrire plus loin.
Grâce à la méthode
register(), vous pouvez enregistrer des éléments de votre code (des fonctions par exemple

) qui seront exécutée en 'Asynchrone'.
Très facile de se rappeler de ça : register signifie "Enregistrer" et XAJAX_FUNCTION signifie "Fonction xAjax".
Vous devriez commencer à comprendre comment fonctionne la librairie xAjax : au fil du code, vous fournissez à xAjax les informations dont il a besoin, comme le nom des fonctions PHP, etc... Le moteur xAjax, grâce à ces informations, va générer lui-même le javascript (grâce à
processRequest()), et l'afficher sur la page (avec
printJavascript()).
Comment exécuter ma fonction PHP avec xAjax ?
Pour exécuter la fonction PHP préalablement écrite et enregistrée, on fait appel à Javascript :
Code : JavaScript1 | xajax_MaFonctionPHP(argument1, argument2,...);
|
On peut bien sûr mettre ce code Javascript avec des événements :
Code : HTML1 | <input type="button" value="AJAX" onclick="xajax_MaFonctionPHP(argument1, argument2,...);">
|
Ou, si on a besoin de rafraîchir quelque chose régulièrement (comme un
chat) :
Code : HTML1
2
3
4
5
6
7 | <script>
function refresh()
{
xajax_MaFonctionPHP(argument1, argument2,...);
setTimeout(refresh, 5000);
}
</script>
|
Voilà, c'est bête comme chou !
| Second bilan : |
|---|
| - On écrit le code que xAjax devra exécuter dans des fonctions PHP |
| - On enregistre nos fonctions PHP de cette façon : $xajax->register(XAJAX_FUNCTION, 'MaFonction'); |
| - Après avoir enregistré nos fonctions, on ajoute : $xajax->processRequest(); |
Je vais maintenant vous apprendre à écrire et à traiter avec xAjax vos fonctions en PHP !
T'as un cerveau de poisson rouge, toi

. Tu viens de nous dire qu'on programmait nos fonctions en PHP, et c'était bon ?!?
En effet, il faut bien programmer ses fonctions en PHP ; néanmoins, rappelez-vous que nous devons exclure de nos fonctions toute requête qui pourrait envoyer des informations au navigateur, comme
echo ou
print.
Comment changer le contenu de ma page dynamiquement, alors ???
J'y viens !
Après avoir utilisé la classe de génération du Javascript
xajax, nous allons maintenant utiliser la classe qui gère les réponses
xajaxResponse !
Voici la ligne que vous devez ajouter au début de toutes vos fonctions :
Code : PHP1
2
3 | <?php
$reponse = new xajaxResponse();
?>
|
Nous venons de créer une instance de la classe
xajaxResponse !
Cette classe contient plusieurs méthodes intéressantes, nous permettant de modifier le contenu de la page grâce aux réponses du serveur. Je ne les connais pas toutes, car il en existe un très grand nombre : je vais donc vous donner les plus importantes !
Je vous les donne en bloc :
Code : PHP1
2
3
4
5
6
7 | <?php
$reponse->assign('IdElement', 'Attribut', 'Valeurs');
$reponse->call('MaFonctionJSàAppeler');
$reponse->clear('IdElement', 'Attribut');
$reponse->script("code Javascript à exécuter");
$reponse->addEvent("IdElement", "Evenement", "ScriptàExecuter");
?>
|
La première, est nécessaire pour modifier le contenu :
Code : PHP1
2
3 | <?php
$reponse->assign('IdElement', 'Attribut', 'Valeurs');
?>
|
Cette méthode va modifier
Attribut de
IdElement par
Valeurs.
Concrètement, ça donne :
Code : PHP1
2
3 | <?php
$reponse->assign('block', 'innerHTML', 'Bonjour je m\'affiche grâce à une méthode xAjax!');
?>
|
Ce code va remplacer ce qu'il y a entre les balises (c'est ce que signifie
innerHTML) de mon
div (avec son
id qui est
block) par la phrase "Bonjour, je m'affiche grâce à une méthode xAjax !".
Remarquez une chose : les méthodes de réponses xAjax n'acceptent que des éléments avec un id ; si j'avais mis "div", ça n'aurait pas marché. De même, si vous avez un formulaire avec un champ texte, vous ne mettrez pas form.champ, mais directement l'id du champ !
La seconde :
Code : PHP1
2
3 | <?php
$reponse->call('MaFonctionJSàAppeler');
?>
|
C'est un méthode assez intéressante, retenez seulement qu'elle sert à appeler d'autres fonctions Javascript depuis son code PHP. Nous verrons une utilisation concrète un peu plus tard.
Voici la troisième méthode qui permet d'effacer le contenu d'un champs :
Code : PHP1
2
3 | <?php
$reponse->clear('IdElement', 'Attribut');
?>
|
C'est très simple, on précise l'Id d'un élément de formulaire par exemple, et un attribut (comme value), et le contenu sera entièrement effacé.
La quatrième et non pas des moindres :
Code : PHP1
2
3 | <?php
$reponse->script("code Javascript à exécuter");
?>
|
Vous pouvez rentrer directement du code Javascript qui sera exécuté.
Entre les guillemets, pensez bien à échapper, grâce à un \, tous les caractères qui nécessitent un échappement(\,",'...).
Enfin la dernière si on souhaite ajouter un événement à une balise (par exemple :
onchange,
onclick,
onfocus...), on le fais grâce à cette méthode :
Code : PHP1
2
3 | <?php
$reponse->addEvent("IdElement", "Evenement", "ScriptàExecuter");
?>
|
Vous connaissez désormais les méthodes xAjax les plus courantes. Il y en a encore beaucoup (beaucoup beaucoup même

), mais celles-ci sont les plus utiles. Si vous souhaitez pousser vos connaissances, je vous donnerai un lien contenant la liste des méthodes existantes dans la conclusion !
Enfin,
très important, à chaque fin de fonction, il faut retourner les données XML à xAjax en procédant de cette façon (je le répète :
à placer à la fin de toutes vos fonctions, en guise de return) :
Code : PHP1
2
3 | <?php
return $reponse;
?>
|
En fait il s'agit seulement de retourner l'objet de réponse !
Attention ! J'insiste : n'oubliez pas de retourner l'objet à la fin de vos fonctions, sinon votre script ne fonctionnera pas !!!
| Troisième bilan : |
|---|
| - On écrit donc le code à exécuter dans des fonctions |
| - Pour interpréter les réponses et changer le contenu de la page, on utilise la classe xajaxResponse |
| - On change le contenu grâce à des méthodes comme assign, script... |
| - On ajoute return $reponse; à la fin de toutes nos fonctions qui vont être utilisées par xAjax |
Je vous propose maintenant un exemple concret de ce que nous venons d'apprendre : le fameux t'Chat qui ne clignote pas !

Mais avant cela, faisons un bref rappel de l'ordre dans lequel vous devez programmer votre code avec xAjax :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12 | function Bidule($arg1, $arg2, ...)
{
//1-Création de l'objet de réponse xajaxResponse
//2-Votre code à exécuter en asynchrone
//3-Appel d'une ou de plusieurs méthodes xAjax pour modifier le contenu de la page
//4-Retourner l'objet de réponse
}
//1-Inclusion de la librairie xajax (avec require_once)
//2-Création de l'objet de génération du javascript xajax
//3-Enregistrement de vos fonctions avec register
//4-Appel de la méthode processRequest
//5-Entre les balises <HEAD></HEAD> appel de la méthode printJavascript
|
Je propose maintenant de réaliser le Chat afin de vous entraîner.
C'est assez simple : tout tient en une seule page.
Faites le nécessaire dans un premier temps pour déclarer tout ce qui est indispensable pour travailler avec xAjax, et n'hésitez pas à remonter plus haut pour chercher ce qu'il faut mettre : c'est le métier qui rentre.
Dans le
body de votre page, mettez un
div vide qui recevra les messages, et aussi un formulaire pour poster le message, avec le nom du posteur et son message.
Créez et déclarez les fonctions pour poster et afficher les messages, tout en sachant que nous stockerons les messages dans un fichier texte (
.txt), la méthode avec la base de données MySQL étant vraiment trop lourde...
Et enfin, l'astuce pour rafraîchir : un petit code comme celui-ci dans le
head :
Code : HTML1
2
3
4
5
6
7 | <script>
function refresh()
{
xajax_afficher();
setTimeout("refresh()", 5000);
}
</script>
|
et dans le
body à la fin de la page :
Code : HTML1
2
3 | <script>
refresh();
</script>
|
Allez, on code...
.....
.....
Déjà ? Je ne vous crois pas

...
.....
.....
Voilà la solution :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 | <?php
//
//Notre fonction PHP pour afficher les messages
//
function afficher()
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$chat = '';//Initialisation de la variable $chat
$fichier_texte = fopen('./chat.txt', 'r');//On ouvre notre fichier texte en lecture seule
$chat = fread($fichier_texte, filesize('./chat.txt'));//On lit notre fichier et on le stocke dans la variable $chat
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->assign('block', 'innerHTML', $chat);//Enfin, on change le contenu du div block par le contenu de $chat
return $reponse;
}
//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($posteur, $message)
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en ecriture seule
fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities($message) . '<br />'));//On stocke dans notre fichier
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
$reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et aussi pour que le posteur voit son message à l'écran
return $reponse;
}
//
//Ouverture de la librairie xajax
//Instanciation d'un objet de la classe xajax, puis déclaration de nos fonctions php
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->register(XAJAX_FUNCTION, 'afficher');//on enregistre nos fonctions
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax APRES AVOIR DECLARE NOS FONCTIONS
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Chat xAjax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript(); /* Affiche le Javascript */?>
<script type="text/javascript">
function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
xajax_afficher();
setTimeout(refresh, 5000);
}
</script>
</head>
<body>
<div id="block"></div>
<form action="">
<fieldset>
<legend>Entrer ici votre message :</legend>
<div>
<label>Nom : <input type="text" size="15" id="posteur" /></label><br />
<label>Message : <input type="text" size="50" id="message" /></label><br />
<input type="submit" value="Envoyer" onclick="xajax_envoyer(document.getElementById('posteur').value, document.getElementById('message').value); return false;" />
</div>
</fieldset>
</form>
<script type="text/javascript">
refresh();//On appelle la fonction refresh() pour lancer le script
</script>
</body>
</html>
|
Voilà : vous pouvez tester, c'est fonctionnel ! Notez néanmoins que c'est très moche et peu optimisé...
Vous pouvez l'améliorer si ça vous amuse, ou si vous en avez l'utilité, mais sachez que ce chat sature assez vite (je n'ai jamais eu l'occasion de tester combien de personnes au maximum il pourrait supporter mais ça ne doit pas être très élevé...).
Voici une partie traitant d'un problème récurrent chez les utilisateurs de xAjax: l'encodage des caractères !!!
Vous avez surement dû remarquer que les caractères spéciaux (comme é, è, à, ...etc) ne passaient pas correctement sur le Chat.
Soyez très attentifs, c'est un peu compliqué !
Il faut savoir que part défaut, xAjax traite les caractères selon le jeu de caractères UTF-8, donc si votre site est encodé en UTF-8 pas la peine de vous attardez sur cette partie. En revanche si vous utilisez un autre jeu de caractères comme l'ISO-8859-1, vous risquez d'avoir quelques petits problèmes d'accentuation !
Contrairement à la version Stable de xAjax, la version Beta (celle que nous utilisons dans ce tuto) ne semble pas gérer correctement l'encodage des caractères.
Pour pouvoir conserver un site encodé en ISO-8859-1, nous allons donc devoir utliser une petite méthode alternative !
Je vous explique un peu le problème (parce qu'il y a une petite subtilité à bien saisir) :
Lorsque xAjax traite des données, il les encode automatiquement en UTF-8. C'est un peu dommage pour nous parce que c'est justement ce qu'on ne veut pas qu'il fasse !
La subtilité réside dans le fait que
pour l'affichage des données, les méthode fournies par xAjax fonctionnent parfaitement. Seulement
pour ce qui est de la récupération des données par l'intermédiaire d'un formulaire et leur enregistrement, ces méthodes ne fonctionnent pas...
Le but du jeu est simple : comme xAjax encode en UTF-8 les informations qu'il reçoit par les formulaires, nous allons les reconvertir en ISO-8859-1 avant de les utiliser !
Pour cela on utilise une fonction PHP qui s'appelle
utf8_decode() et qui permet de convertir des données encodées UTF-8 en données encodées ISO-8859-1 !
Reprenons ensemble le script du Chat (j'espère que vous l'avez bien compris), nous recevons depuis le formulaire le pseudo du posteur, et son message. Ils ont donc été automatiquement encodés en UTF-8. Nous allons appliquer la méthode que je vous aie cité plus haut, en mettant un petit
utf8_decode() sur les variables
posteur et
message juste avant de les enregistrer dans le fichier texte !
Nous allons donc modifier cette ligne se trouvant dans notre fonction
envoyer:
Code : PHP1
2
3 | <?php
fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities($message) . '<br />'));//On stocke dans notre fichier
?>
|
et rajouter nos
utf8_decode() comme ceci :
Code : PHP1
2
3 | <?php
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' . htmlentities(utf8_decode($message)) . '<br />'));//On stocke dans notre fichier
?>
|
Il est important d'appliquer d'abord utf8_decode() et seulement après htmlentities() dans cet exemple, sinon htmlentities() convertira des données encodées dans le mauvais jeu de caractères !!!
Enfin pour ce qui est de l'
affichage des données, je vous avais dit qu'
une méthode xAjax fonctionnait parfaitement. Cette méthode est
setCharEncoding(), on l'appelle depuis l'objet
xajax de cette façon :
Code : PHP1
2
3 | <?php
$xajax->setCharEncoding('iso-8859-1');//On précise à xAjax qu'on souhaite travailler en ISO-8859-1
?>
|
Rappelez-vous que cette méthode ne fonctionne que dans le cadre de l'affichage des données !
Si vous récupérez des données depuis un formulaire, vous devez les traiter avec utf8_decode() même si vous avez utiliser setCharEncoding()
Voici donc le Chat intégrant la gestion du jeu de caractères ISO-8859-1 :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 | <?php
//
//Notre fonction PHP pour afficher les messages
//
function afficher()
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$chat = '';//Initialisation de la variable $chat
$fichier_texte = fopen('./chat.txt', 'r');//On ouvre notre fichier texte en lecture seule
$chat = fread($fichier_texte, filesize('./chat.txt'));//On lit notre fichier et on le stocke dans la variable $chat
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->assign('block', 'innerHTML', $chat);//Enfin, on change le contenu du div block par le contenu de $chat
return $reponse;
}
//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($posteur, $message)
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en ecriture seule
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' . htmlentities(utf8_decode($message)) . '<br />'));//On stocke dans notre fichier
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
$reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et aussi pour que le posteur voit son message à l'écran
return $reponse;
}
//
//Ouverture de la librairie xajax
//Instanciation d'un objet de la classe xajax, puis déclaration de nos fonctions php
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->setCharEncoding('iso-8859-1');//On précise à xAjax qu'on souhaite travailler en ISO-8859-1
$xajax->register(XAJAX_FUNCTION, 'afficher');//on enregistre nos fonctions
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax APRES AVOIR DECLARE NOS FONCTIONS
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Chat xAjax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript(); /* Affiche le Javascript */?>
<script type="text/javascript">
function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
xajax_afficher();
setTimeout(refresh, 5000);
}
</script>
</head>
<body>
<div id="block"></div>
<form action="">
<fieldset>
<legend>Entrer ici votre message :</legend>
<div>
<label>Nom : <input type="text" size="15" id="posteur" /></label><br />
<label>Message : <input type="text" size="50" id="message" /></label><br />
<input type="submit" value="Envoyer" onclick="xajax_envoyer(document.getElementById('posteur').value, document.getElementById('message').value); return false;" />
</div>
</fieldset>
</form>
<script type="text/javascript">
refresh();//On appelle la fonction refresh() pour lancer le script
</script>
</body>
</html>
|
Si votre site est encodé en ISO-8859-1, prenez l'habitude d'appeler systématiquement $xajax->setCharEncoding('iso-8859-1');
| Quatrième bilan : |
|---|
| - On appelle la méthode $xajax->setCharEncoding('iso-8859-1'); |
| - Si on récupère des données depuis un formulaire, on les traite avec la fonction PHP utf8_decode(); |
Je tiens d'abord à remercier
xbb de m'avoir toucher un mot de cette façon de traiter les formulaires avec xAjax que je ne connaissais pas, et qui m'a semblée très intéressante !
Mais... Mais... n'avons-nous pas déjà traité des formulaires avec xAjax dans les sous-parties précédentes ?
En effet nous avons déjà appris à traiter des formulaires, mais c'était de petits formulaires avec une ou deux valeurs à récupérer....
Rappelez-vous l'exemple du Chat, pour récupérer le pseudo et le message du posteur nous étions obligés de passer deux arguments à notre fonction
xajax de cette façon:
Code : JavaScript1 | xajax_envoyer(document.getElementById('posteur').value, document.getElementById('message').value);
|
Nous avions un argument pour le pseudo, et un argument pour le message. Vous me suivez...?
Bon maintenant imaginez si nous avions dans notre formulaire, un champ pseudo, un autre mot de passe, un autre e-mail et enfin un champ biographie. Il faudrait alors passer à notre fonction quatre arguments !!!
Ce n'est pas gérable... mais heuresement xAjax intègre un systême de gestion des formulaires extrêmement simple, qui permet de récupérer les valeurs des formulaires contenant beaucoup de données.
Nous allons donc remplacer tous ces arguments par un seul:
xajax.getFormValues
Voici ce que celà donne sur notre Chat:
Code : JavaScript1 | xajax_envoyer(xajax.getFormValues('NomDuFormulaire'));
|
On ne garde ainsi qu'un seul argument contenant toutes les données de notre formulaire. Il va maintenant falloir le traiter avec PHP pour récupérer ces valeurs (sinon ça ne nous sert pas à grand chose

) !
xajax.getFormValues retourne à PHP un tableau (array), organisé de la même façon qu'un tableau $_GET ou $_POST, c'est à dire qu'on à des clés qui correspondent aux noms des items de notre formulaire
(par exemple ici nous auront deux clés: posteur et message).
Vous voyez que ce n'est pas compliqué !
Enfin j'attire aussi votre attention sur un dernier point: lorsque vous utilisez
xajax.getFormValue, vous devez spécifier à tous les éléments de votre formulaire
un id et un name (qui seront identiques).
Il ne nous reste plus qu'à modifier notre fonction
envoyer:
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <?php
//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($donnees_formulaire)
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en ecriture seule
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));//On stocke dans notre fichier, REGARDEZ BIEN ICI COMMENT SONT EXTRAITES NOS DONNEES DE FORMULAIRE
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
$reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et que le posteur voit son message à l'écran
return $reponse;
}
?>
|
Et voici le Chat modifié:
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 | <?php
//
//Notre fonction PHP pour afficher les messages
//
function afficher()
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$chat = '';//Initialisation de la variable $chat
$fichier_texte = fopen('./chat.txt', 'r');//On ouvre notre fichier texte en lecture seule
$chat = fread($fichier_texte, filesize('./chat.txt'));//On lit notre fichier et on le stocke dans la variable $chat
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->assign('block', 'innerHTML', $chat);//Enfin, on change le contenu du div block par le contenu de $chat
return $reponse;
}
//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($donnees_formulaire)
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en ecriture seule
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));//On stocke dans notre fichier
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
$reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et aussi pour que le posteur voit son message à l'écran
return $reponse;
}
//
//Ouverture de la librairie xajax
//Instanciation d'un objet de la classe xajax, puis déclaration de nos fonctions php
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->setCharEncoding('iso-8859-1');//On précise à xAjax qu'on souhaite travailler en ISO-8859-1
$xajax->register(XAJAX_FUNCTION, 'afficher');//on enregistre nos fonctions
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax APRES AVOIR DECLARE NOS FONCTIONS
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Chat xAjax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript(); /* Affiche le Javascript */?>
<script type="text/javascript">
function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
xajax_afficher();
setTimeout(refresh, 5000);
}
</script>
</head>
<body>
<div id="block"></div>
<form action="">
<fieldset>
<legend>Entrer ici votre message :</legend>
<div>
<label>Nom : <input type="text" size="15" id="posteur" name="posteur" /></label><br />
<label>Message : <input type="text" size="50" id="message" name="message" /></label><br />
<input type="submit" value="Envoyer" onclick="xajax_envoyer(xajax.getFormValues(this.form)); return false;" />
</div>
</fieldset>
</form>
<script type="text/javascript">
refresh();//On appelle la fonction refresh() pour lancer le script
</script>
</body>
</html>
|
Vous remarquerez que j'ai utilisé this.form à la place du nom du formulaire et que celà fonctionne à merveille !
Comme vous pouvez le voir c'est très simple, et celà nous permet de ne passer qu'un seul argument à nos fonctions, ce qui facilite grandement la tâche de gestion des données des gros formulaires, comme les formulaires d'inscription, de boutiques en ligne etc...
| Cinquième bilan : |
|---|
| - On utilise xajax.getFormValues(this.form) pour transmettre les données du formulaire |
| - On n'oublie pas de spécifer un id et un name identiques sur chaque élément du formulaire |
Comme j'ai déjà eu à maintes reprises la question, et que je n'ai jamais pris le temps d'y répondre, il est en effet possible d'afficher un message de chargement lorsque xAjax effectue une requête.
Bon c'est du Javascript pur et dur mais ce n'est point compliqué !
La technique consiste à
créer deux petites fonctions en Javascript: une qui affichera le messsage, et une qui le cachera.
Lorsqu'on lance la requête on affiche le message, et dès qu'on a reçu la reponse on le cache, rien à ajouter de plus la technique est d'une simplicité enfantine !
Nous allons ajouter un
div qui contiendra le message de chargement en debut de page:
Code : HTML1 | <div id="loadingMessage" style="font-size: 15px; color: white; position: fixe; visibility: hidden; padding: 5px; background-color: red; width: 90px;">Chargement...</div>
|
Ici je lui donne l'id
loadingMessage mais libre a vous de choisir un autre id...
Codons maintenant la première fonction Javascript qui affiche le message, cette fonction est à placer dans le HEAD de la page:
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11 | function printLoadingMessage(loadingMessageText)
{
if(!loadingMessageText)//Si aucun message personnalisé n'a été précisez on lui donne le message par defaut
{
loadingMessageText = 'Chargement...';
}
var parentNode = document.getElementById('loadingMessage');//On récupère le noeud parent qui est la balise div
var textNode = document.createTextNode(loadingMessageText);//On crée un noeud enfant qui est tout simplement le texte
parentNode.replaceChild(textNode, parentNode.firstChild);//On accroche le texte à la balise div
document.getElementById('loadingMessage').style.visibility='visible';//Puis on rend visible le bloc
}
|
Ce n'est pas un cours de Javascript mais je vous explique brièvement: on a une variable
loadingMessageText qui contient le texte à afficher dans notre message de chargement, on intègre ce message dans notre balise
div, puis on le rend visible.
Enfin la fonction Javascript qui va cacher le message, elle aussi à placer dans le HEAD de la page:
Code : JavaScript1
2
3
4 | function hideLoadingMessage()
{
document.getElementById('loadingMessage').style.visibility='hidden';//On rend le message invisible
}
|
Cette fois-ci aucun message à modifier, on rend juste le
div invisible pour cacher le message de chargement.
Nous avons tout codé, il nous suffit à présent d'appeler la fonction
printLoadingMessage à chaque fois qu'on fait appelle à une fonction xAjax
(comme xajax_envoyer ou xajax_afficher), puis à appeler
hideLoadingMessage à chaque fin de fonction.
Voici le code final:
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91 | <?php
//
//Notre fonction PHP pour afficher les messages
//
function afficher()
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$chat = '';//Initialisation de la variable $chat
$fichier_texte = fopen('./chat.txt', 'r');//On ouvre notre fichier texte en lecture seule
$chat = fread($fichier_texte, filesize('./chat.txt'));//On lit notre fichier et on le stocke dans la variable $chat
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->assign('block', 'innerHTML', $chat);//Enfin, on change le contenu du div block par le contenu de $chat
$reponse->script("hideLoadingMessage();");//ON CACHE LE MESSAGE DE CHARGEMENT
return $reponse;
}
//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($donnees_formulaire)
{
$reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en ecriture seule
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));//On stocke dans notre fichier
fclose($fichier_texte);//On ferme notre fichier texte
$reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
$reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et aussi pour que le posteur voit son message à l'écran
$reponse->script("hideLoadingMessage();");//ON CACHE LE MESSAGE DE CHARGEMENT
return $reponse;
}
//
//Ouverture de la librairie xajax
//Instanciation d'un objet de la classe xajax, puis déclaration de nos fonctions php
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->setCharEncoding('iso-8859-1');//On précise à xAjax qu'on souhaite travailler en ISO-8859-1
$xajax->register(XAJAX_FUNCTION, 'afficher');//on enregistre nos fonctions
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax APRES AVOIR DECLARE NOS FONCTIONS
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Chat xAjax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php $xajax->printJavascript(); /* Affiche le Javascript */?>
<script type="text/javascript">
function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
printLoadingMessage('Récupération des messages...');//On va appeler xajax_afficher, alors juste avant on affiche notre message
xajax_afficher();
setTimeout(refresh, 5000);
}
function printLoadingMessage(loadingMessageText)
{
if(!loadingMessageText)//Si aucun message personnalisé n'a été précisez on lui donne le message par defaut
{
loadingMessageText = 'Chargement...';
}
var parentNode = document.getElementById('loadingMessage');//On récupère le noeud parent qui est la balise div
var textNode = document.createTextNode(loadingMessageText);//On crée un noeud enfant qui est tout simplement le texte
parentNode.replaceChild(textNode, parentNode.firstChild);//On accroche le texte à la balise div
document.getElementById('loadingMessage').style.visibility='visible';//Puis on rend visible le bloc
}
function hideLoadingMessage()
{
document.getElementById('loadingMessage').style.visibility='hidden';//On rend le message invisible
}
</script>
</head>
<body>
<div id="loadingMessage" style="font-size: 15px; color: white; position: fixe; visibility: hidden; padding: 5px; background-color: red; width: 40%;">Chargement...</div>
<div id="block"></div>
<form action="">
<fieldset>
<legend>Entrer ici votre message :</legend>
<div>
<label>Nom : <input type="text" size="15" id="posteur" name="posteur" /></label><br />
<label>Message : <input type="text" size="50" id="message" name="message" /></label><br />
<input type="submit" value="Envoyer" onclick="printLoadingMessage('Envoi du message...'); xajax_envoyer(xajax.getFormValues(this.form)); return false;" />
</div>
</fieldset>
</form>
<script type="text/javascript">
refresh();//On appelle la fonction refresh() pour lancer le script
</script>
</body>
</html>
|
Voilà j'espère que vous avez compris le systême car je veux bien croire que cette partie reste un peu plus ambigüe que le reste, mais sachez que si vous ne comprenez pas (ou si vous ne voulez pas comprendre

) cette partie, ce n'est pas très important car elle ne fait pas partie intégrante de xAjax, c'est plutôt une anecdote.
Voici un petit résumé, sous forme de tableau, des méthodes et des classes xAjax. Elles sont dans l'ordre où vous devez les déclarer.
| La classe Main : |
|---|
| Créer une instance d'un objet xAjax : |
$xajax = new xajax(); |
| Définir le jeu de caractères : |
$xajax->setCharEncoding('ISO-8859-1'); |
| Enregistrer une fonction : |
$xajax->register(XAJAX_FUNCTION, 'MaFonction'); |
| Indiquer à xAjax de générer le Javascript nécessaire au fonctionnement du script : |
$xajax->processRequest(); |
| Afficher le Javascript de la page : |
$xajax->printJavascript(); |