AJAX - jQuery 与直接 XmlHttpRequest 返回脚本异常答案

【问题标题】：AJAX - jQuery vs direct XmlHttpRequest returnning script oddnessAJAX - jQuery 与直接 XmlHttpRequest 返回脚本异常
【发布时间】：2012-03-30 19:04:05
【问题描述】：

我试图找出使用 jQuery 进行 AJAX 与直接操作 XmlHttpRequest 之间的一些奇怪之处。我下面的测试用例是经典的 ASP，但这只是我的方便 - 服务器端技术应该无关紧要。

我应该补充一点，我并没有排除我的愚蠢——我只是不确定它是什么 :-) 这可能完全是微不足道的，我错过了一些相当明显的东西，但我不是让我的 google-fu 正确，以真正找出我错过了什么。

基本上我调用的是返回内联 Javascript 的代码。这被注入到 HTML 页面中，并打算被执行。我可以完全控制所有代码和服务器（即，这不应该是跨域请求）。

我看到的是 jQuery 版本可以工作 - 它执行 AJAX 页面返回的脚本。直接的方法不起作用。 javascript 不执行。

我的第一个想法是“XSS”，并且 jQuery 对标头做了一些特定的事情，但是我用 fiddler 进行了调查，我看到两个请求都发出了，都返回相同的代码。除了GET（jQuery 在请求上粘贴了一个查询字符串——我认为这是为了解决缓存问题）之外，我也有两个请求完全镜像，但本质上请求看起来像这样：

GET http://myLocalMachine:8000/ajaxtest/ajax.asp HTTP/1.1
x-requested-with: XMLHttpRequest
Accept-Language: en-gb
Referer: http://hsl10161:8000/ajaxtest/main.html
Accept: text/html, */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 1.1.4322; InfoPath.3; MATM)
Host: myLocalMachine:8000
Connection: Keep-Alive

...请注意，请求中没有 Access-Control 标头，响应标头中也没有返回任何标头：

HTTP/1.1 200 OK
Cache-Control: No-cache
Pragma: No-cache
Content-Type: text/html
Expires: Wed, 14 Mar 2012 10:00:57 GMT
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
X-Powered-By: ASP.NET
X-UA-Compatible: IE=EmulateIE7
Date: Wed, 14 Mar 2012 10:01:57 GMT
Content-Length: 55

此内容的其余部分是一个测试用例...所描述的行为发生在 IE8 和 Firefox 10 上。

ajax.asp

<%@ Language=VBScript %>
<%
Option Explicit
Response.CacheControl = "No-cache"
Response.AddHeader "Pragma", "No-cache"
Response.Expires = -1
%>
<script type="text/javascript">alert('Hi!');</script>

main.html

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        function resetdiv()
        {
            $('#target').html('...');
        }
    </script>
    <title>AJAX test</title>
</head>
<body>
    <div id="target"></div>
    <button onclick="ajax1('ajax.asp', 'target')">With jQuery</button>
    <button onclick="ajax2('ajax.asp', 'target')">Without jQuery</button>
    <button onclick="resetdiv();">Reset</button>
</body>
</html>

ajax.js

function ajax1(strURL,target)
{
$.ajax({
    url: strURL,
    cache: false,
    dataType: "html",
    async: false,
    type: "GET",
    success: function (data) {
        $('#' + target).html(data);
    }
});
}

function ajax2(strURL,target)
{
var localAjax = new XMLHttpRequest();
localAjax.open("GET", strURL, false);
localAjax.setRequestHeader("Accept", "text/html, */*");
localAjax.setRequestHeader("x-requested-with", "XMLHttpRequest");
localAjax.onreadystatechange = function() {
    if (localAjax.readyState == 4)
    {
        var respText = localAjax.responseText;
        var targetField = document.getElementById(target);
        if (targetField != null) {
            targetField.innerHTML = respText;
        }
    }
}
localAjax.send(null);
}

【问题讨论】：

标签： jquery ajax xmlhttprequest

【解决方案1】：

当使用 .html() 添加到 DOM 时，jQuery 会执行添加到 DOM 的代码... JavaScript .innerHTML 不会。您可以在代码上使用eval() 函数来使其执行

【讨论】：

Ta ...我有一种感觉，这将是非常明显的事情，但无法弄清楚我错过了什么。