Le principe de l'AJAX

Comment interroger un serveur sans rafraîchir entièrement la page ?

10 mai 2014

Certains le voit comme un des piliers du web 2.0, d'autres comme une hérésie amenant de grandes failles de sécurités pour les applications non protégées, ce qui est sûr c'est que l'AJAX (Asynchronous Javascript And XML) est une notion fondamentale du web d'aujourd'hui et qu'il est indispensable de la connaître.

Quelques définitions

  • DOM : Le Document Object Model permet de manipuler un document XML (et HTML) en le représentant avec ses données sous forme d'arbre. Notez que c'est un outil qui sera géré par le navigateur et que même si vous ne comprenez pas cette notion vous pourrez suivre le reste du tutoriel.
  • XMLHttpRequest : Aussi appelé xhr, c'est un objet qui permet d'envoyer ou d'obtenir des données dans différents formats (XML, JSON...) à l'aide de requêtes HTTP. A la base c'est un objet ActiveX développé par Microsoft mais, ici, nous nous intéresserons à son implémentation JavaScript.
  • Client HTTP : C'est vous, ou plus particulièrement votre navigateur web.
  • Serveur HTTP : C'est la machine qui contient le site web et retourne les données à quiconque lui envoie une requête.
  • Asynchrone : Dans le cas de l'AJAX, l'asynchronisme signifie que l'envoie d'une requête HTTP vers le serveur et l'attente de la réponse sont des opérations non bloquantes. Le visiteur peut continuer à manipuler la page, la réponse HTTP arrivera toute seule lorsque le serveur aura terminé ses tâches. La plupart des utilisations d'AJAX sont asynchrones mais sachez que le mode synchrone est disponible dans la majorité des bibliothèques javascript.

Le but de l'AJAX

Le but principal de l'AJAX est de pouvoir demander des informations à un serveur sans avoir besoin de rafraîchir l'intégralité de la page.

Les effets sont multiples :

  • Temps de chargement réduit.
  • Utilisation de la bande passante réduite.
  • Un effet design épuré.

Le principe de l'AJAX

Nous considérerons que l'objet XmlHttpRequest est déjà initialisé lors du chargement de la page. Il est important de connaître XmlHttpRequest puisque l'AJAX est basé dessus, néanmoins il est rare de nos jours que nous aillons à traiter directement avec lui.

Comme exemple d'application nous allons prendre cet outil qui permet de faire du hash md5 en ligne. Le formulaire contiendra un champ de saisie "message" et un bouton "hasher en md5". Un clic sur le bouton devra afficher le résultat ou l'erreur dans un conteneur "api-response", une balise div par exemple.

  • Vous cliquez sur le bouton "hasher en md5", ce qui déclenche un évènement onClick et fait appel à une fonction JavaScript "md5Hash".
  • Cette fonction récupère le contenu du champ "message" et l'envoie au serveur via une requête HTTP.
  • Le serveur traite la requête, vérifie si le champ "message" est bien renseigné, calcul son hash md5 et retourne la valeur tout simplement en l'affichant. Cette partie peut être réalisée dans n'importe quel langage serveur (dans notre exemple ce sera PHP).
  • Le message hashé ou un message d'erreur revient donc vers le client à travers la réponse HTTP du serveur. Nous revoilà dans la fonction javascript "md5Hash" qui affiche la valeur reçue dans le conteneur "api-response".

Place à la pratique

Comme dit précédemment, il est rare de nos jours de devoir manipuler directement l'objet XmlHttpRequest, nous préférons utiliser une bibliothèque JavaScript qui en facilitera l'utilisation. Dans notre cas nous allons utiliser JQuery. JQuery dispose de plusieurs fonctions pour faire de l'ajax : $.post, $.get, $.load, $.ajax etc... Tous les détails sont dans la documentation JQuery. Pour notre exemple $.ajax fera très bien l'affaire. Par défault, la fonction $.ajax possède un dataType valant "Intelligent Guess" qui gère automatiquement les retours XML, JSON, HTML ou script. Ainsi, pour faire les choses simples, nous utiliserons le format JSON dans nos relations client-serveur.

Le formulaire

<textarea required rows="5" id="message"></textarea>

<!-- Attention à enlever le type submit du bouton -->
<button type="button" onClick="md5Hash();">hasher en md5</button>

Envoyer une requête AJAX avec JQuery

function md5Hash() {
    $.ajax(
        {
            /* type GET existe aussi */
            type: "POST",
            url: "/hash-md5.php",
            data: {
                'message': $('#message').val()
            },
            cache: false,
            /* fonction a executer en cas de succes : affichage du hash md5 */
            success: function (oResponse) {
                $("#api-response").html('<div class="api-success">' + oResponse.message + '</div>');
            },
            /* fonction a executer en cas d'erreur : affichage du message d'erreur */
            error: function (oResponse) {
                $("#api-response").html('<div class="api-error">' + oResponse.responseJSON.error + '</div>');
            }
        });
}

hash-md5.php - Le côté serveur

/* Permettra a la fonction $.ajax de comprendre automatiquement que le retour est de type JSON */
header('Content-Type', 'application/json; charset=utf-8');

if (isset($_POST['message']) AND $_POST['message'] !== null AND $_POST['message'] !== '') {
    echo json_encode(
        array(
            'message' => md5($_POST['message']),
            'success' => true
        )
    );
} else {
    /* le renvoie d'un code HTTP > 400 declenchera automatiquement la callback "error" */
    header('HTTP/1.0 400 Bad Request');

    echo json_encode(
        array(
            'error' => 'Veuillez saisir un texte',
            'success' => false
        )
    );
}

Les inconvénients de l'AJAX

  • Risque de dégradation de l'accessibilité quand il est utilisé à outrance.
  • Des points d'entrée supplémentaires à sécuriser.
  • Certains utilisateurs désactivent JavaScript ou sont sur un périphérique qui ne le supporte pas.

A bientôt .

Par
Créateur et administrateur.

Dans la même catégorie

Ecrire une extension pour Google Chrome
JSONP : envoyer des requêtes cross-domains
Chargement asynchrone d'images en javascript
Mise en place d'un calendrier comprenant date et heure.
Utiliser l'objet Date de javascript pour effectuer des calculs sur les dates
Apparition d'une fenetre de saisie avec jquery.

Commentaire(s)