javascript 文档元素之后的 Firefox 和 AJAX 垃圾
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6084978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox & AJAX Junk after document element
提问by Amnite
Im using a page fetch script to dynamically load a web page into a div. Heres the code. BTW Im using Firefox w/ Kubuntu
我使用页面获取脚本将网页动态加载到 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);
}
When i try to get it to load a page nothing happens and I get an error
当我尝试让它加载页面时，没有任何反应，并且出现错误
Error: junk after document element
Source File: file:///home/amnite/Stuff/MetalBraska/Shows/ContentRight.html
Line: 2, Column: 1
Source Code:<img src="Layout/HeaderDiv.jpg" width="250px" height="7px">
错误：文档元素后的垃圾
源文件：file:///home/amnite/Stuff/MetalBraska/Shows/ContentRight.html
行：2，列：1
源代码：<img src="Layout/HeaderDiv.jpg" width="250px" height="7px">
回答by Bryan Field
My answer is in sections
我的答案是分段的
- The error
- But that does not even matter
- The real problem
- How someone could have found the cause/real problem
- A solution that includes error handling
- 错误
- 但这也无所谓
- 真正的问题
- 有人怎么可能找到原因/真正的问题
- 包含错误处理的解决方案
The error
错误
The error is because it is trying to parse ContentRight.htmlas an XML file. XML files are strict, so any little thing like a missing </img>would cause a whole failure. In this case, there is more than one top level element. (in a normal HTML, there is only one top level element <html>). The second top level element is considered "Junk after document element". I am assuming that image is the second element that is causing the problem.
错误是因为它试图解析ContentRight.html为 XML 文件。XML 文件是严格的，因此任何诸如丢失之类的小事</img>都会导致整个失败。在这种情况下，有多个顶级元素。（在普通的 HTML 中，只有一个顶级元素<html>）。第二个顶级元素被认为是“文档元素之后的垃圾”。我假设图像是导致问题的第二个元素。
But that does not even matter
但这也无所谓
But this is all beside the point. There is no reason for you to parse the XML in the first page. You just want the HTML. Right? My guess is, it is trying to parse the XML and store it to responseXML. Because of the error, responseXMLis null. But you are using responseTextso there should be no problem. (ignore the error)
但这都是无关紧要的。您没有理由解析第一页中的 XML。您只需要 HTML。对？我的猜测是，它正在尝试解析 XML 并将其存储到responseXML. 由于错误，responseXML为空。但是你是用的responseText所以应该没有问题。（忽略错误）
The real problem
真正的问题
All that and now I see the problem. You are requiring HTTP status 200 with req.status == 200. Since you are not using http://and you are instead using file://, there is no status code and no possibility of a server error 500and little chance of detecting a not found 404. So all you will get is 0. A good practice when you get something like this is to add alert lines
所有这些，现在我看到了问题所在。您需要带有req.status == 200. 由于您没有使用http://而您正在使用file://，因此没有状态代码，也没有服务器错误的可能性，500并且检测到 not found 的可能性很小404。所以你会得到的只是0. 当你得到这样的东西时，一个好的做法是添加警报线
How someone could have found the cause/real problem
有人怎么可能找到原因/真正的问题
req.onreadystatechange = function() {
alert(req.readyState)
if (req.readyState == 4 && req.status == 200) {
document.getElementById(divId).innerHTML = req.responseText;
}
}
would alert 1234so you know readyStateis 4. Then try
会提醒，1234所以你知道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;
}
}
You would get 0and you would be closer to the problem.
你会得到0，你会更接近问题。
A solution that includes error handling
包含错误处理的解决方案
A good solution is
一个好的解决办法是
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>'
}
}
Because if status is 0, that couldmean internet connection failure in which case responseTextwould be blank and then you would get Error. HTTP 0. If it was not blank, that would mean it was file://and it would work like a charm.
因为如果状态为 0，则可能意味着 Internet 连接失败，在这种情况下responseText将为空白，然后您将获得Error. HTTP 0. 如果它不是空白的，那就意味着它是空白的，file://它就像一个魅力。
And of course a server-level error would give Error. HTTP 500or whatnot.
当然，服务器级别的错误会导致Error. HTTP 500或诸如此类。
