javascript - 在 jquery .when .done 函数中访问数据(eval 也是邪恶的吗？)

Question

我正在尝试进行一些动态加载，包括 javascript、css 和 html 文件。

我想这样做:

$.when($.ajax(htmlPath), $.get(cssPath), $.ajax({
    url: javascriptPath,
    dataType: "text"
}))
.done(function(response){
// i want to pass the data for each of these to the respective functions        
    appendHtml(what goes here??);       
    appendCss(what goes here??);
    executeJs(what goes here??);
})
.fail(function(){
    console.log("failed");
});

所以我对如何分离响应回调感到困惑。目前，您在我的 .done 函数中看到的响应对象只是我调用的 HTML 文件。此函数进行正确的 ajax 调用，并且正确的文件都由服务器响应，但是一旦所有调用完成，我如何访问它们？需要这个，所以我不会将 css/js 应用到尚不存在的 HTML 等。此外，我所做的是将 javascript 文件作为字符串返回，然后在 executeJs 函数中对它进行 eval()。我的理解是，这是对 eval 的一个很好的使用，因为它是由我们自己的服务器返回的文件，所以我看不出它是如何被篡改的。这个假设是否正确？

此外，在我的 appendCss 函数中，我只是将它添加到头部的“style”元素中。这有什么大问题吗？我正在使用所有这些来制作一个“基于小部件/应用程序”的功能，其中每个“应用程序”都有一个 js、css 和 html，我只想在需要它们并且应用程序正在加载时查询服务器.

Answer 1

如果您下载的数据是从与您的原始网页相同的服务器上检索的，那么是的，一般来说，您对该代码的信任程度与您对浏览器中已经运行的代码的信任程度相同。

eval() 在这种情况下的问题并不一定是因为您不信任从您自己的服务器返回的代码；这是有人可能能够更改正在运行的 javascript，以便 javascriptPath 变量指向您没有预料到的地方。

---

就您的实际问题而言，您的 done 回调实际上将传递三个参数，因为您的 when 调用包含三个 promise 。

由于您定义回调的方式(如 function(response))，您只能看到第一个 - 来自 HTML 调用的返回值。其他两个参数被忽略。

传递给您的三个参数中的每一个都是一个包含三个元素的数组:[wasSuccessful, statusText, jqxhr]。要对它们做一些有用的事情，您可以像这样构造您的回调:

$.when($.ajax(htmlPath), $.get(cssPath), $.ajax({
    url: javascriptPath,
    dataType: "text"
}))
.done(function(htmlResponse, cssResponse, jsResponse){
    if (htmlResponse[0]) {
        appendHtml(htmlResponse[2].responseText);
    }
    if (cssResponse[0]) {
        appendCss(cssResponse[2].responseText);
    }
    if (jsResponse[0]) {
        executeJs(jsResponse[2].responseText);
    }
})

(假设您已经编写了适当的 appendHtml、appendCss 和 executeJs 函数)

---

此页面上有一些很好的示例:http://api.jquery.com/jQuery.when/

此页面包含有关 jqxhr 对象(传递给 done 函数的每个数组中的第三个元素)的文档:http://api.jquery.com/jQuery.ajax/#jqXHR