objet XMLHttpRequest ajax
XMLHttpRequest composant qui permet de récupérer des donnés depuis un serveur pendant que l'utilisateur contenue à jouer tranquillement
XMLHttpRequest, a été d'abord implémenté dans Internet Explorer depuis la version 4.0.
Ce concept s'appelait XMLHTTP dans les premiers temps, avant qu'Ajax ne devienne le nom le plus communément utilisé.
L'emploi de XMLHttpRequest en 2005 par Google, dans Gmail et GoogleMaps a contribué au succès de ce format.
Description
XHR est une classe qui est reconnue par tous les navigateurs actuels et par le langage de programmation fonctionnant coté client JavaScript.Pour chaque requête au serveur, une nouvelle instance est créée par l'appel du constructeur.
La méthode open démarre la connexion, en mode lecture ou écriture, pour recevoir des données du serveur ou lui en envoyer. Ce sera traité sur le serveur par un langage coté serveur comme PHP, Java, etc...
La connexion passe par plusieurs états successifs qui sont assignés à l'attribut readyState de l'objet.
Quand l'état final est atteint, les données peuvent être récupérées dans un autre attribut. Elles sont du texte pur ou un document XML. Le format JSON est aussi reconnu.
stance
if (window.XMLHttpRequest) // Objet de la fenêtre courant { xhr = new XMLHttpRequest(); // Firefox, Safari, ... } else if (window.ActiveXObject) // Version Active { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer }ou plus simplement, on peut utiliser les exceptions:
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Essayer Internet Explorer
}
catch(e) // Echec{
xhr = new XMLHttpRequest(): // Autres navigateurs
}Seconde étape: attendre la réponse
Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange de l'objet précédemment créé.xhr.onreadystatechange = function(){ // instructions de traitement de la réponse }; if (xhr.readyState == 4) { // Reçu, OK } else { // Attendre... } Troisième étape: faire la requête elle-même
Deux méthodes de XMLHttpRequest sont utilisées:- open: commande GET ou POST, URL du document, true pour asynchrone.
- send: avec POST seulement, données à envoyer au serveur.
La requête ci-dessous lit un document sur le serveur.
xhr.open('GET', 'http://www.xul.fr/fichier.xml', true);
xhr.send(null);Exemple de programme Ajax
Lire un texte
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open( GET", "data.xml", true);
xhr.send(null);
}
</script>
</head>
<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
RSS Feed (xml)
Aucun commentaire:
Enregistrer un commentaire