XAJAX : framework Ajax pour PHP

Posted On 11 juin 2007

Filed under Tests

Comments Dropped 5 responses

Ajax devient omniprésent dans les applications web. On peut trouver tous les styles de fonctionnement à mettre en place en Ajax, le but étant d’enrichir les fonctionnalités, au profit d’une interface plus efficace.

Xajax est actuellement la librairie la plus efficace pour un intégration dans PHP. De nombreux autres frameworks existent, celui-ci répond à de nombreuses attentes, est stable, toujours actif, et très bien pensé dans l’optique d’une application PHP codée proprement.


En effet, les méthodes disponibles dans la classe Xajax_response permettent d’effectuer toutes les manipulations possibles sur la page web appelante : modification de contenu de div, affichage d’alert ou confirm, lancement de script, changement de style css, redirection de la page, etc.

De nombreux tutoriels existent, pas la peine de faire un long discours.
La doc est également assez claire.

Pour décrire les grandes lignes de la mise en place de Xajax :

  • Déployer les classes Xajax et Xajax_response dans un répertoire hors arborescence publique
  • Faire un fichier « xajax_common » dans la même arborescence, où on déclare les fonctions Ajax que l’on va appeler, et qui sera appelé à la fois par l’objet Xajax générant le Javascript et par le fichier de process
  • Créer un objet Xajax et générer le code Javascript correspondant dans la page web
  • Créer un fichier de process qui va recevoir l’appel, et qui va lancer le traitement de la fonction appelée (Xajax_response)
  • Copier le fichier xajax.js dans un répertoire accessible par le navigateur
  • Mettre en place le code HTML/Javascript appelant la fonction Xajax (avec ses paramètres) dans la page web

Dans le cas où l’on utilise Smarty, aucun souci, Xajax prévoit une méthode getJavascript() qui renvoie le code Javascript indispensable au fonctionnement de Xajax, qui doit être inclus dans la page HTML. Il suffit de passer le code Javascript généré au template, et de l’afficher directement.

Donc pour Smarty :

    $smarty->assign('xajax', $xajax->getJavascript());

Dans le template Smarty :

    {$xajax}

Sinon pour afficher directement le Javascript sans Smarty :

    echo $xajax->printJavascript();

Pour résumer, les différentes parties de code :

Dans le fichier commun :

require_once (BASE . '/../includes/xajax.inc');
$xajax = new xajax(BASE . '/process/xajax_server.php');
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
// liste des fonctions ajax
$xajax->registerFunction('maFonction');
$xajax->registerFunction('maFonction2');

Dans le fichier PHP :

require_once (BASE . '/../includes/xajax_common.inc');
$smarty->assign('xajax', $xajax->getJavascript("", BASE . "/js/xajax.js"));

Dans le template :

{$xajax}
<a href="#" onClick="xajax_maFonction('test');">Test</a>

On remarque qu’il faut préxifer les noms des fonctions appelées par « xajax_ ».

Dans le fichier de process :

require_once (BASE . '/../includes/xajax_common.inc');
function maFonction($texte) {
$objResponse = new xajaxResponse('ISO-8859-1');
$objResponse->addAlert('texte passé en paramètre : ' . $texte);
return $objResponse->getXML();
}
$xajax->processRequests();

Les erreurs courantes

Penser à bien ajouter une ligne gérant l’encodage des caractères dans la réponse Xajax

Sinon des surprises interviendront parfois. L’iso fonctionne sur tous les navigateurs (l’UTF8 est également géré) :

$xajax->setCharEncoding('ISO-8859-1');

Une erreur javascript apparaît au bout de quelques secondes (fichier xajax.js introuvable)

–> verifier que xajax.js est present dans le répertoire public, et que lors de la création de l’objet Xajax dans la page, on spécifie bien le bon chemin relatif vers ce fichier.

une erreur javascript apparait : « xajax_maFonctionAppelee is not defined »

–> verifier que la fonction est enregistré dans xajax_common.inc

$xajax->registerFunction('nomFonction');

une erreur smarty « undefined index $xajax » apparaît

–> Verifier que l’objet Xajax est bien assigné à Smarty sous le même nom que celui indiqué dans le template

j’ai une erreur indiquant que la fonction Xajax appelée n’existe pas

–> verifier que l’affichage du code Javascript Xajax généré est bien dans le template (la variable assignée dans le fichier PHP).

une alerte xajax « Received: » apparaît

–> Verifier qu’il y a le lancement des traitements à la fin des déclarations des fonctions dans le fichier de process :

$xajax->processRequests();

Comment récupérer TOUTES les données de mon formulaire

–> la méthode getFormValues() est faite pour cela, en précisant l’identifiant du formulaire visé :

xajax_maFonction(xajax.getFormValues('formID'));

Impossible de modifier à la volée la classe de mon élèment html

–> modifier une classe pour le style css se fait par « classname » et non pas « class »

$objResponse->addAssign('monDiv', 'className', 'cssDivbleu');

Comment avoir des informations pour débugger ?

Il suffit de rajouter ces lignes dans le fichier commun, qui vont afficher des erreurs explicites, et éventuellement enregistrer les erreurs PHP de la fonction éxecutée dans un fichier de log :

$xajax->errorHandlerOn();
$xajax->statusMessagesOn();
$xajax->debugOn();
$xajax->setLogFile(BASE . '/../xajax_errors.log');

Dans le cadre d’une utilisation avec Smarty, on peut aller beaucoup plus loin. Par exemple pour le changement du contenu entier d’un div, on peut très bien regénérer le contenu de ce div dans un template spécifique, et envoyer le résultat de ce template à travers Xajax.
Exemple simple :

$objResponse->addAssign("monDiv","innerHTML", $smarty->getHtml('mon_template'));

Evidemment, la méthode getHtml de Smarty est censée renvoyer le code généré par l’évaluation du template.

Dernière information : à l’heure de cet article, la version 0.5 est en Beta et contiendra entre autre un mode synchrone pour l’appel Ajax, ce qui peut être très utile dans le contexte de certaines interfaces.
Cet article a été écrit en collaboration avec Rodolphe, développeur php.

Si vous avez des questions, n’hésitez pas !

Ressources :

Site officiel
tutoriel officiel

Publicités

5 Responses to “XAJAX : framework Ajax pour PHP”

  1. Steve Falardeau

    Une Petite correction
    $objResponse->addAssign(« monDiv », »innerHTML », $smarty->getHtml(‘mon_template’));

    devrait être

    $objResponse->addAssign(« monDiv », »innerHTML », $smarty->fetch(‘mon_template.tpl’));

  2. magaliemarion

    oui en effet bien vu !
    la fonction getHtml est en fait une méthode d’une classe « MySmarty extends Smarty »

    cette méthode :

    /**
    * returns the content of Smarty’s output buffer instead of displaying it
    * @param string $resourceName the name of the template
    * @param integer $cacheId l’id du cache
    * @param integer $compileId l’id de la compil
    * @return string some html code
    */
    public function getHtml($resourceName, $cacheId = NULL, $compileId = NULL)
    {
    return $this->fetch($resourceName, $cacheId, $compileId, FALSE);
    }

  3. crazyball

    Salut, j’apprends a utiliser XAJAX avec Smarty justement mais j’ai un gros soucis. Je dois dev un site qui fonctionnera sous IE6 car pour une grosse entreprise et impossibilité de migrer.

    Sur mon template j’ai une série de listes a rafraichir en fonction du choix de la liste précédente.

    Sous firefox tout marche sans problème, IE7 aussi mais sous IE6 on dirait qu’il ne se passe rien, même pas la requête AJAX (j’ai pourtant le petit sablier mais rien) …
    As tu eu le problème aussi ?
    Si oui comment faire ?

  4. crazyball

    EDIT : en fait je viens de voir que si je passe seulement du texte dans objResponse ça marche normalement sous IE6 / 7 … etc

    Quand je passe du code HTML ça ne passe plus sous IE6 … une solution ?

  5. JYL

    Merci pour ces précisions pour Smarty qui mon fait gagner beaucoup de temps !!! 🙂

    Mais pour info et ma version « 0.5 beta 4″ je dois ajouter le chemin de base:
    $sRequestURI= »http://monsite.com/js/xajax/ »;
    $smarty->assign(‘xajax’, $xajax->getJavascript($sRequestURI));

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s