Utiliser AJAX tres simplement

Une bonne répartition des ressources doit solliciter plus les postes clients, plutôt que le serveur et le réseau.

Ajax permet d'effectuer des traitements sur le poste client (avec JavaScript) à partir d'informations prises sur le serveur.

La création de pages web dynamiques auparavant se faisait coté serveur. Les modifications ou interrogations faites par le lecteur de la page sont des requêtes envoyées au serveur, faisant qu'il crée une nouvelle page et l'envoie au navigateur à travers le réseau Internet en utilisant des services web, ou un langage intégré dans la page comme PHP. Ce n'est plus nécessaire.

Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière.

Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu, etc.

Utilisons d'abord la fonction Javascript qui permet de generer l'objet XMLHTTP selon le navigateur...

function getXhr() {
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
	               xhr = new ActiveXObject("Msxml2.XMLHTTP");
	           } catch (e) {
	               xhr = new ActiveXObject("Microsoft.XMLHTTP");
	           }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	}
	return xhr;
} 

Nous allons envoyer un formulaire qui appel un fichier PHP sans recharger la page grace a la fonction javascript suivante

function appelphp()
{
	// instance de l'objet XMLHTTP 
	var xhr = getXhr();
	// definition du type d'envoi du formulaire
	var method = "POST";
	// Fichier PHP auquel est envoyée la variable  du formulaire 
	var filename = "./tutoajax1.php";
    // recuperation du resultat du fichier PHP
	var data = "valeur=" + document.getElementById('valeur').value +"";	
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4) {
			if(xhr.status == 200) {
				document.getElementById('password').innerHTML = xhr.responseText;
			}
		}
	};

	xhr.open(method, filename, true); 
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
	xhr.send(data);
	
	return false;
}

Creons le formulaire avec le DIV ou l'on affichera le resultat du fichier PHP

<form action='' method='post' onSubmit='return appelphp()'>
<input type='text' id='valeur' />
<input type='submit' />
</form>
<div id='password'></div>

a l'interieur du fichier php nous allons faire un simple echo de la valeur envoyé via le formulaire

<?php
echo $_POST['valeur'];
?>

Voici le resultat :