admin管理员组

文章数量:1180475

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">

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">

  • javascript
  • ajax
  • xmlhttprequest
  • innerhtml
Share Improve this question edited May 21, 2011 at 23:08 700 Software 87.8k88 gold badges242 silver badges347 bronze badges asked May 21, 2011 at 23:02 AmniteAmnite 2211 gold badge4 silver badges9 bronze badges 2
  • Can you post the responseText? You may be able to retrieve it by outputting it somewhere before trying to set your DIV's innerHTML. – DavidJCobb Commented May 21, 2011 at 23:11
  • @David: Good idea. Not necessary. He has req.status == 200 for a file:// URL. – 700 Software Commented May 21, 2011 at 23:24
Add a comment  | 

1 Answer 1

Reset to default 36

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.

本文标签： javascriptFirefox amp AJAX Junk after document elementStack Overflow

版权声明：本文标题：javascript - Firefox &amp; AJAX Junk after document element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738201445a2068416.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。