XMLHTTPRequest est une interface de navigateur qui permet à JavaScript d'effectuer la communication http (s).
Au début, Microsoft a introduit cette interface dans IE 5. Parce qu'elle est si utile, d'autres navigateurs ont imité et déployé, donc les opérations Ajax sont nées.
Cependant, cette interface n'a pas été standardisée et l'implémentation de chaque navigateur est plus ou moins différente. Une fois le concept de HTML 5 formé, W3C a commencé à envisager de standardiser cette interface. En février 2008, le projet de niveau 2 de XMLHTTPREQUEST a été proposé.
Cette nouvelle version de XMLHttpRequest propose de nombreuses nouvelles fonctionnalités utiles qui favoriseront considérablement l'innovation sur Internet. Cet article présente cette nouvelle version en détail.
1. Version ancienne de l'objet XMLHttpRequest
Avant d'introduire la nouvelle version, passons en revue l'utilisation de l'ancienne version.
Tout d'abord, créez une nouvelle instance de XMLHttpRequest.
var xhr = new xmlHttpRequest ();
Ensuite, une demande HTTP est publiée à l'hôte distant.
La copie de code est la suivante:
xhr.open ('get', 'example.php');
xhr.send ();
Ensuite, attendez que l'hôte distant réponde. Pour le moment, vous devez surveiller les modifications d'état de l'objet XMLHTTPRequest et spécifier la fonction de rappel.
xhr.onreadystateChange = function () {if (xhr.readystate == 4 && xhr.status == 200) {alert (xhr.ResponSeText); } else {alert (xhr.statustext); }};Le code ci-dessus contient les principales propriétés de l'ancienne version de l'objet XmlHttpRequest:
La copie de code est la suivante:
* xhr.readystate: L'état de l'objet XMLHTTPRequest, égal à 4 signifie que les données ont été reçues.
* xhr.status: le code d'état renvoyé par le serveur, égal à 200 signifie que tout est normal.
* xhr.ResponSeText: données de texte renvoyées par le serveur
* xhr.responsexml: données de format xml renvoyées par le serveur
* xhr.statustext: le texte d'état renvoyé par le serveur.
2. Inconvénients de l'ancienne version
L'ancienne version de l'objet XMLHttpRequest a les inconvénients suivants:
* Seule la transmission de données texte est prise en charge et ne peut pas être utilisée pour lire et télécharger des fichiers binaires.
* Lors de la transmission et de la réception de données, il n'y a aucune information de progression, vous ne pouvez donc que vous ne pouvez que savoir si elle a été terminée.
* En raison de la «même stratégie d'origine», vous ne pouvez demander que des données à partir de serveurs avec le même nom de domaine.
3. Fonctions de la nouvelle version
La nouvelle version de l'objet XMLHTTPRequest a apporté des améliorations significatives aux lacunes de l'ancienne version.
La copie de code est la suivante:
* Vous pouvez définir la limite de temps pour les demandes HTTP.
* Les objets FormData peuvent être utilisés pour gérer les données de formulaire.
* Les fichiers peuvent être téléchargés.
* Vous pouvez demander des données sous différents noms de domaine (demande de domaine croisé).
* Vous pouvez obtenir des données binaires côté serveur.
* Vous pouvez obtenir les informations de progression de la transmission des données.
Ensuite, je présenterai ces nouvelles fonctionnalités une par une.
4. Limite de temps pour les demandes HTTP
Parfois, les opérations de l'Ajax prennent du temps et il est impossible de prédire combien de temps cela prendra. Si la vitesse Internet est très lente, les utilisateurs peuvent devoir attendre longtemps.
La nouvelle version de l'objet XMLHTTPRequest a ajouté un attribut de délai de temps, qui peut définir la limite de temps pour les demandes HTTP.
xhr.Timeout = 3000;
L'instruction ci-dessus définit le temps d'attente maximal à 3000 millisecondes. Une fois ce délai passé, la demande HTTP sera automatiquement arrêtée. Il existe également un événement de temps mort qui spécifie la fonction de rappel.
La copie de code est la suivante:
xhr.ontimeout = fonction (événement) {
alert («Demande le délai d'expiration!»);
}
Actuellement, Opera, Firefox et IE 10 soutiennent cette propriété. Cette propriété de IE 8 et IE 9 appartient à l'objet XdomainRequest, tandis que Chrome et Safari ne le soutiennent pas.
5. objet FormData
Les opérations AJAX sont souvent utilisées pour transmettre des données de formulaire. Pour faciliter le traitement des formulaires, HTML 5 a ajouté un objet FormData aux formes simulées.
Créez d'abord un nouvel objet FormData.
var formdata = new formData ();
Ensuite, ajoutez-y un élément de formulaire.
formdata.append («nom d'utilisateur», «zhang san»);
formdata.append ('id', 123456);
Enfin, transmettez directement cet objet FormData. C'est exactement la même chose que la soumission d'un formulaire Web.
xhr.send (formdata);
L'objet FormData peut également être utilisé pour obtenir la valeur d'un formulaire Web.
La copie de code est la suivante:
var form = document.getElementById ('myform');
var formdata = new formData (form);
formdata.append («secret», «123456»); // Ajouter un élément de formulaire
xhr.open ('post', form.action);
xhr.send (formdata);
6. Télécharger des fichiers
La nouvelle version de l'objet XMLHTTPRequest peut non seulement envoyer des informations de texte, mais également télécharger des fichiers.
En supposant que les fichiers sont un élément de formulaire (entrée [type = "fichier"]) de "SELECT Fichier", nous le chargeons dans l'objet FormData.
La copie de code est la suivante:
var formdata = new formData ();
pour (var i = 0; i <files.length; i ++) {
formdata.append ('files []', fichiers [i]);
}
Ensuite, envoyez cet objet FormData.
xhr.send (formdata);
7. Partage de ressources inter-domaines (CORS)
La nouvelle version de l'objet XMLHTTPRequest peut émettre des demandes HTTP aux serveurs avec différents noms de domaine. C'est ce qu'on appelle le «partage des ressources croisées» (CORS).
La condition préalable à l'utilisation de "partage de ressources inter-domaines" est que le navigateur doit prendre en charge cette fonction et que le serveur doit accepter ce "interm". Si les conditions ci-dessus peuvent être remplies, le code est écrit exactement comme celui des demandes de domaine non croisé.
xhr.open ('get', 'http: //other.server/and/path/to/script');
Actuellement, en plus des IE 8 et IE 9, les navigateurs grand public prennent en charge les COR, et IE 10 prendra également en charge cette fonction. Pour les paramètres côté serveur, veuillez vous référer à "Contrôle d'accès côté serveur".
8. Recevoir des données binaires (Méthode A: réécrivez MIMETYPE)
L'ancienne version de l'objet XMLHttpRequest ne peut récupérer que les données texte du serveur (sinon son nom ne commencera pas par XML), tandis que la nouvelle version peut récupérer les données binaires.
Voici deux façons différentes. L'ancienne approche consiste à remplacer le mimétype des données, à déguiser les données binaires renvoyées par le serveur en tant que données de texte et à dire au navigateur qu'il s'agit d'un jeu de caractères défini par l'utilisateur.
xhr.OverridemiMetype ("text / plain; charset = x-user-définis");
Ensuite, utilisez la propriété ResponseText pour recevoir les données binaires renvoyées par le serveur.
var binstr = xhr.ResponSeText;
Étant donné que le navigateur les traite comme des données de texte pour le moment, il doit être restauré sur les données binaires une par une.
La copie de code est la suivante:
pour (var i = 0, len = binstr.length; i <len; ++ i) {
var c = binstr.Charcodeat (i);
var octet = c & 0xff;
}
L'opération de bit "C & 0xFF" de la dernière ligne signifie que parmi les deux octets de chaque caractère, seul l'octet suivant est conservé et l'octet précédent est jeté. La raison en est que lorsque le navigateur interprète les caractères, il interprétera automatiquement les caractères dans la section 0xf700-0xf7ff d'Unicode.
8. Recevoir des données binaires (méthode B: propriété ResponseType)
La nouvelle façon de récupérer les données binaires du serveur est d'utiliser la propriété ResponseType nouvellement ajoutée. Si le serveur renvoie les données texte, la valeur de cette propriété est "texte", qui est la valeur par défaut. Les navigateurs plus récents prennent également en charge d'autres valeurs, c'est-à-dire qu'ils peuvent recevoir des données dans d'autres formats.
Vous pouvez définir le ResponseType sur Blob, ce qui signifie que le serveur renvoie un objet binaire.
La copie de code est la suivante:
var xhr = new xmlHttpRequest ();
xhr.open ('get', '/path/to/image.png');
xhr.ResponSetype = 'blob';
Lorsque vous recevez des données, utilisez simplement l'objet BLOB fourni avec votre navigateur.
var blob = new Blob ([xhr.Response], {type: 'image / png'});
Notez qu'il s'agit de lire xhr.Response, pas xhr.ResponSeText.
Vous pouvez également définir le ResponseType sur ArrayBuffer et installer les données binaires dans un tableau.
La copie de code est la suivante:
var xhr = new xmlHttpRequest ();
xhr.open ('get', '/path/to/image.png');
xhr.ResponSetype = "ArrayBuffer";
Lorsque vous recevez des données, vous devez traverser ce tableau.
La copie de code est la suivante:
var arrayBuffer = xhr.Response;
if (arrayBuffer) {
var bytearray = new uint8Array (arrayBuffer);
pour (var i = 0; i <bytearray.ByteLength; i ++) {
// faire quelque chose
}
}
Pour une discussion plus détaillée, voir l'envoi et la réception de données binaires.
9. Informations de progression
La nouvelle version de l'objet XMLHttpRequest a un événement de progression lors de la transmission de données, qui est utilisée pour renvoyer des informations de progression.
Il est divisé en deux situations: Téléchargez et téléchargez. L'événement de progression téléchargé appartient à l'objet XMLHTTPRequest, et l'événement de progression téléchargé appartient à l'objet XMLHTTPRequest.upload.
Définissons d'abord la fonction de rappel de l'événement de progression.
La copie de code est la suivante:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
Ensuite, dans la fonction de rappel, utilisez certaines propriétés de cet événement.
La copie de code est la suivante:
fonction updatedProgress (événement) {
if (event.lengthcompautable) {
var %Complete = event.loaded / event.total;
}
}
Dans le code ci-dessus, Event.Total est le total des octets qui doivent être transférés, et Event.Loaded est les octets qui ont été transférés. Si Event.Lengthcompitable n'est pas vrai, Event.Total est égal à 0.
Il existe cinq autres événements liés à l'événement de progression, qui peut spécifier la fonction de rappel séparément:
* Événement de chargement: le transfert s'est terminé avec succès.
* Événement abandonné: la transmission a été annulée par l'utilisateur.
* Événement d'erreur: une erreur s'est produite pendant la transmission.
* Événement LoadStart: le transfert commence.
* Événement Loadend: la transmission se termine, mais je ne sais pas s'il réussit ou échoue.
10. Matériel de lecture
1. Introduction à XMLHttpRequest Niveau 2: Une introduction complète aux nouvelles fonctionnalités.
2. Nouvelles astuces dans XMLHttpRequest 2: quelques introductions d'utilisation.
3. Utilisation de XMLHTTPRequest: quelques usages avancés, ciblant principalement les navigateurs Firefox.
4. Contrôle d'accès HTTP: Présentation CORS.
5. DOM Contrôle d'accès à l'aide du partage des ressources croisées: 9 types d'informations d'en-tête HTTP sur CORS
6. Contrôle d'accès côté serveur: Paramètres CORS côté serveur.
7. Activer les paramètres CORS: Server CORS.