Réaliser avec jquery un moteur ajax simple et efficace

Cette article présente un moyen assez simple pour centraliser vos requêtes ajax. L’intèrèt de cette technique est de vous décharger dans une fonction de la plus part de vos requêtes vers le serveur. Si j’aborderai essentiellement cette question du point de jquery et de javascript , j’aborderai également le pendant que vous pouvez créer côté serveur ( en l’occurrence en PHP) pour optimiser votre moteur ajax.

Bien débuter

Avant d’aller plus loin je vous conseille , si ce n’est déjà fait, de lire les articles concernant certaines bonne pratique pour rendre votre code javascript plus lisible, maintenable et évolutif. Cela vous aidera à aborder certains points de cet article , et je l’espère cela pourra vous donner quelques bonnes idées.

Constructions du moteur

Jquery possède plusieurs fonctions de type ajax, comme load , $.get , $.post ...La fonction par contre qui offre le plus de possibilité ( grosso modo d’options différentes) est jquery.ajax. C’est elle que nous utiliserons .

Et bien nous pouvons maintenant découvrir le moteur ajax. Il s’agit d’un objet nommé ajax qui possède des paramètres par défauts qui sont dans ’params’ et une seule fonction qui s’appelle ajax(). Pour pouvoir utiliser ce moteur il faudra que vous appeliez la méthode ajax.ajax(obj) ou ’obj’ est un objet de type javascript. Si cela vous parez un peu compliqué ne vous inquiétez pas avec un exemple cela deviendra très simple. Voici le code du moteur :

Fonctionnement du moteur ajax

Dans l’exemple que je vous propose ( et qui est téléchargeable à la fin de l’article ) nous allons tester 2 fonctions qui utilisent le moteur ajax . Et voici le rendu html de la page de test.

Le premier bouton ’OK’ appelle la fonction test_simple() qui comme son nom l’indique est vraiment simple ...

Cette fonction récupère la valeur du champ input text dont l’id est ’nom’ et il appelle le moteur ajax en spécifiant l’action a appliquer ( en fait il va s’agir du fichier PHP à inclure et qui effectuera les traitements ). On passe bien sur le nom en paramètre et le ’alert’ : true spécifie que le résultat de cette requête ajax devra nous fournir une alert.

Côté serveur il y a un fichier à la racine ajax.php qui ne fait que des inclusions et dans le répertoire action nous avons 2 fichiers de ’traitements’ qui correspondent aux actions appelées.

Suivons maintenant le processus de l’appelle a ajax.ajx(obj) dans le moteur. Au début de cette fonction nous vérifions que obj est bien un objet , nous vérifions que nous avons une action qui demandé. Enfin et c’est essentiel nous construisons un objet qui va merger les paramètres que nous passons avec ceux par défauts. Dans test_simple() les 3 paramètres action , nom et alert ne correspondent à aucun de ceux par défaut.

Il s’agit maintenant de traiter le résultat de la requête. Dans la partie ’succes’ , nous avons une égalite => ajax.params.retour = x ; qui va permettre d’utiliser dans des fonctions de callback le résultat de votre appel ajax. Et 2 tests : le premier voit si on a passé un paramètre callback , ce n’est pas le cas dans test_simple() et , le deuxième test ,voit si nous avons passé un paramètre ’alert’. Dans cet exemple c’est le cas !!! Par conséquent vous allez avoir une très jolie ’alert’ avec "Bonjour le monde et bonjour le_nom_du_champ_input". Simple n’est il pas ?

un exemple avec du json et une fonction de callback

Nous allons maintenant étudier un 2eme exemple avec notamment une fonction de callback.

On active test_json() en appuyant sur le bouton Json. Alors la nous avons simplement l’appel à ajax.ajax() avec 3 paramètres. ’action’ indique quel fichier php inclure pour le traitement . ’dataType’ voilà qui est intéressant car il existe également dans les paramètres par défaut. C’est très pratique car cela indique que nous voulons faire un appel ajax qui renvoie du json. Enfin nous avons ’callback’ qui indique ’une fois la réponse récupérée appelé moi la fonction retour_json()’.

Cette fonction vous l’avez juste après. Elle est très simple et elle ne fait que de l’affichage sauf en ce qui concerne la première ligne : retour = ajax.params.retour ; Chaque requête ajax stock la valeur renvoyé par le serveur dans la variable ’ajax.retour’ cela permet notamment de pouvoir l’utiliser dans des fonctions de callback.

Conclusion

Il est assez aisé de pouvoir utiliser ce moteur et si nécessaire de le modifier. Vous pouvez par exemple considéré que si vous avez un paramètre ’append’ : ’#ma_div’ , le résultat de votre appel ajax sera inclus à la fin de l’élément DOM dont l’id est ’ma_div’.

L’utilisation de jquery nous a également beaucoup facilité le traitement des opérations. Essentiellement avec l’utilisation de jquery.ajax(). L’autre gain important avec l’utilisation de jquery est l’utilisation de sa fonction jquery.extend() qui fait vraiment des miracles. D’ailleurs un article sera entièrement consacré à cette fonction.

La question qui se pose également est : ’Pourquoi utiliser un moteur ajax’. Le fait de centraliser votre code à beaucoup d’avantage. le premier est de ne pas multiplier les fonctions , le deuxième est de pouvoir optimiser ce moteur par exemple en testant la validité de vos paramètres , en fournissant des méthodes d’aide ,en gérant des paramètres par défauts .... Vous aurez réellement un grand intérêt à utiliser un moteur ajax.

Vous disposez comme d’habitude du zip avec les différents fichiers. Il est néanmoins importants de signaler un point important. Tout ce que nous avons vu se passe côté client. Côté serveur le PHP que vous allez récupérer est vraiment très simple. Il est nécessaire le plus souvent de ’blinder’ son code PHP. Car d’éventuelles personnes malveillantes seront peut être tenté d’exploiter des failles de sécurité.

J’espère que cet article vous aura intéressé et qu’il vous inspirera pour des développements futurs. Merci pour votre lecture.