Question

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

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();
}
}
}
}

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

Answer 1

您的代码存在一些问题。首先，最后还有一个额外的}。此外，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++) { ...

这可能是您问题的一部分。有几个原因，your current loop may not work as you'd expect。

最后，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 closure inside loops – simple practical example

找到

我意识到还有一件事：要发出这样的多个请求，你需要多个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();
}

Answer 2

您的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.
    }
  }
}

我建议你阅读更多关于闭包的内容。

Answer 3

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

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

最可能的罪魁祸首是您没有id="aa"的ID（aa）元素。或者你做了一件奇怪的事情：

document = ...

代码中的某处。那是 null 而不是undefined有点奇怪。

我找不到错误？ TypeError：document.getElementById（...）为null

3 个答案: