Analyser et manipuler les attributs de réponse ResponseXML
Si vous utilisez XMLHTTPRequest pour obtenir le contenu d'un document XML distant, la propriété ResponseXML sera un objet DOM analysé à partir du document XML, qui est difficile à manipuler et à analyser. Voici cinq façons principales d'analyser les documents XML:
1. Utilisez XPATH pour localiser la partie de formulation du document.
2. Utilisez Jxon pour le convertir en une arborescence d'objet JavaScript.
3. Analyser manuellement et sérialiser XML en chaînes ou objets.
4. Utilisez XMLSerializer pour sérialiser l'arborescence DOM en une chaîne ou un fichier.
5. Si vous connaissez le contenu du document XML à l'avance, vous pouvez utiliser RegexP. Si vous êtes affecté par Newlines lors de la numérisation avec Regexp, vous pouvez supprimer toutes les nouvelles lines. Cependant, cette approche est une "dernière main" car si le code XML change légèrement, l'approche peut échouer.
Parses et manipule la propriété ResponseText contenant des documents HTML
Remarque: HTML est autorisé à être analysé via l'attribut xmlhttprequest.Responsexml dans la spécification w3c xmlhttprequest. Pour plus de détails, veuillez lire HTML dans XMLHttpRequest.
Si vous utilisez XMLHttpRequest pour obtenir une page HTML à partir de l'extrémité distante, toutes les balises HTML sont stockées dans la propriété ResponseText en tant que chaîne, ce qui rend difficile la manipulation et l'analyse de ces balises. Il existe trois façons principales d'analyser ces balises HTML:
1. Utilisez la propriété xmlhttprequest.Responsexml.
2. Injecter le contenu dans un fragment de document via fragment.body.innerhtml et itérer à travers des fragments dans le dom.
3. Si vous connaissez le contenu du document HTML à l'avance, vous pouvez utiliser RegexP. Si vous êtes affecté par Newlines lors de la numérisation avec Regexp, vous pouvez supprimer toutes les nouvelles lines. Cependant, cette approche est une "dernière main" car si le code HTML change légèrement, l'approche peut échouer.
Gestion des données binaires
Bien que XMLHttpRequest soit généralement utilisé pour envoyer et recevoir des données de texte, elle peut réellement envoyer et accepter le contenu binaire. Il existe de nombreuses façons bien testées de forcer les données binaires à envoyer à l'aide de XMLHTTPRequest. La méthode .OverridemiMetype () de XmlHttpRequest est une solution, bien qu'elle ne soit pas une méthode standard.
var oreq = new xmlHttpRequest (); oreq.open ("get", url, true); // récupérer les données non traitées en tant que stringoreq.overridemimétype binaire ("text / plain; charset = x-user-defind"); / * ...La propriété ResponseType a été ajoutée à la spécification XMLHTTPRequest Level 2, ce qui facilite l'envoi et la réception de données binaires.
var oreq = new xmlHttpRequest (); oreq.onload = function (e) {var arrayBuffer = xhr.Response; // pas ResponseText / * ... * /} oreq.open ("get", url, true); oreq.ResponSetype = "arrayBuffer"; oreq.send ();Acceptez les données binaires à l'aide du tableau de type JavaScript
Vous pouvez modifier le type de données d'une réponse renvoyée du serveur en définissant la propriété ResponseType d'un objet XMLHTTPREQUEST. Les valeurs d'attribut disponibles sont des chaînes vides (par défaut), "ArrayBuffer", "Blob", "Document" et "Text". Les valeurs de l'attribut de réponse varieront en fonction de la valeur de la propriété ResponseType, qui peut être un ArrayBuffer, Blob, Document, String ou Null (si la demande n'est pas terminée ou échouée)
L'exemple suivant se lit un fichier d'image binaire, et un tableau d'entiers non signés 8 bits est créé à partir des octets natifs binaires du fichier.
var oreq = new xmlhttprequest (); oreq.open ("get", "/myfile.png", true); oreq.ResponSetype = "arrayBuffer"; oreq.onload = function (oevent) {var arrayBuffer = oreq.Ressage; // Remarque: pas oreq.ResponSeText if (arrayBuffer) {var bytearray = new uint8Array (arrayBuffer); for (var i = 0; i <bytearray.ByteLength; i ++) {// Opération pour chaque octet dans le tableau}}}; oreq.send (null);En plus de la méthode ci-dessus, vous pouvez également utiliser l'API BlobBuilder pour ajouter directement des données ArrayBuffer à un objet Blob. Étant donné que l'API est toujours au stade expérimental, un préfixe spécifique doit être ajouté:
var blobBuilder = window.mozBlobBuilder || window.webkitBlobBuilder || window.msblobbuilder || window.blobBuilder; var oreq = new xmlhttprequest (); oreq.open ("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) {var blobbuilder = new blobbuilder ();); BLOBBUILDER.APPEND (Oreq.Response); var blob = blobBuilder.getBlob ("image / png"); // ...}; oreq.send ();Accepter les données binaires dans les anciens navigateurs
La méthode LOAD_BINAL_RESOURCE () suivante peut charger des données binaires de l'URL spécifiées et renvoyer les données à l'appelant.
Fonction Load_Binary_Resource (URL) {var req = new XmlHttpRequest (); req.open (/ 'get /', url, false); // xhr Binary Charset opt par Marcus Granado 2006 [http://mgran.blogspot.com] req.overridemimétype (/ 'text / plain; charset = x-ser-defined /'); req.send (null); if (req.status! = 200) return / '/'; return req.ResponSeText;}L'opération la plus merveilleuse est dans la cinquième ligne, qui réécrit le type MIME par défaut, forçant le navigateur à traiter la réponse comme un fichier texte brut, à l'aide d'un jeu de caractères défini par l'utilisateur. Cela indique au navigateur de ne pas analyser les données et de renvoyer directement le bytecode non transformé.
var filestream = load_binary_resource (url); var abyte = filestream.charcodeat (x) & 0xff; // Jet de bit haut de gamme (F7)
L'exemple ci-dessus obtient les octets à x à partir des données binaires renvoyées par la demande. La plage de décalage valide est de 0 à FileStream.length-1.
Consultez le fichier de téléchargement à l'aide de XMLHttpRequest pour plus de détails et affichez le fichier de téléchargement.
Envoyer des données binaires
La méthode d'envoi de l'objet XMLHTTPRequest a été améliorée et les données binaires peuvent être envoyées simplement en passant un objet ArrayBuffer, Blob ou Fichier.
L'exemple suivant crée un fichier texte et envoie le fichier au serveur à l'aide de la méthode Post. Vous pouvez également utiliser d'autres types de données binaires autres que le fichier texte.
var oreq = new xmlhttprequest (); oreq.open ("post", url, true); oreq.onload = function (oevent) {// une fois le téléchargement terminé.}; var bb = new BlobBuilder (); // Un préfixe approprié est requis: window.mozblobbuilder ou fenêtre.webkitblobbuilderbb.append (/ 'abc123 /'); oreq.send (bb.getblob (/ text / plain / '));Envoyer une gamme de types sous forme de données binaires
Vous pouvez envoyer des tableaux de type JavaScript sous forme de données binaires.
var myArray = new ArrayBuffer(512);var longInt8View = new Uint8Array(myArray);for (var i=0; i< longInt8View.length; i++) { longInt8View[i] = i % 255;}var xhr = new XMLHttpRequest;xhr.open("POST", url, false); xhr.send (MyArray);L'exemple ci-dessus crée un tableau entier 8 bits de 512 octets et l'envoie. Bien sûr, vous pouvez également envoyer des données binaires.
Surveiller les progrès
La surveillance des événements de progrès qui prend en charge DOM est pour la transmission XMLHTTPRequest et suit la spécification de l'événement de progression de l'API Web: ces événements implémentent l'interface ProgressEvent.
var req = new xmlhttprequest (); // télécharger écouter req.addeventListener ("progress", updateProgress, false); req.addeventListener ("charger", transferComplete, false); req.addeventListener ("error", transferfailled, false); req.addeventListener ("aborte", transfercaceled, false); req.open (...); ... // progresse sur les transferts du serveur vers la fonction client (téléchargements) updatedProgress (evt) {if (evt.lengthcompautable) {var %Complete = evt.loaded / evt.total; ...} else {// incapable de calculer les informations de progression car la taille totale est inconnue}}Remarque: vous devez ajouter une écoute d'événement avant de demander d'appeler Open (). Sinon, l'événement de progression ne sera pas déclenché.
Dans l'exemple précédent, l'événement de progression est spécifié pour être traité par la fonction UpdateProgress () et reçoit un nombre total d'octets transmis totaux et déjà transmis chargés, qui est la longueur globale (octets) des données transmises à partir de l'en-tête "contenu-longueur". Cependant, si la valeur de la propriété computable de longueur est fausse, alors le nombre total d'octets est inconnu et que la valeur totale est 0. Si la longueur est connue, la propriété computable est vraie
L'événement Progress existe dans les transmissions de téléchargement et de téléchargement. L'événement lié au téléchargement est déclenché sur l'objet XMLHTTPRequest, tout comme l'exemple ci-dessus. Les événements liés à télécharger sont déclenchés sur l'objet xmlhttprequest.upload, comme ceci:
var req = new xmlhttprequest (); // télécharger écouteur req.upload.addeventListener ("progress", updateProgress); req.upload.addeventListener ("charger", transfercomplete); req.upload.adeventListener ("error", transferfailed); req.upload.AdDeventListener ("Abort", transfailed); req.upload.AdDeventListener ("Abort", transfére transfertCanceled); req.open ();Remarque: L'événement de progression n'est pas valide lors de l'utilisation du fichier: protocole.
Utilisez l'événement Loadend pour détecter les trois conditions d'extrémité de charge (avorter, charge, erreur):
req.addeventListener ("LoadEnd", LoadEnd, false);
Il convient de noter qu'il n'y a aucun moyen de savoir exactement quelle condition les informations reçues par l'événement Loadend sont causées par la résiliation de l'opération; Cependant, vous pouvez utiliser cet événement pour le gérer à la fin de toutes les transmissions.
L'objet XMLHTTPRequest déclenche différents types d'événements à différentes étapes de la demande, il n'a donc pas besoin de vérifier la propriété ReadyState.
Lorsque Send () est appelé, un seul événement LoadStart est déclenché. Lorsque la réponse du serveur se charge, l'objet XMLHTTPRequest connaîtra un événement de progression, généralement toutes les 50 millisecondes, de sorte que ces événements peuvent être utilisés pour donner aux utilisateurs des commentaires sur la progression de la demande.
Si la demande se termine rapidement, elle peut ne jamais déclencher l'événement de progression. Une fois l'événement se terminer, l'événement de charge sera déclenché.
Il y a 3 cas où les demandes HTTP ne peuvent pas être terminées, correspondant à 3 événements. Si le temps mort de demande, l'événement de temps mort sera déclenché. Si la demande abandonne, l'événement abandonné sera déclenché. Les erreurs de réseau comme trop de redirections empêchent la demande de terminer, mais lorsque elles se produisent, un événement d'erreur est déclenché.
Pour toute demande spécifique, le navigateur ne déclenchera que l'un des événements de charge, d'abandon, de temps mort et d'erreur, ainsi que de l'événement de progression.
if (/ 'onProgress /' dans (new xmlhttprequest ())) {// détection si les événements de progrès sont pris en charge var demande = new xmlhttprequest (); request.onprogress = function (e) {if (e.Lengthcompitableable) {progress.innerhtml = math.round (100 * e.loaded / e.total) + / '% /'; }}}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.