XMLHTTPREQUESTは、JavaScriptがHTTP（S）通信を実行できるようにするブラウザインターフェイスです。
最初、MicrosoftはIE 5にこのインターフェイスを導入しました。それは非常に便利であるため、他のブラウザが模倣して展開しているため、Ajax操作が生まれました。
ただし、このインターフェイスは標準化されておらず、各ブラウザの実装は多かれ少なかれ異なります。 HTML 5の概念が形成された後、W3Cはこのインターフェイスの標準化を検討し始めました。 2008年2月、XMLHTTPREQUESTレベル2ドラフトが提案されました。
XMLHTTPREQUESTのこの新しいバージョンは、インターネットの革新を大いに促進する多くの有用な新機能を提案しています。この記事では、この新しいバージョンを詳細に紹介します。
1。xmlhttprequestオブジェクトの古いバージョン
新しいバージョンを導入する前に、古いバージョンの使用法を確認しましょう。
まず、xmlhttprequestの新しいインスタンスを作成します。
var xhr = new xmlhttprequest（）;
次に、リモートホストにHTTP要求が発行されます。
コードコピーは次のとおりです。
xhr.open（ 'get'、 'emple.php'）;
xhr.send（）;
次に、リモートホストが応答するのを待ちます。現時点では、xmlhttprequestオブジェクトのステータスの変更を監視し、コールバック関数を指定する必要があります。
xhr.onreadystatechange = function（）{if（xhr.readystate == 4 && xhr.status == 200）{alert（xhr.responsetext）; } else {alert（xhr.statustext）; }};上記のコードには、xmlhttprequestオブジェクトの古いバージョンの主なプロパティが含まれています。
コードコピーは次のとおりです。
* XHR.ReadyState：XMLHTTPREQUESTオブジェクトのステータスは、4に等しいことを意味します。
* xhr.status：サーバーによって返されるステータスコードは、200に等しいことを意味します。
* xhr.responsetext：サーバーによって返されたテキストデータ
* xhr.responsexml：サーバーによって返されたXML形式のデータ
* xhr.statustext：サーバーによって返されるステータステキスト。
2。古いバージョンの短所
xmlhttprequestオブジェクトの古いバージョンには、次の欠点があります。
*テキストデータの送信のみがサポートされており、バイナリファイルの読み取りとアップロードに使用することはできません。
*データを送信および受信するとき、進捗情報はありません。そのため、完了したかどうかを促すことしかできません。
*「同じ起源ポリシー」のため、同じドメイン名を持つサーバーからのみデータをリクエストできます。
3。新しいバージョンの関数
XMLHTTPREQUESTオブジェクトの新しいバージョンは、古いバージョンの欠点を大幅に改善しました。
コードコピーは次のとおりです。
* HTTP要求の制限時間を設定できます。
* FormDataオブジェクトを使用してフォームデータを管理できます。
*ファイルをアップロードできます。
*異なるドメイン名の下でデータを要求できます（クロスドメイン要求）。
*サーバー側でバイナリデータを取得できます。
*データ送信の進捗情報を取得できます。
次に、これらの新機能を1つずつ紹介します。
4。HTTPリクエストの時間制限
時々、AJAXの操作は時間がかかり、どれだけ時間がかかるかを予測することは不可能です。インターネットの速度が非常に遅い場合、ユーザーは長い間待つ必要がある場合があります。
XMLHTTPREQUESTオブジェクトの新しいバージョンには、HTTPリクエストの時間制限を設定できるタイムアウト属性が追加されました。
xhr.timeout = 3000;
上記のステートメントでは、最大待ち時間を3000ミリ秒に設定します。この時間制限が可決された後、HTTP要求が自動的に停止します。コールバック関数を指定するタイムアウトイベントもあります。
コードコピーは次のとおりです。
xhr.ontimeout = function（event）{
アラート（ 'リクエストタイムアウト！'）;
}
現在、Opera、Firefox、およびIE 10はこのプロパティをサポートしています。 IE 8およびIE 9のこのプロパティはXdomainRequestオブジェクトに属しますが、ChromeとSafariはサポートしていません。
5。FormDataオブジェクト
Ajax操作は、フォームデータの合格によく使用されます。フォーム処理を容易にするために、HTML 5はフォームをモックするフォームダタオブジェクトを追加しました。
まず、新しいformDataオブジェクトを作成します。
var formdata = new formdata（）;
次に、フォームアイテムを追加します。
formdata.append（ 'username'、 'zhang san'）;
formdata.append（ 'id'、123456）;
最後に、このformDataオブジェクトを直接送信します。これは、Webフォームの送信とまったく同じです。
xhr.send（formdata）;
FormDataオブジェクトを使用して、Webフォームの値を取得することもできます。
コードコピーは次のとおりです。
var form = document.getElementById（ 'myform'）;
var formdata = new formdata（form）;
formdata.append（ 'Secret'、 '123456'）; //フォームアイテムを追加します
xhr.open（ 'post'、form.action）;
xhr.send（formdata）;
6。ファイルをアップロードします
XMLHTTPREQUESTオブジェクトの新しいバージョンは、テキスト情報を送信するだけでなく、ファイルをアップロードすることもできます。
ファイルが「select file」のフォーム要素（input [type = "file"]）であると仮定すると、formdataオブジェクトにロードします。
コードコピーは次のとおりです。
var formdata = new formdata（）;
for（var i = 0; i <files.length; i ++）{
formdata.append（ 'files []'、files [i]）;
}
次に、このformDataオブジェクトを送信します。
xhr.send（formdata）;
7。クロスドメインリソース共有（CORS）
XMLHTTPREQUESTオブジェクトの新しいバージョンは、異なるドメイン名を持つサーバーにHTTPリクエストを発行できます。これは「クロスオリジンリソース共有」（CORS）と呼ばれます。
「クロスドメインリソース共有」を使用するための前提条件は、ブラウザがこの機能をサポートする必要があり、サーバーがこの「クロスドメイン」に同意する必要があることです。上記の条件を満たすことができる場合、コードは非クロスドメインリクエストの条件とまったく同じと書かれています。
xhr.open（ 'get'、 'http：//other.server/and/path/to/script'）;
現在、IE 8およびIE 9に加えて、主流のブラウザはCORSをサポートしており、IE 10もこの機能をサポートします。サーバー側の設定については、「サーバー側のアクセス制御」を参照してください。
8。バイナリデータを受信します（方法A：MIMETYPEを書き直します）
XMLHTTPREQUESTオブジェクトの古いバージョンは、サーバーからテキストデータのみを取得できます（そうでなければ、その名前はXMLで開始されません）。一方、新しいバージョンはバイナリデータを取得できます。
ここに2つの異なる方法があります。古いアプローチは、データのMIMETYPEをオーバーライドし、サーバーによって返されたバイナリデータをテキストデータとして偽装し、これがユーザー定義の文字セットであることをブラウザに伝えることです。
Xhr.OverridemimeType（ "Text/Plain; charset = x-user-defined"）;
次に、ResponseTextプロパティを使用して、サーバーによって返されるバイナリデータを受信します。
var binstr = xhr.responsetext;
ブラウザは現時点ではテキストデータとして扱うため、バイナリデータに1つずつ復元する必要があります。
コードコピーは次のとおりです。
for（var i = 0、len = binstr.length; i <len; ++ i）{
var c = binstr.charcodeat（i）;
var byte = c＆0xff;
}
最後の行のビット操作「C＆0xff」は、各文字の2バイトのうち、次のバイトのみが保持され、前のバイトが捨てられることを意味します。その理由は、ブラウザが文字を解釈すると、文字をUnicodeの0xf700-0xf7ffセクションに自動的に解釈するためです。
8。バイナリデータを受信します（方法B：レスポンスタイプのプロパティ）
サーバーからバイナリデータを取得する新しい方法は、新しく追加されたResponseTypeプロパティを使用することです。サーバーがテキストデータを返す場合、このプロパティの値は「テキスト」であり、これがデフォルト値です。また、新しいブラウザは他の値をサポートしています。つまり、他の形式でデータを受信できます。
ResponseTypeをBLOBに設定できます。つまり、サーバーがバイナリオブジェクトを送信していることを意味します。
コードコピーは次のとおりです。
var xhr = new xmlhttprequest（）;
xhr.open（ 'get'、 '/path/to/image.png'）;
xhr.responsetype = 'blob';
データを受信するときは、ブラウザに付属のBLOBオブジェクトを使用してください。
var blob = new blob（[xhr.response]、{type： 'image/png'}）;
xhr.responsetextではなく、xhr.responseを読み取ることに注意してください。
応答タイプをArrayBufferに設定して、バイナリデータを配列にインストールすることもできます。
コードコピーは次のとおりです。
var xhr = new xmlhttprequest（）;
xhr.open（ 'get'、 '/path/to/image.png'）;
xhr.responsetype = "arraybuffer";
データを受信するときは、この配列を通過する必要があります。
コードコピーは次のとおりです。
var arraybuffer = xhr.response;
if（arraybuffer）{
var bytearray = new uint8array（arraybuffer）;
for（var i = 0; i <bytearray.bytelength; i ++）{
//何かをします
}
}
より詳細な説明については、バイナリデータの送信と受信を参照してください。
9。進捗情報
XMLHTTPREQUESTオブジェクトの新しいバージョンには、データを送信する際に進行状況イベントがあります。これは、進行状況情報を返すために使用されます。
アップロードとダウンロードの2つの状況に分かれています。ダウンロードされたProgressイベントはxmlhttprequestオブジェクトに属し、アップロードされたProgressイベントはxmlhttprequest.uploadオブジェクトに属します。
最初に、進行状況イベントのコールバック関数を定義しましょう。
コードコピーは次のとおりです。
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
次に、コールバック関数で、このイベントのいくつかのプロパティを使用します。
コードコピーは次のとおりです。
関数updateProgress（event）{
if（event.lengthComputable）{
varパーセントcomplete = event.loaded / event.total;
}
}
上記のコードでは、event.totalは転送する必要がある合計バイトであり、event.loadedは転送されたバイトです。 event.lengthComputableが真でない場合、event.Totalは0に等しくなります。
Progressイベントに関連する5つのイベントがあり、コールバック関数を個別に指定できます。
*ロードイベント：転送が正常に完了しました。
*イベント中止：伝送はユーザーによってキャンセルされました。
*エラーイベント：送信中にエラーが発生しました。
*ロードスタートイベント：転送が開始されます。
* LoadEndイベント：送信は終了しますが、成功するか失敗するかはわかりません。
10。読み物
1. XMLHTTPREQUESTレベル2の紹介：新機能の包括的な紹介。
2。xmlhttprequest 2の新しいトリック2：いくつかの使用法の紹介。
3. XMLHTTPREQUESTの使用：主にFirefoxブラウザーをターゲットにしたいくつかの高度な使用法。
4。HTTPアクセス制御：CORS概要。
5.クロスオリジンリソース共有を使用したDOMアクセス制御：CORSの9種類のHTTPヘッダー情報
6。サーバー側のアクセス制御：サーバー側のCORS設定。
7. CORSを有効にする：サーバーCORS設定。