Créer un objet XMLHttpRequest

if(window.XMLHttpRequest)
{ 
    var xhr = new XMLHttpRequest(); 
}

• open: établit une connexion.
• send: envoie une requête au serveur.

• responseXml pour un fichier XML ou
• responseText pour un fichier de texte bru.

• 0: non initialisé.
• 1: connexion établie.
• 2: requête reçue.
• 3: réponse en cours.
• 4: terminé.

1. Une page HTML, qui contiendra le nécessaire pour déclencher l’appel Ajax et qui permettra la prise en compte du résultat.
2. Un script Javascript, pour réaliser l’appel et la récupération du résultat
3. Un programme côté serveur, qui sera chargé du traitement PHP dans ses exemples.
4. Éventuellement, vous pouvez aussi utiliser une feuille de style CSS et intégrer le code Javascript directement à la page HTML

1. Page HTML

• Pour notre exemple, la page HTML qui intégrera des fonctionnalités Ajax permet :
• L’appel à une portion de code Javascript qui réalisera l’appel ; Ceci peut être fait lors du clic sur un lien, par exemple
• L’affichage du résultat de l’appel ; dans un élément div, par exemple
• Voici le lien qui appellera la fonction JS déclenchant l’appel :

<a href="" onclick="gestionClic(); return false;">
    Cliquez ici !
</a>

• Et le bloc au sein duquel sera affiché le résultat de celui-ci :

<div id="resultat">
valeur avant l'appel Ajax
</div>

2. Javascript : Appel Ajax

• Pour effectuer une requête asynchrone au serveur en utilisant l’objet XMLHttpRequest, nous allons toujours devoir suivre 4 étapes :
1. On crée un objet XMLHttpRequest.
2. On initialise notre requête, c’est à dire on choisit le mode d’envoi des données, l’URL à demander, etc.
3. On définir quelle fonction devra être appelée lors d’un événement sur cet objet (envoie de la requête).
4. On crée des gestionnaires d’événements pour prendre en charge la réponse du serveur.

Exemple

var xhr_object = new XMLHttpRequest(); 
xhr_object.open("GET", location.href, false); 
xhr_object.send(null);  
if (xhr_object.readyState == 4) alert("Requête effectuée !"); 

• ligne 1 : on crée une instance de l’objet XMLHTTPRequest
• ligne 2 : on spécifie la méthode de transmission des données, l’URL et le mode de transmission de la requête.
objetXMLHttpRequest.open(methode, urlEtParams, async);
Methode : en général, ‘GET’ ou ‘POST’. Détermine quel type de requête HTTP sera utilisée pour l’appel Ajax.
urlEtParams : l’URL du programme qui sera exécuté, argument (obligatoire) représente l’URL de destination de la requête, c’est-à-dire l’URL où on souhaite envoyer notre requête, éventuellement suivie d’une liste de paramètre, si l’on est en GET.
async : true pour déclencher un appel en arrière-plan (asynchrone); false pour un appel synchrone bloquant le navigateur.
• ligne 3 : on exécute la requête proprement dite ;
• Cette méthode prend un paramètre, qui peut valoir :
• null, dans le cas où l’appel se fait en GET
• Une liste de paramètres, de la forme "param1=valeur1&param2=valeur2&param3=valeur3", quand l’appel se fait en POST
• ligne 4 : on affiche une boîte d’alerte dès que la requête est terminée.
• L’objet xhr_object possède une propriété readyState qui prend successivement 5 valeurs récapitulées dans la liste suivante représentant les valeurs et leurs descriptions:
• 0 (uninitialized): Objet non initialisé
• 1 (loading): Début du transfert des données
• 2 (loaded): Données transférées
• 3 (interactive): Données reçues sont accessibles en partie
• 4 (complete): Données sont complètement accessibles

3. Programme côté serveur

• C’est le programme qui sera appelé