Notes sur l'Asynchronous Javascript and XML, pierre angulaire du Mise en place rapide
Le code suivant définit la fonction javascript qui permet de créer des objets Xhr :
function createXhrObject() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject) {
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names) {
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
}
window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
return null;
}
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject) {
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names) {
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
}
window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
return null;
}
Utilisation
Le principe est simple, le navigateur par le biais de javascript va se connecter au serveur en arrière plan pour échanger des informations qui pourront servir à mettre à jour la page html ou la base de données du serveur par exemple (méthode synchrone, le script attend que le serveur réponde) :
var p = createXhrObject();
p.open("GET", "/monfichier.php?id=" + monid , false);
p.send(null);
if ( p.status != "200" ) { alert('Erreur de communication'); return; }
alert(p.responseText):
Le script appel le fichier monfichier.php avec le paramètre id qui à la valeur id. La réponse est stocké dans p.responseText. Il est possible de envoyer des valeurs à afficher, un compte rendu d'action sur une base de données en réalité tout ce que vous l'on fait d'habitude sur un site web sans que l'appel au serveur ne provoque un affichage dans le navigateur.
p.open("GET", "/monfichier.php?id=" + monid , false);
p.send(null);
if ( p.status != "200" ) { alert('Erreur de communication'); return; }
alert(p.responseText):
Règles d'utilisation
Utiliser les fonctions encodeURI() et encodeURIComponent()
// Pour encoder SEULEMENT l'url SANS les paramètres
p.open("GET", encodeURI("/monfichier.php"), false);
// Pour encoder SEULEMENT les paramètres passés
p.open("GET", "/monfichier.php?nom=" + encodeURIComponent(nomutilisateur) + "&prenom=" + encodeURIComponent(prenomutilisateur) , false);
Préciser dans le script appelé l'encodage de caractères
p.open("GET", encodeURI("/monfichier.php"), false);
// Pour encoder SEULEMENT les paramètres passés
p.open("GET", "/monfichier.php?nom=" + encodeURIComponent(nomutilisateur) + "&prenom=" + encodeURIComponent(prenomutilisateur) , false);
// Le contenu envoyé sera codé en ISO-8859-1
header('Content-Type: text/html; charset=ISO-8859-1');
ATTENTION : Ne pas insérer de ligne vide après la balise fermante php (du script appelé)
header('Content-Type: text/html; charset=ISO-8859-1');