2016/09/02 15:47:09

[ajax]XMLHttpRequestオブジェクトのプロパティおよびメソッドのおさらい

目次(クリックするとジャンプします)
  • 1:XMLHttpRequestをおさらい
  • 1.1:ネイティブで書く機会はあまりないかもしれないが…
  • 1.2:XMLHttpRequestオブジェクト標準実装
  • 1.2.1:メソッド
  • 1.2.2:イベント
  • 1.2.3:プロパティ
  • 1.3:使い方
  • 1.4:補足
  • 2:まとめ

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で書いている人が多いかと思いますが、たまにはネイティブで書いてみても勉強になっていいかもしれないです。

ライブラリの読み込みはブロッキング要因としてサイトの速度に影響がありますので、ネイティブで直にヘッダーに記述するなどして速度チューンをすることも可能かもしれないです。