Javascript legt den HTTP-Anforderungsheader fest

JavaScript ist eine in der Front-End-Entwicklung weit verbreitete Sprache, die durch das Festlegen von HTTP-Anforderungsheadern eine effizientere Netzwerkkommunikation erreichen kann. Der HTTP-Anforderungsheader ist Teil des HTTP-Protokolls. Er befindet sich am Kopf der HTTP-Anforderung und wird zur Übertragung von Anforderungsinformationen wie User-Agent, Accept usw. verwendet. In JavaScript können wir Netzwerkanforderungen optimieren, indem wir HTTP-Anforderungsheader festlegen, z. B. Erhöhung der Sicherheit, Cache-Kontrolle, domänenübergreifend usw.

In diesem Artikel erfahren Sie, wie Sie HTTP-Anforderungsheader in JavaScript festlegen.

1. Ajax-Anfrageheader festlegen

In JavaScript verwenden wir normalerweise Ajax, um Netzwerkanfragen zu stellen. Das Folgende ist ein einfaches Ajax-Anfragebeispiel:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.send();

Im obigen Code initiieren wir eine GET-Anfrage über das XMLHttpRequest-Objekt und verarbeiten die Antwortdaten in seiner onreadystatechange-Methode. Obwohl diese Anfrage erfolgreich initiiert werden kann und die Antwortdaten erhalten werden, ist der HTTP-Anfrageheader nicht festgelegt. In Ajax können wir den HTTP-Anforderungsheader festlegen, indem wir die Methode setRequestHeader des XMLHttpRequest-Objekts festlegen, zum Beispiel:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.setRequestHeader('Authorization', 'Bearer my_token'); // 设置Authorization请求头
xhr.send();

Im obigen Code haben wir eine Codezeile hinzugefügt, um den Autorisierungsanforderungsheader festzulegen. Der Wert lautet Bearer my_token , das heißt, es wird die Bearer-Token-Authentifizierungsmethode verwendet, um auf die Server-API zuzugreifen. Auf diese Weise können wir HTTP-Anforderungsheader in Ajax-Anfragen festlegen, um den Zugriff auf API-Schnittstellen, die Übertragung von Authentifizierungsinformationen usw. zu erleichtern.

2. XHR-Anforderungsheader festlegen

In JavaScript ist das XMLHttpRequest-Objekt das am häufigsten verwendete Tool für die Interaktion mit dem Server. Durch das Festlegen von HTTP-Header-Informationen kann eine effizientere Netzwerkkommunikation erreicht werden. Das Folgende ist ein Beispiel für die Einstellung des XHR-Anfrageheaders:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('POST', '/api/data', true); // 发起POST请求，true表示是异步请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头Content-Type为JSON
xhr.send(JSON.stringify({name: 'Tom'})); // 发送JSON数据

Im obigen Code initiieren wir eine POST-Anfrage über das XMLHttpRequest-Objekt und setzen den Content-Type-Anfrageheader auf application/json, um die Übertragung des JSON-Formats an den Server zu erleichtern API-Daten. Auf diese Weise können wir HTTP-Anfrageheader in XHR-Anfragen setzen, um eine effizientere Netzwerkkommunikation zu erreichen.

3. Abrufanforderungsheader festlegen

In ES6 ist Fetch eine leistungsfähigere Netzwerkanforderungs-API, die nativ unterstützt wird. Sie gibt ein Promise-Objekt zurück, unterstützt Kettenaufrufe und ist prägnanter. Das Folgende ist ein einfaches Beispiel für eine Abrufanforderung:

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

Im obigen Code initiieren wir eine GET-Anfrage über die Abruffunktion und verarbeiten die zurückgegebenen Antwortdaten. Obwohl diese Anfrage erfolgreich initiiert wurde und die Antwortdaten abgerufen wurden, wurde der HTTP-Anfrageheader nicht gesetzt. In Fetch können wir den HTTP-Anforderungsheader festlegen, indem wir das Anforderungs-Header-Objekt festlegen, zum Beispiel:

fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Im obigen Code haben wir eine Codezeile hinzugefügt, um das Header-Anforderungs-Header-Objekt festzulegen, das Autorisierung und Inhaltstyp enthält. Ein Anforderungsheader, der den Zugriff auf die API-Schnittstelle, die Weitergabe von Authentifizierungsinformationen, die Angabe von Datentypen usw. erleichtert. Auf diese Weise können wir HTTP-Anforderungsheader in der Abrufanforderung festlegen, um effizientere Netzwerkanforderungen zu erreichen.

Zusammenfassung:

Um HTTP-Anforderungsheader in JavaScript festzulegen, müssen Sie je nach Netzwerkanforderungstool unterschiedliche Einstellungsmethoden verwenden. In Ajax legen wir den HTTP-Anforderungsheader über die setRequestHeader-Methode des XMLHttpRequest-Objekts fest. In Fetch müssen wir den HTTP-Anforderungsheader auch über die setRequestHeader-Methode festlegen. Unabhängig davon, welche Einstellungsmethode verwendet wird, müssen geeignete HTTP-Anforderungsheader entsprechend der jeweiligen Situation ausgewählt werden, um eine effizientere Netzwerkkommunikation zu erreichen.

Das obige ist der detaillierte Inhalt vonJavascript legt den HTTP-Anforderungsheader fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!