Astuce javascript

Comme convenu, voici une astuce sur l'utilisation de l'objet XMLHttpRequest en javascript.
Comme il y a beaucoup de choses à dire, sur cette astuce je me suis contenté de donner une fonction suffisamment générique pour être utilisée de façon plus ou moins "standard" dans les scripts, avec un exemple d'utilisation à l'appui.

Pour compléter cette astuce, je vais essayer de mettre en place un dossier suffisamment complet sur l'objet XMLHttpRequest et vous le soumettre (car il me semble ne pas en avoir vu à ce sujet dans la section Dossier)

Voici donc l'astuce:


________________________________________

----- Ajax avec l’objet XMLHttpRequest -----

Cette astuce vise à simplifier votre utilisation de l’objet XMLHttpRequest de Javascript par la proposition d'une fonction javascript générique à inclure dans vos pages.
Ceci dans les buts suivants :
- mettre à jour des données au sein de votre base de données
- rafraîchir tout ou partie d’une page web de votre site

Tout cela bien sûr de manière transparente pour l’utilisateur.

1- Rappel de ce qu’est l’objet XMLHttpRequest

Une bonne connaissance de ce type d’objet est requise si vous souhaitez comprendre correctement son mécanisme. Pour ce faire, vous pouvez lire les dossiers suivants : lien sur dossier existant ou a faire

2 - La fonction Javascript 'callScript'

function callScript ( scriptName, args ){
	
	var xhr_object = null; 
	     
	// ### Construction de l’objet XMLHttpRequest selon le type de navigateur
	// Cas des navigateurs de type Netscape (Firefore, Conqueror, etc.)
	if(window.XMLHttpRequest) 
	   	xhr_object = new XMLHttpRequest(); 
	// Cas du navigateur Internet Explorer
	else if(window.ActiveXObject)
	  	 xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	// Cas des navigateurs ne comprenant pas cette technologie (anciens navigateurs)
	else { 
// XMLHttpRequest non supporté par le navigateur 
	   	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    		 return; 
	} 
	 
	xhr_object.open("POST", scriptName, true);
	
	//  Définition du comportement à adopter sur le changement d’état de l’objet 
// XMLHttpRequest
	xhr_object.onreadystatechange = function() { 
		// Etat : requête terminée, réponse récupérée
	  	 if(xhr_object.readyState == 4) {
			//alert(xhr_object.responseText); // DEBUG MODE
			// ### Interprétation du retour du script appellé
			// Mode d’interprétation 1: on affiche dans la page le retour
// comme s’il s’agissait de code HTML 
			//document.write(xhr_object.responseText);
			// Mode d’interprétation 2: on interprète le retour comme 
// s’il s’agissait de code javascript
			eval(xhr_object.responseText);
		 }
		return xhr_object.readyState;
	} 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	//  Envoi de la requête
	xhr_object.send(args);

}

Arguments de la fonction :
- ScriptName : chemin d’accès au script PHP que vous souhaitez appeler.
- Args : liste des paramètres passés au script PHP appelé par la fonction.


3 - Exemple d'utilisation

L'utilisation d'une telle fonction se fait principalement en trois parties. Cet exemple illustre le fonctionnement global, en affichant les données rentrées par l'utilisateur dans la page principale.

La page principale, 'index.php' :

<?php
include "fonctions.js";
?>

<BR>
Nom : <input type='text' id='nom' value=''/>
<BR>
Prénom : <input type='text' id='prenom' value=''/>
<BR>
<input type='button' value='Executer' onclick='executeSample()'/>
<BR>

Le fichier javascript 'fonctions.js' :

<script language="javascript">

function callScript ( scriptName, args ){
	// --- Code donné plus haut
}

function executeSample (){
	// --- Récupération des paramètres nécessaire au script PHP
	var _nom = document.getElementById("nom").value;
	var _prenom = document.getElementById("prenom").value;
	var _data = "nom="+_nom+"&prenom="+_prenom;
	// --- Appel au script PHP de traitement
	callScript("traitement.php",_data);
}
</script>

Le fichier de traitement PHP appelé par la fonction javascript, 'traitement.php' :

<?php

// --- Récupération des paramètres POST
if ( isset($_POST["nom"]) && !empty($_POST["nom"]) )
	$nom = $_POST["nom"];
else
	$nom = null;
	
if ( isset($_POST["prenom"]) && !empty($_POST["prenom"]) )
	$prenom = $_POST["prenom"];
else
	$prenom = null;

	
// --- Exécution du traitement
if ( $nom != null && $prenom != null ){
	// --- Le taitement consiste à retourner un code javascript qui sera interpréter au retour de
	// --- l'appel de ce script PHP.
	// --- Le code javascript ici affiche simplement les paramètres envoyés dans une pop-up
	echo "alert('Nom=".$nom." ,Prenom=".$prenom."');";
}

?>

________________________________________