Javascript 将本地HTML加载到Div（Chrome扩展）

我没有使用框架，我想实现一个体系结构，其中一个html文件保存布局的框架，某些其他html片段加载到该布局中的各个div中。代码都在我的主扩展文件夹/弹出窗口中的相同目录位置/

我想构建一个非常简单的函数，将本地保存的html片段加载到div元素中。这是我的第一次尝试：

function loadView(viewName,destination){
    var URL = "/popup/"+viewName;
    var client = new XMLHttpRequest();
    client.open('GET', URL, false);
    client.onreadystatechange = function() {
        document.getElementById(destination).innerHTML = client.responseText;
    }
    client.send();  
}

// Example of a call

loadView('contact.html','widgetBox');

显然，这很糟糕，因为它依赖于将ajax设置为asynchfalse。但在这种解决方案下，这是必要的，因为脚本中的下一行代码可能/确实试图操纵新加载的内容

什么样的方法可以达到不依赖ajax的类似结果？（或者至少，这将解决使用asynch false的需要）

注:

• 我知道基本上有一些框架可以解决这个问题。我喜欢学习如何在没有框架的情况下做事。我不是在挑战框架的使用，我只是对这个问题中的那些方法不感兴趣。与此相关，我希望避免使用jquery（因为这是一个chrome扩展，在干净的JS中开发并不特别痛苦）
• contact.html的内容是一些html，只是一个html字符串（即，除了我要加载的内容之外，它没有标题或任何内容）。除了离散的.html文件之外，我还接受另一种约定，但我喜欢这种约定，因为它很容易将各种页面块组织起来，并且将它们保持为.html文件可以让我轻松地阅读html格式良好的内容

---

您应该让您的

loadView

函数接受回调作为第三个参数。然后，在Ajax调用完成时调用它。这样，就可以使用异步请求

function loadView(viewName, destination, callback){
    var URL = "/popup/"+viewName;
    var client = new XMLHttpRequest();
    client.open('GET', URL);
    client.onreadystatechange = function() {
        if (client.readyState < 4) return; // Wait until the request completes
        document.getElementById(destination).innerHTML = client.responseText;
        callback();
    }
    client.send();  
}

// Example of a call

loadView('contact.html', 'widgetBox', function() {
    // Do whatever comes next
});

函数加载视图（视图名称、目标、回调）{
var URL=“/popup/”+viewName；
var client=new XMLHttpRequest（）；
client.open（'GET'，URL）；
client.onreadystatechange=函数（）{
if（client.readyState<4）return；//等待请求完成
document.getElementById（destination.innerHTML=client.responseText；
回调（）；
}
client.send（）；
}
//通话示例
loadView（'contact.html'，'widgetBox'，function（）{
//下一步怎么做都行
});

您应该让

loadView

函数接受回调作为第三个参数。然后，在Ajax调用完成时调用它。这样，就可以使用异步请求

function loadView(viewName, destination, callback){
    var URL = "/popup/"+viewName;
    var client = new XMLHttpRequest();
    client.open('GET', URL);
    client.onreadystatechange = function() {
        if (client.readyState < 4) return; // Wait until the request completes
        document.getElementById(destination).innerHTML = client.responseText;
        callback();
    }
    client.send();  
}

// Example of a call

loadView('contact.html', 'widgetBox', function() {
    // Do whatever comes next
});

函数加载视图（视图名称、目标、回调）{
var URL=“/popup/”+viewName；
var client=new XMLHttpRequest（）；
client.open（'GET'，URL）；
client.onreadystatechange=函数（）{
if（client.readyState<4）return；//等待请求完成
document.getElementById（destination.innerHTML=client.responseText；
回调（）；
}
client.send（）；
}
//通话示例
loadView（'contact.html'，'widgetBox'，function（）{
//下一步怎么做都行
});

你赢了我！使用回调是正确的解决方案。谢谢。我明白这是怎么回事了。但是接下来我如何避免得到一大堆嵌套的代码呢？这可以通过将代码分解成更小的函数来减轻，这是一种很好的编程实践。明白。虽然从逻辑上来说，这确实是一个相当沉重的代价，但为了避免将异步转换为false，这就是异步编程。这也是图书馆如此受欢迎的部分原因。你打败了我！使用回调是正确的解决方案。谢谢。我明白这是怎么回事了。但是接下来我如何避免得到一大堆嵌套的代码呢？这可以通过将代码分解成更小的函数来减轻，这是一种很好的编程实践。明白。虽然从逻辑上来说，这确实是一个相当沉重的代价，但为了避免将异步转换为false，这就是异步编程。这也是图书馆如此受欢迎的部分原因。