JavaScriptはhttpリクエストヘッダーを設定します

JavaScript はフロントエンド開発で広く使われている言語で、HTTP リクエストヘッダーを設定することでより効率的なネットワーク通信を実現します。 HTTP リクエスト ヘッダーは HTTP プロトコルの一部で、HTTP リクエストの先頭に位置し、User-Agent、Accept などのリクエスト情報を送信するために使用されます。 JavaScript では、セキュリティの強化、キャッシュ制御、クロスドメインなど、HTTP リクエスト ヘッダーを設定することでネットワーク リクエストを最適化できます。

この記事では、JavaScript で HTTP リクエスト ヘッダーを設定する方法を紹介します。

1. Ajax リクエスト ヘッダーの設定

JavaScript では、通常、Ajax を使用してネットワーク リクエストを作成します。以下は、単純な 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();

上記のコードでは、XMLHttpRequest オブジェクトを通じて GET リクエストを開始し、その onreadystatechange メソッドで応答データを処理します。このリクエストは正常に開始され、応答データが取得されますが、HTTP リクエスト ヘッダーが設定されていません。 Ajax では、XMLHttpRequest オブジェクトの setRequestHeader メソッドを設定することで HTTP リクエスト ヘッダーを設定できます。例:

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

上記のコードでは、Authorization リクエスト ヘッダーを設定するコード行を追加しました。その値は、 Bearer my_token です。つまり、Bearer Token 認証メソッドを使用してサーバー API にアクセスします。このようにして、Ajax リクエストに HTTP リクエスト ヘッダーを設定して、API インターフェイスへのアクセスや認証情報の転送などを容易にすることができます。

2. XHR リクエスト ヘッダーの設定

JavaScript では、XMLHttpRequest オブジェクトはサーバーとの対話に最も一般的に使用されるツールです。HTTP ヘッダー情報を設定すると、より効率的になります。 .ネットワーク通信。以下は、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数据

上記のコードでは、XMLHttpRequest オブジェクトを通じて POST リクエストを開始し、Content-Type リクエスト ヘッダーを application/json に設定して、XHR リクエスト ヘッダーへのリクエストを容易にします。 API はデータを JSON 形式で配信します。このようにして、XHR リクエストに HTTP リクエスト ヘッダーを設定して、より効率的なネットワーク通信を実現できます。

3. Fetch リクエスト ヘッダーの設定

ES6 では、Fetch はネイティブでサポートされている、より強力なネットワーク リクエスト API です。Promise オブジェクトを返し、チェーン コールをサポートします。 。以下は、単純なフェッチ リクエストの例です。

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

上記のコードでは、フェッチ関数を通じて GET リクエストを開始し、返された応答データを処理します。このリクエストは正常に開始され、応答データが取得されましたが、HTTP リクエスト ヘッダーが設定されていませんでした。 Fetch では、リクエストされた Header オブジェクトを設定することで HTTP リクエスト ヘッダーを設定できます。例:

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

上記のコードでは、Header リクエスト ヘッダー オブジェクトを設定するコード行を追加しました。これには、Authorization とContent-Type には、API インターフェイスへのアクセス、認証情報の受け渡し、データ型の指定などを容易にする 2 つのリクエスト ヘッダーがあります。このようにして、フェッチ リクエストに HTTP リクエスト ヘッダーを設定して、より効率的なネットワーク リクエストを実現できます。

概要:

JavaScript で HTTP リクエスト ヘッダーを設定するには、ネットワーク リクエスト ツールごとに異なる設定方法を使用する必要があります。 Ajax では、XMLHttpRequest オブジェクトの setRequestHeader メソッドを通じて HTTP リクエスト ヘッダーを設定します。XHR では、setRequestHeader メソッドを通じて HTTP リクエスト ヘッダーも設定します。Fetch では、HTTP リクエスト ヘッダーを設定するには Header オブジェクトを設定する必要があります。いずれの設定方法であっても、より効率的なネットワーク通信を実現するには、状況に応じて適切なHTTPリクエストヘッダを選択する必要があります。

以上がJavaScriptはhttpリクエストヘッダーを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。