javascript - jQuery 如何导致执行 AJAX 响应中返回的脚本标记内的 JS 代码？

Question

jQuery 到底有什么魔力，可以导致在 AJAX 响应中找到的脚本标记内执行 JS 代码？

例如，当不使用如下所示的 jQuery AJAX 时，我发现使用 eval() 经常被描述为执行此操作的一种方法:

• Calling a JavaScript function returned from an Ajax response
• Can scripts be inserted with innerHTML?

因此，eval 在这些情况下发挥了代码执行的魔力。我没有看到在 jQuery AJAX 调用中使用 eval。

jQuery 魔法

$("#form").submit(function() {
    $.ajax({
        type : "POST",
        url : 'process_form.php',
        data : $("#form").serialize(),
        success : function(data) {
            $("#main_page").load('main_page.php');
        }
    });

    return false;
});

这里 jQuery 设置了一个事件(表单提交)，单击表单上的“提交”即可提交表单，然后使用从 main_page.php 返回的信息 AJAX 加载 DIV(该页面包含更新) information + JS + jQuery) 到 main_page div 元素中。但是，不仅如此。

它还会触发、运行并执行位于 ajax 加载数据的脚本标记内的任何 JS/jQuery 代码，而无需使用我可以看到的 eval

问题:它是如何做到这一点的？

注意:

我正在使用一些第三方专有的 AJAX 库，它可以正确地将响应加载到 main_page div 中，但随后它不运行任何 JS/jQuery。

注2:

需要明确的是，所讨论的 jQuery 代码根本没有问题。它可以工作并执行 main_page.php 中的任何 JS。我使用的专有 AJAX 库会加载页面，但不会在其中执行任何 AJAX。我想弄清楚是什么让它在 jQuery 执行代码时不执行代码。

不触发脚本标签代码执行的第三个 Paty 库

深入研究图书馆，我看到了这一点:

http_req.open(method, url, true);

if (method == "POST") {
    http_req.setRequestHeader("Content-type",
            "application/x-www-form-urlencoded");
    http_req.setRequestHeader("Content-length", post_str.length);
    http_req.setRequestHeader("Connection", "close");
    http_req.send(post_str);
} else if (method == "GET") {
    http_req.send(null);
}

在提交按钮上使用类似此事件的内容来调用库:

onclick="process_form(..., url, 'main_page'...)"

它还有这个:

var responseObj = new getObject(response);
responseObj.obj.innerHTML = http_req.responseText;

围绕上述内容的完整代码:

http_req.onreadystatechange = function() {
    if (http_req.readyState == 4 || http_req.readyState == "complete") {
        if (response != "" && redir == "") {
            if (response == "document") {
                document.write(http_req.responseText);
            } else {

                //Update of innerHTML (but without triggering execution)
                //of code found in <script> tags of http_req.responseText
                responseObj.obj.innerHTML = http_req.responseText;
                loadingObj.style.display = "none";
            }

        } else if (response != "" && redir != "" && response != "over") {
            load_page(redir, "", response, "GET", "");
        }
    }
}

我的猜测是它更新了innerHTML，但没有......

• 将其添加到 DOM 中吗？
• 是否进行评估？
• 施展魔法？

上面的库跳过了 jQuery 所拥有的魔力是什么？
有没有办法修复该库，使其执行响应脚本标记中找到的代码？

Answer 1

你知道这个回调是在你的浏览器中执行的吗？这与您的服务器响应无关。它仅在您的服务器返回数据时执行。

您可以在此处查看有关 XHR 的正确文档 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest