Présentation de Ajax

Introduction

AJAX, ou Asynchronous* JavaScript And XML désigne une METHODE informatique de développement d'applications Web.
Ce n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies couramment utilisées sur le Web (XML et JavaScript). Ajax est une façon d’utiliser intelligemment certaines technologies web éxistantes.

*Le terme "Asynchronous", asynchrone en français, signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Tandis qu'en mode synchrone, le navigateur serait gelé en attendant la réponse du serveur.

Sans AJAX

La création de pages web dynamiques (qui s'affichera différemment selon les intéractions avec l'utilisateur) se fait coté serveur. Les modifications ou interrogations faites par le lecteur de la page sont des requètes envoyées au serveur, faisant qu'il crée une nouvelle page et l'envoie au navigateur à travers le réseau Internet.

Avec Ajax

Ajax permet d'effectuer des traitements sur le poste client à partir de quelques informations prises sur le serveur.
Il permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière. Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu, etc...
Les applications sont alors plus réactives, la quantité de données échangées entre le navigateur et le serveur HTTP étant fortement réduite. Le temps de traitement de la requête côté serveur est également légèrement réduit, une partie du traitement étant réalisé sur l'ordinateur d'où provient la requête.
L’idée principale derrière Ajax est de proposer des interfaces plus réactives et plus riches aux utilisateurs de sites web.

Composition

- HTML pour la structure sémantique des informations (comme une page web normale)
- CSS pour la présentation des informations (pour la rendre plus attrayante)
- JavaScript et XML alors ???

L'objet XmlHttpRequest de JavaScript permet de faire des requêtes HTTP afin de récupérer des données du serveur web au format XML, sans pour autant quitter celle où l’on se trouve.
On accède aux éléments de la page ou du formulaire ou aux éléments du fichier xml avec la recommandation DOM (Document Object Model) du W3C, avec la méthode getElementByTagName par exemple...

Pour info : le Drag & Drop existait bien avant l'apparition d'AJAX puisque il est assuré entièrement par Javascript et le CSS, AJAX a seulement rajouté le fait de pouvoir enregistrer, par exemple, la dernière position des élements pour que l'utilisateur retrouve les objets à la place où ils les avaient laissé lors de sa dernière visite.

Inconvénients

- Utilisant des techniques apparentées au HTML dynamique, les applications AJAX doivent être testées sur chaque navigateur.
- Le chargement de la première page peut être pénalisé si l'application utilise une bibliothèque AJAX volumineuse (certains pèsent plus de 500 ko !).
- Le Javascript dois etre activé dans le navigateur (ce qui le cas pour environ 90 % des utilisateurs).
- S'il utilise Internet Explorer 5 ou 6 pour Windows, il doit aussi autoriser les ActiveX.
- Un inconvénient de référencement car la page étant générée dynamiquement, les robots d'indexation ne sont pas en mesure de l'indexer.
- L'aspect asynchone fait que les modifications se font avec un délai (si le traitement sur le serveur est long), ce qui peut être déconcertant.
- Le bouton de retour en arrière peut se trouver obsolète.

Fonctionnement

Tout commence par un évènement, une action de l'utilisateur (par exemple on appuie sur un bouton du formulaire), qui provoquent l'appel d'une fonction associée à l'élément de la page (ici notre bouton).

La fonction JavaScript identifie les éléments de la page grâce au DOM et fait une requête au serveur par l'objet XMLHttpRequest.

Pour cela cette classe dispose de deux méthodes:
- open: établit une connexion.
- send: envoie une requète au serveur.

Ensuite on récupère les infos fournies par le serveur.

Elles sont récupérées dans les champs responseXml ou responseText de l'objet XmlHttpRequest.

Il faut biensûr attendre la disponibilité des données. Pour cela on regarde l'attribut readyState de XMLHttpRequest.

Les états de readyState sont les suivants (seul le dernier est vraiment utile):
* 0 = Non initialisé
* 1 = La méthode open() a été appelée avec succès (la connexion est établie)
* 2 = La méthode send() a été appelée avec succès (les données sont envoyées)
* 3 = En train de recevoir (mais le transfert n'est pas terminé)
* 4 = Les données sont chargées.

Enfin on modifie notre page en fonction des données récupérées sur le serveur.

L'objet XMLHttpRequest à la loupe

Attributs:

readyState                 le code d'état passe successivement de 0 à 4 qui signifie "prêt".
status                        200 est ok, 404 si la page n'est pas trouvée.
statusText                  message accompagnant le code de réponse.
responseText              contient les données chargées dans une chaîne de caractères.
responseXml               contient les données chargées sous forme xml, les méthodes de DOM servent à les extraires.
onreadystatechange     propriété activée par un évènement de changement d'état. On lui associe une fonction.

Méthodes:

open(mode, url, boolean,[login,[passd]]) mode: type de requête GET ou POST
                                                          url: du formulaire ou d'un fichier avec son chemin sur le disque.
                                                          boolean: true (asynchrone) / false (synchrone).
                                                                en option on peut ajouter un login et un mot de passe.
send("chaine")                                     Effectue la requête (envoyer null pour une commande GET)
abort()                                                Abandonne la requête.
getAllResponseHeaders()                       Renvoie l'ensemble de l'entête de la réponse sous forme de chaîne de caractères.
getResponseHeader("champEntete")       Renvoie la valeur d'un champ d'entête HTTP.
setRequestHeader("champ", "valeur")     Assigne une valeur à un champ d'entête HTTP qui sera envoyé lors de la requête.

            Exemple de requêtes

    Une requête de type POST :
        xmlhttp.open("POST", "/test.php",true);
        xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xmlhttp.send("var1=valeur1&var2=valeur2");

    Une requête de type GET :
        xmlhttp.open("GET", "/test.php?var1=valeur1&var2=valeur2",true);
        lhttp.send(null);

    Une requete de type GET mais pour lire dans un fichier XML

        xmlhttp.open("GET", "fichier.xml", true);
        xmlhttp.send(null);

Mise en pratique

 Nous allons faire une page html qui ira lire dans un fichier xml une info pour mettre à jour un champ texte lui appartenant quand on cliquera sur le bouton du formulaire, ceci évitant de recharger toute la page.

Le fichier.xml tout d'abord (pas besoin de commentaire tellement il est simple):

<?xml version="1.0" ?>
<root>
    Bonjour tout le monde
</root>

La page web ajax.html pas à pas :

 -------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="JavaScript">
         ...
    </script>
    <title>Ajax Demonstration</title>
</head>
<body>
    <p><h3>Ajax Demonstration</h3></p>
    <p>La page va lire dans le fichier fichier.xml sur le serveur et afficher l'informartion sans recharger toute la page.</p>
    <FORM name="ajax" method="POST" action="">           
          <p><INPUT type="BUTTON" value=" Recuperer l'info sur le serveur "  ONCLICK="submitForm()"></p>
          <p>Received:<input type="text" name="dyn" size="32" value=""></p>
    </FORM>
</body>
</html>

Une page web assez simple, contenant un formulaire dont un bouton (qui appelle la fonction submitForm() quand on clique dessus) et un champ nommé dyn qui est destiné a recevoir l'info lue du serveur.

----------------------- 

Il nous reste donc à écrire la fonction javascript submitForm() et la placer dans le code ou se trouve les ...

    function submitForm()
    {
        1 - Creation de l'objet XMLHttpRequest
        2-  On affecte à l'attribut onreadystatechange la fonction qui sera appelée à chaque changement d'état
        3- On ouvre la connexion et on envoi la requête
    }

             1 - Creation de l'objet XMLHttpRequest

        Il faut prevoir que l'utlisateur utilise IE ou un autre navigateur, il faut donc faire ainsi :

                var xmlhttp = null;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType)     {
                        xmlhttp.overrideMimeType('text/xml');
                    }
                }
                else if (window.ActiveXObject) {
                    try {
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch (e) {
                        try {
                            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {}
                    }
                }

           2-  On affecte à l'attribut onreadystatechange la fonction qui sera appelée à chaque changement d'état

        Nous on veut seulement mettre à jour le champ du formulaire quand on a récupéré la donnée du serveur.

            xmlhttp.onreadystatechange = function() {
                if(xmlhttp.readyState == 4) {
                    if(xmlhttp.status == 200) {
                        var doc = xmlhttp.responseXML;
                        var element = doc.getElementsByTagName('root').item(0);
                        document.ajax.dyn.value= element.firstChild.data;
                    }   
                    else {
                        document.ajax.dyn.value="Erreur: " + xmlhttp.status + " " + xmlhttp.statusText;
                    }   
                }
            };

 
            3- On ouvre la connexion et on envoi la requête

        Nous il s'agit simplement de lire dans le fichier.xml

            xmlhttp.open("GET", "fichier.xml", true);
            xmlhttp.send(null);   

"Voila vous n'avez plus qu'à mettre ces 2 fichiers sur un hebergeur ou un serveur apache en local ou encore le kit EasyPhp pour tester ;) "