Comprendre AJAX à l’aide de jquery

On ne présente plus le framework jquery tant il est utilisé à travers le web, aussi bien pour les possibilités qu’il offre coté client, que pour sa facilité d’utilisation. Pour plus d’informations, visitez le site officiel ici.

Dans cet article, je vais l’utiliser pour réaliser de petits traitements en AJAX, récupérer l’heure du serveur et votre adresse IP de manière asynchrone (aucun rafraichissement de votre navigateur).

Voir l’exemple

Pour synthétiser le fonctionnement, jquery va envoyer des informations au serveur via la méthode POST ou GET, puis récupérer un résultat (la réponse). Vous l’aurez donc compris, il nous faudra aussi un fichier PHP pour récupérer l’action à réaliser.

Coté client (code javascript):

<script type="text/javascript">
    $(document).ready (function () {
        var ajax = function (a, callback) {
            $.ajax ({
                url: 'ajax.php',
                type: 'POST',
                data: ({action:a}), // Paramètre POST
                success: function (data) {
                    callback (data);
                }
            });
        } // ajax ();

        // ... autres fonctions ...

        var alert_heure = function (data) {
            alert ('Heure du serveur: '+data.heure);
        } // alert_heure ();

        $('button.heure').click (function () {
            ajax ('heure', alert_heure);
        });
    });
</script>

$(‘button.heure’) correspond à l’élément HTML <button/>, et heure à sa classe (voir les sources HTML). Sur ce bouton, j’y applique un écouteur ‘onclick’ qui sera déclanché lorsque l’utilisateur cliquera sur ce bouton.

Lors du clique, ma fonction ‘ajax’ est appelée, c’est elle qui se charge de réaliser ma requête AJAX à l’aide de jquery. Le premier paramètre va permettre à mon script PHP de trouver le traitement à réaliser, le second, est une fonction callback qui sera appelée lorsque le serveur m’aura retourné une réponse. Je procède de la sorte dans un souci de généricité, car dans la pratique de ce tuto, il y aura 2 types de requête bien différentes, afficher l’heure du serveur ou votre adresse IP.

Après une rapide analyse du code, vous observez que c’est le fichier ‘ajax.php’ qui sera lancé coté serveur.

Coté serveur (code php):

$action = $_POST['action'];

// ...

switch ($action) {
    case 'heure':
        echo echoJSON (array ('heure'=>date ('H\hi\ms\s')));
    break;
    case 'ip':
        echo echoJSON (array ('ip'=>$_SERVER['REMOTE_ADDR']));
    break;
}

Après avoir analyser le type d’action à réaliser switch ($action) {}, notre script PHP va se contenter d’afficher un résultat avec ‘echo’, c’est la réponse, et c’est ce que réalise la fonction echoJSON ();. J’ai pris pour abitude de structurer mes données dans du JSON, c’est plus propre et plus facilement maniable.

Conclusion

jquery nous simplifie la vie, à mes débuts, ce type de framework n’existait pas encore et il fallait tout développer soit-même, pour obtenir un résultat qui ne fonctionnait pas forcément sur tous les navigateurs et avec beaucoup moins de possibilités!

Cependant, jquery n’est pas le seul framework proposant ce type de fonctionnalité, il y a aussi prototype et sciptaculous que j’utilisais beaucoup autrefois mais qui restent à mon sens, beaucoup moins performants que jquery.

Cet exemple montre une infime partie des possibilités offertes par AJAX. Puisqu’un script PHP est appelé, pourquoi ne pas consulter une base de données, générer des fichiers textes voire des images … les possibilités sont infinies!

Télécharger les sources