Faire le l'ajax c'est bien, mais c'est pas forcément évident. Ce toolkit prend en charge la partie controleur et vous propose un modéle hyper simpliste afin de facilement programmer en PHP puis en Javascript à travers l'AJAX et ce de manière INTUITIVE.
Le principe de base :
La partie serveur :
Vous faites un fichier PHP dans lequel vous créez une classe héritant de la classe ajaxify.
Vous créez des fonctions comme vous l'avez toujours fait. Ces fonctions seront accessible à partir de votre page (mode client) en faisant des appels javascript.
La partie client :
Dans votre page html, faites une référence à la lib : require_once('lib/ajaxify.class.php'); puis dans votre header html rajoutter une référence à la classe php que vous souhaitez utiliser : <?php ajaxify::AjaxClass('scripts/pannier.php', 'jsPannier'); ?>
Ensuite le reste c'est comme d'habitude en javascript - exemple : jsPannier.getProduits(...).
Vous avez deux fichiers en exemple pour comprendre un peu le fonctionnement et les possibilités de la librairie.
*** Détail techniques :
Dans la partie JS vous utilisez l'objet portant le même nom que la classe.
-> PHP :
class foo extends ajaxify {
function bar() {}
}
-> JS :
foo.bar(function(result) {
// do something
});
-- LE MODE SYNCHRONE --
Vous souhaitez intéroger le serveur et une fois qu'il aura répondu continuer l'execution de votre javascript en récupérant le résultat. C'est le mode synchrone.
PHP :
class foo extends ajaxify {
function bar($name) {
return 'Hello World '.$name;
}
}
JS :
alert(foo.bar('aKh'));
-- LE MODE ASYNCHRONE --
Vous souhaitez lancer un chargement et pendant ce temps ne pas bloquer l'affichage, voire même mettre un petit message d'attente. C'est le mode asynchrone, et c'est conseillé pour les réponses nécéssitant un long temps de réponse.
PHP :
class foo extends ajaxify {
function doSomething($name) {
sleep(1);
return 'Done '.$name;
}
}
JS / HTML :
<div id="result">...</div>
<script language="javascript">
document.getElementById('result').innerHTML = 'Wait ...';
foo.doSomething('akh !', function(result) {
document.getElementById('result').innerHTML = result;
});
</script>