2

我现在为此苦苦挣扎了一天，非常感谢您转圈和帮助:-)

抽象
的异步 ajax 调用带有解析器和 fqdn 变量的 cgi，以便返回该对的 dns 解析。（返回 dig @resolver $fqdn 的输出）

问题
在萤火虫中，我可以看到获取请求正在异步触发，并且对浏览器的响应符合预期。但是，我无法将响应放置在文档中的正确 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 
      }

 }
4

1 回答 1

2

你的问题是一个非常普遍的问题。在 JavaScript 中，变量的作用域是函数级别，而不是块语句级别。因此，当您使用变量“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”副本，该副本被冻结在循环中的正确位置。该函数将返回一个新创建的函数作为其结果，您将使用它作为事件处理程序。

于 2012-01-01T16:02:26.190 回答