XmlHttpRequest dit AJAX

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!

Le 12/05/2008 par 3run0
http://www.graphiks.net

---

Les commentaires

• Le 26-06-2007, danou9 a écrit :
  merci pour votre exemple qui marche du premier coup
  par contre j'ai un probleme avec les accents francais
  
  dans votre exemple, vous utilisez GET, donc il n'y a pas besoin de repréciser l'entete
  
  comment faire?
  
  merci

 
• Le 11-07-2006, zack a écrit :
  vraiment fascinant t'as encore d'autres idées?

 
• Le 11-03-2006, JER3My a écrit :
  Enfin c'est une erreur php quoi

 
• Le 11-03-2006, JER3My a écrit :
  Ah oui, j'avais totalement zappé que c'était dans une fonction, c'est bon je comprend alors.
  
  Ah oui au fait j'ai remarqué qu'en bas de l'article, il y a une erreur dans la date de rédaction : il s'affiche la date du jour et non la date de rédaction. Je chipote, je sais ^^

 
• Le 07-03-2006, 3run0 a écrit :
  Salut J3R3My, à propos de cadre et 'xmlhttp', la function dans laquelle on se trouve s'appele request(url,cadre) on aurais pus l'utiliser comme ceci request(url,'xmlhttp') mais dans ce cas elle ne sert plus qu'a un seul ID celui qui se nomme id="xmlhttp". Le but de la fonction est de pouvoir passer nimporte lequel.

 
• Le 06-03-2006, JER3My a écrit :
  Pas mal ce tuto, mais par contre t'as oublié de supprimer le return dans la deuxième portion de code.
  De plus, il me semble qu'il y a aussi une petite erreur ici si j'ai bien suivi (ce qui n'est pas sûr hein ^^) :
  
  document.getElementById(cadre).innerHTML = XHR.responseText; devrait plutôt être : document.getElementById(xmlhttp).innerHTML = XHR.responseText; car l'id du div qui recevra les données est "xmlhttp".
  
  Voila, sinon je crois que je vais commencer à m'amuser avec Ajax.

 
• Le 04-11-2005, 3run0 a écrit :
  v'là je l'ai viré. ;)

 
• Le 04-11-2005, Dayd a écrit :
  Cool, sauf le return dans ton premiere exemple ;)

 

Nom :

Texte :

Recopier ce code : ici