La fonction XMLHTTPRequest

Pour éviter tout les problèmes liés à la fonction XMLHTTPRequest, j'utilise l'api Dojo qui offre une interface d'utilisation de XMLHTTPRequest sans avoir à se préoccuper des problèmes liés aux différentes version des navigateurs. En fait les navigateurs microsoft s'appuient sur un objet activeX alors que dans le moteur Gecko (Mozilla, firefox), la fonction est directement disponible.

D'après mes tests, firefox autorise l'utilisation de la fonction uniquement si le script contenant XMLHTTPRequest est sur un serveur web et le fichier demandé est sur le même serveur. Avec internet explorer, si le script n'est pas sur un serveur la fonction est toujours utilisable et si le script est sur un serveur mais le le fichier à télécharger est sur un autre, il demande à l'utilisateur une autorisation. Donc on ne peut pas utiliser ce système pour des interactions entre différents serveurs (la fonction fonctionne sur ce principe pour des raisons de sécurité)

Avec Dojo toolkit

Dojo toolkit se présente comme une api de développent qui propose des fonction d'abstraction pour les problèmes rencontrés par les développeurs javascrit. La partie qui nous intéresse ici est l'utilisation de dojo.io.bind(). Dojo est en cours de développement, en fait le travail est loin d'être terminé et de ce fait il n'y a pas de package disponible, mais on peut travailler avec la version en cours.

Pour utiliser les fonctions de Dojo, voici ce que j'ai mis dans la section <head> de mon fichier html :

<script language="JavaScript" type="text/javascript">
    // Dojo configuration
    djConfig = {
        baseRelativePath: "../DOJO/",
        isDebug: true
    };
</script>

<script language="JavaScript" type="text/javascript" src="../DOJO/src/bootstrap1.js"></script>
<script language="JavaScript" type="text/javascript" src="../DOJO/src/hostenv_browser.js"></script>
<script language="JavaScript" type="text/javascript" src="../DOJO/src/bootstrap2.js"></script>

dans la variable baseRelativePath, il faut indiquer le répertoire contenant les fichiers Dojo, pour ma part, j'ai utilisé l'accès anonyme sur le serveur subversion pour récupérer les sources, cela me permet de mettre à jour a tout moment

Voici un petit exemple simple de code pour récupérer un fichier en texte brut avec dojo.io.bind() :

var sandbox = document.getElementById('sandbox');

dojo.io.bind({
    url: 'sample.txt',
    load: function(type, data, evt)
        {
        sandbox.innerHTML = data;
         },
    changeURL: true,
    mimetype: "text/plain"
});

Dans mon fichier HTML, il existe un élément <div id="sandbox"></div> qui sera rempli avec le contenu du fichier sample.txt. La propriété changeURL vous permet d'indiquer à Dojo qu'il doit changer l'url à chaque changements sur votre page, c'est très utile pour gérer les boutons suivant et précédent du navigateur.

Dans la propriété mimetype, on peut utiliser : text/plain, text/html, text/xml, text/javascript.

progressive enhancement

Maintenant que le principe est compris, voyons comment cela peut s'utiliser sur un vrai site, c'est à dire accessible à tous. Les techniques de "progressive enhancement" liées au javascript ne sont pas nouvelles, la différence ici est que le serveur doit fournir des contenus différents suivant la configuration du client.

Je modifie mon exemple pour que la chose soit possible, voici la fonction javascript que je vais utiliser :

function jsRequest(requesturl){
var sandbox = document.getElementById('sandbox');

dojo.io.bind({
    url: requesturl+'?jsRequest',
    load: function(type, data, evt)
        {
        sandbox.innerHTML = data;
         },
    changeURL: true,
    mimetype: "text/plain"
});
}

Vous pouvez remarquer qu'avec cette fonction, je peut charger le contenu de mon élément HTML sandbox avec un fichier que je passe en paramètre. Voici comment je vais l'utiliser dans le HTML :

<div id="sandbox"></div>
<a href="sample.php" onclick="jsRequest(this.href);return false;">Do it now</a>

Explications : quand je clique sur le lien Do it now et si javascript n'est pas actif sur mon navigateur, je me dirigerais tout simplement sur une nouvelle page qui sera fournie par le fichier sample.php, en revanche, si javascript est disponible, la fonction jsRequest() ira chercher les donnés sur le serveur en utilisant le même fichier PHP mais en ajoutant un paramètre : sample.php?jsRequest.

Dans mon code PHP je peut travailler de la manière suivante :

if (isset($_GET['jsRequest'])) {
  echo 'Ajax powered';
}
else {
  echo 'I must return all the page because Ajax support is missing here';
}

Explications : dans le cas ou Ajax est supporté par le client, le script serveur recevra le paramètre jsRequest dans l'url, il devra donc renvoyer au client uniquement la partie qui doit être afficher dans l'élément HTML sandbox, par contre s'il ne reçoit pas de paramètre, le serveur devra envoyer au client la totalité de la page.