javascript définit l'en-tête de la requête http

JavaScript est un langage largement utilisé dans le développement front-end. Il peut permettre une communication réseau plus efficace en définissant des en-têtes de requête HTTP. L'en-tête de requête HTTP fait partie du protocole HTTP et est situé en tête de la requête HTTP. Il est utilisé pour transmettre les informations de la requête, telles que User-Agent, Accept, etc. En JavaScript, nous pouvons optimiser les requêtes réseau en définissant des en-têtes de requête HTTP, tels que l'augmentation de la sécurité, le contrôle du cache, l'inter-domaine, etc.

Cet article explique comment définir les en-têtes de requête HTTP en JavaScript.

1. Définir l'en-tête de requête Ajax

En JavaScript, nous utilisons généralement Ajax pour effectuer des requêtes réseau. Voici un exemple simple de requête Ajax :

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();

Dans le code ci-dessus, nous lançons une requête GET via l'objet XMLHttpRequest et traitons les données de réponse dans sa méthode onreadystatechange. Bien que cette requête puisse être lancée avec succès et que les données de réponse soient obtenues, l'en-tête de la requête HTTP n'est pas défini. En Ajax, nous pouvons définir l'en-tête de la requête HTTP en définissant la méthode setRequestHeader de l'objet XMLHttpRequest, par exemple :

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();

Dans le code ci-dessus, nous avons ajouté une ligne de code pour définir l'en-tête de la requête d'autorisation, dont la valeur est Bearer my_token signifie utiliser la méthode d'authentification Bearer Token pour accéder à l'API du serveur. De cette manière, nous pouvons définir des en-têtes de requête HTTP dans les requêtes Ajax pour faciliter l'accès aux interfaces API, transférer les informations d'authentification, etc.

2. Définir l'en-tête de requête XHR

En JavaScript, l'objet XMLHttpRequest est l'outil le plus couramment utilisé pour interagir avec le serveur. Il peut être défini. en définissant les informations d'en-tête HTTP pour obtenir une communication réseau plus efficace. Voici un exemple de paramètre d'en-tête de requête XHR :

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数据

Dans le code ci-dessus, nous lançons une requête POST via l'objet XMLHttpRequest et définissons l'en-tête de requête Content-Type sur application/json, de sorte que Pass données au format JSON vers l'API du serveur. De cette façon, nous pouvons définir des en-têtes de requête HTTP dans les requêtes XHR pour obtenir une communication réseau plus efficace.

3. Set Fetch request header

Dans ES6, Fetch est une API de requête réseau plus puissante prise en charge nativement, et elle renvoie un objet de promesse pris en charge en chaîne appelle et est plus concis. Voici un exemple simple de requête Fetch :

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

Dans le code ci-dessus, nous lançons une requête GET via la fonction fetch et traitons les données de réponse renvoyées. Bien que cette requête ait été lancée avec succès et que les données de réponse aient été obtenues, l'en-tête de la requête HTTP n'a pas été défini. Dans Fetch, nous pouvons définir l'en-tête de la requête HTTP en définissant l'objet Header demandé, par exemple :

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))

Dans le code ci-dessus, nous avons ajouté une ligne de code pour définir l'objet d'en-tête de la requête Header, qui contient Il existe deux en-têtes de requête, Authorization et Content-Type, pour faciliter l'accès à l'interface API, la transmission des informations d'authentification, la spécification des types de données, etc. De cette façon, nous pouvons définir des en-têtes de requête HTTP dans la requête Fetch pour obtenir des requêtes réseau plus efficaces.

Résumé :

Pour définir l'en-tête de requête HTTP en JavaScript, vous devez utiliser différentes méthodes de configuration en fonction des différents outils de requête réseau. Dans Ajax, nous définissons l'en-tête de requête HTTP via la méthode setRequestHeader de l'objet XMLHttpRequest ; dans XHR, nous définissons également l'en-tête de requête HTTP via sa méthode setRequestHeader dans Fetch, nous devons définir l'objet Header pour définir l'en-tête de requête HTTP. Quelle que soit la méthode de configuration utilisée, les en-têtes de requête HTTP appropriés doivent être sélectionnés en fonction de la situation spécifique afin d'obtenir une communication réseau plus efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!