Question

jQuery的魔力究竟是什么导致在AJAX响应中找到的脚本标记中执行JS代码？

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

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

jQuery Magic

$("#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设置一个事件（表单提交）到表单上单击提交的地方提交表单然后AJAX-用从main_page.php返回的信息加载DIV（该页面包含更新信息+ 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中？
做eval？
执行魔术？

jQuery拥有上述库跳出来的神奇之处是什么？有没有办法可以修复库以使其执行响应脚本标记中的代码？

Answer 1

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

您可以在此处https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

查看有关XHR的正确文档

Answer 2

我希望我能正确理解你的问题：

 success : function(data) {
        $("#main_page").load('main_page.php');
    }

这就是所谓的＆＃34;成功处理程序＆＃34; - 它是一个事件监听器，等待从服务器收到http响应。 Javascript在回调函数中运行很多，这意味着，你调用一个动作（比如ajax请求），一旦完成，它就会回调另一个（通常是匿名的）函数。

http://www.w3schools.com/js/js_events.asp

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

Answer 3

jQuery使用自己的Deferred's来实现回调，包括其ajax实现。请参阅此处的代码：https://github.com/jquery/jquery/blob/master/src/ajax.js

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

3 个答案: