【JavaScript】XMLHttpRequestを複数作る時のメモ

JavaScript

こんにちは、しきゆらです

今回は、タイトル通りXMLHttpRequestオブジェクトを複数作る場合のメモです

 

XMLHttpRequestオブジェクトをたくさん作る時、似たような記述が多くなってしまい

コードが読みにくい！

これを解決するために、考えついたのが

「XMLHttpRequestオブジェクトを作って返す関数を作ればいいのでは？」

ということ

 

今回は、これについて書いていきます

 

最近の個人的コード事情

最近はJavaScriptを書く機会が多くなっています

これまでは、サーバとやり取りをしてデータを送ったり取得する時に

その都度XMLHttpRequestオブジェクトを作成してました

function hoge(){
    var hoge_xhr = new XMLHttpRequest();
    // hoge_xhrに対して色々設定
    hoge_xhr.open("GET", "./hoge.rb", true);
    hoge_xhr.onreadystatechange = function(){
        // サーバからの応答があったら何らかの処理をする
    }
    hoge_xhr.send(null);
}

function fuga(){
    var fuga_xht = new XMLHttpRequest();
    var data = {"サーバへ送るための": "データ"};
    // fuga_xhrに対して色々設定
　　　　fuga_xhr.open("POST", "./fuga.rb", false);
    fuga_xhr.onreadystatechange = function(){
        // サーバにデータを送り、帰ってきたものに対して何らかの処理をする
    }
    fuga_xhr.send("data=" + JSON.stringify(data));
}

onreadystatechangeの部分には、実際には処理する内容を記述するのでこれよりさらに長くなっていまいます

しかも、コード内に似たような記述がたくさんあり

どこで、何をやっているのかが分かりにくくなってしまいました

 

 

これを解決するために、

「XMLHttpRequestオブジェクトを作って返す関数を作ればいいのでは？」

という発想に至りました

(そもそも、複数XMLHttpRequestオブジェクトを作るのは作法的に良くない！とかあるのかな・・・？)

 

最初に汚いコードをあげた通り
  • URLの指定
  • HTTPメソッドの指定
  • サーバからのレスポンスに対する処理

という部分は共通しています

そして、JavaScriptは関数も変数のように代入することができますね(気持ち悪い)
これを利用して、試しに作ってみたコードはこんな感じ
function create_request(method, url, synchro, callback_function){
    var request = new XMLHttpRequest();
    request.open(method, url, synchro);
    request.onreadystatechange = callback_function;
    return request;
}

もし、古いブラウザにも対応する場合は

２行目あたりで分岐させればいいと思います

 

コールバック関数をXMLHttpRequestオブジェクトの定義外で書くことになるので

飛び飛びになってしまいますが

個人的にはとてもコードがすっきりしていい感じです

 

さらに

  • コールバック関数を一箇所にまとめる
  • コールバック関数の命名規則を統一する
    • 例：callback_呼び出し元関数名

のようなルールを自分で作れば問題ないような気がします

 

なお、コールバック関数ないで「responseText」等を使う場合は

this.responseText

とすると利用できます

 

お作法的にお行儀がいいのかどうかはわかりませんが

こう書いてみるのはどうでしょうか？というメモでした

「こう書くのは〇〇の時に危ないよ！」等、何かアドバイスがあればコメントを宜しくお願いします

 

おわり

Posted by しきゆら