javascript - 尽管对象存在，但未定义 JS Ajax onreadystatechange

Question

我现在为此苦苦挣扎了一天，我将不胜感激:-)

摘要
异步 ajax 调用带有解析器和 fqdn 变量的 cgi，以便再次返回此对的 dns 解析。 (返回 dig @resolver $fqdn 的输出)

问题
在 Firebug 中，我可以看到 get 请求被异步触发，并且对浏览器的响应符合预期。但是我无法将响应放在文档中正确的 div 中，因为 onreadystatechange 无法识别对象。

旁注
除了我正在遍历对象数组这一事实之外，即使在迭代之间放置了延迟，它们似乎也会立即被触发。

以下是带有我的评论的代码
由于解析器是一个数组，因此我创建了一个 xmlhttprequest 对象数组。

function resolve() { 
     var numofres = 6;
     var arr = new Array;
     arr[0] = "192.168.1.11";
     arr[1] = "8.8.8.8";
     arr[2] = "8.8.4.4";
     arr[3] = "159.134.0.1";
     arr[4] = "159.134.0.2";
     var len = arr.length;
     var ax  = new Array(); //creating ax as an array 
     for (var i=0; i<=len; i++) {  //iterating through the length of resolvers array
         ax[i] = new XMLHttpRequest(); //assigning to each item in array new object
         //alert(ax[i]); // shows that object exists 
         ax[i].onreadystatechange = function(){ 
              /*=== 
              problem is above - firebug will show:
              **Uncaught TypeError: Cannot read property 'readyState' of undefined**
              **ax.(anonymous function).onreadystatechangehello.cgi:30** 
              oddly it will still populate divs inner html  with 'loading +1 '
              albeit regardless of readystate code (can be 4 or anything else )
              It perplexes me why i is thought as a function? 
              =====*/
              // alert(i);  //if this is enabled I will see readyState==4 populated correctly
              if (ax[i].readyState != 4) {
                   document.getElementById('return_table_'+i).innerHTML="loading "+i;
              }
              if(ax[i].readyState == 4){
                  // get data from the server response
                  var response_ready=ax[i].responseText;
                  document.getElementById('return_table_'+i).innerHTML = response_ready;
              }
         } 
         ax[i].open("GET","av.pl?resolver=" + arr[i] +"&fqdn=google.com",true); //works 
         ax[i].send(null); //works 
      }

 }

Answer 1

您的问题非常普遍。在 JavaScript 中，变量的作用域在函数级别，而不是 block 语句级别。因此，当您使用变量“i”遍历该循环时，您在循环中创建的每个函数共享相同的“i”。因此，当实际调用函数时，“i”的值将是它在循环结束时的值——也就是超出数组末尾的一个点!

为避免该问题，您需要在另一个 函数中创建这些函数。一个干净的方法是有一个单独的本地函数:

 function makeReadyStateHandler(i) {
     return function() {
          if (ax[i].readyState != 4) {
               document.getElementById('return_table_'+i).innerHTML="loading "+i;
          }
          if(ax[i].readyState == 4){
              // get data from the server response
              var response_ready=ax[i].responseText;
              document.getElementById('return_table_'+i).innerHTML = response_ready;
          }
     };
 }

然后只需从循环中调用该函数:

      ax[i].onreadystatechange = makeReadyStateHandler(i);

通过使用像这样的单独函数，您可以确保每个处理函数都有自己的“i”副本，该副本被卡住在循环中的正确位置。该函数将返回一个新创建的函数作为其结果，您将使用它作为事件处理程序。