AJAX通信 テンプレ

ソースコード覚書

以下は、jQueryでAJAX通信する為のテンプレ。

キャンセル動作にも対応。ただし、成功として返却してるので、通知も含めて要対応。

[]内は適宜環境に合わせて変更。

jQuery 1.9.1 で動作確認。多分 1.8 でも動く。

関数側

[js] // AJAX用変数 var ajaxReq = null;

// AJAX用関数 function fncAjax(Url, Dat) { var defer = $.Deferred();

// プログレス表示
$([PROGRESS_BLOCK]).css("display", "block");

ajaxReq = $.ajax({

    type: [GET/POST],
    url: Url,
    dataType: [DATA_TYPE],
    data: Dat,
    timeout: [TIMEOUT],
    async: true,
    cache: false,

}).done(function (data, status, xhr) {

    // 受信成功時処理
    defer.resolve(data);

}).fail(function (xhr, status, error) {
    if (status == "abort") {

        // キャンセル時処理
        defer.resolve([CANCEL_MESSAGE]);

    } else if (status == "timeout") {

        // タイムアウト時処理
        defer.reject([TIMEOUT_MESSAGE]);

    }
    else {

        // 受信エラー時処理
        defer.reject([ERROR_MESSAGE]);
    }

}).always(function (data){

    // プログレス非表示
    $([PROGRESS_BLOCK]).css("display", "none");
    ajaxReq = null;

});

return defer.promise();

}

$(function () {

// キャンセルボタンイベント
[CANCEL_BUTTON].addEventListener("click", function () {

    if (ajaxReq == null)
    {
        return;
    }

    // キャンセル通知
    ajaxReq.abort();

});

}); [/js]

呼び出し側

[js] fncAjax("getdata.aspx", "data").done(function (rtn) { // 成功時処理 }).fail(function (rtn) { // 失敗時処理 }); [/js]