jQuery ajax() 选项 - xhr

Question

在 jQuery ajax 函数中，有 xhr 选项。有人知道此选项的更多详细信息、可用性或示例用法吗？

Answer 1

对于此函数，您希望返回适合您的浏览器的 XHR 对象。默认行为是使用 XMLHTTPRequest 或 IE 等效项。这是默认行为:

jQuery.ajaxSettings.xhr = window.ActiveXObject ?
/* Microsoft failed to properly
 * implement the XMLHttpRequest in IE7 (can't request local files),
 * so we use the ActiveXObject when it is available
 * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
 * we need a fallback.
 */
function() {
    return !this.isLocal && createStandardXHR() || createActiveXHR();
} :
// For all other browsers, use the standard XMLHttpRequest object
createStandardXHR;

这两个创建方法createStandardXHR和createActiveXHR本质上调用了我们多年来都知道和喜爱的基本XHR创建方法。这是 createStandardXHR:

function createStandardXHR() {
try {
    return new window.XMLHttpRequest();
} catch( e ) {}
}

因此，如果您想覆盖它，您可以简单地传入您自己的函数，该函数返回一个 new XMLHttpRequest() 对象。

你为什么要这样做？假设您需要发出跨域 HTTP 请求，并使用 IFRAME 填充程序使其能够使用 document.domain 在同一源规则内工作。这是让您的 javascript 根据您想要对话的域从正确的框架加载 XHR 对象的好方法。

Twitter.com 使用这种技术。

JavaScript 运行于 http://twitter.com/但数据位于http://api.twitter.com 。他们创建了一个指向 api.twitter.com 的 IFRAME，只需将 document.domain 设置为 “twitter.com”。他们也在主页中将 document.domain 设置为 “twitter.com”。

然后，他们的 JS 在发出 HTTP 请求时，只是从 IFRAME 而不是主页创建它。通过同源策略获取它们。

您可以使用 $.ajax() 的 xhr 选项来完成此操作。这是一个片段(想象一下此代码在 http://myapp.com 的页面上运行):

$.ajax({url: "http://api.myapp.com", xhr: function(){
  return new ($('#my_api_iframe')[0].contentWindow.XMLHttpRequest)();
}, success: function(html) {
    // format and output result
   }
});

只要主页和 iframe 将其 document.domain 设置为相同的值，就可以工作。 (这是一个黑客示例:它在某些 IE 版本中不起作用，因为我作弊并且只使用了标准 XMLHttpRequest 对象 - 您需要修复。)

希望有帮助。

(编辑添加:这是旧版浏览器所必需的技术 - 大多数现代浏览器中的 CORS 支持将使此变得不必要)

苏贾尔