5

jQueryを使用して非同期リクエストを行う関数を作成しました。

var Site = {

    asyncRequest : function(url, containerId) {        
        $.ajax({
            url : url,
            onSuccess: function(data){
                $(containerId).html(data);
            }
        });
    }
}

私がメモ帳を使用しているので構文が少し間違っているかもしれませんが、うまくいけばあなたはその考えを理解するでしょう。

私は関数を呼び出します：

Site.asyncRequest('someurl', container1);
Site.asyncRequest('someurl', container2);

両方のリクエストが送信され、サーバーによって処理されます。2つの応答が返送されます。これは私が期待していることです。ただし、container1とcontainer2には両方の要求からの応答が含まれていると思います。

問題は、最後の応答だけが表示され、その理由がわからないことです。jQuery ajaxがリクエスト/レスポンスを追跡する方法がわからないので、これが問題である可能性があります。

5つまたは10のリクエストを行ったとすると、jQuery ajaxはどの応答がどのリクエストに対するものであるかをどのように認識し、どこでそれを追跡しますか？

ありがとうございました

4

2 に答える 2

5

これは、Javascriptのスコープの問題のようです。次のことを試してください。

var Site = {
    asyncRequest: function(url, containerId) {
        (function(theContainer) {
            $.ajax({
                url: url,
                onSuccess: function(data) {
                    $(theContainer).html(data);
                }
            });
        })(containerId);
    }
};

これにより、関数呼び出しごとに個別のスコープが作成されるため、「theContainer」が指す実際の値は、onSuccess匿名関数ごとに異なります。

于 2012-03-20T22:58:10.547 に答える
1

ここで起こっているのは、関数が宣言されている方法のために、単一のクロージャが作成されていることです。ここで「より高度な例」を参照してください： http ：//skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/

基本的に、はその無名関数containerIdのすべてのインスタンス間で共有されています。onSuccess私はこれをテストしていませんが、asyncRequest関数をの外で定義した場合Site、これは機能すると思います。

この問題に対するより洗練された解決策に関しては、おそらく他の誰かがよりよく答えるでしょう。

于 2012-03-20T22:57:50.977 に答える