jQueryのAjaxで通信前に任意の処理をさせる方法

Javascriptで複雑な操作を簡単に記述できるライブラリであるjQueryで、Ajaxの処理を直感的に記述することができる$.ajax()というメソッドがあります。

クライアントサイドのjavascriptで何か作った方であれば恐らく多くの方が使ったことのあるものだと思います。

$.ajax()には、本体の$.ajax()につなげる形で、通信状況に応じた処理を書き分けることができるようになっています。

例えば”.done()”メソッドの中に処理を書けば、通信が成功したときのみ任意の処理をさせることができますし、”.fail()”であれば通信に失敗したときのみ(400,500系のステータスコードの時も含む)に任意の処理を行わせることができます。あるいは、”.always()”を指定すると成功、失敗関係なく通信終了後に任意の処理をさせることができます。

ここまでは多くのサイトでよく紹介されていますが、$.ajaxでは通信終了後だけでなく、通信直前に任意の処理をさせることもできます。

“beforeSend”という指定です。

通信終了後の場合は$.ajax()のあとに.done()のようにドットで繋げていく書き方ですが、beforeSendについては$.ajax()内にオプションとして記述する形になっているので注意が必要です。

 $.ajax(
                {
                    url:'/path/to/api,
                    type:'GET',
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-User-Token': user.token,
                        'X-User-Token-Sec': user.token_sec,
                    },
                    data: {
                        'key': 'value',
                    },
                    beforeSend: function() { // 通信前に実行
                        $('#loading').css('display','block');
                    },
                }
            )
            // Ajaxリクエストが成功した時発動
                .done( 
// 以下省略

ところで、なぜ$.ajax()メソッド内で通信前の処理も記述するのかというと、例えばAjax通信を開始したらローディングアイコンを表示し、通信が終わったらローディングアイコンを消したい、といったことをしたい場合に、実は$.ajaxの外にこういった処理を書いてしまうと、Ajax通信の始まりとアイコンの表示のタイミングがうまく同期してくれない、という現象が発生することがあります。

$.ajaxの中であればちゃんと意図したとおりのタイミングで処理を実行してくれるので、上記のような現象も起きず、安心できます。

jQuery + AjaxをつかったリッチなWebアプリを作る際は、参考にしてみてください。