Edited at

XMLHttpRequest についてのメモ

More than 1 year has passed since last update.


【備忘録】XMLHttpRequest (XHR) とは

Ajax (非同期通信) に使われる組み込みオブジェクトのこと.

XHR を使うとサーバから受信済みの web ページから、さらにサーバへ通信リクエストを送ることができるようになる.

以下の表は非標準 API については掲載していません.


メソッド一覧.

翻訳元: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 の掲載ページからの引用となります)

プロパティ名
説明

response
ArrayBuffer、Blob、Document、JavaScript オブジェクト、DOMString といった XMLHttpRequest.responseType に従ったレスポンスの実体ボディ。リクエストが完了していない、または成功しなかった場合、この値は null となります。

responseType
レスポンス型を定義する、列挙型の値です。

timeout
リクエストを自動的に終了できるようになるまでの時間をミリ秒単位で表す、unsigned long 型の値です。値 0 (デフォルト値) は、タイムアウトしないことを示します。

upload
アップロードプロセスを表す XMLHttpRequestUpload。これは不透過オブジェクトですが、XMLHttpRequestEventTarget イベントリスナを加えることにより、アップロードプロセスを追跡することができます。

withCredentials
クロスサイト Access-Control リクエストに cookie や認証ヘッダといった認証情報を使用させるかを示す Boolean 型の値です。またこのフラグは、リクエストで cookie を無視することを示すためにも使用します。デフォルト値は false です。


基本的な使い方.


ハンドラの登録.

var xhr = new XMLHttpRequest();

// ハンドラの登録.
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^)ノシ