【JQuery】バージョンごとのAJAXを使った非同期通信の仕方

jQueryのAJaxの非同期通信のメモ。

まず、jQueryのバージョン確認方法確認しましょう。

確認方法は下記の記事に書いています。

https://notepad-blog.com/content/158/

書き方がバージョンによって異なるため注意してください。

一様、バージョン1.0とバージョン1.5以降、バージョン1.8以降の3パターンを記載しています。

■バージョン1.0

function execAjax(url, postdata, method, callback) {
    // ajax通信
    $.ajax({
        type: method,
        url: url,
        dataType: "json",
        cache: false,
        timeout: 10000,
        data: postdata,
        beforeSend: function (jqXHR, settings) {
            // 通信を行う前処理
            console.log("ajax beforeSend");
        },
        success: function(data, status, xhr) {
            // Ajax通信が成功した場合に呼び出されるメソッド
           console.log('Ajax通信が成功しました');
           // 成功
           callback(data);
        },
        complete: function (jqXHR, textStatus) {
            // 通信が成功してもエラーになっても実行される場所
            console.log("ajax complete");
        },
        error: function(xhr, status, error) {
           // Ajax通信が失敗の場合に呼び出されるメソッド
           alert('Ajax通信に失敗しました');
           console.log("ajax通信に失敗しました");
           console.log("XMLHttpRequest : " + jqXHR.status);
           console.log("textStatus     : " + textStatus);
           console.log("errorThrown    : " + errorThrown.message);
        },
    });
}

■バージョン1.5以降

function execAjax(url, postdata, method, callback) {
    // ajax通信
    $.ajax({
        type: method,
        url: url,
        dataType: "json",
        cache: false,
        timeout: 10000,
        data: postdata,
        beforeSend: function (jqXHR, settings) {
            // 通信を行う前処理
            console.log("ajax beforeSend");
        },
    })
    // Ajax通信が失敗の場合に呼び出されるメソッド
    .error(function (jqXHR, textStatus, errorThrown) {
        alert('Ajax通信に失敗しました');
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + jqXHR.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    })
    // Ajax通信が成功した場合に呼び出されるメソッド
    .success(function (data, textStatus, jqXHR) {
        console.log('Ajax通信が成功しました');
        // 成功
        callback(data);
    })
    // 通信が成功してもエラーになっても実行される場所
    .complete(function(xhr, status) {
        // 通信完了時の処理
        console.log("ajax complete");
    });// END ajax通信
}

1.0⇒1.5の違い

非同期処理後の成功分岐（success）やエラー分岐（errror）、完了処理（complete）の書き方に違いがあります。

1.0ではカンマ区切りでfunctionを記載してますが、1.5ではピリオドで関数を繋げて記載します。

■バージョン1.8以降

function execAjax(url, postdata, method, callback) {
    // ajax通信
    $.ajax({
        type: method,
        url: url,
        dataType: "json",
        cache: false,
        timeout: 10000,
        data: postdata,
        beforeSend: function (jqXHR, settings) {
            // 通信を行う前処理
            //cmn_loading();
            console.log("ajax beforeSend");
        },
        complete: function (jqXHR, textStatus) {
            // 通信が成功してもエラーになっても実行される場所
            //cmn_unloading();
            console.log("ajax complete");
        }
    })
    // Ajax通信が失敗の場合に呼び出されるメソッド
    .fail(function (jqXHR, textStatus, errorThrown) {
        alert('Ajax通信に失敗しました');
        console.log("ajax通信に失敗しました");
        console.log("XMLHttpRequest : " + jqXHR.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);
    })
    // Ajax通信が成功した場合に呼び出されるメソッド
    .done(function (data, textStatus, jqXHR) {
        console.log('Ajax通信が成功しました');
        // 成功
        callback(data);
    }); // END ajax通信
}

1.5⇒1.8の違い

成功分岐とエラー分岐が$ajax()より外出しされました。さらに成功処理はsuccess()からdone()に代わり、エラー処理はerror()からfail()に書き方が変わりました。

以上です！！