notes d'étude JavaScript (XVI) XMLHttpRequest

1. introduction

(1) AJAX (Asynchronous JavaScript and XML)

AJAX initialement conçu pour obtenir des données à partir du serveur via des documents XML JavaScript asynchrone, puis mettre à jour la section correspondante de la page, pour éviter de rafraîchir la page entière

Plus tard, le mot devient lentement synonyme communiquent via un script dans le navigateur et le serveur, il a plus à développer le sens original

En d'autres termes, tant que le serveur envoie une requête pour obtenir les données par le biais d'un script, la demande sera appelée requête AJAX

(2) XMLHttpRequest

XMLHttpRequest Object Browser est construit, nous pouvons envoyer et de recevoir une réponse à la demande de l'objet serveur, l'échange de données

Beaucoup sont atteints par l'objet XMLHttpRequest AJAX sous-jacente

2, en utilisant

Par le constructeur XMLHttpRequest()pour créer un objet XMLHttpRequest

attributs communs objet XMLHttpRequest comme suit:

readyState: Attribut de lecture seule indique l'état actuel de la demande

S'il est 0, la demande a été généré montrant des exemples, mais appelez la open()méthode

Si elle est 1, il a dit qu'il avait invoqué la open()méthode, mais n'a pas appelé la send()méthode

S'il est 2, il a dit qu'il avait invoqué la send()méthode, et a reçu les informations d' en- tête renvoyé par le serveur

Si elle est 3, les données sont reçues corps renvoyé par le serveur

S'il est 4indique que le serveur renvoie les données ont été reçues, ou une erreur se produit
response: Attribut de lecture seule, le serveur renvoie les données indiquent que le type de la responseTypevaleur déterminée
responseType: Définit le type de données renvoyées, la valeur est une chaîne

Si elle est 'text'ou '', le serveur renvoie les données de texte représentés

S'il est 'json', il indique que le serveur retourne des objets JSON

S'il est 'blob', il indique que le serveur retourne un objet Blob

S'il est 'arraybuffer', il indique que le serveur renvoie l'objet ArrayBuffer

S'il est 'document', il indique que le serveur renvoie l'objet de document
responseText: Attribut de lecture seule indique que les données de texte renvoyé par le serveur si la requête échoue ou nulle
responseXML: Attribut lecture seule de l'objet de document renvoyé par le serveur, ou null si la requête échoue
responseURL: Attribut de lecture seule, ce qui indique que le serveur renvoie l'URL de données
status: Attribut de lecture seule indique le code d'état HTTP
statusText: Attribut de lecture seule, les informations d'état HTTP indique
timeout: Délai d'attente de requête de définition, si la durée est supérieure à la demande, la demande est automatiquement terminé
withCredentials: Une valeur booléenne indiquant si la demande quand une information d'autorisation inter-domaines avec

objet XMLHttpRequest méthode couramment utilisée est la suivante:

open(): Demande d'initialisation, il reçoit les cinq paramètres suivants

L' argument methodest une chaîne représentant la méthode de demande à utiliser

Argument urlest une chaîne représentant une adresse de destination de demande de transmission

Le paramètre asyncest une valeur booléenne qui indique si la requête nécessite asynchrone, la valeur par défaut est vrai

Argument userest une chaîne représentant un utilisateur pour l' authentification, la valeur par défaut est une chaîne vide

Le paramètre passwordest une chaîne qui représente les mots de passe pour l' authentification, la valeur par défaut est une chaîne vide
setRequestHeader(): Les en- têtes de demande de réglage, vous devez être open()après l' send()appel avant
overrideMimeType(): Le serveur renvoie les données analysées dans le type spécifié, vous devez open()alors send()appeler avant
send(): Envoi d'une demande, la demande peut apporter le paramètre du corps

Type de demande peut être membre null, String, Blob, ArrayBuffer, Document,FormData
abort(): Demande Abandonner
getAllResponseHeaders(): Obtenez tous les en-têtes de réponse
getResponseHeader(): Obtient l'en-tête de réponse spécifié

objet XMLHttpRequest événements populaires sont les suivantes:

readystatechange: En readyStatecas de déclenchement des changements
loadstart: Les incendies lorsqu'une demande de démarrage (requête HTTP)
loadend: Trigger (succès ou l'échec demande) Lorsque la demande
load: Se déclenche lorsque la demande est réussie
error: Se déclenche lorsque les erreurs de demande
abort: Se déclenche lorsque la demande est avorté
timeout: Déclenché lorsque la demande a expiré
progress: Écoutez télécharger et la progression du téléchargement, l'événement gestionnaire d'événements correspondant à un objet événement, cet objet événement a trois propriétés

Attribut loadedindique la quantité de données ont été transférées, l'attribut totalindique la quantité totale de données

Attribut lengthComputableindique si la progression du chargement peut être calculée, est une valeur booléenne

Il convient de noter, déclencheur de téléchargement est xhrun objet de l' progressévénement, déclencheur de téléchargement est xhr.uploadun objet de progressl'événement

3, exemples

(1) transmet une demande GET

var xhr = new XMLHttpRequest()

xhr.responseType = 'text'

xhr.open('GET', 'http://www.httpbin.org/get')

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        } else {
            console.error(xhr.statusText)
        }
    }
}

xhr.onerror = function() {
    console.log('error')
}

xhr.send()

(2) envoyer une requête POST

var xhr = new XMLHttpRequest()

xhr.open('POST', 'http://www.httpbin.org/post')

xhr.onload = function() {
    console.log(xhr.response)
}

xhr.onerror = function() {
    console.log('error')
}

var data = new FormData()
data.append('username', 'admin')
data.append('password', '12345')

xhr.send(data)

(3) recevoir des photos

var xhr = new XMLHttpRequest()

xhr.open('GET', '/path/to/image.png')

xhr.responseType = 'blob'

xhr.onload = function() {
    if (this.status === 200) {
    	var blob = xhr.response
        
        var img = document.createElement('img')
        img.onload = function() { window.URL.revokeObjectURL(img.src) }
        ime.src = window.URL.createObjectURL(blob)
        document.getElementById('container').appendChild(img)
    }
}

xhr.send()

(4) à suivre les progrès

var xhr = new XMLHttpRequest()

xhr.open('GET', '/download/or/upload')

// 用于监听上传进度
xhr.onprogress = progressHandler
// 用于监听上传进度
xhr.upload.onprogress = progressHandler

function progressHandler(e) {
    if (e.lengthComputable) {
        console.log(e.loaded / e.total)
    } else {
        console.log('无法获取进度')
    }
}

xhr.send()

[Lire la série Plus d'articles JavaScript, consultez les notes d'étude JavaScript ]