a Instancier un objet XHR

Pour instancier (créer, déclarer) un objet XHR, on procède de la même façon que pour n'importe quel objet JavaScript à savoir avec le mot-clé new :

    
    var xhr = new XMLHttpRequest();
    

Les versions d'Internet Explorer inférieures à la version 7 requièrent toujours une instanciation via un contrôle ActiveX. Il y a deux façons d'instancier un objet XHR avec un contrôle ActiveX et elles dépendent de la version d'XMLHTTP utilisée. Pour faire simple, on va utiliser un try...catch , l'instanciation indiquée dans le try étant la plus récente :

    
    
    try {
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e)  {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    

Pour faire un script homogène, rassemblons ce code en un seul, en prenant soin de tester la prise en charge des différentes méthodes d'instanciation :

    
    var xhr = null;
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return;
    }
    

Si par la suite nous devons créer plusieurs requêtes ajax, il est intéressant de créer une fonction qui retournera l'objet XMLHttpRequest instancié

    
    function getXMLHttpRequest() {
        var xhr = null;

        if (window.XMLHttpRequest || window.ActiveXObject) {
            if (window.ActiveXObject) {
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            } else {
                xhr = new XMLHttpRequest();
            }
        } else {
            alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
            return null;
        }

        return xhr;
    }
    

Pour instancier un objet XHR, il suffira de faire :

    
    var xhr = getXMLHttpRequest();
    

b Envoi d'une requête HTTP

Dans un premier temps, il faut définir les modalités d'envoi avec la méthode open , et on l'enverra ensuite avec la méthode send :

    
    
    xhr.open("GET", "handlingData.php", true);
    xhr.send(null);
    
    

Si vous utilisez la méthode POST, vous devez absolument changer le type MIME de la requête avec la méthode setRequestHeader , sinon le serveur ignorera la requête :

    
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    

Cette dernière ligne doit être placée après la ligne contenant la méthode open !

    
    
    var sVar1 = encodeURIComponent("contenu avec des espaces");
    var sVar2 = encodeURIComponent("je vois que vous êtes un bon élève... oopa !");
    
    xhr.open("GET", "handlingData.php?variable1=" + sVar1 + "&variable2= " + sVar2, true);
    xhr.send(null);
    

c Récupération des données

En vue de cela, il va donc nous falloir détecter les changements d'état pour savoir où en est la requête. Pour cela, on va utiliser la propriété onreadystatechange, et à chaque changement d'état (state en anglais), on regardera lequel il s'agit :

    
    var xhr = getXMLHttpRequest();
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            alert("OK"); // C'est bon \o/
        }
    };
    
    xhr.open("GET", "handlingData.php", true);
    xhr.send(null);
    

On utilise readyState pour connaître l'état de la requête. En addition, nous devons aussi vérifier le code d'état (comme le fameux code 404 pour les pages non trouvées ou le code 500 pour l'erreur de serveur) de la requête, pour vérifier si tout s'est bien passé. Pour cela, on utilise la propriété status. Si elle vaut 200 ou 0 (aucune réponse, pratique pour les tests en local, sans serveur d'évaluation), tout est OK.

    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            alert(xhr.responseText); // Données textuelles récupérées
        }
    };
    

Pour terminer, il reste à traiter les données reçues dans la réponse. Ce traitement peut-être exécuté directement dans la fonction onreadystatechange, même si l'idéal reste de créer une fonctionn de callback, qui sera dédiée au traitement des données.

    
    function request(callback) {
        var xhr = getXMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                callback(xhr.responseText);
            }
        };

        xhr.open("GET", "handlingData.php", true);
        xhr.send(null);
    }
    
    function readData(sData) {
        // On peut maintenant traiter les données sans encombrer l'objet XHR.
        if (sData == "OK") {
            alert("C'est bon");
        } else {
            alert("Y'a eu un problème");
        }
    }
    
    request(readData);