【jQuery】jQueryを使ったAjax通信 ～Ajax あれこれ編～

jQuery

■ 同期処理をするには

 * 「async: false」にする
  => 戻り値も受け取れる

構文

$.ajax({
  url: './index.html', // アクセス先のURL
  async: false, // ★非同期通信を行うか★
  // ..,略...
});

参考文献

http://www.atmarkit.co.jp/ait/articles/1007/30/news110_3.html
http://tkmr.hatenablog.com/entry/2014/08/08/084755

■連続通信を防止するには

構文

var jqXhr = null;

function addItem() {
  if (jqXhr) {
    // ★通信を中断する★
    // ただしfail(), always()は実行される
    jqXhr.abort();
  }
  jqXhr = $.ajax({
    type: 'get',
    url: './index.html', // アクセス先のURL
  })
  .done(function(returnData) {
    // 通信完了後
  });
}

参考文献

http://qiita.com/nekoneko-wanwan/items/bedc0e826c0842ca0b11

■ローディング中を表示するには 

 * ポイントは以下の2点。
  (1) Ajax通信前に、ローディング中の処理を行い
  (2) 通信完了時のコールバック関数「always()」で消す。

構文

詳細なコードは、以下の関連記事を参照のこと
http://blogs.yahoo.co.jp/dk521123/35781593.html
<script type="text/javascript">
$(function () {
    $('#loadingHere').hide();

    $(".ajaxDemo").on("click", function () {
        // ★ローディング中★
        $('#loadingHere').show();
        $.ajax({
            type: 'POST',
            dataType: "json",
            url: '/DemoAjax/SayHelloWorld', // アクセス先のURL
        })
        .done(function (returnData) {
            $("#result").text(" Result : " + returnData.result).html();
        })
        .always(function (returnData) {
            // ★ローディング完了★
            $('#loadingHere').hide();
        });
    })
});
・・・略・・・
<button id="demo" class="ajaxDemo">Click Me!</button>
<div>
    <p id="result">Result : </p>
</div>
<div id="loadingHere" class="loading">
    <img src="@Url.Content("~/Images/loading.gif")" />
</div>

参考文献

http://kgmx.hatenablog.com/entry/2014/09/12/092723
http://jquery.nj-clucker.com/now-loading/
http://the-zombis.sakura.ne.jp/wp/blog/2012/09/11/post-1572/
http://logic-a.com/2013/10/12/nowloading/

関連記事

jQueryを使ったAjax通信 ～基本編～

http://blogs.yahoo.co.jp/dk521123/35781333.html

ASP.NET MVC において、 Ajax でやり取りする

http://blogs.yahoo.co.jp/dk521123/35578725.html

ASP.NET MVC において、 Ajax のローディング中を表示する

http://blogs.yahoo.co.jp/dk521123/35781593.html