XMLHTTPRequest facilite l'envoi d'une demande HTTP très facile. Il vous suffit de créer simplement une instance de l'objet de demande, d'ouvrir une URL, puis d'envoyer la demande. Une fois la transmission terminée, l'état HTTP qui en résulte et le contenu de réponse renvoyé peuvent également être obtenus à partir de l'objet de demande.
Les demandes générées par XMLHTTPRequest peuvent être obtenues de deux manières, mode asynchrone ou mode synchrone. Le type de demande est déterminé par la valeur d'Async, le troisième paramètre de la méthode Open () de cet objet XMLHTTPREQUEST. Si la valeur de ce paramètre est fausse, la demande XMLHttpRequest est effectuée en mode synchrone, sinon le processus sera terminé en mode asynchrone.
Deux modes de communication: demandes synchrones et asynchrones:
Synchroniser les demandes
Demandes de synchronisation dans le thread principal bloquer la page et en raison d'une mauvaise expérience utilisateur, les demandes de synchronisation sur le thread principal de certains derniers navigateurs ont été obsolètes. Dans de rares cas, XMLHTTPREQUESTS utilisant le mode synchrone sera plus approprié que l'utilisation du mode asynchrone.
1. Lorsque vous utilisez XMLHttpRequest chez le travailleur, les demandes synchrones sont plus adaptées que les demandes asynchrones.
Code dans la page d'accueil:
<script type = "text / javascript"> var omyworker = new worker ("mytask.js"); omyworker.onMessage = function (oevent) {alert ("Le travailleur a dit:" + oevent.data); }; omyWorker.PostMessage ("Hello"); </cript> myFile.txt (le fichier qui synchronise l'objet XMLHTTPREQUEST demandé): bonjour mon monde !!Comprend le code des travailleurs: mytask.js
self.onMessage = function (oevent) {if (oevent.data === "Hello") {var oreq = new xmlhttprequest (); oreq.open ("get", "myfile.txt", false); // demande synchrone oreq.send (null); self.PostMessage (oreq.ResponSeText); }};Remarque: Étant donné que le travailleur est utilisé, la demande est en fait asynchrone.
Des méthodes similaires peuvent être utilisées pour permettre aux scripts d'interagir avec le serveur en arrière-plan et de précharger certains contenus. Consultez l'utilisation des travailleurs du Web pour plus de détails
2. La situation où les demandes synchrones doivent être utilisées
Dans de rares cas, seules les demandes de mode synchrone XMLHTTPREQUEST peuvent être utilisées. Par exemple, dans la fenêtre.onUnload et Window.onBeforeunLoad Work Gestion des fonctions. L'utilisation de XMLHttpRequest asynchrone dans la fonction de gestionnaire d'événements de décharge de la page entraînera le problème: lorsque la réponse est retournée, la page n'existe plus et toutes les variables et fonctions de rappel ont été détruites. Le résultat ne peut provoquer qu'une erreur, "la fonction n'est pas définie". La solution consiste à utiliser la demande en mode de synchronisation ici, afin que la page ne soit pas fermée jusqu'à la fin de la demande.
window.onbeforeunload = function () {var oreq = new xmlhttprequest (); oreq.open ("get", "logout.php? nick =" + Escape (myname), false); // demande synchrone oreq.send (null); if (oreq.ResponSeText.trim ()! == "Overy"); {// "EXITED" La sortie de données renvoyée est-ce que la sortie a échoué, voulez-vous exécuter manuellement la sortie? "; }};Demande asynchrone
Si vous utilisez le mode asynchrone, lorsque les données sont complètement demandées, une fonction de rappel spécifiée sera exécutée. Lors de l'exécution de la demande, le navigateur peut normalement exécuter d'autres transactions.
3. Exemple: Créez une méthode standard pour lire les fichiers externes
Dans certaines exigences, plusieurs fichiers externes doivent être lus. Il s'agit d'une fonction standard. Cette fonction utilise l'objet XMLHTTPRequest pour les demandes asynchrones. Il vous permet également de spécifier une fonction de rappel différente une fois chaque lecture de fichier terminée.
Fonction LoadFile (surl, timeout, fcallback / *, passez dans le paramètre 1, passez dans le paramètre 2, etc. * /) {var apassargs = array.prototype.slice.call (arguments, 3), oreq = new xmlhttprequest (); oreq.ontimeout = function () {console.log ("requier le délai d'attente."); } oreq.onreadystateChange = function () {if (oreq.readystate === 4) {if (oreq.status === 200) {fcallback.apply (oreq, apassargs); } else {console.log ("erreur", oreq.statustext); }}}; oreq.open ("get", Surl, true); oreq.timeout = timeout; Oreq.Send (null);}Utilisation de la fonction de chargement:
fonction showMessage (smsg) {alert (smsg + this.responsext);} loadFile ("message.txt", 200, showMessage, "nouveau message! // n");La ligne 1 définit une fonction. Une fois le fichier lu, la fonction fcallback sera appelée avec tous les paramètres après le troisième paramètre comme ses propres paramètres.
La ligne 3 utilise un paramètre de délai d'expiration pour éviter que votre code exécute l'exécution à long terme des données de retour de la demande de lecture. En attribuant une valeur à la propriété temporelle de l'objet XMLHTTPRequest à la propriété Timeout
Le sixième comportement sur la poignée de l'événement destateChange spécifie la fonction de rappel. Chaque fois que la fonction s'exécute, vérifie si la demande se termine (l'état de la demande est 4). Dans l'affirmative, détermine si la demande est réussie (le statut HTTP est de 200). Si c'est le cas, publie le code source de la page. Si une erreur se produit, diffuse le message d'erreur.
La ligne 15 spécifie que le troisième paramètre est vrai, indiquant que la demande doit être exécutée en mode asynchrone.
4. Exemple: utilisez des demandes asynchrones, aucune fermeture n'est utilisée.
fonction switchxhrState () {switch (this.readystate) {case 0: console.log ("La méthode Open () n'a pas encore été appelée."); Break; Cas 1: Console.log ("La méthode Send () n'a pas encore été appelée."); Break; Cas 2: Console.log ("La méthode Send () a été appelée, l'en-tête de réponse et l'état de réponse ont été renvoyés."); Break; Cas 3: Console.log ("Télécharger, une partie de l'entité de réponse a été obtenue."); Break; Cas 4: Console.log ("Demande terminée!"); this.callback.Apply (this, this.arguments); }}; fonction chargement (Surl, fcallback / *, passez dans le paramètre 1, passez dans le paramètre 2, etc. * /) {var oreq = new xmlhttprequest (); oreq.callback = fcallback; oreq.arguments = array.prototype.slice.call (arguments, 2); oreq.onreadystateChange = switchXhrState; oreq.open ("get", Surl, true); Oreq.Send (null);}Utiliser Bind:
fonction switchXhrState (fcallback, aarguments) {switch (this.readystate) {case 0: console.log ("La méthode open () n'a pas été appelée."); Break; Cas 1: Console.log ("La méthode Send () n'a pas été appelée."); Break; Cas 2: Console.log ("La méthode Send () a été appelée, l'en-tête de réponse et l'état de réponse ont été renvoyés."); Break; Cas 3: Console.log ("L'entité de réponse partielle a été obtenue pendant le téléchargement."); Break; Cas 4: Console.log ("Demande terminée!"); fcallback.Apply (this, aarguments); }}; fonction chargement (Surl, fcallback / *, passez dans le paramètre 1, passez dans le paramètre 2, etc. * /) {var oreq = new xmlhttprequest (); oreq.onreadystatechange = switchxhrState.bind (oreq, fcallback, array.prototype.slice.call (arguments, 2)); oreq.open ("get", Surl, true); Oreq.Send (null);}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.