非同期pageloads - どのようにコールバックにパラメータを渡しますか？

Question

jQuery/ajaxの非同期コールバックの部分はまだ私を困惑させています.JavaScriptについてよくわからないからです。

がダウンし、私がこだわっているところ、これは、可能な限りのコードを簡素化：

私は「queuediv1」のIDと空のdivを作成した場合、私のようなページメソッドの結果とそれを埋めることができますこの。

$(document).ready(function() { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "test12.aspx/GetHtmlTest", 
     //data: "{ 'Dividend': '" + $("#Dividend").val() + "' }", 
     data: "{}", 
     // Error! 
     error: function(xhr, status, error) { 
      // Boil the ASP.NET AJAX error down to JSON. 
      //var err = eval("(" + xhr.responseText + ")"); 

      // Display the specific error raised by the server 
      //alert(err.Message); 
      alert("AJAX Error!"); 
     }, 
     success: function(msg) { 
     $("#queuediv1").removeClass('isequeue_updating'); 
     $("#queuediv1").html(msg); 
      //an unorderd list with the tag "browserxx" was just inserted into the div 
     $("#browserxx").treeview(); 
     } 
    }); 
}); 

それはブロックではなく、エラー処理を完全に制御することができます。 しかし、これを拡張しようとすると、困ってしまいます。私が更新したいページのいくつかの領域がある場合、私は正しい "データ"で各非同期呼び出しが行われるように呼び出しを変更することができますが、コールバックに私が必要とするコントロールのIDを伝えることはできません移入する

まだ壊れている何かに私の場合ダウンの簡素化：

IDのqueuediv1、queuediv2、queuediv3、およびqueuediv4で私が更新することをDOMで4つのdivがあるとします。 可能な限り多くのコードを再利用したいと思います。 更新するdiv要素の数とIDのは、実際にダイナミックになりますが、私はこれが働いているだろうと思った：

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
    var divname ="#queuediv"+i; 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "test12.aspx/GetHtmlTest", 
     // data would be populated differently so that each div gets its own result- for now it doesn't matter 
     //data: "{ 'Dividend': '" + $("#Dividend").val() + "' }", 
     data: "{}", 
     // Error! 
     error: function(xhr, status, error) { 
      // Boil the ASP.NET AJAX error down to JSON. 
      //var err = eval("(" + xhr.responseText + ")"); 

      // Display the specific error raised by the server 
      //alert(err.Message); 
      alert("AJAX Error!"); 
     }, 
     success: function(msg) { 
     $(divname).removeClass('isequeue_updating'); 
     $(divname).html(msg); 
     $("#somethingfromthemsg").treeview(); 
     } 
    }); 
} 
}); 

をしかし、これは今までの時間によって成功は範囲が間違っていると呼ばれているので、仕事とすることはできませんdivnameはすべてのコールバックに対してすでに "＃queuediv4"と等しいです。そのdivのみが更新されます（4倍）。コールバックに変数を渡す方法はありますか？あるいは、私はちょうど問題が間違っていると思っています。私はここで$ .getJSONへの非同期呼び出しを扱うこのような何か見つけた

：http://thefrontiergroup.com.au/blog/tag/jquery

このサイトでは、呼び出し元の変数を保持するために、別の匿名関数の内部でコールバックをラッピングについて話しました。そのような種類の範囲のための意味がありましたが、私はどのように$ .ajax呼び出しが作成される方法を形成するか分かりません。

Answer 1

あなたはこのような匿名関数内のループのためのすべての反復をラップすることができます：

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
(function(){ 
    var divname ="#queuediv"+i; 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "test12.aspx/GetHtmlTest", 
     data: "{}", 
     error: function(xhr, status, error) { 
      alert("AJAX Error!"); 
     }, 
     success: function(msg) { 
     $(divname).removeClass('isequeue_updating'); 
     $(divname).html(msg); 
     $("#somethingfromthemsg").treeview(); 
     } 
    }); 
})(); 
} 
}); 

Aはるかに簡単な例は次のようになります。

<div id="output1"></div><div id="output2"></div><div id="output3"></div><div id="output4"></div><div id="output5"></div> 
<script language="javascript"> 
for(var a=1; a<=5; a++) { 
    (function(){ 
    var divName = "output" + a; 
    var b = a; 
    setTimeout(function(){document.getElementById(divName).innerHTML = b;}, 2000); 
    })(); 
} 
</script> 

Answer 2

はJavaScriptが本当の関数型言語であることを忘れないでください、すべての機能（匿名かどうか）は実際には完全な機能closuresであるため、関数の「外部」からの変数は引き続き使用できます。

'渡すパラメータ' を解決するための一般的な方法は、クロージャの実行時の構造である：

function makeSuccessFunc (divname) { 
    return function (msg) { 
     $(divname).removeClass('isequeue_updating'); 
     $(divname).html(msg); 
     $("#somethingfromthemsg").treeview(); 
    }; 
}; 

ので、あなたが行うことができます。

$(document).ready(function() { 
for (i= 1;i<=4;i++) 
{ 
    var divname ="#queuediv"+i; 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: "test12.aspx/GetHtmlTest", 
     // data would be populated differently so that each div gets its own result- for now it doesn't matter 
     //data: "{ 'Dividend': '" + $("#Dividend").val() + "' }", 
     data: "{}", 
     // Error! 
     error: function(xhr, status, error) { 
      // Boil the ASP.NET AJAX error down to JSON. 
      //var err = eval("(" + xhr.responseText + ")"); 

      // Display the specific error raised by the server 
      //alert(err.Message); 
      alert("AJAX Error!"); 
     }, 
     success: makeSuccessFunc (divname) 
    }); 
} 
}); 

Answer 3

クリックします。

のJavaScript、だっ閉鎖にC＃で

http://devlicio.us/blogs/sergio_pereira/archive/2009/02/23/javascript-time-to-grok-closures.aspx

クロージャ

http://www.lostechies.com/blogs/derickbailey/archive/2009/02/23/closures-in-c-variable-scoping-and-value-types-vs-reference-types.aspx