XmlHttpRequest dit AJAX (suite)

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.

Le 12/05/2008 par 3run0

---

Les commentaires

• Le 26-09-2007, dadavy a écrit :
  Je connais rien encore sur AJAX ,pourrais tu un peut plus clair ie avec plus d'explication,merci bcp

 
• Le 08-07-2007, DMX a écrit :
  Ouais c'est pas mal comme truc ;)
  Par contre si je devais critiquer tes deux tutos sur AJAX, c'est le manque d'expliquations, personelement je n'y connais rien et j'essaye de m'instruire, c'est vrai que tes tutos me serviront, mais je penses que si tu expliquait vraiment tout ce que l'on utilise dans la fonction je m'en sortirai mieux dans mon apprentissage ;)
  Merci

 

Nom :

Texte :

Recopier ce code : ici