XMLHttpRequestをおさらい
ネイティブで書く機会はあまりないかもしれないが…
ajaxの基礎であるXMLHttpRequest。ライブラリなどでajaxをいじっていると、ネイティヴのプロパティやメソッドを忘れがちです。
そこで今回の記事では改めてXMLHttpRequestオブジェクトのプロパティおよびメソッドをまとめてみようと思います。各々がどのような用途に使えるかも含めて解説したいと思います。
もっとも優秀なライブラリが多数ありますので、ネイティブでajaxを書く機会はそれほど多くはないのかもしれないです。
それでもajaxの仕組みやライブラリのソースコードの理解などに役に立つ事は間違いないかと思います。
XMLHttpRequestオブジェクト標準実装
ブラウザによって実装はまちまちなメソッドやプロパティがありますので、標準実装されているものに絞ってリストにしましました。
メソッド
| メソッド | 意味 |
|---|---|
| abort() | リクエストがすでに送信されている場合、リクエストを中止する |
| getAllResponseHeaders() | 文字列にてですべてのレスポンスヘッダを返す レスポンスを何も受け取らなかった場合はnullを返す |
| getResponseHeader() | 指定したヘッダ文を含む文字列を返す 指定したヘッダ(レスポンスを受信していない場合も含む)が存在しない場合はnullを返す |
| open() | リクエストを初期化する |
| send() | リクエストを送信する |
| setRequestHeader() | HTTP リクエストヘッダの値を設定する |
イベント
| イベント | 意味 |
|---|---|
| onloadstart | 通信開始 |
| onprogress | 受信中 |
| onabort | 通信中止 |
| onerror | 送信失敗 |
| onload | 送信成功 |
| ontimeout | タイムアウト |
| onloadend | 通信完了(失敗成功に関係なく発生) |
| onreadystatechange | 通信の状態が変化するたびに発生 |
プロパティ
| プロパティ | 意味 |
|---|---|
| readyState | 通信状態を5つの状態であらわす |
| status | HTTPステータス |
| statusText | HTTPステータス文字列 |
| responseText | 文字列型のレスポンス |
| responseXML | Document型のレスポンス |
| responseType | レスポンスボディの型指定 |
| response | レスポンスボディ |
| upload | XMLHttpRequestUpload オブジェクトを取得する |
| timeout | タイムアウトを発生させる間隔設定 |
| withCredentials | Cookie等の認証情報の送信可否 |
| responseURL | リダイレクト先URL |
使い方
プロパティにしてもメソッドにしてもイベントにしても意外と少ないなという感覚。これならネイティブでの記述もそれほど難しくないようにも思います。
基本的にajaxはページ遷移なしにページを書き換えする用途に使われます。 その為、どんなイベントでajaxを発動させるかは、作り手の考えに依ります。
何かをクリックしたら、スクロールが一定量になったら、一定時間ごとになどなど考えられるイベントは豊富です。
しかし、どんなイベントで通信を開始するにせよ、必要であればデータを用意して、初期化し送信して、レスポンスを受け取るのは変わらないです。
基本的には以下の様になるかと思います。
//XMLHttpRequestオブジェクトを作る
var request = new XMLHttpRequest();
//通信の初期化(送信メソッドと送信先URIの設定)
request.open( "POST" , "http://hoge.jp/content.php" , true );
//POST送信時のヘッダー設定
request.setRequestHeader( "content-type" , "application/json; charset=UTF-8" );
//送信実行
request.send( /*なんらかのデータ*/ );
//通信開始時のイベントハンドラ
request.onloadstart = function(e){
console.log("ajax start");
};
//readyStateが変化した際のイベントハンドラ
request.onreadystatechange = function(e){
console.log("ajax readystate change");
};
//通信終了時のイベントハンドラ(成功の可否を問わずに発生)
request.onloadend = function(e){
console.log("ajax end");
};
//成功時のイベントハンドラ
request.onload = function(e){
console.log("ajax success");
};
//エラー発生時のイベントハンドラ
request.onerror = function(e){
console.log("ajax error");
};
//タイムアウトのイベントハンドラ
request.ontimeout = function(e){
console.log("ajax timeout");
};
補足
レスポンスをどのように料理するかは作り手の思惑によって違うかと思うので、レスポンスを処理するロジックは書いていないです。jsonで受け取りたい場合や、htmlやxmlで受け取りたい場合、もしくはオブジェクトや単なる文字列など目的によってさまざまでしょう。
例では全部コンソール出力にしていますが、普通であれば成功時のイベントハンドラであるonloadの部分にレスポンスを処理するコードを書くことになるでしょう。
データの送受信のヘッダーに関してはajaxとというよりもHTTPの範囲なのでここでは深入りしないですが、ほとんどどんなデータでもやり取りできるので、問題になることはないはず。
まとめ
あまり大した内容ではない記事ですが、プロパティ、メソッドの備忘録になったら幸いです。
ajaxはjQueryで書いている人が多いかと思いますが、たまにはネイティブで書いてみても勉強になっていいかもしれないです。
ライブラリの読み込みはブロッキング要因としてサイトの速度に影響がありますので、ネイティブで直にヘッダーに記述するなどして速度チューンをすることも可能かもしれないです。
