XMLHttpRequest についてのメモ #JavaScript

【備忘録】XMLHttpRequest (XHR) とは

Ajax (非同期通信) に使われる組み込みオブジェクトのこと.
XHR を使うとサーバから受信済みの web ページから、さらにサーバへ通信リクエストを送ることができるようになる.

※このページを閲覧している人の傾向を見てると、初めて XMLHttpRequest を触る人たちへのとっかかりになっているようなので、以下の表は非標準 API については掲載していません.
※もっと込み入った要件で触らなければいけない場合、より詳しい仕様を知りたい場合は、ページ末の参考にした Web サイトをご確認くださいませ.

メソッド一覧.

翻訳元：w3schools | AJAX - The XMLHttpRequest Object

メソッド名	説明
`abort()`	現在のリクエストをキャンセルする.
`getAllResponseHeaders()`	リクエストヘッダ情報を返す.
`getResponseHeader()`	固有のレスポンスヘッダ情報を返す.
`open(method,url,async,uname,pswd)`	リクエストします. リクエストが非同期の場合は URL やその他のオプションである性質を指定します. method: リクエストタイプで GET か POST. url: サーバ上のファイルの場所. async: true (非同期) or false (同期)
`send(string)`	サーバへリクエストを送信します. 引数は POST リクエストの場合に使用します.
`setRequestHeader()`	送信される前にラベル/名前のペアをヘッダに追加します.

MDN のほうでは、以下のメソッドについても記述がありましたので、追記しておきます。

メソッド名	説明
`overrideMimeType()`	サーバーから返ってくる MIME タイプを上書きします。例えば、サーバーの返す MIME タイプに関わらず、強制的に text/xml としてストリームをパースするなどの用途に使えるでしょう。このメソッドは send() が呼び出される前に呼び出す必要があります。(MDN より引用)

プロパティ一覧.

翻訳元：w3schools | XMLHttpRequest Object Properties

プロパティ名	説明
`onreadystatechange`	readyState の値が変わるたびに、自動的に呼ばれる関数（または関数名）を格納します.
`readyState`	XMLHttpRequest の状態を持ちます. 0: リクエストは初期化されていません. 1: サーバとの接続が確立されました. 2: リクエストを受け付けました. 3. リクエストを処理しています. 4: リクエストが終了し、レスポンスの準備が完了しました.
`responseText`	文字列としてレスポンスデータを返します.
`responseXML`	XML としてレスポンスデータを返します.
`status`	ステータス番号を返します. (例えば "Not Found" を示す "404" か "OK" を示す "200" です.)
`statusText`	ステータステキストを返します. (例えば "Not Found" または "OK")

MDN のほうでは、以下のプロパティについても記述がありましたので、追記しておきます。(以下の表は MDN の掲載ページからの引用となります)(最終更新:2020/05/06)

プロパティ名	説明
`response`	リクエストのエンティティ本文を含む ArrayBuffer, Blob, Document, JavaScript オブジェクト, DOMString の何れかを、 XMLHttpRequest.responseType の値に応じて返します。
`responseType`	レスポンス型を定義する、列挙型の値です。
`responseURL`	レスポンスのシリアライズされた URL、または URL が null であれば空文字列を返します。
`status`	リクエストに対するレスポンスのステータスを unsigned short で返します。
`statusText`	HTTP サーバーから返ってきたレスポンス文字列が入った DOMString を返します。 XMLHTTPRequest.status とは異なり、("200 OK" のように) レスポンスメッセージの完全な文が含まれています。
`timeout`	リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、 unsigned long 型の値です。
`ontimeout`	リクエストがタイムアウトする都度呼び出される EventHandler。
`upload`	アップロードプロセスを表す XMLHttpRequestUpload です。
`withCredentials`	Boolean で、サイト間の Access-Control リクエストでクッキーや認証ヘッダーなどの認証情報を使用するかどうかを示します。

基本的な使い方.

ハンドラの登録.

var xhr = new XMLHttpRequest();

// ハンドラの登録.
// onreadystatechange はどんなブラウザでも実装されている.
xhr.onreadystatechange = function() {
    switch ( xhr.readyState ) {
        case 0:
            // 未初期化状態.
            console.log( 'uninitialized!' );
            break;
        case 1: // データ送信中.
            console.log( 'loading...' );
            break;
        case 2: // 応答待ち.
            console.log( 'loaded.' );
            break;
        case 3: // データ受信中.
            console.log( 'interactive... '+xhr.responseText.length+' bytes.' );
            break;
        case 4: // データ受信完了.
            if( xhr.status == 200 || xhr.status == 304 ) {
                var data = xhr.responseText; // responseXML もあり
                console.log( 'COMPLETE! :'+data );
            } else {
                console.log( 'Failed. HttpStatus: '+xhr.statusText );
            }
            break;
    }
};

リクエストの仕方.

前述のハンドラ登録の真下に、以下を追記する形で大丈夫です.

xhr.open( 'POST', 'http://{送信先URL}/post.php', false );
// POST 送信の場合は Content-Type は固定.
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
// 
xhr.send( 'hoge=piyo&moge=fuga' );
xhr.abort(); // 再利用する際にも abort() しないと再利用できないらしい.

自分で色々やるにあたって参考にした web サイト.

Ajax Tour
w3schools.com
MDN - Mozilla Developer Network

それでは良きエンジニアライフを(^w^)ﾉｼ