Как я могу добавить собственный HTTP-заголовок к ajax-запросу с помощью js или jQuery?

271

Кто-нибудь знает, как добавить или создать собственный HTTP-заголовок с помощью JavaScript или jQuery?

Теги:
http-headers

8 ответов

491
Лучший ответ

Существует несколько решений в зависимости от того, что вам нужно...

Если вы хотите добавить собственный заголовок (или набор заголовков) к индивидуальному запросу, просто добавьте свойство headers:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Если вы хотите добавить заголовок по умолчанию (или набор заголовков) к каждому запросу, используйте $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Если вы хотите добавить заголовок (или набор заголовков) к каждому запросу, используйте beforeSend hook с $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Изменить (подробнее):. Одна вещь, о которой нужно знать, это то, что при ajaxSetup вы можете определить только один набор заголовков по умолчанию, и вы можете определить только один beforeSend. Если вы вызовете ajaxSetup несколько раз, будет отправлен только последний набор заголовков, и будет выполнен только последний обратный вызов до отправки.

  • 0
    Что произойдет, если я определю новый beforeSend при выполнении $.ajax ?
  • 3
    Вы можете определить только один beforeSend вызов beforeSend . Если вы $.ajaxSetup({ beforeSend: func... }) дважды, тогда будет $.ajaxSetup({ beforeSend: func... }) только второй обратный вызов.
Показать ещё 11 комментариев
43

Или, если вы хотите отправить пользовательский заголовок для каждого будущего запроса, вы можете использовать следующее:

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

Таким образом, каждый будущий аякс-запрос будет содержать пользовательский заголовок, если явно не переопределить параметры запроса. Вы можете найти более подробную информацию о ajaxSetup здесь

  • 1
    Там, где я действительно хочу достичь этого, это, похоже, на самом деле не работает.
  • 1
    Ну, вы должны убедиться, что ajaxSetup вызывается до фактического вызова ajax. Я не знаю других причин, почему это не сработало :)
13

Вот пример использования XHR2:

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
}; 

Надеюсь, что это поможет.

Если вы создаете свой объект, вы можете использовать функцию setRequestHeader для назначения имени и значения перед отправкой запроса.

  • 2
    Хотя это и могло быть правильным в 2011 году, как правило, лучше не изобретать велосипед, а вместо этого использовать библиотеку AJAX, например Zepto или jQuery.
  • 4
    Если вы не пытаетесь добавить заголовок к существующему вызову XHR2 и не хотите начинать переписывать все это, чтобы использовать jQuery только для этого ... В этот момент у @gryzzly есть единственный жизнеспособный ответ.
Показать ещё 3 комментария
12

Предполагая, что JQuery ajax, вы можете добавить собственные заголовки, например -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});
9

Вы также можете сделать это, не используя jQuery. Переопределите метод отправки XMLHttpRequest и добавьте туда заголовок:

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;
7

Вам следует избегать использования $.ajaxSetup(), как описано в docs. Вместо этого используйте следующее:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
5

Предполагая, что вы имеете в виду "При использовании ajax" и "Заголовок HTTP-запроса", используйте свойство headers в объекте, который вы передаете на ajax()

(добавлено 1.5)

По умолчанию: {}

Карта дополнительных пар ключ/значение заголовка для отправки вместе с запросом. Этот параметр устанавливается до вызова функции beforeSend; поэтому любые значения в настройках заголовков могут быть перезаписаны из функции beforeSend.

- http://api.jquery.com/jQuery.ajax/

2

"setRequestHeader" следует использовать метод объекта XMLHttpRequest

http://help.dottoro.com/ljhcrlbv.php

Ещё вопросы

Сообщество Overcoder
Наверх
Меню