[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > AJAX et l'échange de données en JavaScript > Les techniques AJAX > Images & Cookies Loading > Lecture du tutoriel

Images & Cookies Loading

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Chapitre rédigé par Thunderseb

Sommaire du chapitre :

Introduction
Mise en place
Conclusion

Introduction

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.

Mise en place

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 :

Code : JavaScript

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 sensé 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 :

Code : PHP

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

Code : JavaScript

1
2
3

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

Conclusion

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

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or