XmlHttpRequest dit AJAX

accueil > Cours > AJAX > XmlHttpRequest dit AJAX

Cours / tutoriel écrit le 17-06-2010 par 3run0

Une description rapide:

XMLHTTP est un objet JavaScript utilisé depuis 2001 par Windows/InternetExplorer.
XmlHttpRequest permet de récupèrer des données sur le serveur,
de les afficher grace à javascript, ceci sans rechargement de la page,
d'où sont grand intéret lorsqu'on veut mettre à jour qu'une partie de celle ci.

Présentation:

L'objet XmlHttpRequest est accéssible avec différents navigateur récents de cette façon:

var XHR = new XMLHttpRequest();
var XHR = new ActiveXObject("Microsoft.XMLHTTP"); // IE
var XHR = new ActiveXObject("Msxml2.XMLHTTP"); // IE

Methodes	Descriptions
open(method,url,true)	Met fin à la requête en cours et en prépare une nouvelle, on indique si la méthode est GET ou POST l'URL et true par defaut pour une transmition assynchrone des donnée (le traitement du script continue juste aprés que la méthode de send() est appelée, sans attendre une réponse.)
send()	Envoie une requête
abort()	Stoppe la requête
setRequestHeader()	Assigne un couple nom/valeur à l'en-tête qui accompagne la requête
getResponseHeader()	Récupère la valeur d'une chaîne de l'en-tête de réponse
getAllResponseHeader()	Récupère l'ensemble des en-têtes de réponse

Propriétés	Descriptions
status	code serveur
statusTest	La chaîne qui accompagne le code serveur
readyState	Un entier indiquant l'état de l'objet. qui pourra étre utilisé pour connaitre l'état de la requête 0 = non initialisé 1 = en cours de chargement 2 = chargé 3 = interaction 4 = terminé
onreadystatechange	Gestionnaire d'évènement pour chaque changement d'état de l'objet
responseText	Réponse de la requête
respondeXML	Réponse XML

Exemple de son utilisation

D'abord testons le navigateur:

  <script language="javascript">
// ici on verifie si le navigateur connait XmlHttpRequest
	var XHR = null;

	if(window.XMLHttpRequest) // Firefox
		XHR = new XMLHttpRequest();
	else if(window.ActiveXObject) // Internet Explorer
		XHR = new ActiveXObject("Microsoft.XMLHTTP");
	else {
	// boite d'alerte
	alert("Votre navigateur ne prend pas en charge XmlHttpRequest");
	}

  </script>

Ceci étant fait passons aux choses sérieuses:

Nous allons créer deux pages:

1) ajax.html qui contiendra

  <script language="javascript">
function request(url,cadre) {
	var XHR = null;

	if(window.XMLHttpRequest) // Firefox
		XHR = new XMLHttpRequest();
	else if(window.ActiveXObject) // Internet Explorer
		XHR = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return;
	}
		// envoie de la requête, methode GET et de l'url
	XHR.open("GET",url, true);

		// on guette les changements d'état de l'objet
	XHR.onreadystatechange = function attente() {

		// l'état est à 4, requête reçu !
	if(XHR.readyState == 4)     {

		// ecriture de la réponse
	document.getElementById(cadre).innerHTML = XHR.responseText;
   }
	}
	XHR.send(null);		// le travail est terminé
	return;
}
  </script>

<div id="xmlhttp">zone de test</div> => le div qui recevra les données
<a href="" onclick="request('donne.php_quoi=ha','xmlhttp');return(false)">lien 1</a><br />
<a href="" onclick="request('donne.php_quoi=ho','xmlhttp');return(false)">lien 2</a>

2) donne.php qui contiendra

	<?php
	if($_GET['quoi']=="ha") {
	print "bonjour toi";
	}
	
	if($_GET['quoi']=="ho") {
	print "aurevoir";
	}
	?>

request(url,cadre); est la fonction que nous allons utiliser
dans laquelle nous passons l'adresse de la page qui recevra la requête sur le serveur (url),
mais aussi l'id de la balise HTML dans laquelle nous voulons afficher le résultat (cadre).
Donc vous l'aurez compris, vous pouvez interroger n'importe quelle page du serveur,
avec les variables que vous voudrez et afficher le résultat dans n'importe quel élément HTML de votre page web
grace à la même fonction JS que vous activerez avec n'importe quel gestionnaire d'évènement!
onload, onclick, onmouseover, onmousemove etc etc ...

Amusez vous bien et bonnes réalisations!

---

Commentaires