Une technologie (outil) importante utilisée lors de la conception d'AJAX est l'objet XMLHTTPRequest. L'objet XMLHttpRequest constitue aujourd'hui la base technique de toutes les applications AJAX et Web 2.0. Bien que les éditeurs de logiciels et les communautés open source proposent désormais divers frameworks AJAX pour simplifier davantage l'utilisation de l'objet XMLHttpRequest, il nous reste néanmoins nécessaire de comprendre les propriétés et les méthodes de cet objet ;
1. Qu'est-ce que l'objet XMLHTTPRequest ?
La définition la plus courante est la suivante : XmlHttp est un ensemble d'API qui peuvent transmettre ou recevoir du XML et d'autres données via le protocole http en JavaScript, VbScript, Jscript et d'autres langages de script. La plus grande utilisation de XmlHttp est qu’il peut mettre à jour une partie du contenu d’une page Web sans actualiser la page entière. (Cette fonction est l'une des fonctionnalités majeures d'AJAX)
Explication de MSDN : XmlHttp fournit un protocole permettant au client de communiquer avec le serveur http. Le client peut envoyer une requête au serveur http via l'objet XmlHttp (MSXML2.XMLHTTP.3.0) et utiliser le modèle d'objet de document XML Microsoft (DOM) pour traiter la réponse.
Permettez-moi de m'éloigner du sujet. En fait, cette chose est apparue très tôt. Cependant, la prise en charge du navigateur n'était pas suffisante dans le passé, elle n'était donc pas beaucoup utilisée par les programmeurs WEB. a beaucoup changé, Mozilla et Safari l'ont adopté comme standard de facto et les navigateurs grand public ont commencé à prendre en charge l'objet XMLHTTPRequest. Mais ce qu'il faut souligner ici, c'est que XMLHTTPRequest n'est pas encore un standard du W3C, donc les performances sur les différents navigateurs sont légèrement différentes.
2. Créer un objet XMLHTTPRequest
En parlant de différences, voyons comment le déclarer (l'utiliser) Avant d'utiliser l'objet XMLHTTPRequest pour envoyer des requêtes et traiter des réponses, nous devons utiliser javascript pour créer un objet XMLHTTPRequest. (IE implémente XMLHTTPRequest en tant qu'objet ActiveX, et d'autres navigateurs [tels que Firefox/Safari/Opear] l'implémentent en tant qu'objet javascript natif). Voyons comment utiliser JavaScript pour le créer :
Voici une citation :
<langage de script="javascript" type="text/javascript">
<!--
var xmlhttp;
//Créer un objet XMLHTTPRequest
fonction createXMLHTTPRequest(){
if(window.ActiveXObject){ // Détermine si le contrôle ActiveX est pris en charge
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Crée un objet XMLHTTPRequest en instanciant une nouvelle instance d'ActiveXObject
}
else if(window.XMLHTTPRequest){ // Détermine s'il faut implémenter XMLHTTPRequest en tant qu'objet javascript local
xmlhttp = new XMLHTTPRequest(); // Créer une instance de XMLHTTPRequest (objet javascript local)
}
}
//-->
</script>3. Attributs et méthodes. Comme il y a trop de choses, j'utiliserai cette page pour lister les méthodes et les attributs, je donnerai des exemples détaillés plus tard (principalement parce que j'apprends aussi).
<html>
<tête>
<title>Description de l'objet XMLHTTPRequest DEMO</title>
<langage de script="javascript" type="text/javascript">
<!--
var xmlhttp;
//Créer un objet XMLHTTPRequest
fonction createXMLHTTPRequext(){
si (fenêtre.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
sinon si(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();
}
}
fonction PostOrder(xmldoc)
{
createXMLHTTPRequext();
// Méthode : ouvrir
//Créez une nouvelle requête http et spécifiez la méthode de requête, l'URL et les informations de vérification
// Syntaxe : oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//paramètres
// Méthode bstr
//Méthodes http, telles que : POST, GET, PUT et PROPFIND. Insensibilité à la casse.
// bstrUrl
//L'adresse URL demandée peut être une adresse absolue ou une adresse relative.
// varAsync[facultatif]
// Type booléen, précise si cette requête est asynchrone. La valeur par défaut est true. Si vrai, la fonction de rappel spécifiée par l'attribut onreadystatechange sera appelée lorsque l'état change.
// bstrUser[facultatif]
// Si le serveur nécessite une vérification, spécifiez le nom d'utilisateur ici. S'il n'est pas spécifié, une fenêtre de vérification apparaîtra lorsque le serveur nécessitera une vérification.
// bstrMot de passe[facultatif]
// La partie mot de passe des informations de vérification. Si le nom d'utilisateur est vide, cette valeur sera ignorée.
// Remarque : Après avoir appelé cette méthode, vous pouvez appeler la méthode send pour envoyer des données au serveur.
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var livre = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// alerte(book.xml);
// Attribut : onreadystatechange
//onreadystatechange : spécifiez le gestionnaire d'événements lorsque la propriété readyState change
// Syntaxe : oXMLHttpRequest.onreadystatechange = funcMyHandler ;
// L'exemple suivant montre l'appel de la fonction HandleStateChange lorsque la propriété readyState de l'objet XMLHTTPRequest change.
// Lorsque les données sont reçues (readystate == 4) un bouton sur cette page sera activé
// Remarque : Cette propriété est en écriture seule et constitue une extension du modèle objet de document du W3C.
xmlhttp.onreadystatechange= HandleStateChange ;
// Méthode : envoyer
//Envoyer la requête au serveur http et recevoir la réponse
// Syntaxe : oXMLHttpRequest.send(varBody);
// Paramètres : varBody (Données à envoyer via cette requête.)
// Remarque : Le mode synchrone ou asynchrone de cette méthode dépend du paramètre bAsync dans la méthode open. Si bAsync == False, cette méthode attendra que la requête se termine ou expire avant de retourner. Si bAsync == True, cette méthode. reviendra immédiatement.
// Cette méthode prend un paramètre facultatif, qui est le requestBody à utiliser. Les types d'entrée VARIANT acceptables sont BSTR, SAFEARRAY de UI1 (octets non signés), IDispatch vers un objet XML Document Object Model (DOM) et IStream *. utilisez uniquement le codage fragmenté (pour l'envoi) lors de l'envoi de types d'entrée IStream *. Le composant définit automatiquement l'en-tête Content-Length pour tous les types d'entrée IStream *.
// Si les données envoyées sont BSTR, la réponse est codée en utf-8 et un en-tête de type de document contenant un jeu de caractères doit être défini à la position appropriée.
// Si le type d'entrée est un SAFEARRAY de UI1, la réponse est envoyée telle quelle sans codage supplémentaire. L'appelant doit définir un en-tête Content-Type avec le type de contenu approprié.
// Si les données envoyées sont un objet XML DOM, la réponse sera codée selon l'encodage déclaré dans le document XML. Si aucun encodage n'est déclaré dans le document XML, l'UTF-8 par défaut sera utilisé.
// Si le type d'entrée est un IStream *, la réponse est envoyée telle quelle sans encodage supplémentaire. L'appelant doit définir un en-tête Content-Type avec le type de contenu approprié.
xmlhttp.Send(xmldoc);
// Méthode : getAllResponseHeaders
// Récupère tous les en-têtes http de la réponse
// Syntaxe : strValue = oXMLHttpRequest.getAllResponseHeaders();
// Remarque : Chaque nom et valeur d'en-tête http sont séparés par deux points et se terminent par rn. Cette méthode ne peut être appelée qu'une fois la méthode d'envoi terminée.
alert(xmlhttp.getAllResponseHeaders());
// Méthode : getResponseHeader
// Récupère l'en-tête http spécifié à partir des informations de réponse
// Syntaxe : strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Remarque : Cette méthode ne peut être appelée qu'après la réussite de la méthode send. Si le type de document renvoyé par le serveur est "text/xml", alors cette phrase
// xmlhttp.getResponseHeader("Content-Type"); renverra la chaîne "text/xml". Vous pouvez utiliser la méthode getAllResponseHeaders pour obtenir des informations complètes sur l’en-tête http.
alert(xmlhttp.getResponseHeader("Content-Type")); // Affiche la colonne Content-Type dans l'en-tête http : la version et le nom du serveur Web actuel.
document.frmTest.myButton.disabled = true;
// Méthode : abandonner
//Annuler la demande en cours
// Syntaxe : oXMLHttpRequest.abort();
// Remarque : Après avoir appelé cette méthode, la requête actuelle renvoie le statut UNINITIALIZED.
//xmlhttp.abort();
// Méthode : setRequestHeader
// Spécifiez séparément un certain en-tête http de la requête
// Syntaxe : oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Paramètres : bstrHeader (String, nom de l'en-tête.)
// bstrValue(Chaîne, valeur.)
// Remarque : Si un en-tête http portant ce nom existe déjà, il sera écrasé. Cette méthode doit être appelée après la méthode open.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
fonction HandleStateChange()
{
//Attribut : readyState
// Renvoie l'état actuel de la requête XMLHTTP
// Syntaxe : lValue = oXMLHttpRequest.readyState ;
// Remarques : Variable, cet attribut est en lecture seule, et le statut est représenté par un entier de longueur 4. La définition est la suivante :
// 0 (non initialisé) L'objet a été créé, mais n'a pas été initialisé (la méthode open n'a pas encore été appelée)
// 1 (initialisation) L'objet a été créé et la méthode send n'a pas encore été appelée.
// 2 (Envoyer des données) La méthode d'envoi a été appelée, mais l'état actuel et l'en-tête http sont inconnus
// 3 (Les données sont en cours de transmission) Une partie des données a été reçue. Étant donné que les en-têtes de réponse et http sont incomplets, une erreur se produira lors de l'obtention d'une partie des données via ResponseBody et ResponseText.
// 4 (Complet) La réception des données est terminée. À ce stade, les données de réponse complètes peuvent être obtenues via ResponseBody et ResponseText.
si (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// Attribut : corps de réponse
// Renvoie les données de réponse du serveur dans un certain format
// Syntaxe : strValue = oXMLHttpRequest.responseBody ;
// Remarques : Variable, cette propriété est en lecture seule et représente les données binaires non décodées renvoyées directement depuis le serveur au format tableau non signé.
alerte(xmlhttp.responseBody);
//Propriété : responseStream
//Renvoie les informations de réponse sous la forme d'un objet Ado Stream
// Syntaxe : strValue = oXMLHttpRequest.responseStream ;
// Remarques : Variable, cette propriété est en lecture seule et renvoie les informations de réponse sous la forme d'un objet Ado Stream.
alerte(xmlhttp.responseStream);
//Attribut : texte de réponse
// Renvoie les informations de réponse sous forme de chaîne
// Syntaxe : strValue = oXMLHttpRequest.responseText ;
// Remarques : Variable, cette propriété est en lecture seule et renvoie les informations de réponse sous forme de chaîne. XMLHTTP tente de décoder les informations de réponse en une chaîne Unicode,
// XMLHTTP définit le codage des données de réponse sur UTF-8 par défaut. Si les données renvoyées par le serveur contiennent une BOM (marque d'ordre d'octet), XMLHTTP peut le faire.
// Pour décoder n'importe quelle donnée UCS-2 (gros ou petit endian) ou UCS-4. Notez que si le serveur renvoie un document XML, cet attribut
// Les propriétés ne gèrent pas les déclarations de codage dans les documents XML. Vous devez utiliser ResponseXML pour le gérer.
alerte(xmlhttp.responseText);
//Attribut : réponseXML
//Formate les informations de réponse dans un objet Document Xml et les renvoie
// Syntaxe : var objDispatch = oXMLHttpRequest.responseXML ;
// Remarques : Variable, cette propriété est en lecture seule, formatez les informations de réponse dans un objet Document Xml et renvoyez-les. Si les données de réponse ne sont pas un document XML valide,
// Cette propriété elle-même ne renvoie pas XMLDOMParseError et les informations sur l'erreur peuvent être obtenues via l'objet DOMDocument traité.
alert("Résultat = " + xmlhttp.responseXML.xml);
//Attribut : statut
// Renvoie le code d'état http de la requête en cours
// Syntaxe : lValue = oXMLHttpRequest.status ;
// Valeur de retour : code d'état http standard long, défini comme suit :
//Numéro : Description
// 100 : Continuer
// 101 : Changement de protocole
// 200 : OK
// 201 : Créé
// 202 : Accepté
// 203 : Informations non faisant autorité
// 204 : Aucun contenu
// 205 : Réinitialiser le contenu
// 206 : Contenu partiel
// 300 : Choix multiples
// 301 : Déplacé définitivement
// 302 : Trouvé
// 303 : Voir Autre
// 304 : Non modifié
// 305 : Utiliser un proxy
// 307 : Redirection temporaire
// 400 : Requête incorrecte
// 401 : Non autorisé
// 402 : Paiement requis
// 403 : Interdit
// 404 : Introuvable
// 405 : Méthode non autorisée
// 406 : non acceptable
// 407 : Authentification proxy requise
// 408 : expiration du délai de demande
// 409 : Conflit
// 410 : Parti
// 411 : Longueur requise
// 412 : Échec de la précondition
// 413 : Entité de demande trop grande
// 414 : URI de requête trop long
// 415 : Type de média non pris en charge
// 416 : la plage demandée ne convient pas
// 417 : Échec de l'attente
// 500 : Erreur interne du serveur
// 501 : non implémenté
// 502 Mauvaise passerelle
// 503 : Service indisponible
// 504 : expiration du délai de passerelle
// 505 : version HTTP non prise en charge
// Remarque : entier long, cette propriété est en lecture seule et renvoie le code d'état http de la requête en cours. Cette propriété ne peut être obtenue qu'après l'envoi et la réception des données.
alerte (xmlhttp.status);
//Attribut : texte d'état
// Renvoie l'état de la ligne de réponse de la requête en cours
// Syntaxe : strValue = oXMLHttpRequest.statusText ;
// Remarques : Chaîne, cette propriété est en lecture seule. Elle renvoie l'état de la ligne de réponse de la requête en cours dans BSTR. Cette propriété ne peut être obtenue qu'après l'envoi et la réception des données.
alerte(xmlhttp.statusText);
}
}
//-->
</script>
</tête>
<corps>
<nom du formulaire="frmTest">
<input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
</form>
</corps>
</html>