Bonjour à tous ! Comme c'est indiqué dans le titre, ce tutoriel est consacré à la librairie xAjax !
C'est pas du produit pour nettoyer l'évier ce truc ? :euh:
xAjax est une librairie open source toujours en développement, qui permet de déployer des applications AJAX puissantes très facilement en ayant des bases de PHP (attention je me permets d'insister, xAjax 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 ! ;)
Voyons deux cas : le premier sans xAjax, le second avec.
Sans xAjax, on aurait le schéma suivant :
l'utilisateur appelle une page ;
le serveur génère la page ;
le serveur renvoie la page finale ;
la page est affichée par le navigateur de l'utilisateur ;
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 :
l'utilisateur appelle une page ;
le serveur génère la page ;
le serveur renvoie la page finale ;
la page est affichée par le navigateur de l'utilisateur ;
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'a 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 :
<?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, en appelant simplement la fonction total_caddie() par exemple. ^^
Néanmoins, dans notre librairie xAjax, ça ne se présente pas de cette façon (ouvrez le fichier, vous verrez) ! :p 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 à « gérer les résultats ».
Ainsi, notre librairie xAjax se présente de cette façon :
<?php
class xajax($chemin_xajax) // La classe qui va nous permettre de générer le Javascript.
{
function fonction1() // Première fonction.
{
// Code...
}
function fonction2() // Deuxième fonction.
{
// Code...
}
function fonction3() // Troisième fonction.
{
// Code...
}
// Etc.
}
class xajaxResponse() // La classe qui va nous permettre de gérer les réponses de xAjax.
{
function fonction1() // Première fonction.
{
//Code...
}
function fonction2() // Deuxième fonction.
{
// Code...
}
function fonction3() // Troisième 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 ni leur utilité ; c'est normal, je vais vous l'apprendre dans ce tutoriel ! ^^
Pour pouvoir appeler nos méthodes, il faut créer une instance d'une classe. Oulah… Cachez cet air ébahi ! :p 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. Voici un exemple. Nous avons notre classe caddie avec les fonctions pour calculer le total, etc., à l'intérieur :
<?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 tutoriel. Si vous en savez plus sur la POO, tant mieux ! :p Sinon, voici un super tutoriel sur le Site du Zéro : tutoriel 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 tutoriel !
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 !
<?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 qui affiche 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 :
Dans un premier temps, on indique à PHP qu'il doit inclure notre librairie xAjax dans la page. La librairie se trouve dans le répertoire xajax_core (« core » signifiant le « cœur » de la librairie).
<?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. o_O 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 !
<?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 appel à la méthode processRequest(). Au début, j'ai eu du mal à 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 aurons fourni toutes les informations qui lui sont nécessaires (nom des fonctions, etc.).
<?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é dans 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 ?
Ça l'est : disons que nous avons appris là le strict minimum à mettre dans une page pour exécuter une application AJAX. À 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 !
<?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 tutoriel depuis le début…
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 ».
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 :
xajax_MaFonctionPHP(argument1, argument2, ...);
On peut bien sûr exécuter ce code Javascript dans événement :
Je vais maintenant vous apprendre à écrire et à traiter vos fonctions PHP avec xAjax !
T'as un cerveau de poisson rouge, toi. o_O Tu viens de nous dire qu'il suffisait de programmer nos fonctions en PHP !
En effet, il faut bien programmer nos 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 :
<?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 ! ^^
Cette méthode va modifier Attribut de IdElement en Valeur. Concrètement, ça donne :
<?php
$reponse->assign('block', 'innerHTML', 'Bonjour je m\'affiche grâce à une méthode xAjax!');
?>
Ce code va remplacer ce qu'il y a dans mon div (c'est ce que signifie innerHTML), dont l'id est block, par la phrase « Bonjour, je m'affiche grâce à une méthode xAjax ! ».
La deuxième :
<?php
$reponse->call('MaFonctionJSàAppeler');
?>
C'est une 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 champ :
Vous connaissez désormais les méthodes xAjax les plus courantes. Il y en a encore beaucoup (beaucoup beaucoup même :p ), 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) :
<?php
return $reponse;
?>
En fait il s'agit seulement de retourner l'objet de réponse ! ;)
Troisième bilan
On écrit 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, etc.
On ajoute return $reponse; à la fin de toutes nos fonctions qui seront 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 ! :p Mais avant cela, faisons un bref rappel de l'ordre dans lequel vous devez écrire votre code avec xAjax :
<?php
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 vous propose maintenant de réaliser le chat afin de vous entraîner. C'est assez simple : tout tient en une seule page.
Faites d'abord le nécessaire pour déclarer tout ce qui est indispensable pour travailler avec xAjax, puis n'hésitez pas à remonter 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 ainsi qu'un formulaire permettant poster un message, avec le nom de l'auteur et son message.
Créez et déclarez les fonctions pour poster et afficher les messages, tout en sachant que nous les stockerons dans un fichier texte (.txt), la méthode avec une 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 :
<script>
function refresh()
{
xajax_afficher();
setTimeout("refresh()", 5000);
}
</script>
Et dans le body, à la fin de la page :
<script>
refresh();
</script>
Allez, on code...
.....
.....
Déjà ? Je ne vous crois pas. :p
.....
.....
Voici la solution :
<?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 stocke son contenu dans la variable $chat
fclose($fichier_texte);//On ferme notre fichier texte.
$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace 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 écriture seule.
fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities($message) . '<br />'));// On stocke le message dans notre fichier.
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
$reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages pour que l'utilisateur voie 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 APRÈS AVOIR DÉCLARÉ 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()// Code javascript qui va appeler la 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é… :p 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 sûrement dû remarquer que les caractères spéciaux (comme é, è, à, etc.) ne passaient pas correctement sur le chat.
Soyez très attentif, c'est un peu compliqué !
Il faut savoir que, par défaut, xAjax traite les caractères selon le jeu de caractères UTF-8 ; si votre site est encodé en UTF-8, pas la peine de vous attarder 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 ! :lol:
Contrairement à la version stable de xAjax, la version bêta (celle que nous utilisons dans ce tutoriel) 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 utiliser 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 ! :p 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 la fonction PHP utf8_decode() 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 de l'utilisateur et son message. Ils ont donc été automatiquement encodés en UTF-8. Nous allons appliquer la méthode que je vous ai citée 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 :
<?php
fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities($message) . '<br />'));// On stocke le message et le nom de l'auteur dans notre fichier.
?>
…et ajouter nos utf8_decode() comme ceci :
<?php
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' . htmlentities(utf8_decode($message)) . '<br />'));// On stocke le message et le nom de l'auteur dans notre fichier.
?>
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 :
<?php
$xajax->setCharEncoding('iso-8859-1');// On précise à xAjax qu'on souhaite travailler en ISO-8859-1.
?>
Voici donc le chat intégrant la gestion du jeu de caractères ISO-8859-1 :
<?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 stocke son contenu dans la variable $chat.
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace 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 écriture seule.
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' . htmlentities(utf8_decode($message)) . '<br />'));// On stocke le message dans notre fichier.
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
$reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages et pour que l'utilisateur voie 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 APRÈS AVOIR DÉCLARÉ 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() // Code Javascript qui va appeler la 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>
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 touché 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 ? :euh:
En effet, nous avons déjà appris à traiter des formulaires, mais c'étaient de petits formulaires avec une ou deux valeurs à récupérer....
Rappelez-vous de l'exemple du chat ; pour récupérer le pseudo et le message de l'utilisateur, nous étions obligés de passer deux arguments à notre fonction xajax de cette façon :
Nous avions un argument pour le pseudo, et un argument pour le message. Vous me suivez ? :o
Bon, maintenant imaginez que nous ayons 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 heureusement 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 cela donne sur notre chat :
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 :lol: ) ! xajax.getFormValues retourne à PHP un tableau (array), organisé de la même façon qu'un tableau $_GET ou $_POST, c'est-à-dire contenant des clés qui correspondent aux noms des items de notre formulaire (par exemple ici nous aurons deux clés : posteur et message). ;) Vous voyez que ce n'est pas compliqué ! :D
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 doivent être identiques).
Il ne nous reste plus qu'à modifier notre fonction envoyer:
<?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 écriture seule.
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));// On stocke le message dans notre fichier, REGARDEZ BIEN ICI COMMENT SONT EXTRAITES NOS DONNÉES DE FORMULAIRE .
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
$reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages et pour que l'utilisateur voie son message à l'écran.
return $reponse;
}
?>
Et voici le chat modifié :
<?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 son contenu dans la variable $chat.
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->assign('block', 'innerHTML', $chat);//Enfin, on remplace 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 écriture seule.
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));// On stocke le message dans notre fichier.
fclose($fichier_texte);// On ferme notre fichier texte
$reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
$reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages et pour que l'utilisateur voie 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 APRÈS AVOIR DÉCLARÉ 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()// Code Javascript qui va appeler la 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>
Comme vous pouvez le voir, c'est très simple et ça 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écifier un id et un name identiques sur chaque élément du formulaire.
J'ai déjà eu à maintes reprises la question et 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 message, une qui le cachera. ^^ Lorsqu'on lance la requête, on affiche le message ; dès qu'on a reçu la réponse, on le cache. Rien à ajouter, la technique est d'une simplicité enfantine !
Nous allons ajouter un div qui contiendra le message de chargement en début de page :
Ici je lui donne l'idloadingMessage, mais libre à vous d'en choisir un autre…
Codons maintenant la première fonction Javascript qui affiche le message, cette fonction est à placer dans la balise <head> de la page:
function printLoadingMessage(loadingMessageText)
{
if(!loadingMessageText)// Si aucun message personnalisé n'a été précisé, on lui donne le message par défaut.
{
loadingMessageText = 'Chargement...';
}
var parentNode = document.getElementById('loadingMessage');// On récupère le nœud parent qui est la balise div.
var textNode = document.createTextNode(loadingMessageText);// On crée un nœud 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 la balise <head> de la page) :
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 appel à une fonction xAjax (comme xajax_envoyer ou xajax_afficher), puis à appeler hideLoadingMessage à chaque fin de fonction. Voici le code final:
<?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 stocke son contenu dans la variable $chat.
fclose($fichier_texte);//On ferme notre fichier texte.
$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace 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 écriture seule.
fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteur'])) . ':</strong>' . htmlentities(utf8_decode($donnees_formulaire['message'])) . '<br />'));//On stocke le message dans notre fichier.
fclose($fichier_texte);// On ferme notre fichier texte.
$reponse->clear('message', 'value');// On vide le champ contenant le message de l'utilisateur.
$reponse->call('xajax_afficher');// On appelle la fonction afficher pour afficher les messages et pour que l'utilisateur voie 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 APRÈS AVOIR DÉCLARÉ 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()// Code Javascript qui va appeler la 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écisé, on lui donne le message par défaut.
{
loadingMessageText = 'Chargement...';
}
var parentNode = document.getElementById('loadingMessage');// On récupère le nœud parent qui est la balise div.
var textNode = document.createTextNode(loadingMessageText);//On crée un nœud 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 la comprenez pas (ou si vous ne voulez pas la comprendre :p ), ce n'est pas très important car elle ne fait pas partie intégrante de xAjax, c'est plutôt un bonus. ;)
Retourner un tableau contenant les données d'un formulaire.
xajax.getFormValues('NomDuFormulaire')
xAjax est une librairie magnifique qui allie puissance et facilité. Je vous ai enseigné tout ce que je connaissais d'elle, mais elle cache beaucoup d'autres choses !
xAjax n'est évidemment pas destinée à la création de chat. Si vous avez des connaissances en DHTML, elle fera merveille. Vous pourrez créer des applications Web qui ressembleront à des applications logicielles, je pense par exemple aux fenêtres qui s'ouvrent pour demander des renseignements à l'utilisateur, ou encore au drag-and-drop qui permettrait, par exemple, de déplacer des objets vers la corbeille, etc. Néanmoins, si vous souhaitez vous lancer dans cette direction, il faudra vous y connaître un minimum en Javascript, et dans ce cas, il est peut-être plus intéressant de manipuler l'objet XMLHTTPRequest pour ceux qui connaissent !
Pour conclure, mettons fin aux personnes médisantes qui pensent et disent que xAjax est une bourde de plus parmi les frameworks PHP : bien sûr, xAjax a ses limites, il ne faut d'ailleurs jamais les oublier ou se laisser emporter par cette facilité qui donne pourtant de si beaux résultats ; bien sûr qu'utiliser AJAX avec XMLHTTPRequest c'est beaucoup plus clean et soft que de coder avec xAjax qui alourdit forcément le script ; encore une fois, bien sûr que c'est mieux de ne pas utiliser xAjax, mais plutôt de coder tout soi-même ! Mais il y a quelque chose que tout le monde doit admettre : c'est qu'utiliser AJAX avec xAjax, c'est beaucoup plus simple. Alors retenons tous une chose : adapter son code, sa technique, et son langage au résultat que l'on souhaite obtenir. Tout comme on ne code pas un logiciel de traitement d'images avec PHP, on n'utilise pas non plus xAjax pour faire un jeu 2D bourré de requêtes asynchrones. xAjax est parfaitement adapté pour des petites applications (scripts de connexion, d'inscription, etc., voire des petits chat comme nous l'avons fait), mais ne l'est pas pour des jeux en ligne par exemple. Au même titre qu'il ne faut pas hésiter à utiliser XMLHTTPRequest pour des gros scripts AJAX, il ne faut pas hésiter à utiliser xAjax pour des petits scripts. ;)