Ajax avec jQuery et JSON

La 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 :

  • Une action utilisateur côté client (par exemple le remplissage et la soumission d’un formulaire)
  • Le traitement de cette action côté serveur, et le renvoi éventuel, par le serveur, d’une réponse, généralement au format XML
  • Le traitement de la réponse en javascript et la modification conséquente de la page côté client.

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 :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <title>Calculs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="calcul.js"></script>
</head>
<body>
    <h1>Calcul</h1>
    <form id="formulaire_calcul" action="calcul.php" method="post">
        <fieldset>
            <legend>Formulaire de calcul</legend>
            <label for="nombre_a">Nombre A : </label>
            <input id="nombre_a" type="text" name="nombre_a" />
            <br />
            <label for="nombre_b">Nombre B : </label>
            <input id="nombre_b" type="text" name="nombre_b" />
            <br />
            <input type="hidden" name="action" value="calculer" />
            <input type="submit" value="Calculer !" />
        </fieldset>
    </form>
    
    <h3>R&eacute;sultats : </h3>
    <div>
        <label for="resultat_addition">Addition : </label>
        <input id="resultat_addition" type="text" readonly="readonly" />
        <br />
        <label for="resultat_multiplication">Multiplication : </label>
        <input id="resultat_multiplication" type="text" readonly="readonly" />
    </div>
</body>
</html>

Ce fichier produira un simple formulaire, tel que présenté sur la capture d’écran ci-dessous

https://www.webmaster-hub.com/publications/IMG/jpg/capture-ajax-jquery-json.jpg

Formulaire de saisie

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 :

 <?PHP
if(isset($_REQUEST['action'])) {
    switch($_REQUEST['action']) {
        case 'calculer' :
            $nombre_a = trim($_REQUEST['nombre_a']);
            $nombre_b = trim($_REQUEST['nombre_b']);
            $resultat_addition = $nombre_a + $nombre_b;
            $resultat_multiplication = $nombre_a * $nombre_b;
            $resultat = array('resultat_addition' => $resultat_addition,
                              'resultat_multiplication' => $resultat_multiplication);
            print(json_encode($resultat));
       break;
    }
}
?>

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 :

$(document).ready(function() {
      $("form#formulaire_calcul").submit(function() {
           $.getJSON("controleur.php",
           {"action" : "calculer",
            "nombre_a" : $("input#nombre_a").val(),
            "nombre_b" : $("input#nombre_b").val() },
            function(data) {
                $("input#resultat_addition").val(data['resultat_addition']);
                $("input#resultat_multiplication").val(data['resultat_multiplication']);
            }
           );
           return false;
    });
});

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 🙂