AJAXExemple texte
Exemple avec un fichier texte
Exemple AJAX de gestion réponse de requête HTTP avec la propriété "responseText" sur 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)
