Aller au menu - Aller au contenu

Icône [xAjax] Applications AJAX faciles avec PHP et xAjax !

Avatar
Par Avatar MansonMan
Mise à jour : 03/10/2010
Difficulté : Facile Facile
706 visites depuis 7 jours, classé 173/786
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 ! ;)

Niveau : 3/10 - Débutant
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Introduction à la librairie xAjax et à la POO

Je tiens d'abord à vous prévenir ; en écrivant ce tutoriel, 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 que vous connaissez le xHTML (pour afficher les données). Si vous ne connaissez pas tout cela, 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.


Avant de commencer, il va falloir télécharger la librairie PHP xAjax (prenez la version xAjax 0.5 Final Standard) sur le site xajax-project.org, et copiez les dossiers xajax_core, xajax_js, xajax_controls, et xajax_plugins à la racine de votre site ! :)


Voilà, c'est téléchargé ? Bon, continuons ! ;)



Concrètement, que va faire xAjax ?

Voyons deux cas : le premier sans xAjax, le second avec.

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'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 :
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, 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 :
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() // 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 :
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 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 !
Retour en haut

Les débuts avec xAjax

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 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 :

Code : PHP
1
2
3
<?php
require_once('./xajax_core/xajax.inc.php');
?>

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).

Code : PHP
1
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. 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 !

Code : PHP
1
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 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.).
Attention, il faut mettre cette fonction en début de page, avant d'avoir envoyé des informations au navigateur ! (Comme pour les headers, ou les session_start si vous voulez.)


Code : PHP
1
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é 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 !
Retour en haut

Écrire et appeler des fonctions avec xAjax

Maintenant que vous connaissez les bases, passons à l'utilisation concrète 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 : PHP
1
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 tutoriel 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 susceptible d'envoyer des informations au navigateur dans vos fonctions ; à 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 : JavaScript
1
xajax_MaFonctionPHP(argument1, argument2, ...);


On peut bien sûr exécuter ce code Javascript dans événement :
Code : HTML
1
<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 : HTML
1
2
3
4
5
6
7
<script>
function refresh()
{
        xajax_MaFonctionPHP(argument1, argument2,...);
        setTimeout(refresh, 5000);
}
</script>


Voilà, c'est bête comme chou ! :p

Deuxième 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().
Retour en haut

Recevoir et traiter une réponse xAjax dans ses fonctions

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 :
Code : PHP
1
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 : PHP
1
2
3
4
5
6
7
<?php
$reponse->assign('IdElement', 'Attribut', 'Valeur');
$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 : PHP
1
2
3
<?php
$reponse->assign('IdElement', 'Attribut', 'Valeurs');
?>

Cette méthode va modifier Attribut de IdElement en Valeur.
Concrètement, ça donne :
Code : PHP
1
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 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 ! ».

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 deuxième :
Code : PHP
1
2
3
<?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 :
Code : PHP
1
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 pas des moindres :
Code : PHP
1
2
3
<?php
$reponse->script("code Javascript à exécuter");
?>

Vous pouvez passer directement en paramètre à cette méthode du code Javascript qui sera exécuté.

Entre les guillemets, pensez bien à échapper, grâce à un backslash (\), tous les caractères qui nécessitent de l'être (\, ", ', etc.).



Enfin, la dernière sert à attribuer un événement à une balise (par exemple onchange, onclick, onfocus…) :
Code : PHP
1
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 :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) :
Code : PHP
1
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 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.
Retour en haut

Un Chat en 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 :
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?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 :
Code : HTML
1
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 : HTML
1
2
3
<script>
refresh();
</script>


Allez, on code...


.....


.....


Déjà ? Je ne vous crois pas. :p


.....


.....


Voici 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
<?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é…). ;)
Retour en haut

xAjax et l'encodage de caractères

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 :
Code : PHP
1
2
3
<?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 :
Code : PHP
1
2
3
<?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.
?>


Il est important d'appliquer utf8_decode() avant 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 : PHP
1
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 utilisé 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
<?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>

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().
Retour en haut

Traiter des formulaires avec xAjax

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 :
Code : JavaScript
1
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 ? :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 :
Code : JavaScript
1
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 :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:
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 é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é :
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 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>

Vous remarquerez que j'ai utilisé this.form à la place du nom du formulaire et que cela fonctionne à merveille !


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.
Retour en haut

Créer un message de chargement avec xAjax

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 :
Code : HTML
1
<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 à 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:
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é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) :
Code : JavaScript
1
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 appel à 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
<?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. ;)
Retour en haut

Résumé des méthodes xAjax

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.

Classe « Main »



UtilitéCode
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();


La classe « Réponse »



FonctionCode
Créer une instance d'un objet de réponse xAjax. $reponse = new xajaxResponse();
Modifier le contenu de la page. $reponse->assign('IdElement', 'Attribut', 'Valeur');
Appeler une fonction JavaScript. $reponse->call('NomDeLaFonctionJS');
Effacer un champ. $reponse->clear('IdElement', 'Attribut');
Exécuter un script Javascript. $reponse->script('Code Javascript');
Retourner les résultats. return $reponse;


Les fonctions Javascript de xAjax



FonctionCode
Retourner un tableau contenant les données d'un formulaire. xajax.getFormValues('NomDuFormulaire')
Retour en haut

Q.C.M.

Comment déclarer un nouvel objet xAjax ?
Ce code est-il correct ?
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
<?php
//
//Nos Fonctions
//
function addition($variable)
{       
        $reponse = new xajaxResponse();//on crée une instance de la classe xajaxResponse.
        $variable = $variable + 5;
        $reponse->assign('block', 'innerHTML', $variable);//On modifie le contenu de la page.
        return $reponse;//On retourne le résultat.
}

//
//XAJAX
//
require('./xajax_core/xajax.inc.php');
$xajax = new xajax();//On crée une instance de la classe xajax.
$xajax->processRequest();//On indique à xajax qu'il devra se charger de faire les requêtes.
$xajax->register(XAJAX_FUNCTION, 'addition');//On enregistre notre fonction php addition.
?>

<!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=utf-8" />
<?php $xajax->printJavascript();/*Affichage du javascript nécessaire.*/ ?>
</head>
<body>
<div id="block"></div>
</body>
</html>
Où placer l'appel à la méthode suivante ?
Code : PHP
1
<?php $xajax->printJavascript(); ?>
Vous souhaitez déclarer la fonction PHP suivante :
Code : PHP
1
2
3
4
5
6
<?php
function connexion($login, $mot_de_passe)
{
        //Code de connexion...
}
?>


Quelle est la bonne syntaxe pour déclarer cette fonction ?
À quoi sert return $response; à la fin de nos fonctions PHP ?

Statistiques de réponses au QCM

Retour en haut
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 !

Je vous conseille d'aller voir ici pour plus d'infos, c'est malheureusement en anglais… http://www.xajax-project.org/en/docs-tutorials/api-docs/

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. ;)
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Concevez votre site web avec PHP et MySQL
Icône
Maîtrisez MySQLi sans POO !
Icône
La programmation orientée objet en PHP
Icône
[E-mail] Envoyer un e-mail en PHP
Retour en haut
209 commentaires pour "[xAjax] Applications AJAX faciles avec PHP et xAjax !"
Note moyenne : 3.45 / 4 (62 votes)
Pseudo Commentaire
Hors ligne letijan # Posté le 08/11/2011 à 14:29:41
transmutation
Avatar

Avis : Très bon
close

Excellent tuto

40/20

La présentation est simple et claire. Amazing!!!
Musique
:)
 
Hors ligne Mini Vado # Posté le 01/12/2011 à 23:20:04
Avatar

Études : Exia.Cesi, Ecole Supérieure d'Informatique du Cesi

 Pour ceux qui souhaiteraient faire des echo/print_r, bref, de l'affichage, une solution (que je n'ai pas testé avec xAjax mais que j'utilise ailleurs) est la fonction :
ob_start();

http://php.net/manual/fr/function.ob-start.php

Utilisez cette fonction pour mettre en tampon le texte écrit dans le navigateur (que ce soit des header, des echo, bref, tout) afin que ce ne soit pas envoyé immédiatement mais uniquement lors de l'appel de:
ob_end_flush();

http://www.php.net/manual/fr/function.ob-end-flush.php

Perso j'ai un header qui ob_start(); et un footer qui ob_end_flush();
tout ce qui se passe entre n'est donc pas affiché au fur et à mesure mais à la fin ! (ce qui m'évite plein de bogues en tout genre).

Bref, surement utilisable avec ça, je pense !

Je trouve la classe pas mal, mais je me demande si c'est vraiment intéressant plutôt que d'utiliser jQuery... Après c'est vrai que le déboguage en JS, même avec de bons outils c'est vraiment pas la joie.
Développeur Web (HTML 5 & Css3 | JS | Php 5)
Consulter mon C.V | Me contacter
 
Hors ligne fisoumare # Posté le 13/01/2012 à 16:59:26
Avatar

 Moi j'utilse codeigniter, et à chaque fois que j'instancie l'objet xajax le navigateur plante... Comment faire ?
Hors ligne TimRuiz # Posté le 28/04/2012 à 22:00:12
Qui ne tente rien ne rate rien
Avatar

Avis : Bon

Page blanche pour moi... Sinon le tuto est bien :)
"L'homme est le seul animal capable de rougir mais c'est aussi le seul qui est à rougir de quelque chose."
Georges Bernard Shaw
 :-°

Je m'appel Timothé RUIZ et à 200.000 "j'aimes" j'appelle ma fille Olivia :p

Mini Script, téléchargez gratuitement des scripts PHP/HTML éditables en 2 clics
 
Hors ligne martinus31 # Posté le 23/05/2012 à 12:01:10
Avatar

 Citation : PtheWest
Citation : Kail-Ra
Bonjour a tous,
Je rencontre le même probleme que syanis94
Deprecated: Assigning the return value of new by reference is deprecated in wamp\www\teste\xajax_core\xajax.inc.php on line 361
Deprecated: Assigning the return value of new by reference is deprecated in wamp\www\teste\xajax_core\xajax.inc.php on line 1306

J'utilise php 5.3 je crois et je sais que depuis un certain temps déja, la poo avec php utilise par defaut les reference donc en otant le caractere & au ligne mentionnée je n'ai plus ces messages d'erreurs mais ca en lève d'autres plus loin dans le déroulement du script...
Est-ce que xajax est toujours d'actualité ou bien obsolète ???



C'est un problème au niveau de la version je pense.
Ouvre ton xajax.inc.php, va aux lignes concernés et supprime le "&" cela devrait être bon ;)

PS: N'oubliez pas de chercher sur le forum pour vos questions, car j'ai vérifié et la réponse s'y trouvé :p


Super merci beaucoup :D Ça fonctionne niquel maintenant :D
Tutoriel : Un calendrier en php et SQL
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.