XmlHttpRequest dit AJAX (suite)

accueil > Cours > AJAX > XmlHttpRequest dit AJAX (suite)

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

XMLHTTPREQUEST, $_POST et $_GET avec la même fonction

Nous avons vu dans le tuto précédent: XmlHttpRequest dit AJAX, qu'il était possible d'envoyer des requètes POST et GET grace à l'objet JavaScript XmlHttpRequest.
Il est donc tentant de faire une seule et même fonction, pour gérer ces deux type de variables
Petit rappel, les variables $_GET sont transmises par l'url, alors que les $_POST passent par l'entête HTML de la requête,(Header).

Voici à quoi ressemblera la fonction:

request(methode,url,param,cadre);

et la façon de l'utiliser:

Dans la page qui contient le script:
<a href="page.php_var=param1" 
onclick="request('GET','page.php_var=param1','','div1');return(false)" >ma var GET</a>
<a href="page.php" 
onclick="request('POST','page.php','var=param1','div1');return(false)" >ma var POST</a>

<div id="div1">affichage du resultat</div>

dans page.php
if($_GET['var']=="param1"){ print variable GET;}
if($_POST['var']=="param1"){ print variable POST;}

La fonction

  <script type="text/javascript">
function request(methode,url,param,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;
	}

		if(XHR != null){
		document.getElementById(cadre).innerHTML  ="Patientez...";
		}

		// envoie de la requête, methode plus url
		XHR.open(methode,url, true);
		// on teste si GET ou POST 
		if(methode=='POST'){
		// si POST envoi du header et des paramètres
		XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
		XHR.send(param);
		}else{
		XHR.send(null);
		}

		// 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)     {
	if(XHR.status == 200){
		// ecriture de la réponse
	document.getElementById(cadre).innerHTML = XHR.responseText;
			}
		}
	}


	// le travail est terminé
	return;
}
  </script>

précisions
Ce tuto n'est pas trop détaillé car il fait suite à celui ci: XmlHttpRequest dit AJAX dans lequel vous avez toutes les explications, et que je conseille de suivre en premier.
Attention à l'emplacement des parametres, qui est différent pour la methode GET et la methode POST.
Amusez vous bien, si vous avez quelques difficultées, n'hesitez pas à utiliser le forum.

---

Commentaires