AJAXExemple texte
Exemple avec un fichier texte
Un script Javascript appel un document texte (texte.txt) qui contient un texte et l'affiche dans un message d'alert. Exemple à tester avec un serveur IIS ou Apache.
Requête HTTP simple (index.htm)
<html><head>
<script type="text/javascript">
function fairerequete(url) {
// l'argument url permettra dans le body d'appeler le fichier texte
var xhr;
// si l'objet XMLHttpRequest existe on l'utilise
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
// sinon il y a-t-il un objet ActiveX
else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
}
if (!xhr) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
// création d'un getionnaire d'évènement pour les changements d'état
xhr.onreadystatechange = function() { contenu_du_alert(xhr); };
// On fait la requête avec la méthode open
// cette méthode pépare une requête en indiquant la méthode, l'URL et la drapeau de synchronisation
xhr.open('GET', url, true); // true pour asynchrone
// On effectue la requête avec la méthode send, éventuellement en envoyant les données
xhr.send(null); // null pour dire de ne pas envoyer de données supplémentaire
} // fin de la fonction fairerequete
function contenu_du_alert(xhr) {
// vérifier l'état de la requête avec la propriété readyState (4 = terminé)
if (xhr.readyState == 4) {
// vérifier l'état de la réponse avec la propriété status (200 = Ok)
// si on enlève cette étape, la requête fait les 4 étapes du readyState une par une
if (xhr.status == 200) {
// obtenir la réponse sous forme de chaîne de caractères avec la propriété responseText
alert(xhr.responseText);
}
else { alert('Un problème est survenu avec la requête.'); }
}
}
</script></head>
<body>
<span style="cursor: pointer; text-decoration: underline"
onclick="fairerequete('texte.txt')">Effectuer une requête</span>
</body></html>
<html><head>
<script type="text/javascript">
function fairerequete(url) {
// l'argument url permettra dans le body d'appeler le fichier texte
var xhr;
// si l'objet XMLHttpRequest existe on l'utilise
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
// sinon il y a-t-il un objet ActiveX
else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
}
if (!xhr) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
// création d'un getionnaire d'évènement pour les changements d'état
xhr.onreadystatechange = function() { contenu_du_alert(xhr); };
// On fait la requête avec la méthode open
// cette méthode pépare une requête en indiquant la méthode, l'URL et la drapeau de synchronisation
xhr.open('GET', url, true); // true pour asynchrone
// On effectue la requête avec la méthode send, éventuellement en envoyant les données
xhr.send(null); // null pour dire de ne pas envoyer de données supplémentaire
} // fin de la fonction fairerequete
function contenu_du_alert(xhr) {
// vérifier l'état de la requête avec la propriété readyState (4 = terminé)
if (xhr.readyState == 4) {
// vérifier l'état de la réponse avec la propriété status (200 = Ok)
// si on enlève cette étape, la requête fait les 4 étapes du readyState une par une
if (xhr.status == 200) {
// obtenir la réponse sous forme de chaîne de caractères avec la propriété responseText
alert(xhr.responseText);
}
else { alert('Un problème est survenu avec la requête.'); }
}
}
</script></head>
<body>
<span style="cursor: pointer; text-decoration: underline"
onclick="fairerequete('texte.txt')">Effectuer une requête</span>
</body></html>
Dans cet exemple :
• L'utilisateur clique sur le lien "Effectuer une requête" dans le navigateur ;
• Ceci appelle fairerequete() avec un paramètre le nom text.txt d'un fichier situé dans le même répertoire ;
• la requête est faite et ensuite (onreadystatechange) l'exécution est passée à la fonction "contenu_du_alert()" qui vérifie si la réponse a été reçue et est correcte, et affiche ensuite la contenu du fichier texte.txt dans un message alert().
On aurrai pu faire un test sur deux ActiveX avec un try.. catch :
else if (window.ActiveXObject) {
try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { xhr = new ActiveXObject("Microsoft.XMLHTTP");}
catch (e) {}
}
Plus d'infos sur l' instructions de gestion d'exceptions: try.. catch (try = essayer/ catch = intercepter)
