<html>
<head>
<script type="text/javascript">
function makeRequest(url,nom_champ_poste,id_lire,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_lire);
data=nom_champ_poste+"="+obj.value;
http_request.send(data);
}
function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//ecriture dans le div, si c'est dans un input il faut utiliser .value au lieu de .innerHTML
var reponse=http_request.responseText;
//alert(reponse);
document.getElementById(id_ecrire).innerHTML=reponse;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="champ1" id="champ1" value=""><br />
<input type="button" name="bouton_Ajax" value="Appeller Ajax" onClick="makeRequest('test.php','val_champ1','champ1','reponse');">
<br />
<div id="reponse"><!-- ajax va ecrire là --></div>
</form>
</body>
et le script php appelé:test.php
<?php
$val_champ1=$_POST['val_champ1'];
//on va faire une réponse bidon:
echo "Vous avez saisi ".$val_champ1;
?>