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 所拥有的魔力是什么?
有没有办法修复该库,使其执行响应脚本标记中找到的代码?
最佳答案
你知道这个回调是在你的浏览器中执行的吗?这与您的服务器响应无关。它仅在您的服务器返回数据时执行。
您可以在此处查看有关 XHR 的正确文档 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
关于javascript - jQuery 如何导致执行 AJAX 响应中返回的脚本标记内的 JS 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36066237/