Firefox & AJAX Junk after document element
Im using a page fetch script to dynamically load a web page into a div. Heres the code. BTW Im using Firefox w/ Kubuntu
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">
Answer
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.html as 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.
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, responseXML is null. But you are using responseText so there should be no problem. (ignore the error)
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 500 and 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
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 1 2 3 4 so you know readyState is 4. Then try
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 0 and you would be closer to the problem.
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 could mean internet connection failure in which case responseText would 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.
And of course a server-level error would give Error. HTTP 500 or whatnot.