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

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

javascript ajax

Javascript 延迟代码执行，直到下载完成,javascript,ajax,Javascript,Ajax,我正在写一个脚本，它将为我动态更新论坛页面。这不仅方便，而且我认为这是一个很好的练习，可以更好地了解Javascript和DOM 要获得更新的帖子列表，我必须获取页面的最新版本。我正在使用XmlHttpRequest执行此操作： function getNewDOM(url) { console.log("getNewDOM()"); // Get the page var request = new XMLHttpRequest(); request.open(

我正在写一个脚本，它将为我动态更新论坛页面。这不仅方便，而且我认为这是一个很好的练习，可以更好地了解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;

}

函数getNewDOM（url）{ log（“getNewDOM（）”）； //获取页面 var request=new XMLHttpRequest（）；打开（“获取”，url，false）；请求发送（空）； var new_html=request.responseText； var new_dom=document.createElement（“div”）； //将HTML剥离到标记的内容。 new_html=new_html.replace（//，“”）； new\u html=new\u html.replace（/\/body>*？/，“”）； log（“stripHTML”）； new_dom.innerHTML=new_html；返回新文档； } 如您所见，请求当前是同步的。我相信你们都知道，这很糟糕。使用异步请求无法完成任务，因为其余代码在页面下载完成之前就开始执行

我认为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（url）{ log（“getNewDOM（）”）； //获取页面 var request=new XMLHttpRequest（）；打开（“获取”，url，true）；请求发送（空）； setTimeout（函数（）{ var new_html=request.responseText； var new_dom=document.createElement（“div”）； //将HTML剥离到标记的内容。 new_html=new_html.replace（//，“”）； new\u html=new\u html.replace（/\/body>*？/，“”）； log（“stripHTML”）； new_dom.innerHTML=new_html；返回新文档； }, 15000); } 问题是，我不知道如何将返回值返回到原始的

getNewDOM（）

函数，以便在那里返回它。即使我这样做了，它是否会在

getNewDOM（）

中返回一些未定义的值，因为超时中的函数直到

getNewDOM（）完成后才会运行？这仍然会让我处于现在的处境
我对AJAX完全陌生。我知道使用jQuery可能有一些简单的方法，但如果可能的话，我希望使用香草Javascript
我认为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;
    }
}

您应该使用readystatechange
事件，而不是等待15秒
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        // code which should be executed once the download has finished
        // ...
    }
}

那是我试过的另一件事。但是，我仍然无法通过这种方式将返回值返回到getNewDOM（），可以吗？由于函数将在状态更改之前结束，它不会仍然以未定义的值结束函数吗？任何需要Ajax调用响应的代码都必须移动到readystatechange
处理程序中，或者至少必须在那里调用代码，以便将响应传递给itSo，你是说我需要将调用getNewDOM（）的函数分解为多个部分，这样后一部分就可以从getNewDOM（）调用（或者，更确切地说，是从onreadystatechange处理程序调用）？好吧，这意味着我必须或多或少地重写整个脚本。但是，谢谢！至少我知道我现在在做什么。