Wie kann ich eine benutzerdefinierte HTTP-Header zu Ajax-Anfrage mit js oder jQuery hinzufügen?

Question

Weiß jemand, wie man eine benutzerdefinierte HTTP-Header mit JavaScript oder jQuery hinzufügen oder erstellen?

Answer 1

Es gibt verschiedene Lösungen, je nachdem, was Sie brauchen...

Wenn Sie möchten, dass Hinzufügen einer benutzerdefinierten Kopfzeile (oder einer Reihe von Kopfzeilen) zu einer einzelnen Anfrage dann fügen Sie einfach die headers Eigentum:

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

Wenn Sie möchten, dass eine Standardkopfzeile (oder eine Reihe von Kopfzeilen) zu jeder Anfrage hinzufügen dann verwenden Sie $.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' } });

Wenn Sie möchten, dass eine Kopfzeile (oder eine Reihe von Kopfzeilen) zu jeder Anfrage hinzufügen verwenden Sie dann die beforeSend Haken mit $.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' } });

Bearbeiten (mehr Informationen): Eine Sache, die man beachten sollte, ist, dass bei ajaxSetup können Sie nur einen Satz von Standardkopfzeilen definieren und Sie können nur einen beforeSend . Wenn Sie anrufen ajaxSetup mehrmals, wird nur der letzte Satz von Kopfzeilen gesendet und nur der letzte "Before-Send"-Callback wird ausgeführt.

Answer 2

Wenn Sie die benutzerdefinierte Kopfzeile für jede zukünftige Anfrage senden möchten, können Sie Folgendes verwenden:

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

Auf diese Weise wird jede künftige Ajax-Anfrage die benutzerdefinierte Kopfzeile enthalten, es sei denn, sie wird in den Optionen der Anfrage ausdrücklich überschrieben. Weitere Informationen finden Sie unter ajaxSetup aquí

Answer 3

Sie können dies auch ohne jQuery tun. Überschreiben Sie die Send-Methode von XMLHttpRequest und fügen Sie die Kopfzeile dort hinzu:

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;

Answer 4

Wenn Sie JQuery ajax verwenden, können Sie benutzerdefinierte Kopfzeilen hinzufügen wie -

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

Answer 5

Hier ist ein Beispiel mit 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++;
}; 

Ich hoffe, das hilft.

Wenn Sie Ihr Objekt erstellen, können Sie die Funktion setRequestHeader verwenden, um einen Namen und einen Wert zuzuweisen, bevor Sie die Anfrage senden.