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为相同的值,这将起作用.(这是一个hackish例子:它在某些IE版本中不起作用,因为我作弊并且只使用了标准的XMLHttpRequest对象 - 你需要修复它.)

希望有所帮助.

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

Sujal

Answer 2

另一个迟到的答案,但下面的代码是一个很好的例子,说明当你覆盖xhr选项时你可以做什么. 这取自Ben Nolan的博客. 它允许您跟踪xhr get的进度.我在加载大型json数据集时使用它创建了一个进度条,与他创建它完全相同.它给了我很多帮助.

interval = null

$.ajax {
  url : "endpoint.json"

  dataType : 'json'

  xhr : () =>
    xhr = jQuery.ajaxSettings.xhr()

    interval = setInterval( =>
      if xhr.readyState > 2
        total = parseInt(xhr.getResponseHeader('Content-length'))
        completed = parseInt(xhr.responseText.length)
        percentage = (100.0 / total * completed).toFixed(2)

        console.log "Completed #{percentage}%"
    , 50)

    xhr

  complete: ->
    clearInterval(interval)

  success : (data) =>
    alert(data)
}

Answer 3

事实上,有人确实知道.

该xhr选项允许您定义自己的回调,以创建将在ajax()调用的幕后使用的XMLHttpRequest对象.在几乎每种情况下,您都不需要指定此选项.