Rechercher:
|
Rechercher:
Dans la même rubrique:
Auteur : Ernestine
Débarquée sur internet en 2002 pour un simple site perso, le virus ne m’a pas quittée j’en ai fait aujourd’hui mon métier. Ce qui m’intéresse avant tout sur le net, c’est la communication, l’information, le partage. J’ai fait énormément d’intégration xhtml/css, mais aujourd’hui je me consacre surtout au développement en php avec bases de données mysql et postgresql, sans oublier Ajax. Je me sens également très concernée par l’accessibilité, l’utilisabilité et l’ergonomie des sites web, il est d’ailleurs possible que je me spécialise dans ces domaines par la suite. Articles de l'auteur :  Ajax avec jQuery et JSONSite WAP dynamiqueLe langage WMLProtéger le contenu d’un site web |
Ajax avec jQuery et JSON
Ajax avec jQuery et JSON5 août 2010, par ErnestineLa solution Ajax, de plus en plus utilisée sur le net, est une technique efficace mais qui peut vite s’avérer longue et difficile à mettre en place. Il existe cependant des méthodes pour en simplifier grandement la pratique. Dans cet article nous allons étudier la mise en place d’un processus Ajax avec l’utilisation couplée de la célèbre librairire javascript jQuery, et du format de données JSON. En simplifiant, on peut dire qu’un processus Ajax se déroule suivant trois étapes :
Le principe de la méthode que nous exposons ici est le suivant : enclencher le processus Ajax (étape 1) et traiter la réponse (étape 3) en utilisant les fonctions jQuery consacrées à Ajax. Quant à la réponse du serveur, elle sera retournée au format JSON. De quoi avons-nous besoin ? Côté client, nous ferons appel à la librairie javascript jQuery, qui devra donc être incluse à notre page. Côté serveur, il nous faudra un langage capable de créer et de retourner une réponse au format de données JSON. Rappelons que PHP possède tout ce qu’il faut pour cela depuis sa version 5.2.0. Notre exemple utilisera donc PHP. Prérequis : pour comprendre ce qui suit, il est nécessaire de posséder un minimum de connaissances sur la librairie jQuery et le format JSON. Nul besoin d’être expert, mais le "niveau débutant" est un minimum. Pour plus d’informations, nous vous renvoyons aux sites officiels : jQuery : http://jquery.com/ JSON : http://www.json.org/jsonfr.html Pour illustrer notre méthode, nous allons proposer un exemple très simple : le visiteur entre deux nombres dans un formulaire, et le serveur lui renvoie le résultat de l’addition et de la multiplication de ces deux nombres, et nous les affichons dans la page web, sans rechargement de celle-ci. Un exemple simple mais qui permettra d’entrevoir les grandes possibilités de cette technique. Nous allons écrire trois fichiers : calcul.php : code contenant le rendu HTML avec son formulaire de saisie calcul.js : code javascript controleur.php : fichier appelé côté serveur pour effectuer l’addition et la multiplication Commençons par le fichier calcul.php. Celui-ci inclue le fichier jquery.js (à télécharger sur le site de jQuery) et le fichier calcul.js que nous allons créer ensuite. Fichier calcul.php : Ce fichier produira un simple formulaire, tel que présenté sur la capture d’écran ci-dessous (cliquez dessus pour l’agrandir) :
Avant de passer au fichier javascript, nous allons nous occuper du traitement côté serveur. Il s’agira simplement de récupérer les données du formulaire, de calculer l’addition et la multiplication, puis de les retourner au format JSON. Pour cela, il suffit simplement de créer un tableau contenant toutes les données nécessaires au client (dans notre cas : le résultat de l’addition et le résultat de la multiplication), puis encoder ce tableau avec la fonction json_encode de PHP : Fichier controleur.php : Enfin, il nous faut écrire le code javascript. jQuery propose la fonction getJSON. Cette fonction, qui sera appelée lors de la soumission du formulaire, enclenche le processus Ajax en appelant une url et en lui passant des paramètres, et reçoit la réponse sous la forme d’un objet manipulable comme un simple tableau : Fichier calcul.js : Notre script est désormais opérationnel. En l’état, ce formulaire ne sera pas fonctionnel si javascript est désactivé. Il vous appartient de traiter correctement la soumission du formulaire en php, tel que vous le feriez si le code ajax n’était pas là. Récupérer les données au format JSON évite de manipuler un fichier XML, activité toujours très laborieuse quand il faut le parser en javascript. Nous voyons donc ici tous les avantages de cette méthode, simple et efficace :)
|
|
||
|
