1

我正在编写一个脚本，它将为我动态更新论坛页面。这不仅方便，而且我认为这是一个很好的练习，可以让您更熟悉 Javascript 和 DOM。

要获取更新的帖子列表，我必须获取页面的最新版本。我用 XmlHttpRequest 来做这件事：

function getNewDOM(url) {
    console.log("getNewDOM()");
    // Get the page
    var request = new XMLHttpRequest();
    request.open("GET", url, false);
    request.send(null);  

    var new_html = request.responseText;
    var new_dom = document.createElement("div");
    // Strip the HTML down to the contents of the <body> tag.
    new_html = new_html.replace(/<!DOCTYPE.*?body\ id.*?>/, "");
    new_html = new_html.replace(/\/body>.*?<\/html>/, "");
    console.log("Strip HTML");
    new_dom.innerHTML = new_html;

    return new_dom;

}

如您所见，请求当前是同步的。出于我相信你们都知道的原因，这很糟糕。使用异步请求并不能完成工作，因为其余代码在页面完成下载之前开始执行。

我认为 setTimeout() 是我需要使用的。像这样的东西？

function getNewDOM(url) {
    console.log("getNewDOM()");
    // Get the page
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send(null);  

    setTimeout(function() {

        var new_html = request.responseText;
        var new_dom = document.createElement("div");
        // Strip the HTML down to the contents of the <body> tag.
        new_html = new_html.replace(/<!DOCTYPE.*?body\ id.*?>/, "");
        new_html = new_html.replace(/\/body>.*?<\/html>/, "");
        console.log("Strip HTML");
        new_dom.innerHTML = new_html;

        return new_dom;

    }, 15000);

}

问题是我不知道如何将该返回值返回到原始getNewDOM()函数，以便我可以将它返回到那里。即使我这样做了，它不会只是返回一些未定义的值 in getNewDOM()，因为超时中的函数直到完成后才会运行getNewDOM()？这仍然会让我处于现在的境地。

我对 AJAX 完全陌生。我知道使用 jQuery 可能有一些简单的方法，但如果可能的话，我想用 vanilla Javascript 来做。

4

2 回答 2

1

我认为 setTimeout() 是我需要使用的

不，因为您永远不知道异步 ajax 请求何时完成。您需要的是绑定到readystatechange事件：

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState==4 && request.status==200) {
        // Inside here is the only safe place to use request.responseText;
    }
}
于 2012-09-06T22:11:21.567 回答
1

而不是等待 15 秒，您应该使用该readystatechange事件

request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        // code which should be executed once the download has finished
        // ...
    }
}
于 2012-09-06T22:11:40.820 回答