文档元素后的 Firefox 和 AJAX 垃圾答案

【问题标题】：Firefox & AJAX Junk after document element文档元素后的 Firefox 和 AJAX 垃圾
【发布时间】：2011-08-30 09:49:56
【问题描述】：

我正在使用页面获取脚本将网页动态加载到 div 中。这是代码。顺便说一句，我正在使用带有 Kubuntu 的 Firefox

function fetch(URL, divId) {
        req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
    req.open("GET", URL);
    req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
            document.getElementById(divId).innerHTML = req.responseText;
        }
    }
    req.send(null);
}

当我试图让它加载页面时，什么也没发生，我得到一个错误

错误：文档元素后出现垃圾
源文件：file:///home/amnite/Stuff/MetalBraska/Shows/ContentRight.html
行：2，列：1
源码：
<img src="Layout/HeaderDiv.jpg" width="250px" height="7px">

【问题讨论】：

你能发一下responseText吗？在尝试设置 DIV 的 innerHTML 之前，您可以通过在某处输出它来检索它。
@David：好主意。不必要。他有req.status == 200 的file:// URL。

标签： javascript ajax xmlhttprequest innerhtml

【解决方案1】：

我的答案是分段

错误
但这并不重要
真正的问题
有人如何找到原因/真正的问题
包含错误处理的解决方案

错误

错误是因为它试图将 ContentRight.html 解析为 XML 文件。 XML 文件是严格的，所以任何像丢失</img> 这样的小东西都会导致整个失败。在这种情况下，存在不止一个顶级元素。（在普通的 HTML 中，只有一个顶级元素 <html>）。第二个顶级元素被认为是“文档元素之后的垃圾”。我假设图像是导致问题的第二个元素。

但这甚至都无所谓

但这一切都不是重点。您没有理由在第一页中解析 XML。您只需要 HTML。正确的？我的猜测是，它正在尝试解析 XML 并将其存储到 responseXML。由于该错误，responseXML 为空。但是您使用的是responseText，所以应该没有问题。（忽略错误）

真正的问题

所有这些，现在我看到了问题。您需要req.status == 200 的 HTTP 状态 200。由于您没有使用http://，而是使用file://，因此没有状态代码，也不会出现服务器错误500，并且几乎没有机会检测到未找到404。所以你得到的只是0。当你得到这样的东西时，一个好的做法是添加警告行

有人如何找到原因/真正的问题

req.onreadystatechange = function() {
    alert(req.readyState)
    if (req.readyState == 4 && req.status == 200) {
        document.getElementById(divId).innerHTML = req.responseText;
    }
}

会提醒1 2 3 4 所以你知道readyState 是4。然后试试

req.onreadystatechange = function() {
    if(req.readyState == 4)
        alert(req.status)
    if (req.readyState == 4 && req.status == 200) {
        document.getElementById(divId).innerHTML = req.responseText;
    }
}

你会得到0，你会更接近问题。

包含错误处理的解决方案

一个好的解决方案是

req.onreadystatechange = function() {
    if (req.readyState == 4 && (req.status == 200 || req.status == 0 && req.responseText)) {
        document.getElementById(divId).innerHTML = req.responseText;
    } else {
        document.getElementById(divId).innerHTML = '<b>Error. HTTP ' + req.status + '</b>'
    }
}

因为如果状态为 0，可能表示互联网连接失败，在这种情况下，responseText 将为空白，然后您将获得Error. HTTP 0。如果它不是空白的，那就意味着它是file://，它会像一个魅力一样工作。

当然，服务器级错误会给出Error. HTTP 500 或诸如此类的信息。

【讨论】：

非常感谢！！！！我对整个 AJAX 概念很陌生，我什至没有想过 req.status 会导致这个问题。我很感激不仅为我解决了这个问题，而且你提供了更多的背景信息......希望我能给你 20 个大拇指，让你超越自我......
我希望你也可以 :) 哈哈。但说真的，我很高兴能帮上忙。
我的问题的解决方案将与这个有很大的不同（因为情况完全不同），但它正在将我的文件解析为 XML 的诊断是正确的。快速浏览一下 Firebug 就证实了您所说的话，并告诉我应该能够更改我的模板文件 (.tmpl) 上的 MIME 类型，它应该可以解决这个问题。谢谢！
将tmpl的MIME类型改为plain/text