[xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

20
 Appréciation des lecteurs : [xAj ax] Appl ications AJAX faciles avec PHP et xAjax ! Informations sur le tutoriel Auteur : MansonMan Difficulté : Plus d'informations Popularité Visualisations : 2 567 307 4 4 2 29 33 personnes souhaitent voir ce tutoriel publié en livre ! Vous aussi ? Historique des mises à jour Le 18/11/2010 à 13:53:51 Ticket #3284: Correction d'un bug z Code Le 05/11/2010 à 15:17:21 zCorrection novembre 2010 Le 03/10/2010 à 16:09:06 Modification des liens pointant vers la librairie xAjax et la documentation Partager Imprimer Convertir en PDF Email Twitter Facebook Plus d e service s 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 ? xAjax est une librairie open source toujou rs en développement, qui permet de dépl oyer 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-vou s jam ais 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 « » ? Voilà à quoi sert xAjax ! Je ne vous fais pas baver plus longtemps, roulez jeunesse ! Niveau : 3/10 - Débutant Sommaire du tutoriel : Introduction à la librairie xAjax et à la POO Les débuts avec xAjax Écrire et appeler des fonctions avec xAjax Recev oir et traiter une réponse xAjax dans s es fonctions Un Chat en xAjax! xAjax et l'encodage de caractère s [xAjax] Appl icat ions AJA X f aciles a ve c PHP e t x Ajax ! http://www.s it eduz ero.c om /t utoriel- 3-36169 -x aj ax -a pp lica t ions- aj ax -f a... 1 sur 20 27/03/2011 05:38

Transcript of [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

Page 1: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 1/20

Appréciationdes lecteurs :

[xAjax] Applications AJAX faciles avec PHP et xAjax !

Informations sur le tutorielAuteur : MansonManDifficulté :

Plus d'informations

PopularitéVisualisations : 2 567 307

442

29

33 personnes souhaitent voir ce tutoriel publié en livre !Vous aussi ?

Historique des mises à jour

Le 18/11/2010 à 13:53:51

Ticket #3284: Correction d'un bug zCodeLe 05/11/2010 à 15:17:21

zCorrection novembre 2010Le 03/10/2010 à 16:09:06

Modification des liens pointant vers la librairie xAjax et la documentation

Partager

Imprimer

Convertir en PDF

Email

Twitter

Facebook  Plus de servicesBonjour à 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 ?

xAjax est une librairie open source toujours en développement, qui permet de déployer des applications AJAX puissantes très facilement en ayantdes 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 signifieAsynchronous Javascript And XML : ce type d'application permet de maintenir une communication entre le serveur et le client, sans que celui-ci n'aitbesoin 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 unenouvelle page pour vous afficher un message d'erreur, vous disant « » ?

Voilà à quoi sert xAjax ! Je ne vous fais pas baver plus longtemps, roulez jeunesse !

Niveau : 3/10 - DébutantSommaire du tutoriel :

Introduction à la librairie xAjax et à la POOLes débuts avec xAjaxÉcrire et appeler des fonctions avec xAjaxRecevoir et traiter une réponse xAjax dans ses fonctionsUn Chat en xAjax!xAjax et l'encodage de caractères

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

1 sur 20 27/03/2011 05:38

Page 2: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 2/20

Traiter des formulaires avec xAjaxCréer un message de chargement avec xAjaxRésumé des méthodes xAjaxQ.C.M.

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 voussavez faire des conditions ( ), des boucles ( , ) et que vous connaissez le xHTML (pour afficher les données). Si vous neconnaissez 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èresconnaissances 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 :

l'utilisateur appelle une page ;1.le serveur génère la page ;2.le serveur renvoie la page finale ;3.la page est affichée par le navigateur de l'utilisateur ;4.fin des échanges entre le serveur et l'utilisateur (impossible de mettre les informations de la page à jour sans actualiser et recommencer leschéma depuis le n°1).

5.

Avec xAjax, on aurait ceci :

l'utilisateur appelle une page ;1.le serveur génère la page ;2.le serveur renvoie la page finale ;3.la page est affichée par le navigateur de l'utilisateur ;4.xAjax maintient une connexion asynchrone avec le serveur en effectuant des requêtes en tâches de fond, et va mettre à jour notre pagesans rechargement, de manière totalement transparente pour l'utilisateur, en recommençant le schéma au n°2 (nous sautons donc le pointn°1, l'utilisateur n'a pas besoin d'effectuer une action pour que la page se mette à jour).

5.

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 lapage 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 etré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 - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

2 sur 20 27/03/2011 05:38

Page 3: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 3/20

<?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 appelantsimplement la fonction par exemple.

Néanmoins, dans notre librairie xAjax, ça ne se présente pas de cette façon (ouvrez le fichier, vous verrez) !

Compliquons un peu les choses. Nous venons de regrouper du code dans des fonctions ; eh bien nous pouvons regrouper nos fonctions dans desclasses. 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îteclasse. 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 - Sélectionner

<?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 !

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 avec les fonctions pour calculer le total , etc., à l'intérieur :

Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

sur 20 27/03/2011 05:38

Page 4: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 4/20

<?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, onouvre 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 fonctionajouter_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 sontsuffisantes pour comprendre la suite du tutoriel.Si vous en savez plus sur la POO, tant mieux !

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 c lasse », 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 !

Les débuts avec xAjaxMaintenant que nous sommes au point avec la POO, commençons !

Code : PHP - Sélectionner

<?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 presquetoutes les lignes. On va les décomposer ensemble :

Code : PHP - Sélectionner

<?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 («

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

sur 20 27/03/2011 05:38

Page 5: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 5/20

core » signifiant le « cœur » de la librairie).

Code : PHP - Sélectionner

<?php

$xajax = new xajax(); // On crée une instance de la classe xajax.?>

Voilà une ligne bien obscure dans vos pensées… Oui, oui, je vois cela dans vos yeux.

En fait, ce n'est pas si dur ! On a créé une instance de xAjax, et grâce à cet objet, on va pouvoir appeler toutes les méthodes qui se trouvent dans laclasse 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 - Sélectionner

<?php

$xajax->processRequest();// Fonction qui va se charger de générer le Javascript à partir desdonnées que l'on a fournies à xAjax.?>

Ici, on fait appel à la méthode . 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 - Sélectionner

<?php

$xajax->printJavascript();// Fonction qui va afficher le Javascript de la page.?>

La seconde méthode indispensable, , va afficher le Javascript généré dans notre page xHTML. En effet, les applications AJAXreposent 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 ) avant d'envoyer des infos au navigateur.Enfin, on fait appel à la méthode 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 vousutilisez xAjax , il faut créer v otre objet , et appeler les méthodes nécessaires ( et ).Retenez bien cela, c'est indispensable !

É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 - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

5 sur 20 27/03/2011 05:38

Page 6: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 6/20

<?php

$xajax->register(XAJAX_FUNCTION, 'MaFonctionPHP');

?>

Au final, vous aurez ceci dans votre page :Code : PHP - Sélectionner

<?phpfunction 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 fonctionMaFonctionPHP.$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 Javascriptde 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 avant d'envoyer des informations au navigateur, mais après avoir

enregistré vos fonctions !

Ne mettez pas d' , ni de ni aucune fonction PHP susceptible d'envoyer des informations au navigateur dans vos fonctions ; à cestade, 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 , 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 abesoin (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 à

), et l'afficher sur la page (avec ).

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 - Sélectionner

xajax_MaFonctionPHP(argument1, argument2, ...);

On peut bien sûr exécuter ce code Javascript dans événement :Code : HTML - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

6 sur 20 27/03/2011 05:38

Page 7: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 7/20

<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 - Sélectionner

<script>function refresh()

{ xajax_MaFonctionPHP(argument1, argument2,...);

setTimeout(refresh, 5000);

}

</script>

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

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

Après avoir enregistré nos fonctions, on ajoute .

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. 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 quipourrait envoyer des informations au navigateur, comme ou .

Comment changer le contenu de ma page dynamiquement, alors ?

J'y viens !

Après avoir utilisé la classe de génération du Javascript , nous allons maintenant utiliser la classe qui gère les réponses !

Voici la ligne que vous devez ajouter au début de toutes vos fonctions :Code : PHP - Sélectionner

<?php

$reponse = new xajaxResponse();

?>

Nous venons de créer une instance de la classe !

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 lesconnais 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 - Sélectionner

<?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 - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

7 sur 20 27/03/2011 05:38

Page 8: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 8/20

<?php

$reponse->assign('IdElement', 'Attribut', 'Valeurs');

?>

Cette méthode va modifier Attribut de IdElement en Valeur.Concrètement, ça donne :

Code : PHP - Sélectionner

<?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 à unemé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 pasmarché. De même, si vous avez un formulaire avec un champ texte, vous ne mettrez pas , mais directement l'id du champ !

La deuxième :Code : PHP - Sélectionner

<?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 uneutilisation concrète un peu plus tard.

Voici la troisième méthode qui permet d'effacer le contenu d'un champ :Code : PHP - Sélectionner

<?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 - Sélectionner

<?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 , , …) :Code : PHP - Sélectionner

<?php

$reponse->addEvent("IdElement", "Evenement", "ScriptàExecuter");

?>

Vous connaissez désormais les méthodes xAjax les plus courantes. Il y en a encore beaucoup (beaucoup beaucoup même ), mais celles-ci sont les

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

8 sur 20 27/03/2011 05:38

Page 9: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 9/20

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 à lafin de toutes vos fonctions, en guise de ) :

Code : PHP - Sélectionner

<?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 .On change le contenu grâce à des méthodes comme , , etc.On ajoute à la fin de toutes nos fonctions qui seront utilisées par xAjax.

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 ! Mais avant cela,

faisons un bref rappel de l'ordre dans lequel vous devez écrire votre code avec xAjax :Code : PHP - Sélectionner

<?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'ilfaut 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 del'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éthodeavec 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 - Sélectionner

<script>function refresh()

{

xajax_afficher();

setTimeout("refresh()", 5000);

}</script>

Et dans le body, à la fin de la page :Code : HTML - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

9 sur 20 27/03/2011 05:38

Page 10: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 10/20

<script>refresh();

</script>

Allez, on code...

.....

.....

Déjà ? Je ne vous crois pas.

.....

.....

Voici la solution :

Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

10 sur 20 27/03/2011 05:38

Page 11: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 11/20

<?php

// // Notre fonction PHP pour afficher les messages :// function afficher(){

  $reponse = new xajaxResponse();// Création d'une instance de xajaxResponse pour traiter les réponse  $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 cont$chat

  fclose($fichier_texte);//On ferme notre fichier texte.$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par l

  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$fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en écriture seule.

  fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities

/>'));// 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 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 fo// 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 lxAjax 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 secon

{

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.getElementBydocument.getElementById('message').value); return false;" />  </div>  </fieldset>  </form>  <script type="text/javascript">

refresh();//On appelle la fonction refresh() pour lancer le script.  </script>  </body></html>

Voilà : vous pouvez tester, c'est fonctionnel ! Notez néanmoins que c'est très moche et peu optimisé…

Vous pouvez l'améliorer si ça vous amuse, ou si vous en avez l'utilité, mais sachez que ce chat sature assez vite (je n'ai jamais eu l'occasion de testercombien de personnes au maximum il pourrait supporter, mais ça ne doit pas être très élevé…).

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 !

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

11 sur 20 27/03/2011 05:38

Page 12: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 12/20

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 vousattarder 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èmesd'accentuation !

Contrairement à la version stable de xAjax, la version bêta (celle que nous utilisons dans ce tutoriel) ne semble pas gérer correctement l'encodagedes 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'onne veut pas qu'il fasse !

La subtilité réside dans le fait que pour l'affichage des données, les méthode fournies par xAjax fonctionnent parfaitement . Seulement pour ce quiest 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 enISO-8859-1 avant de les utiliser !Pour cela on utilise la fonction PHP 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 petitsur 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 - Sélectionner

<?php

fwrite($fichier_texte, addslashes('<strong>' . htmlentities($posteur) . ':</strong>' . htmlentities($message

/>'));// On stocke le message et le nom de l'auteur dans notre fichier.?>

…et ajouter nos comme ceci :Code : PHP - Sélectionner

<?php

fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' . htmlenti/>'));// On stocke le message et le nom de l'auteur dans notre fichier.?>

Il est important d'appliquer avant dans cet exemple, sinon convertira des donnéesencodé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, on l'appelle depuis l'objet xajax de cette façon :

Code : PHP - Sélectionner

<?php

$xajax->setCharEncoding('iso-8859-1');// On précise à xAjax qu'on souhaite travailler enISO-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 même si vous avez utilisé .

Voici donc le chat intégrant la gestion du jeu de caractères ISO-8859-1 :

Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

12 sur 20 27/03/2011 05:38

Page 13: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 13/20

<?php

// // Notre fonction PHP pour afficher les messages :// function afficher(){

  $reponse = new xajaxResponse();// Création d'une instance de xajaxResponse pour traiter les réponse  $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

fclose($fichier_texte);// On ferme notre fichier texte.

$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div 'block' par l  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éponse  $fichier_texte = fopen('./chat.txt', 'a');//On ouvre notre fichier texte en écriture seule.  fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($posteur)) . ':</strong>' .

/>'));// 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 pl'écran  return $reponse;}

// //Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis déclaration de nos fon// 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 lNOS 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 seco

{

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

Quatrième bilan

On appelle la méthode .

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

13 sur 20 27/03/2011 05:38

Page 14: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 14/20

Si on récupère des données depuis un formulaire, on les traite avec la fonction PHP .

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'asemblée très intéressante !

Mais… Mais… n'avons-nous pas déjà traité des formulaires avec xAjax dans les sous-parties précédentes ?

En effet, nous avons déjà appris à traiter des formulaires, mais c'é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 à notrefonction xajax de cette façon :

Code : JavaScript - Sélectionner

xajax_envoyer(document.getElementById('posteur').value, document.getElementById('message').value);

Nous avions un argument pour le pseudo, et un argument pour le message. Vous me suivez ?

Bon, maintenant imaginez que nous ayons dans notre formulaire un champ pseudo, un autre mot de passe, un autre e-mail et enfin un champbiographie. 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 lesvaleurs des formulaires contenant beaucoup de données.

Nous allons donc remplacer tous ces arguments par un seul : .Voici ce que cela donne sur notre chat :

Code : JavaScript - Sélectionner

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érerces valeurs (sinon ça ne nous sert pas à grand chose ) !

retourne à PHP un tableau ( ), organisé de la même façon qu'un tableau $_GET ou $_POST , c'est-à-direcontenant 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é !

Enfin j'attire aussi votre attention sur un dernier point : lorsque vous utilisez , vous devez spécifier à tous les éléments de votreformulaire un id et un name (qui doivent être identiques).

Il ne nous reste plus qu'à modifier notre fonction :Code : PHP - Sélectionner

<?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éponse

  $fichier_texte = fopen('./chat.txt', 'a');// On ouvre notre fichier texte en écriture seule.  fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteu

/>'));// On stocke le message dans notre fichier, REGARDEZ BIEN ICI COMMENT SONT EXTRAITES NOS DONNÉES DE F   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 p  return $reponse;}

?>

Et voici le chat modifié :Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

14 sur 20 27/03/2011 05:38

Page 15: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 15/20

<?php

// // Notre fonction PHP pour afficher les messages :// function afficher(){

  $reponse = new xajaxResponse();// Création d'une instance de xajaxResponse pour traiter les réponse  $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 co  fclose($fichier_texte);// On ferme notre fichier texte.

  $reponse->assign('block', 'innerHTML', $chat);//Enfin, on remplace le contenu du div 'block' par lereturn $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éponse  $fichier_texte = fopen('./chat.txt', 'a');// On ouvre notre fichier texte en écriture seule.  fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteu

/>'));// 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 p  return $reponse;}

// //Ouverture de la librairie xajax, instanciation d'un objet de la classe xajax, puis déclaration de nos fon// 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?>

<!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 secon

{

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><  <label>Message : <input type="text" size="50" id="message" name="message" /></lab

  <input type="submit" value="Envoyer" onclick="xajax_envoyer(xajax.getFormValues(t  </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é à 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âchede gestion des données des gros formulaires, comme les formulaires d'inscription, de boutiques en ligne, etc.

Cinquième bilan :

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

15 sur 20 27/03/2011 05:38

Page 16: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 16/20

On utilise 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.

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 chargementlorsque 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 qui contiendra le message de chargement en début de page :Code : HTML - Sélectionner

<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 , 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 de la page:Code : JavaScript - Sélectionner

function printLoadingMessage(loadingMessageText)

{

  if(!loadingMessageText)// Si aucun message personnalisé n'a été précisé, on luidonne 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 enfantqui 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 qui contient le texte à afficher dansnotre message de chargement, on intègre ce message dans notre balise , puis on le rend visible.

Enfin la fonction Javascript qui va cacher le message (elle aussi à placer dans la balise de la page) :Code : JavaScript - Sélectionner

function hideLoadingMessage()

{

  document.getElementById('loadingMessage').style.visibility='hidden';// On rend lemessage invisible.}

Cette fois-ci, aucun message à modifier : on rend juste le invisible pour cacher le message de chargement.

Nous avons tout codé, il nous suffit à présent d'appeler la fonction à chaque fois qu'on fait appel à une fonction xAjax(comme xajax_envoyer ou xajax_afficher), puis à appeler à chaque fin de fonction.Voici le code final:

Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

16 sur 20 27/03/2011 05:38

Page 17: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 17/20

<?php

// // Notre fonction PHP pour afficher les messages :// function afficher(){

  $reponse = new xajaxResponse();// Création d'une instance de xajaxResponse pour traiter les réponse  $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 conte  fclose($fichier_texte);//On ferme notre fichier texte.

$reponse->assign('block', 'innerHTML', $chat);// Enfin, on remplace le contenu du div block par le$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éponse  $fichier_texte = fopen('./chat.txt', 'a');// On ouvre notre fichier texte en écriture seule.  fwrite($fichier_texte, addslashes('<strong>' . htmlentities(utf8_decode($donnees_formulaire['posteu

/>'));//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 p

$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 fon// 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?>

<!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 secon

{

printLoadingMessage('Récupération des messages...');// On va appeler xajax_afficher, alorsxajax_afficher();

setTimeout(refresh, 5000);

}

  function printLoadingMessage(loadingMessageText)

{

  if(!loadingMessageText)//Si aucun message personnalisé n'a été précisé, on lui donn{

loadingMessageText = 'Chargement...';

}

  var parentNode = document.getElementById('loadingMessage');// On récupère le nœud p

  var textNode = document.createTextNode(loadingMessageText); //On crée un nœud enfantparentNode.replaceChild(textNode, parentNode.firstChild);// On accroche le texte àdocument.getElementById('loadingMessage').style.visibility='visible';// Puis on ren

}

  function hideLoadingMessage()

{

  document.getElementById('loadingMessage').style.visibility='hidden';// On rend le m}

  </script>  </head>  <body>

<div id="loadingMessage" style="font-size: 15px; color: white; position: fixe; visibility:<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><

  <label>Message : <input type="text" size="50" id="message" name="message" /></lab  <input type="submit" value="Envoyer" onclick="printLoadingMessage('Envoi du messa  </div>  </fieldset>  </form>  <script type="text/javascript">

refresh();// On appelle la fonction refresh() pour lancer le script.  </scri t>

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

17 sur 20 27/03/2011 05:38

Page 18: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 18/20

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 sivous ne la comprenez pas (ou si vous ne voulez pas la comprendre ), ce n'est pas très important car elle ne fait pas partie intégrante de xAjax,

c'est plutôt un bonus.

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.

Définir le jeu de caractères.

Enregistrer une fonction.

Indiquer à xAjax de générer le Javascript nécessaire au fonctionnement du script.

Afficher le Javascript de la page.

La classe « Réponse »

Fonction Code

Créer une instance d'un objet de réponse xAjax.

Modifier le contenu de la page.

Appeler une fonction JavaScript.

Effacer un champ.

Exécuter un script Javascript.

Retourner les résultats.

Les fonctions Javascript de xAjax

Fonction Code

Retourner un tableau contenant les données d'un formulaire.

Q.C.M.

Comment déclarer un nouvel objet xAjax ?

 $xajax = new $xajax();

 $xajax = xajax();

 $xajax = new xajax();

 $xajax = new $xajax;

Ce code est-il correct ?Code : PHP - Sélectionner

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

18 sur 20 27/03/2011 05:38

Page 19: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 19/20

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

 Oui, le code est correct.

 Non, le code n'est pas correct.

Où placer l'appel à la méthode suivante ?Code : PHP - Sélectionner

<?php $xajax->printJavascript(); ?>

 Entre les balises <body></body>.

 Entre les balises <head></head>.

 Au début de la page, avant $xajax->processRequest().

Vous souhaitez déclarer la fonction PHP suivante :Code : PHP - Sélectionner

<?php

function connexion($login, $mot_de_passe)

{

  //Code de connexion...}

?>

Quelle est la bonne syntaxe pour déclarer cette fonction ?

 $xajax->register(XAJAX_FUNCTION, 'connexion');

 $xajax->register(XAJAX_FUNCTION, 'connexion()');

 $xajax->register(XAJAX_FUNCTION, 'connexion($login, $mot_de_passe)');

 $xajax->register(XAJAX_FUNCTION, 'connexion($login, $mot_de_passe);');

À quoi sert à la fin de nos fonctions PHP ?

 À dire que cette fonction PHP est du XML.

 À préciser à xAjax que notre page est codée en XML.

 À récuperer et à retourner les informations XML de xAjax à la page.

Statistiques de réponses au QCM

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

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

19 sur 20 27/03/2011 05:38

Page 20: [xAjax] Applications AJAX Faciles Avec PHP Et xAjax !

5/12/2018 [xAjax] Applications AJAX Faciles Avec PHP Et xAjax ! - slidepdf.com

http://slidepdf.com/reader/full/xajax-applications-ajax-faciles-avec-php-et-xajax- 20/20

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 desapplications Web qui ressembleront à des applications logicielles, je pense par exemple aux fenêtres qui s'ouvrent pour demander desrenseignements à 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-êtreplus 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ûrqu'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 unechose : 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êtesasynchrones. xAjax est parfaitement adapté pour des petites applications (scripts de connexion, d'inscription, etc., voire des petits chat commenous 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 desgros scripts AJAX, il ne faut pas hésiter à utiliser xAjax pour des petits scripts.

Lire aussi

ForumTutorielsNews

Mettre à jour un div[Ajax/PHP] Problème de sessionSe connecter à MySQL avec PDO[Site Web] Bêta testeurs[minichat ajax/php] script qui plante le navigateur o_0

Amusons-nous avec le PHP et le SQLGéolocalisez vos visiteurs grâce à leur IPConcevez votre site web avec PHP et MySQLUtiliser MySQL en PHP sans POOUn diaporama original en CSS

La Gendarmerie nationale passe à Ubuntu !Les box gagnent en puissanceLa boutique de Google officiellement lancée aux États-UnisBug au niveau des SMS chez Orange : Bouygues Telecom mis en cause

Apple rejoint le projet OpenJDK

[xAjax] Applications AJAX faciles avec PHP et xAjax ! http://www.siteduzero.com/tutoriel-3-36169-xajax-applications-ajax-fa...

20 20 27/03/2011 05 38