Опция 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 из правильного фрейма в зависимости от того, с каким доменом вы хотите общаться.

Твиттер.com использует эту технику.

JavaScript работает на http://twitter.com/, но данные на http://api.twitter.com. Они создают IFRAME, указывающее на api.twitter.com, который просто устанавливает document.domain на "twitter.com". Они также устанавливают document.domain на "twitter.com" на главной странице.

Затем их JS при создании HTTP-запросов просто создает его из IFRAME вместо главной страницы. Получает их с помощью политики того же происхождения.

Вы можете сделать это с помощью опции xhr для $ .ajax (). Вот фрагмент кода (представьте, что этот код работает на странице 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 в большинстве современных браузеров сделает это ненужным)

Sujal

Answer 2

Еще один поздний ответ, но приведенный ниже код является отличным примером того, что вы можете сделать, если переопределите опцию xhr. Это взято из блога Бена Нолана Это позволяет вам отслеживать ход получения xhr. Я использовал это, чтобы создать индикатор выполнения при загрузке большого набора данных 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 позволяет определить собственный обратный вызов для создания объекта XMLHttpRequest, который будет использоваться за кулисами в вызове ajax(). В большинстве случаев вам не нужно указывать эту опцию.

Answer 4

http://api.jquery.com/ ваш друг. С этого сайта при поиске команды ajax ():

xhr (Функция): обратный вызов для создания объекта XMLHttpRequest. По умолчанию используется ActiveXObject, если он доступен (IE), в противном случае XMLHttpRequest. Переопределите, чтобы предоставить собственную реализацию XMLHttpRequest или усовершенствования фабрики. Он недоступен в jQuery 1.2.6 и в любой ранней версии.

Как правило, если вы не знаете, что делаете, вы на самом деле не будете использовать эту функцию функции $ .ajax ()