Maison  >  Article  >  interface Web  >  Introduction aux 5 états du javascript ajax_Basic knowledge

Introduction aux 5 états du javascript ajax_Basic knowledge

WBOY
WBOYoriginal
2016-05-16 16:39:251256parcourir

J'ai accidentellement vu l'introduction du statut readyStae dans "Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer". Je pense que cette introduction est très pratique. L'extrait est le suivant :

0 : (Non initialisée) la méthode send() n'a pas encore été invoquée
1 : (Chargement) la méthode send() a été invoquée, requête en cours
2 : (Chargé) la méthode send() est terminée, réponse complète reçue.
3 : (Interactif) la réponse est en cours d'analyse
4 : (Terminé) la réponse a été analysée et est prête à être récoltée.

0 - La méthode send() (non initialisée) n'a pas encore été appelée
1 - (Chargement) La méthode send() a été appelée et la requête est en cours d'envoi
2 - (Chargement terminé) La méthode send() a été exécutée et tout le contenu de la réponse a été reçu
3 - (Interactif) Analyse du contenu de la réponse
4 - (Complet) L'analyse du contenu de la réponse est terminée et peut être appelée sur le client

La plupart des autres livres ne sont pas clairs sur ces cinq états de readyState. Par exemple, dans "Foundations of ajax (Static Dynamic Website)", le tableau 2-2 du livre répertorie simplement le "nom" de l'état - L'état de la requête. Les cinq valeurs possibles sont 0 = non initialisé, 1. = chargement, 2 = chargé, 3 = interactif et 4 = terminé. Cependant, « ajax (static website staticization) in Action » ne semble pas du tout mentionner les détails de ces cinq états. Bien que « Ajax professionnel (staticisation statique de sites Web) » ne soit pas satisfaisant, il a quand même des avantages :

Il existe cinq valeurs possibles pour readyState :
0 (Non initialisé) : L'objet a été créé mais la méthode open() n'a pas été appelée
. 1 (Chargement) : La méthode open() a été appelée mais la requête n'a pas été envoyée
. 2 (Chargé) : La demande a été envoyée
3 (Interactif). Une réponse partielle a été reçue
. 4 (Complet) : Toutes les données ont été reçues et la connexion a été fermée.

readyState a cinq valeurs possibles :
0 (non initialisé) : l'objet (xml(standardization is getting close) HttpRequest) a été créé, mais la méthode open() n'a pas été appelée.
1 (Chargement) : La méthode open() a été appelée, mais la requête n'a pas encore été envoyée.
2 (Chargement terminé) : La demande a été envoyée.
3 (Interactif) : Des données de réponse partielle peuvent être reçues.
4 (Complet) : Toutes les données ont été reçues et la connexion a été fermée.

Dans « Comprendre ajax (statistique de site Web statique) : Utilisation de JavaScript pour créer des applications Internet riches », le tableau suivant est utilisé pour illustrer :

Code d'état readyState
Statut du xml (la normalisation se rapproche) Objet HttpRequest
(0) NON INITIALISÉ
Non initialisé L'objet a été créé mais pas initialisé (La méthode open n'a pas été appelée.)
L'objet (xml (la standardisation se rapproche) HttpRequest) a été créé, mais n'a pas été initialisé (la méthode open n'a pas encore été appelée).
(1) CHARGEMENT
Chargement L'objet a été créé, mais la méthode d'envoi n'a pas été appelée.
(xml (la standardisation se rapproche) HttpRequest) a été créé, mais la méthode send n'a pas encore été appelée.
(2) CHARGÉ
Chargement terminé La méthode d'envoi a été appelée, mais le statut et les en-têtes ne sont pas encore disponibles.
La méthode d'envoi a été appelée, l'état (réponse HTTP) et les en-têtes ne sont pas encore disponibles.
(3) INTERACTIF
Interaction Certaines données ont été reçues. L'appel des propriétés ResponseBody et ResponseText à cet état pour obtenir des résultats partiels renverra une erreur, car les en-têtes d'état et de réponse ne sont pas entièrement disponibles.
Certaines données ont été reçues. Toutefois, si vous appelez les propriétés ResponseBody et ResponseText pour obtenir des résultats partiels à ce stade, une erreur se produira car les en-têtes d'état et de réponse ne sont pas encore entièrement disponibles.
(4) TERMINÉ
Complete Toutes les données ont été reçues et les données complètes sont disponibles dans les propriétés ResponseBody et ResponseText.
Toutes les données ont été reçues et les données complètes peuvent être extraites dans les propriétés ResponseBody et ResponseText.

D'après l'introduction des cinq états de readyState dans les livres ci-dessus, je pense que "Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer" est plus précis car il mentionne l'analyse des données reçues, ce n'est pas le cas. mentionné dans d'autres livres, et c'est la raison pour laquelle l'étape "(3) interaction" existe comme un processus de conversion nécessaire entre "(2) achèvement du chargement" et "(4) achèvement", c'est-à-dire quelle est sa mission. Pour résumer, je pense que la méthode d'explication idéale devrait être de définir ces états dans le mode d'expression « état : tâche (objectif) performance (ou caractéristiques) du processus » qui est plus précis et plus facile à comprendre. Le résumé du test en cours est le suivant :

état prêtStateDescription

(0) non initialisé
Cette étape confirme si l'objet xml (la normalisation se rapproche) HttpRequest est créé et prépare la désinitialisation en appelant la méthode open(). Une valeur de 0 indique que l'objet existe déjà, sinon le navigateur signalera une erreur : l'objet n'existe pas.

(1)Charger
A ce stade, l'objet xml (normalisation se rapproche) HttpRequest est initialisé, c'est-à-dire que la méthode open() est appelée et le statut de l'objet est défini en fonction des paramètres (méthode, url, true). Et appelez la méthode send() pour commencer à envoyer des requêtes au serveur. Une valeur de 1 indique qu'une requête est envoyée au serveur.

(2) Chargement terminé
Cette étape reçoit les données de réponse du serveur. Mais ce qui est obtenu, ce sont uniquement les données originales de la réponse du serveur et ne peuvent pas être utilisées directement sur le client. Une valeur de 2 indique que toutes les données de réponse ont été reçues. Et préparez-vous pour la prochaine étape de l’analyse des données.

(3)Interactions
Cette étape analyse les données de réponse reçues côté serveur. Autrement dit, selon le type MIME renvoyé par l'en-tête de réponse côté serveur, les données sont converties dans un format accessible via les attributs ResponseBody, ResponseText ou ResponseXML (la standardisation se rapproche) et sont prêtes à être invoquées sur le serveur. client. Le statut 3 indique que les données sont en cours d'analyse.

(4) Terminé
À ce stade, il est confirmé que toutes les données ont été analysées dans un format utilisable par le client et que l'analyse est terminée. Une valeur de 4 indique que l'analyse des données est terminée et que les données peuvent être obtenues via les attributs correspondants de l'objet XML (la normalisation se rapproche) HttpRequest.

En résumé, le cycle de vie de l'ensemble du xml (la normalisation se rapproche) de l'objet HttpRequest devrait comprendre les étapes suivantes :
Créer - initialiser la demande - envoyer la demande - recevoir des données - analyser les données - terminer

Dans des applications spécifiques, en clarifiant la signification des cinq états de readyState (différentes étapes du cycle de vie du XML (la standardisation se rapproche) Objet HttpRequest), vous pouvez éliminer le mystère du noyau d'ajax (staticisation dynamique du site Web ) (La raison derrière les mots peu clairs est soit de rendre les choses mystérieuses et de créer un sentiment de mystère ; soit de « faire s'évanouir les gens et les rendre conscients »). Comprendre rapidement l'essence est extrêmement bénéfique pour réduire la frustration dans l'apprentissage et améliorer l'auto-apprentissage. confiance.

Par exemple, à travers l'exemple suivant :

Copier le code Le code est le suivant :

//Déclare le tableau
var states = ["Initialisation...",
"Initialisation de la demande... réussie !
Envoi de la demande...",
"Succès !
Réception de données...",
"C'est fait !
Analyse des données...",
"C'est fait !
»];

//Extrait de code dans la fonction de rappel
if (xml(la normalisation se rapproche)Http.readyState==4)
{
var span = document.createElement("span");
span.innerHTML = states[xml(la normalisation se rapproche)Http.readyState];
document.body.appendChild(span);

if (xml(la normalisation se rapproche)Http.status == 200)
{
var xml (La normalisation se rapproche) doc = xml (La normalisation se rapproche) Http.responsexml (La normalisation se rapproche
); //Autres codes
>

//N'oubliez pas de détruire pour éviter les fuites de mémoire
xml (la normalisation se rapproche)Http = null;
}autre{
var span = document.createElement("span");
span.innerHTML = states[xml(la normalisation se rapproche)Http.readyState];
document.body.appendChild(span);
}Les résultats sont les suivants :

Initialisation de la demande... réussie !
Envoi de la demande... réussi !
Réception de données... C'est fait !
Analyse des données... Terminé !


Il nous est facile de comprendre ce que fait l'objet XML (la normalisation se rapproche) HttpRequest à chaque étape. Par conséquent, il est facile d’avoir une compréhension très simple et claire de la partie centrale d’ajax (staticisation dynamique de sites Web).
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn