jQueryでXHRを送信するときの覚書

jQueryを使えばどのブラウザでも、XHRを送信して非同期通信が簡単にできるようになりましたが、よく忘れるので覚書。

キャッシュが残る

$.ajax()でリクエストを送る際、通常は一度リクエストを送るとレスポンスがキャッシュされてサーバーサイドのプログラムを修正しても変更されない、と言った事が有ります。

開発中はキャッシュさせない方が良いので、その場合はXHRを送信する前にリクエストヘッダにIf-Modified-Sinceを設定して、サーバーサイドから毎回レスポンスをもらうようにします。

$.ajax( {
    type : 'GET',
    url : 'list.php',
    dataType: 'json',
    data : {
        pref : $('#pref').val(),
        type : $('#type').val()
    },
    beforeSend : function( xhr ){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    success : function(data) {
        $('#list').empty();
        options = new Array();
        
        $.each(data, function(i, v){
            options.push('<option value="' + i + '">' + v + '</option>');
        });
        $('#list').append(options.join());
    },
    error : function(msg) {
       ....
    },
    complete : function(msg) {
       ....
    }
});

If-Modified-Sinceについては、
If-Modified-Since | 鳩丸ぐろっさり (用語集).

同期通信したい

$.ajax()では同期通信もできます。
用途としては、ページロード時に動的にコンテンツを表示してそのコンテンツに対してスタイルを変更する等、コンテンツが取得されたあと何らかの処理する必要が有る場合に同期通信を使います。
同期通信はasyncをfalseにすることで可能になります。

$.ajax({
    url: 'news.php',
    async: false,
    success: function(data){
        $('#news').html(data);
    }
});