Question

我正在编写一个脚本，可以为我动态更新论坛页面。这不仅方便，而且我认为这是一个很好的练习，可以更熟悉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()函数，以便我可以将其返回到那里。即使我这样做了，也不会只是在getNewDOM()中返回一些未定义的值，因为超时中的函数在getNewDOM()完成之后才会运行？这仍然会让我处于我现在的状况。

我是AJAX的新手。我知道可能有一些简单的方法可以使用jQuery，但我想尽可能使用vanilla Javascript。

Answer 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;
    }
}

Answer 2

您应该使用readystatechange事件

，而不是等待15秒

request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        // code which should be executed once the download has finished
        // ...
    }
}

延迟代码执行直到下载完成

2 个答案: