1.はじめに
（1）AJAX（非同期JavaScriptとXML）
AJAXは元々JavaScriptの非同期のXMLドキュメントを介してサーバからデータを取得し、ページの対応するセクションを更新し、ページ全体をリフレッシュ避けるためにするためのもの
その後、ゆっくりと同義になる単語は、ブラウザとサーバーでスクリプトを介して通信する、それが本来の意味を拡張し、より持ち
換言すれば、限り、サーバは、スクリプトを介してデータを取得するための要求を送信するように、要求は、AJAXリクエストと呼ぶことにします
（2）のXMLHttpRequest
XMLHttpRequestのオブジェクトブラウザが構築され、我々は、サーバーオブジェクトでデータ交換を要求に対する応答を送受信することができます
多くは、基礎となるAJAX XMLHttpRequestオブジェクトによって達成されています
使用して2、
コンストラクタによってXMLHttpRequest()はXMLHttpRequestオブジェクトを作成します
次のようにXMLHttpRequestオブジェクトの共通属性：
-
readyState：読み取り専用属性は、要求の現在の状態を示しますもしそうであれば
0、要求は一例を示す生成されたが、コールされたopen()方法をもしそうであれば
1、それが呼び出されたと言ったopen()方法が、しかし呼び出していないsend()方法をそうである場合
2、それが呼び出された前記send()方法を、サーバによって返されたヘッダ情報を受信しましたそれがある場合は
3、データを受信しているボディは、サーバから返されましたもしそうであれば
4、サーバが返すことを示すデータが受信されている、またはエラーが発生します -
response：読み取り専用属性は、サーバーはデータが示し返すの種類responseType確定値 -
responseType：定義返されるデータの種類、値は文字列でありますそれがある場合
'text'や''、サーバが表されたテキストデータを返します。それがある場合
'json'は、サーバーがJSONオブジェクトを返すことを示していますもしそうであれば
'blob'、それは、サーバがBlobオブジェクトを返すことを示していますもしそうであれば
'arraybuffer'、それは、サーバがオブジェクトArrayBufferを返すことを示していますそれがある場合
'document'は、サーバーがDocumentオブジェクトを返すことを示しています -
responseText：要求が失敗した場合はnull読み取り専用属性は、サーバーによって返されたテキストデータを示し、 -
responseXML：要求が失敗した場合、Documentオブジェクトの読み取り専用属性は、サーバーによって返された、またはnull -
responseURL：読み取り専用属性、サーバーが返すデータあることを示すURL -
status：読み取り専用の属性は、HTTPステータスコードを示します -
statusText：読み取り専用属性、HTTP状態情報を示します -
timeout：時間が要求を超えた場合に定義要求のタイムアウトは、要求が自動的に終了されます -
withCredentials：ブール値かどうかを要求するときと、クロスドメイン認証情報を示します
以下のようにXMLHttpRequestオブジェクト一般的に使用される方法は次のとおりです。
-
open()：初期化要求が、それは次の5つのパラメータを受け取り、引数を
method使用するリクエストメソッドを表す文字列であります引数は、
url送信要求の宛先アドレスを表す文字列でありますパラメータは
async、要求が非同期要求するかどうかを示すブール値であり、デフォルトはtrueです引数は
user、デフォルトでは空の文字列認証のためのユーザを表す文字列ですパラメータは
password、デフォルトでは空の文字列認証用のパスワードを表す文字列です -
setRequestHeader()：リクエストヘッダを設定するには、でなければならないopen()後にsend()コールする前に -
overrideMimeType()：サーバが返すデータは、指定されたタイプに解析、あなたがしなければならないopen()、その後send()の前に呼び出します -
send()：リクエストを送信すると、要求は、身体パラメータをもたらすことができます要求のタイプがメンバーであってもよいです
null、String、Blob、ArrayBuffer、Document、FormData -
abort()：中止要求 -
getAllResponseHeaders()：すべてのレスポンスヘッダを取得します。 -
getResponseHeader()：指定された応答ヘッダを取得
次のようにXMLHttpRequestオブジェクトの人気イベントは次のとおりです。
-
readystatechange：readyStateトリガーの変更 -
loadstart：要求が起動する火災（HTTPリクエスト） -
loadend：トリガ（要求の成功または失敗）ときに要求 -
load：リクエストが成功したときに発射します -
error：火災時に要求エラー -
abort：火災時にリクエストが中止され -
timeout：要求がタイムアウトしたときにトリガ -
progress：アップロードとダウンロードの進行状況を聞き、イベントオブジェクトにイベントハンドラを対応するイベントは、そのイベントオブジェクトは、3つのプロパティを持っています属性は、
loaded属性は、データ量が転送された示しtotal、総データ量を示しています属性は
lengthComputable、ロードの進行状況を算出することができるかどうかを示すブール値です
ダウンロードのトリガがあり、注意しなければならないxhrのオブジェクトprogressアップロードトリガーは、イベントxhr.uploadのオブジェクトprogressイベント
3、例
（1）は、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）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）画像を受け取ります
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）モニタの進捗
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()
[記事の続きを読むJavaScriptのシリーズ、見JavaScriptの研究ノート ]