AJAX - L'objet XMLHttpRequest

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest à l'exception de certaines version d'Internet Explorer qui utilisent un ActiveXObject.
L'objet XMLHttpRequest permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs.

Attributs de l'objet XMLHttpRequest


Attribut readyState   
La propriété readyState renvoie l'état (chargement) du document qui passe successivement de 0 à 4.
  • 0: non initialisé - N'a pas encore commencé à charger.
  • 1: connexion établie.
  • 2: requête reçue.
  • 3: réponse en cours.
  • 4: terminé.

Attribut status   
La propriété status renvoie le code de statut HTTP de la requête.
  • 200 si c'est ok.
  • 403 si l'accès est refusé.
  • 404 si la page na pas été trouvée.
  • etc...Liste : http://fr.wikipedia.org/wiki/Liste_des_codes_HTTP.

Attribut responseText   
La propriété responseText contient les données chargées dans une chaîne de caractères.

Attribut responseXml   
La propriété responseXml contient les données chargées sous forme XML, les méthodes de DOM servent à les extraire.

Attribut onreadystatechange   
La propriété onreadystatechange est activée par un évènement de changement d'état. On lui assigne une fonction.

Attribut setRequestHeader("nom","valeur")
La propriété setRequestHeader assigne une valeur à un header HTTP qui sera envoyé lors de la requête et est employé quand on utilise la méthode POST.

Exemple :
mavariable.setRequestHeader("Content-type","application/x-www-form-urlencoded");

Méthodes de l'objet XMLHttpRequest


Méthode open()
open(mode, url, boolean);
La méthode open() indique le type de demande, l'URL et si la demande doit être traitée de manière asynchrone ou non. En option, on peut également ajouter un login et un mot de passe.

mode: le type de demande: GET ou POST.
url: l'emplacement du fichier sur le serveur.
boolean: true (asynchrone) ou false (synchrone).

Méthode send()
send(chaîne);
La méthode send envoie une requête au serveur.
chaîne: Seulement utilisé pour les requêtes POST.
Quand la méthode open utilise "GET" la méthode send vaut "null" soit send() ou send(null).

Méthode abort()
La méthode abort() permet d'annuler le processus d'envoi et de récupération.
abort();
Méthode getResponseHeader()
La méthode getResponseHeader(valeur) permet de récupérer les informations passer dans l'entête HTTP.
var contType = mavariable.getResponseHeader("Content-Type");
var contLength = mavariable.getResponseHeader("Content-Length");
var lastMod = mavariable.getResponseHeader("Last-Modified");
alert ("Content-Type: " + contType + "\n" + 
       "Content-Length: " + contLength + "\n" +
       "Last-Modified: " + lastMod);

Créer un objet XMLHttpRequest

Tous les navigateurs modernes (Internet Explorer 7 et plus, Firefox, Chrome, Safari et Opera) ont un objet XMLHttpRequest intégré.

Pour créer un objet XMLHttpRequest on utilise la syntaxe suivante :
variable = new XMLHttpRequest();
Les anciennes versions d'Internet Explorer (IE5 et IE6) utilise quand à eux un objet ActiveX dont la syntaxe est :
variable = new ActiveXObject("Microsoft.XMLHTTP");
Pour gérer tous les navigateurs, il faut donc vérifier si le navigateur prend en charge l'objet XMLHttpRequest ou un ActiveXObject via ce que l'on appel une instance.

Exemple :
var mavariable;
 
if(window.XMLHttpRequest){
  // code pour IE7+, Firefox, Chrome, Opera, Safari
  mavariable = new XMLHttpRequest();
  }
  else{
  // code pour IE6, IE5
  mavariable = new ActiveXObject("Microsoft.XMLHTTP");
  }
On peut utiliser également les exceptions :
var mavariable; 
 
if(window.ActiveXObject){
    //On teste IE7 ou supérieur
    try{
mavariable = new ActiveXObject("Msxml2.XMLHTTP");
    }
    //Si une erreur est levée, alors c'est IE 6 ou inférieur
    catch(e){   
 mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
Pour ce simplifier la tache, on peut créer ce que l'on nomme une fonction d'instance pour vérifier la compatibilité avec les navigateurs. Dans cet exemple la fonction ce nomme objet_XMLHttpRequest :
function objet_XMLHttpRequest()
{
    //On déclare une variable "mavariable" à null
    var mavariable = null;
    //Teste si le navigateur prend en charge les XMLHttpRequest
    if (window.XMLHttpRequest || window.ActiveXObject){
        // Si Internet Explorer alors on utilise les ActiveX
        if(window.ActiveXObject){
            //On teste IE7 ou supérieur
            try{
                mavariable = new ActiveXObject("Msxml2.XMLHTTP");
            }
            //Si une erreur est levée, alors c'est IE 6 ou inférieur
            catch(e){
                mavariable = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        //Navigateurs récents (Firefox, Opéra, Chrome, Safari, ...)
        else{
            mavariable = new XMLHttpRequest();
        }
    }
    //XMLHttpRequest non supporté par le navigateur
    else{
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    //On retourne l'objet mavariable
    return mavariable;
}
Pour créer un objet, il faut juste déclarer son nom ("objet1" par exemple) et faire appel à la fonction d'instance :
var objet1 = objet_XMLHttpRequest();
Voir/déposer un commentaire (0) | Signaler un problème