Help us understand the problem. What is going on with this article?

JS(javascript)でajaxの通信部分を同期的にして共通化する

More than 1 year has passed since last update.

よく新しいプロジェクトに行くと書き方忘れてググるのに時間がかかるのでメモ。

サンプルとして作るものは2ファイル4ファンクション。

  • test.js(ajaxの通信部分を呼び出す処理と戻ってきてからの処理を書くファイル)

    • test
    • testSuccess
    • testError
  • common.js(ajaxの通信部分を書く共通ファイル)

    • connect
test.js
// html側で両方呼び出してれば書く必要なし
document.write("<script type='text/javascript' src='js/common.js'></script>");

// 参照先:common.js
function test () {

    var actionPath = '/xxx/xxxx';

    var param =  {
        'code' : 'xxxxxxx',
    };

    // result = connect(HTTPメソッド, パス, パラメータ, 正常時ファンクション, 異常時ファンクション);
    result = connect('POST', 'actionPath', param, testSuccess, testError);
}

// testで同期処理にするための正常時コールバック関数
function testSuccess(data){
    // 正常処理の実装
}

// testで同期処理にするための異常時コールバック関数
function testError(data){
    // 異常処理の実装
}
common.js
// ajax通信をする
function connect(type,actionPath, param, successCallBack, errorCallBack) {

    //* ajax
    $.ajax({
        type: type,
        dataType: 'json',
        url: 'http://'+location.host+actionPath,
        data: param
    }).done(function (data, textStatus, xhr) {
        //* success
        if (data.status) {
            return successCallBack(data);
        } else {
            return errorCallBack(data);
        }

    }).fail(function(xhr, stat, e){
        //*  error 
        //console.log(xhr);
        return 'fail error';

    }).always(function(data){
        // --
    });

}

正直ajaxのソースでxhrとか理解してないところは多々あるのですが^^;
まぁ、よくこんな感じでajaxで値を引っ張ってきてそれを使いたいって時は
これを使って、同期的にして非同期で値が引っ張れてないのに処理が進むというのを回避してます。

TetsuTaka
気ままに勉強したり、サボったり。。。 普段はPHP使ってエンジニアやっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした