PHP c'est chouette et puissant. Mais n'en avez vous pas marre de tout le temps être obligé de recharger vos pages pour executer votre code ? Nous allons voir dans cet article comment une page web peut, en plus d'être générée dynamiquement, aussi être interactive sans rechargement grace au Javascript et sa fonction XmlHttpRequest.
COMMENT UTILISER L'OBJET XML HTTP REQUEST ?
Cet objet est initialisé en Javascript, donc sur l'ordinateur client, il a pour objectif d'exécuter un script distant et d'en retourner le résultat au navigateur. Ce qui veut, qu'au sein d'une page web, nous allons pouvoir exécuter X méthodes disponibles sur le serveur web. En fait, la fonction génére tout simplement une reqête HTTP.
Il y a 2 manières d'appréhender cette fonction :
- soit, vous êtes un as du
Document Object Model et vous retournez du XML à partir duquel vous générez dynamiquement votre page.
- soit, vous êtes comme moi, et vous n'avez pas le temps d'éplucher les spécifications du DOM et ses implémentations dans Javascript, et donc finalment, vous travaillez directement en HTML.
Voici une implémentation possible.
UNE FONCTION STANDARD POUR L'EXECUTION D'UN SCRI
function requete(GetOuPost,Url,Asynch,CorpsDuPost) {
/* ++++++++++++++++ Syntaxe : ++++++++++++++++
retour = requete("GET", "http://votre.domaine.net/test.php?mode=get", false/true, "");
retour = requete("POST", "http://votre.domaine.net/test.php", false/true, "mode=get");
retour contient soit le resultat de la requete soit false
GET : script.php?var1=param1&var2=param2 ...
ou
POST : script.php + CorpsDuPost = param1&var2=param2 ...
*/
var GetOuPost;
var Url;
var Asynch;
var CorpsDuPost;
var resultat;
var p = null;
if(window.XMLHttpRequest) p = new XMLHttpRequest();
else if (window.ActiveXObject) p = new ActiveXObject("Microsoft.XMLHTTP");
else{
alert("Impossible d'instancier XMLHttpRequest !!!");
return;
}
//p.onload = null;
p.open(GetOuPost, Url, Asynch);
if (GetOuPost = "POST") p.setRequestHeader("Content-type","application/x-www-form-urlencoded");
p.send(CorpsDuPost);
if ( p.status != "200" ) {
alert("Erreur de réception No " + p.status);
return false;
} else {
return p.responseText;
}
} // Fin fonction
EXPLICATION EN BREF...
Pour commencer, la variable "p" se voit attribuer l'objet XMLHttpRequest(). Attention, l'instanciation se fait de differente manière sur IE et Firefox (activX vs objet natif).
Ensuite, la méthode p.open se charge d'executer la requête HTTP sur l'URL fournie en paramètre. Dès lors, p.status sert à tester le code de retour de la requête : on attend bien enttendu un code 200 (OK).
Enfin, p.responseText va stocker le retour sous forme de texte. On peut aussi utiliser comme c'est expliqué un peu plus haut p.responseXML pour transporter du XML pur. Si vous recevez du HTML, alors, vous pouvez l'injecter dans une DIV grace à MonObjetDiv.innerHTML (methode non standard, mais ça marche) et si vous recevez du XML alors bon courage !!!
A vous de voir... déjà, faites un petit essai et découvrez cette nouvelle dimension. Fini le rechargement abusif des pages, mais attantion de ne pas monter une usine à gaz...
Pour ma part il va me falloir apprendre le DOM, c'est l'avenir.
EXPLICATION EN BREF...
Pour commencer, la variable "p" se voit attribuer l'objet XMLHttpRequest(). Attention, l'instanciation se fait de differente manière sur IE et Firefox (activX vs objet natif).
Ensuite, la méthode p.open se charge d'executer la requête HTTP sur l'URL fournie en paramètre. Dès lors, p.status sert à tester le code de retour de la requête : on attend bien enttendu un code 200 (OK).
Enfin, p.responseText va stocker le retour sous forme de texte. On peut aussi utiliser comme c'est expliqué un peu plus haut p.responseXML pour transporter du XML pur. Si vous recevez du HTML, alors, vous pouvez par exemple l'injecter dans une DIV grace à MonObjetDiv.innerHTML (methode non standard, mais ça marche) et si vous recevez du XML alors bon courage !!!
A vous de voir... déjà, faites un petit essai et découvrez cette nouvelle dimension. Fini le rechargement abusif des pages, mais attantion de ne pas monter une usine à gaz...
Pour ma part il va me falloir apprendre le DOM, c'est l'avenir.
LES LIENS :
