2

使用以下代码，结果显示成功。

window.onload = setInterval(func_name, 5000);

function func_name() {
    var ids = document.getElementById('aa').value;
    ids_array = ids.split(',');
    for (var i in ids_array) {
        if (document.getElementById('a' + ids_array[i])) {
            document.getElementById('a' + ids_array[i]).innerHTML = ids_array[i];

但是，当我改用 AJAX 请求时，我收到错误：TypeError: document.getElementById(...) is null.

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById('a' + ids_array[i]).innerHTML = xmlhttp.response; // error is here... TypeError: document.getElementById(...) is null
    }
}
xmlhttp.open("GET", "<?php echo baseurl . 'notification.php';?>?users_id=" + ids_array[i], true);
xmlhttp.send();
}
}
}
}

我是初学者，对不起这种类型的代码

4

3 回答 3

2

您的代码存在几个问题。首先，最后有一个额外}的。另外，window.onload = setInterval(func_name, 5000);应该是：

window.onload = function() {
    setInterval(func_name, 5000);
}

那么，for (var i in ids_array)应该是

for(var i=0; i<ids_array.length; i++) { ...

这可能是您问题的一部分。由于多种原因，您当前的循环可能无法按预期工作。

最后，Ajax 是异步的。您分配给的函数xmlhttp.onreadystatechange只会在循环完成后运行，并且 的值i将是数组中的最后一个值（在您当前的代码中），或数组的长度（在我提出的新版本中）。最短的修复如下所示：

xmlhttp.onreadystatechange = (function(i) {
    return function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('a' + ids_array[i]).innerHTML = xmlhttp.response; // error is here... TypeError: document.getElementById(...) is null
        }
    }
}(i));

关于为什么可以在循环内的 JavaScript 闭包中找到更多解释 - 简单的实际示例

我还意识到一件事：要触发多个这样的请求，您需要多个 XMLHttpRequest 对象。我建议使用单独的函数来启动 ajax 请求，如下所示：

function func_name() {
    var ids = document.getElementById('aa').value;
    ids_array = ids.split(',');
    for(var i=0; i<ids_array.length; i++) {
        if (document.getElementById('a' + ids_array[i])) {
            (function(i) {
                callAjax("<?php echo baseurl . 'notification.php';?>?users_id=" + ids_array[i], function(response){
                    document.getElementById('a' + ids_array[i]).innerHTML = response;
                });
            }(i));
        }
    }
}

function callAjax(url, callback) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
于 2013-08-02T13:06:48.547 回答
1

您的 ids_array[i] 变量未在 xmlhttp.onreadystatechange=function() 中正确定义，因为“i”变量在每次 FOR 循环迭代时重新定义。

所以所有的代码都应该是：

var ids = document.getElementById('aa').value;
var ids_array = ids.split(',');

for (var i=0; i<ids_array.length; i++)
{
  if (document.getElementById('a' + ids_array[i])) {
    // For every iteration, create a closure that 
    // stores the "i" variable multiple times with different values in the closure.
    // Also create an xmlhttp Object for each request.
    var closure = function()
    {
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById('a' + ids_array[i]).innerHTML = result;
          // After this function executes, it and any closures it has will be
          // available for garbage collection.
        }
      }
      xmlhttp.open("GET", "<?php echo baseurl . 'notification.php';?>?users_id=" + ids_array[i], true);
      xmlhttp.send();

      // This code ends, but xmlhttp objects wait for onreadystatechange event.
    }
  }
}

我建议您阅读有关闭包的更多信息。

于 2013-08-02T12:54:46.150 回答
0

您没有发布有关浏览器报告问题的位置（代码行）的任何详细信息，但我的猜测是：

var ids = document.getElementById('aa').value;

最可能的罪魁祸首是您没有 id ( id="aa") 为 的元素aa。要么就是这样，要么你做了一些奇怪的事情：

document = ...

在您的代码中的某处。这null不是undefined有点奇怪。

于 2013-08-02T12:43:18.037 回答