Ce dont je vais parler est très basique, donc les experts ne devraient pas le lire. Si vous le lisez, donnez-moi votre avis. Les novices ou les personnes qui ne connaissent pas grand-chose aux connaissances de bas niveau peuvent le lire pour améliorer leur compréhension et leur mémoire.
L'objet XMLHttpRequest est le cœur de la fonction AJAX. Pour développer un programme AJAX, vous devez commencer par comprendre l'objet XMLHttpRequest.
Pour comprendre l'objet XMLHttpRequest, commencez par créer l'objet XMLHttpRequest. La création d'objets XMLHttpRequest dans différents navigateurs utilise différentes méthodes :
regardez d'abord la méthode d'IE créant l'objet XMLHttpRequest (Méthode 1) :
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Utiliser une version plus récente d'IE pour créer un objet compatible avec IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utiliser une ancienne version d'IE pour créer un objet compatible IE (Microsoft.XMLHTTP)
Mozilla, Opera, Safari et la plupart des navigateurs non-IE utilisent la méthode suivante (Méthode 2) pour créer des objets XMLHttpRequest :
var xmlhttp = new XMLHttpRequest();
Internet Explorer utilise en fait un objet appelé XMLHttp au lieu de l'objet XMLHttpRequest, utilisé par Mozilla, Opera, Safari et la plupart des navigateurs non Microsoft (ci-après collectivement appelés objet XMLHttpRequest). IE7 a également commencé à utiliser l'objet XMLHttpRequest.
Si différents navigateurs utilisent des méthodes incorrectes lors de la création de l'objet XMLHttpRequest, le navigateur signalera une erreur et l'objet ne pourra pas être utilisé. Nous avons donc besoin d'une méthode pour créer un objet XMLHttpRequest compatible avec différents navigateurs :
Créer une méthode objet XMLHttpRequest compatible avec plusieurs navigateurs
var xmlhttp = false; //Créez une nouvelle requête de variable et attribuez-lui la valeur false. Utilisez false comme condition de jugement, ce qui signifie que l'objet XMLHttpRequest n'a pas encore été créé.
fonction CreateXMLHttp(){
essayer{
xmlhttp = new XMLHttpRequest(); //Essayez de créer un objet XMLHttpRequest, sauf que les navigateurs IE prennent en charge cette méthode.
}
attraper (e){
essayer{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Utiliser une version plus récente d'IE pour créer un objet compatible IE (Msxml2.XMLHTTP)
}
attraper (e){
essayer{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utilisez une ancienne version d'IE pour créer un objet compatible IE (Microsoft.XMLHTTP).
}
attraper (échec){
xmlhttp = false; //En cas d'échec, assurez-vous que la valeur de la requête est toujours fausse.
}
}
}
renvoyer xmlhttp ;
}
Il est très simple de juger si la création est réussie
si (!xmlhttp){
//Échec de la création de l'objet XMLHttpRequest !
}
autre{
//Créé avec succès !
}
Après avoir créé l'objet XMLHttpRequest, examinons les méthodes, les propriétés et le gestionnaire d'événements onreadystatechange le plus important de cet objet.
Méthode :
open() Description : initialise les paramètres de la requête HTTP, tels que l'URL et la méthode HTTP, mais n'envoie pas la requête.
abort() Description : Annule la réponse actuelle, ferme la connexion et met fin à toute activité réseau en attente.
getAllResponseHeaders() Description : renvoie les en-têtes de réponse HTTP sous forme de chaînes non analysées.
getResponseHeader() Description : renvoie la valeur de l'en-tête de réponse HTTP spécifié.
send() Description : envoie une requête HTTP, en utilisant les paramètres passés à la méthode open() et le corps de la requête facultatif transmis à la méthode.
setRequestHeader() Description : Définit ou ajoute une requête HTTP à une requête ouverte mais non envoyée.
Attributs :
readyState Description : L'état de la requête HTTP.
ResponseText Description : le corps de la réponse (à l'exclusion des en-têtes) reçu par le serveur jusqu'à présent, ou une chaîne vide si aucune donnée n'a été reçue.
ResponseXML Description : La réponse à la demande, analysée en XML et renvoyée en tant qu'objet Document.
status Description : Code d'état HTTP renvoyé par le serveur.
statusText Description : cet attribut spécifie le code d'état HTTP de la demande en utilisant un nom au lieu d'un numéro.
onreadystatechange est la fonction de gestionnaire d'événements appelée à chaque fois que la propriété readyState change.
Comprenons l'objet XMLHttpRequest à partir du processus d'envoi d'une requête et de traitement des résultats de la requête.
Naturellement, un objet XMLHttpRequest est généré avant d'envoyer la requête. Il n'est pas nécessaire d'écrire davantage de code s'il est déjà là.
Générer un objet XMLHttpRequest
var xmlhttp = CreateXMLHttp();
Après avoir créé l’objet XMLHttpRequest, à quel site souhaitons-nous envoyer la requête ? Choisissons le RSS sur la page d’accueil du parc de blogs. Alors, comment définir l’adresse du site Web que je souhaite demander ? Utilisez la méthode open().
open (méthode, url, asynchrone, nom d'utilisateur, mot de passe)
Cette méthode a 5 paramètres. Vous pouvez voir la signification spécifique ici : http://www.w3school.com.cn/xmldom/dom_http.asp.
C'est ce que nous utilisons.
xmlHttp.open("get"," http://www.cnblogs.com",true );
Le paramètre get signifie utiliser la méthode get. Le deuxième est naturellement l'adresse cible, la page d'accueil du parc de blogs. Le troisième signifie si elle est asynchrone. Bien sûr, nous utilisons true. Des descriptions de paramètres spécifiques peuvent également être trouvées sur http://www.w3school.com.cn .
Bon, l'objectif est fixé, comment l'envoyer. Utilisez la méthode send().
send(body), la méthode send() n'a qu'un seul paramètre, qui représente l'objet DOM. Cet objet DOM doit expliquer beaucoup de choses la prochaine fois, aujourd'hui, nous n'aurons qu'à écrire.
xmlhttp.send(null);
C'est ça. D'accord, c'est envoyé, alors comment gérer les résultats renvoyés ? À ce stade, la chose la plus importante de l'objet XMLHttpRequest est utilisée, qui est le handle d'événement onreadystatechange. Qu'est-ce que cela signifie ? Ensuite, nous devons expliquer le readyState de l'objet XMLHttpRequest. Il existe 5 états de readyState, représentés respectivement par les nombres 0 à 4.
Nom de l'état Description
0 État d'initialisation non initialisé. L'objet XMLHttpRequest a été créé (avant l'appel de open()) ou réinitialisé par la méthode abort().
1 Open La méthode open() a été appelée, mais la méthode send() n'a pas été appelée. La demande n'a pas encore été envoyée.
2 La méthode Sent Send() a été appelée et la requête HTTP a été envoyée au serveur Web. Aucune réponse reçue.
3 Réception Tous les en-têtes de réponse ont été reçus. Le corps de la réponse a commencé à être reçu mais n'est pas terminé.
4 La réponse HTTP chargée a été entièrement reçue.
Cependant, il convient de noter que les états que différents navigateurs peuvent gérer dans le handle de l'événement onreadystatechange ne sont pas cohérents. IE et FireFox peuvent gérer les états 1 à 4, tandis que Safari peut gérer les états 2 à 4 et Opera peut gérer les états 3 et 4. . Le statut 0 est fondamentalement inutile, car la méthode open() sera appelée immédiatement après la création de l'objet XMLHttpRequest, et le statut deviendra 1 à ce moment-là, à moins bien sûr que vous souhaitiez déterminer si l'objet a été annulé par abandon. (), mais cette situation est encore très rare. Dans la plupart des cas, il suffit de déterminer si le statut est 4 (accepté et complété).
D'accord, je comprends que readyState a 5 états. Ensuite, le résultat du traitement consiste à voir si l'état passe à différents états et nous pouvons effectuer un traitement différent. Comment indiquer à l'objet XMLHttpRequest qui doit gérer le changement lorsque l'état change. Il existe deux façons d'écrire, l'une consiste à utiliser une méthode anonyme, l'autre consiste à spécifier une méthode. En fait, ce sont simplement des méthodes d'écriture différentes avec le même effet. Jetez un œil au code :
xmlhttp.onReadyStateChange = function (){.
//Code pour gérer les changements de statut
}
//ou
xmlhttp.onReadyStateChange = getResult ;
fonction getResult(){
///Code pour gérer les changements de statut
}
// À propos, le nom du handle est relativement long. Vous pouvez vous en souvenir comme ceci. On ReadyState Change signifie que la demande a été envoyée lorsque l'état de lecture a changé, et la méthode de traitement est également spécifiée. content ? Il y a deux attributs : ResponseText et ResponseXML. Pour l'utilisation, ResponseXML est l'objet de retour et doit être analysé plus tard. Ici, utilisez d'abord ResponseText pour voir ce qui est renvoyé.
alert(xmlhttp.responseText); //Vérifie si le code HTML de la page d'accueil est renvoyé. C'est vous qui réussissez.
L'ensemble du processus est le suivant : créer un objet XMLHttpRequest -> spécifier l'adresse d'envoi et la méthode d'envoi -> envoyer la demande -> spécifier la méthode de traitement et traiter le résultat de retour. Mais il convient de noter que notre compréhension normale est la suivante, mais la méthode de traitement spécifiée du handle d'événement onreadystatechange doit être spécifiée avant l'envoi, sinon l'événement de changement d'état ne peut pas être traité.
Nous devons donc nous en souvenir selon le processus suivant : créer un objet XMLHttpRequest -> spécifier l'adresse d'envoi et la méthode d'envoi -> spécifier la méthode de traitement du changement de statut -> envoyer la demande Une fois la demande envoyée, la méthode de traitement spécifiée sera automatiquement. appelé lorsque l'état change.
D'accord, jetons un œil au code terminé.
code complété
var xmlhttp = false; //Créez une nouvelle requête de variable et attribuez-lui la valeur false. Utilisez false comme condition de jugement, ce qui signifie que l'objet XMLHttpRequest n'a pas encore été créé.
fonction CreateXMLHttp(){
essayer{
xmlhttp = new XMLHttpRequest(); //Essayez de créer un objet XMLHttpRequest, sauf que les navigateurs IE prennent en charge cette méthode.
}
attraper (e){
essayer{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Utiliser une version plus récente d'IE pour créer un objet compatible IE (Msxml2.XMLHTTP)
}
attraper (e){
essayer{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Utilisez une ancienne version d'IE pour créer un objet compatible IE (Microsoft.XMLHTTP).
}
attraper (échec){
xmlhttp = false; //En cas d'échec, assurez-vous que la valeur de la requête est toujours fausse.
}
}
}
renvoyer xmlhttp ;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult ;
xmlhttp.send(null);
fonction getResult(){
si(xmlhttp.readyState == 4){
alerte(xmlhttp.responseText);
}
}
Tout semble aller bien, mais avez-vous déjà pensé à ce qui se passerait si le code HTML se trompait lors de la transmission réseau ou si l'adresse que nous spécifions devenait invalide. À ce stade, vous devez utiliser l'attribut status, qui est le code d'état HTTP renvoyé par le serveur. Lorsque xmlhttp.status est égal à 200, cela signifie que le processus de transmission est complet et sans erreur. Pour connaître la signification spécifique du code d'état HTTP, vous pouvez accéder au site Web de l'organisation W3C pour voir l'adresse http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Je pense que c'est vraiment OK d'écrire la méthode getResult() comme suit.
fonction getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alerte(xmlhttp.responseText);
}
}
D'accord, quelque chose qui était à l'origine assez simple semble être très verbeux après avoir tant écrit à ce sujet. Cependant, je pense qu'il est très important de comprendre le contenu de base de la programmation. De nos jours, de nombreuses bibliothèques JS sont utilisées pour développer des programmes AJAX, et il n'est pas nécessaire d'écrire directement un tel code de base. Par exemple, si nous utilisons le célèbre jQuery, mais si nous comprenons bien les choses de base, alors ces bibliothèques signalent les erreurs, ou s'il y a un problème, nous pouvons savoir où se trouve l'erreur très rapidement et apporter des modifications plus rapidement à faire fonctionner le programme normalement.