Enrichissement progressif avec xaJax

Posted on Saturday 14 June 2008, 17:56 - Veille techno - Permalink

Article
|
Comments(0)
|
Attachments(0)

Xajax est une librairie PHP qui permet au développeur de créer des interfaces Web exploitant AJAX, sans avoir à se soucier du javascript. C'est à ma connaissance, le moyen le plus simple pour faire évoluer progressivement un site existant vers une interface dynamique, comme cela a été fait pour la gestion du panier et les bandeaux déroulants, sur le site de la boutique bababio.

Avec xajax, tout ce que vous avez à faire, c'est écrire les fonctions PHP qui génèreront le code affiché dans la page web. Xajax se charge de construite les requêtes et d'appliquer les effets demandés.

Xajax requiert et exploite la librairie javascript prototype.js

1- Installer la librairie xajax

Après avoir installé la librairie xajax dans /xajax et prototype dans /js. L'archive est disponible sur le site du projet xajax.

require_once("xajax/xajax.inc.php");

2- Ecrire une fonction php

Cette fonction sera utilisée via ajax pour rafraîchir une partie de la page seulement, de la manière suivante : <div id="infobox">...</div>

Exemple de fonction php pour xajax :

function displayParams($params) {

// Create xajax Response object

$objResponse = new xajaxResponse();

// Juste pour exemple, ajout des paramètres à la chaîne résultat

$result = '<p>' . $params[1] . ', ' . $params[2] . '</p>';

// On précise quelle zone de la page, le contenu envoyé va remplacer

// ici, le div concerné a un id= 'infobox'

$objResponse->addAssign("infobox","innerHTML", result);

// on ajoute un effet javascript prototype à l'affichage

$objResponse->addScript("new Effect.Appear('infobox',{duration:5})");

// on renvoie l'objet réponse

return $objResponse;

}

3- Enregister la fonction dans xajax

Aprés l'écriture des fonctions, il faut signaler leur existance à Xajax. Celui-ci se charge seul, de générer le javascript nécessaire, correspondant aux fonctions php. Les fonctions javascript correspondantes prennent simplement le préfixe xajax_, ce qui donnera pour nôtre exemple, xajax_displayParams().

$xajax = new xajax(); // creates an instance of the new class we created //$xajax->debugOn(); //$xajax-> statusMessagesOn(); $xajax->registerFunction("displayParams"); $xajax->processRequests();

4- ajouter un appel à la fonction PHP via javascript

Pour utiliser notre fonction php via ajax, il nous suffit de glisser des appels javascript !

- au chargement de la page :

<div id="infobox" name="infobox"></div>

xajax_displayParams(xajax.getFormValues('myform'));

</script>

- ou dans un lien

<a href="javascript:xajax_displayParams(xajax.getFormValues('myform'));" >action !</a>

A noter que dans la Xajax est capable de transmettre l'ensemble des valeurs d'un formulaire en paramètre, par l'utilisation de la fonction gerFormValues. Ceci permet d'obtenir des fonctions ayant une connaissance complète du contexte.

5- Plus d'infos

Vous trouverez de nombreux exemple sur le site officiel du projet xajax : http://xajaxproject.org/.

Author: Jean-Baptiste Heren

Stay in touch with the latest news and subscribe to the RSS Feed about this category

Blog Pro de Jean-Baptiste HEREN