admin管理员组

文章数量:1317898

I have an xml file and i want to load its contents into a specific html div every one second, here's the javascript part that parses the xml file:

function getEntries() {

    if (window.XMLHttpRequest)
        req = new XMLHttpRequest();
    req.onreadystatechange = handleReq;
    req.open("GET", "entries.xml", true);
    req.send(null);

}
function handleReq() {
    if (req.readyState == 4)
        document = req.responseXML;
    var states = document.getElementsByTagName("entry");
    for (i = 0; i < states.length; i++) {
        currentState = states[i];
        document.getElementById("LogArea").innerHTML = "<table><tr><td><b>Name:</b></td><td>"
                + currentState.getAttribute("umessage");
        +"</td></tr><tr><td><b>Message:</b></td><td>"
                + currentState.getAttribute("uname");
        +"</td></tr></table>";
    }
}

and here's the xml file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<entries>
<entry umessage="aaaaaaaa" uname="aaaaaaa" />
<entry umessage="Hello everybody" uname="John" />
<entry umessage="Hello everybody" uname="Smith" />
<entry umessage="Hello everybody" uname="Knuth" />
</entries>

and that's the html part:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<body bgcolor="yellow" onload='setInterval("getEntries()",1000)'>
<div id="LogArea" align="left">
</div>
</body>
</html>

the problem is that nothing is loaded in the specified div and no errors exists inside firebug

I have an xml file and i want to load its contents into a specific html div every one second, here's the javascript part that parses the xml file:

function getEntries() {

    if (window.XMLHttpRequest)
        req = new XMLHttpRequest();
    req.onreadystatechange = handleReq;
    req.open("GET", "entries.xml", true);
    req.send(null);

}
function handleReq() {
    if (req.readyState == 4)
        document = req.responseXML;
    var states = document.getElementsByTagName("entry");
    for (i = 0; i < states.length; i++) {
        currentState = states[i];
        document.getElementById("LogArea").innerHTML = "<table><tr><td><b>Name:</b></td><td>"
                + currentState.getAttribute("umessage");
        +"</td></tr><tr><td><b>Message:</b></td><td>"
                + currentState.getAttribute("uname");
        +"</td></tr></table>";
    }
}

and here's the xml file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<entries>
<entry umessage="aaaaaaaa" uname="aaaaaaa" />
<entry umessage="Hello everybody" uname="John" />
<entry umessage="Hello everybody" uname="Smith" />
<entry umessage="Hello everybody" uname="Knuth" />
</entries>

and that's the html part:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<body bgcolor="yellow" onload='setInterval("getEntries()",1000)'>
<div id="LogArea" align="left">
</div>
</body>
</html>

the problem is that nothing is loaded in the specified div and no errors exists inside firebug

Share Improve this question edited Mar 23, 2013 at 19:14 Antony 15.1k10 gold badges47 silver badges76 bronze badges asked Mar 23, 2013 at 19:10 Eslam HamdyEslam Hamdy 7,39627 gold badges107 silver badges167 bronze badges 4
  • Is the JavaScript loaded the <body> tag? – quietmint Commented Mar 23, 2013 at 19:13
  • 1 Can you expand on "doesn't work"? What is happening that you don't expect? What is not happening that you are? Exceptions? Errors? – Oded Commented Mar 23, 2013 at 19:13
  • The code works for me here, what browser, have you tried outputing any data with a console.log? JQuery would make this a little easier in my opinnion but apart from the function call should be "getEntries" and not "getEntries()" then it should all be ok, post the full code in your single file – Neo Commented Mar 23, 2013 at 19:16
  • 2 This isn't related to your actual problem, but your getEntries function looks a bit odd. You check whether XMLHttpRequest is defined, and set up rec if it is, but then you carry on and use rec regardless, which means the initial check is a bit pointless because it'll still break if XMLHttpRequest isn't defined anyway. In any case, XMLHttpRequest will always be defined, unless you need to support IE7 or earlier. If you need to support IE7, then you need to adjust you ajax code to work with it. If not, you can just drop the if() check entirely, as it's not helping you in any way. – Spudley Commented Mar 23, 2013 at 19:22
Add a ment  | 

3 Answers 3

Reset to default 5

You are attempting to overwrite document in function handleReq() so that it refers to the XML instead of the HTML. Whether this succeeds or fails, it's still not going to work.

First, you try to set document to be the XML you loaded asynchronously. As mentioned in the ments, this probably fails (in my tests, neither Chrome nor IE 9 allowed me to overwrite document in this manner).

document = req.responseXML;
var states = document.getElementsByTagName("entry");

If it fails, then states is looking for <entry> tags in your HTML page (not what you intended). If it succeeds, then you have a problem two lines later because you expect document to magically be the HTML page again instead of the XML:

document.getElementById("LogArea").innerHTML = ...
  • Don't use variable names that are properties of window -- call your XML response something else, like var xmldoc = ....

  • Don't use global variables. You should be using var whatever = ... instead of whatever = ... to define function variables.

  • As other have mentioned, setTimeout(String, ...) is bad practice and deprecated. Functions are full-fledged objects in JavaScript, so just pass the function itself (no quotes, not parentheses).

  • The entire body of function handleReq() should be inside of the if (req.readyState == 4) block (not just the first line). You don't want to do anything if the request hasn't finished yet.

Passing a string as the first paramater is bad / depreciated. Instead use either:

setInterval(getEntries, 1000);

or if you need to pass paramaters:

setInterval(function(){ getEntries('foo') }, 1000);

Although that probably will not solve your problem, it's important to keep in mind.

Use

setInterval(getEntries,1000)

Instead of passing in a string that would be evaled, pass in the function name directly.

An additional problem is in your handleReq method, as noted in this answer:

document = req.responseXML;

That replaces the document, meaning that your next few lines are referring to something that is no longer there.

本文标签: javascriptonload39setInterval(quotfunction()quot1000)39 doesn39t workStack Overflow