1. Services|
2. Références|
3. Articles|
4. Didacticiels|
5. Ressources|
6. Jobs|
7. Contact|
8. Termes|
9. Aide|
10. Sitemap|

Nos autres articles

Comprendre Ajax

ajax,XMLHttpRequest,asynchrone,javascript

Comprendre Ajax, est-ce si compliqué ? Non assurément ! Mais un petit survol est nécessaire.

En quelques mots…

L'idée d'Ajax est de permettre, au sein d'une page, de lancer des requêtes Internet de manière automatisée, sans requérir l'intervention de l'utilisateur, en réponse aux choix que celui-ci effectue.

Ajax, c'est donc essentiellement :

1. Lancer des requêtes
2. En réponse à des suscitations, des événements, des choix
3. Présenter le résultat

Un exemple illustrera parfaitement le propos : vous naviguez sur une page Internet qui répertorie des chanteurs. Lorsque vous choisissez un chanteur, vous voulez connaître la liste des CDs de ce chanteur. Simple !

Et bien, si le site a été programmé avec Ajax, une requête Ajax pourra être lancée sur le serveur lorsque vous aurez effectué le choix du chanteur (événement). La requête (donne-moi les CDs de tel chanteur) sera traitée par le serveur web qui vous renverra la réponse, en l'occurrence, la liste des CDs. Ladite liste des CDs sera alors intégrée à la page web que vous visualisiez.

La grande différence avec le web traditionnel, c'est que la réponse du serveur ne contiendra QUE l'information nécessaire (la liste des CDs du chanteur choisi) et non toute la page (entête, menus de navigation, pied de page, etc.). On fait donc l'économie de bande passante parce qu'on transfère moins de données entre le serveur HTTP et le navigateur du client.

Et tout cela est possible grâce à un simple objet : XMLHttpRequest.

XMLHttpRequest

XMLHttpRequest est l'objet Javascript qui permettra cette interaction. Dès que le choix du chanteur est fait, un petit script Javascript sera lancé pour créer la requête et demander au serveur l'information qu'on souhaite recevoir.

Il y a quatre temps à gérer :

1. La création de l'objet XMLHttpRequest
2. Formuler la requête pour le serveur (grâce à XMLHttpRequest)
3. Attendre la réponse (grâce à XMLHttpRequest aussi)
4. Intégrer la réponse

Créer l'objet XMLHttpRequest

Vous créerez un objet XMLHttpRequest dans un script Javascript. Plusieurs approches pourront {{—}} devront – être suivies pour ce faire, et cela en fonction de la version de votre navigateur. Voici l'approche la plus commune :

<script type="text/javascript">
    var oRequest = null;

    function BuildRequest()
    /*-------------------*/
    {
        if ( window.XMLHttpRequest )
        {
            oRequest = new XMLHttpRequest();
        }
        else if ( window.ActiveXObject )
        {
            try
            {
                oRequest = new ActiveXObject( "Msxml2.XMLHTTP" );
            }
            catch ( alternate_strategy )
            {
                oRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
            }
        }

        if ( oRequest == null )
        {
            alert( 'Cannot create an XMLHttpRequest object' );
        }
    }
</script>

La façon la plus courante de créer l'objet XMLHttpRequest est d'appeler le constructeur XMLHttpRequest(). C'est ce que nous avons mis en évidence dans le code ci-dessus. Si cela ne marche pas, alors on peut se tourner vers des ActiveX.

Plus d'informations sur l'objet XMLHttpRequest, vous pouvez consulter le site du W3C: The XMLHttpRequest Object.

Formuler la requête avec XMLHttpRequest

Formuler la requête revient à utiliser la méthode open() de l'objet XMLHttpRequest et de l'envoyer au serveur :

<script type="text/javascript">
    var oRequest = null;

    function BuildRequest()
    /*-------------------*/
    {
        if ( window.XMLHttpRequest )
        {
            oRequest = new XMLHttpRequest();
        }
        else if ( window.ActiveXObject )
        {
            try
            {
                oRequest = new ActiveXObject( "Msxml2.XMLHTTP" );
            }
            catch ( alternate_strategy )
            {
                oRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
            }
        }

        if ( oRequest == null )
        {
            alert( 'Cannot create an XMLHttpRequest object' );
        }
        else
        {
            oRequest.open( "GET","/scripts/requests/test.php",true );
            oRequest.send( null );
        }
    }
</script>

Ce que nous avons fait ici, c'est indiquer que nous souhaitons effectuer une requête de type GET (à contrario de POST), que nous souhaitons envoyer notre requête au script /scripts/requests/test.php, et que cela doit fonctionner de manière asynchrone (true).

Attendre la réponse

Attendre la réponse, d'autant que celle-ci est asynchrone, veut dire qu'il faut que l'objet XMLHttpRequest nous prévienne lorsqu'il a une réponse à nous donner. Cela exige de préciser le nom de la fonction qui va être déclenchée lorsque la réponse nous parviendra.

<script type="text/javascript">
    var oRequest = null;

    function BuildRequest()
    /*-------------------*/
    {
        if ( window.XMLHttpRequest )
        {
            oRequest = new XMLHttpRequest();
        }
        else if ( window.ActiveXObject )
        {
            try
            {
                oRequest = new ActiveXObject( "Msxml2.XMLHTTP" );
            }
            catch ( alternate_strategy )
            {
                oRequest = new ActiveXObject( "Microsoft.XMLHTTP" );
            }
        }

        if ( oRequest == null )
        {
            alert( 'Cannot create an XMLHttpRequest object' );
        }
        else
        {
            oRequest.onreadystatechange = InformMe;
            oRequest.open( "GET","/scripts/requests/test.php",true );
            oRequest.send( null );
        }
    }

    function InformMe()
    /*---------------*/
    {
        alert( "An answer has been provided" );
    }
</script>

Mais il se pourrait bien que dès que InformMe est invoquée, la réponse soit incomplète. Il faut donc qu'on soit sûr que nous ayons tout reçu :

<script type="text/javascript">
    var oRequest = null;
    function InformMe()
    /*---------------*/
    {
        if ( oRequest )
        {
            /* 0 = Uninitialized */
            /* 1 = Loading */
            /* 2 = Loaded */
            /* 3 = Interactive */
            /* 4 = Completed */
            if ( oRequest.readyState == 4 )
            {
                /* 100 = continue */
                /* 101 = switching protocols */
                /* 200 = OK */
                /* 404 = Not found */
                /* ... */
                if ( oRequest.status == 200 )
                {
                    alert( "I have everything I need" );
                }
                else
                {
                    alert( "Problem retrieving data" );
                }
            }
        }
    }
</script>

Intégrer la réponse

Maintenant que nous avons reçu la réponse en droite provenance du serveur, il faut l'intégrer à l'endroit où nous la souhaitons. Imaginons que cet endroit soit une division (<div id="test-xml">…</div>) de notre page, la division appelée "test-xml".

<script type="text/javascript">
    var oRequest = null;
    function InformMe()
    /*---------------*/
    {
        if ( oRequest )
        {
            /* 0 = Uninitialized */
            /* 1 = Loading */
            /* 2 = Loaded */
            /* 3 = Interactive */
            /* 4 = Completed */
            if ( oRequest.readyState == 4 )
            {
                /* 100 = continue */
                /* 101 = switching protocols */
                /* 200 = OK */
                /* 404 = Not found */
                /* ... */
                if ( oRequest.status == 200 )
                {
                    szData = oRequest.responseText;
                    oDiv = document.getElementById( 'test-xml' );
                    if ( oDiv )
                    {
                        oDiv.innerHTML = szData;
                    }
                }
                else
                {
                    alert( "Problem retrieving data" );
                }
            }
        }
    }
</script>

Et maintenant … le tout en real time

Pour que vous vous rendiez compte de la manière dont cela fonctionne, voilà deux petits liens qui vont vous permettre de retrouver la date et l'heure de notre serveur. Vous serez émoin de ce que seuls les contenus nécessaires sont rechargés et non toute la page. C'est l'avantage de Ajax ! À vous de tester.

1. Date du serveur
2. Heure du serveur

Et Vae Soli! dans tout cela ?

L'intégration d'Ajax dans Vae Soli! a été réalisée grâce à l'île de contenu LSContentsAjax.

Pour bénéficier des possibilités d'Ajax dans une page, rien de plus simple en effet puisqu'il suffit de composer une île et de la mentionner dans le géorama du site comme dans l'exemple suivant :

<Archipelago id="ecmascripts"   active="yes" category="ecma">
    <Island id="ajax" active="yes" class="LSContentsAjax">
        <param name="xmlrequest-create">BuildRequest</param>
        <param name="xmlrequest-inform">InformMe</param>
        <param name="xmlrequest-name">oXMLReq</param>
        <param name="xmlrequest-writeto">test-xml</param>
    </Island>
</Archipelago>

Et de plus, la page ne contient aucune erreur : elle est parfaitement validée par le W3C …