AJAX et l'échange de données en JavaScript

Le principe du Dynamic Script Loading était déjà un peu tordu, mais pas assez pour rivaliser avec l'Images & Cookies Loading !

Le gros problème du Dynamic Script Loading était qu'on n'avait pas de moyen réel pour savoir si le chargement avait bien eu lieu. Il nous fallait une fonction de callback, embêtante à mettre en place. Il se fait que les images possèdent un évènement onload qui permet de déclencher un script ou une fonction une fois que l'image est complètement chargée.

Eh bien c'est le principe d'Image & Cookies Loading. Mais au lieu de récupérer un fichier contenant du code JavaScript, nous allons utiliser une page PHP qui enregistrera un cookie, et qui redirigera vers une image de très petite taille. Une fois cette image chargée, l'évènement onload de l'image sera déclenché, et nous pourrons récupérer la valeur du cookie.

Comme avec Dynamic Script Loading, il faut ajouter un élément HTML qui appellera notre page PHP. Ici, nous allons tout simplement définir un objet Image :

function send() {
        var oImg = new Image();
        oImg.onload = function () {
                alert(cleanString(getCookie("Ajax_ImagesCookies")));
        }
            
        var pseudo = encodeURIComponent("Thunderseb");
        var prenom = encodeURIComponent("Sébastien");
        oImg.src = "CookiesImagesLoading_1.php?Pseudo=" + pseudo + "&Prenom=" + prenom;
}

Je place sur l'évènement onload le code qui sera exécuté quand l'image sera chargée. Le contenu du cookie est récupéré avec getCookie, fonction donnée dans la partie précédente. Ne faites pas attention à l'appel de la fonction cleanString, j'y reviendrai plus tard. L'image est automatiquement chargée, car un objet Image est inséré dans l'array global document.image, ce qui explique qu'il n'y ait pas besoin d'insérer via DOM l'image dans la page.

Ce qu'il faut comprendre, c'est que ce script JS est censé appeler une image. Donc, pour donner le change, il faut que la page PHP appelée puisse renvoyer une image. Cette image sera tout simplement une image GIF blanche d'un pixel sur un pixel (elle ne sera pas affichée de toute manière).

Voici la page PHP qui réceptionne les variables passées en URL, et qui crée un cookie contenant le texte à renvoyer. Un fois ce traitement fini, le script est redirigé vers l'image :

<?php
            
header("Content-type: image/gif");
            
if(isset($_GET['Pseudo']) && isset($_GET['Prenom'])) {
        $sMessage = "Votre pseudo est ".$_GET['Pseudo'].", et vous vous appelez ".$_GET['Prenom']." !";
        setcookie("Ajax_ImagesCookies", $sMessage);
}

header("Location: images/white.gif");

?>

Une fois que le script est redirigé vers l'image white.gif , l'image est chargée par le script JavaScript, et l'évènement onload est déclenché.

Test du code

Vous devez penser à vérifier si les cookies sont acceptés par le navigateur (comme vu dans la partie précédente), et prévoir une technique de secours si les cookies se révèlent désactivés.

Il se peut aussi que dans le message renvoyé par PHP et stocké dans le cookie, tous les espaces soient remplacés par des + . C'est la raison pour laquelle j'ai créé la fonction cleanString qui permet de remplacer les + par des espaces.

Voici d'ailleurs cette fonction :

function cleanString(sString) {
        return sString.replace(/(\+)/g, " ");
}

Ce système d'image et de cookie est fait pour des petites quantités de données non-sécurisées (évitez d'y faire transiter des mots de passe). Ca peut être utile dans certains cas .

Points forts

• Facile à mettre en place

• Bon contrôle de la réception (onload)

• Prévu pour la réception de petites quantités de données

Points faibles

• Les cookies doivent être activés

• Prévu pour des petites quantités de données (limitation de taille due aux cookies)

• Ne gère que les données textuelles

• Limité à la méthode GET