JavaScriptで投稿投稿を書く方法

フロントエンド開発では、多くの場合、AJAX テクノロジを使用して、POST リクエストを含む HTTP リクエストを送信する必要があります。この記事ではJavaScriptでPOSTリクエストを記述する方法を説明します。

1. POST リクエストの基本概念

まず、POST リクエストの基本概念を理解する必要があります。

HTTP プロトコルでは、GET と POST はどちらも一般的に使用されるリクエスト メソッドです。主な違いは次のとおりです:

1. GET リクエストはパラメータを URL に直接入れて渡しますが、GET リクエストはパラメータを URL に直接入れて渡します。 POST リクエスト パラメータはリクエスト本文に配置されます。
2. GET リクエストによって送信されるデータの量は小さく、通常は 1KB 以下ですが、POST リクエストには制限がなく、大量のデータを送信できます。
3. GET リクエストは、URL 内のパラメータがユーザーによって表示または変更される可能性があるため安全ではありませんが、POST リクエストはパラメータがリクエスト本文に配置されているため比較的安全です。

以上がPOSTリクエストの基本的な考え方ですが、次にJavaScriptでPOSTリクエストを記述する方法を紹介します。

2. XMLHttpRequest オブジェクトを使用して POST リクエストを送信する

JavaScript では、XMLHttpRequest オブジェクトを使用して、GET リクエストや POST リクエストを含む HTTP リクエストを送信できます。

XMLHttpRequest オブジェクトは、バックグラウンドでサーバーとデータを交換するために使用できる JavaScript API です。 AJAX テクノロジーを通じてデータを非同期にロードでき、ページ全体を再ロードせずにページを更新できます。

XMLHttpRequest オブジェクトを使用して POST リクエストを送信する基本的な手順は次のとおりです。

1. XMLHttpRequest オブジェクトを作成する

まず、次のことを行う必要があります。 XMLHttpRequest オブジェクトを作成します。これは、次のコードを使用して実現できます。

var xhr = new XMLHttpRequest();

2. リクエストのパスとパラメータを設定する

次に、リクエストのパスとパラメータを設定する必要があります。これらのパラメータはリクエスト本文に配置されます。これは、次のコードを使用して実現できます。

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

上記のコードでは、リクエスト パスを http://example.com/api に設定し、パラメータは name=John および age=25 です。

さらに、リクエスト ヘッダー Content-type も application/x-www-form-urlencoded に設定されます。これは標準の POST リクエスト ヘッダーで、リクエスト本文のパラメーターがキーと値の形式であることをサーバーに伝えます。

3. サーバーから返されたデータを受信する

最後に、サーバーから返されたデータを受信する必要があります。これは、次のコードを使用して実現できます。

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

上記のコードでは、XMLHttpRequest の onreadystatechange イベント ハンドラーを設定します。 readyState が 4 (つまり、リクエストが完了) になり、ステータス コードが 200 になると、サーバーが正常に応答してデータを返したことを意味します。このとき、サーバーから返されるデータは xhr.responseText を通じて取得できます。

3. フェッチ API を使用して POST リクエストを送信する

XMLHttpRequest オブジェクトに加えて、フェッチ API を使用して POST リクエストを送信することもできます。フェッチ API は、クライアントとサーバー間で HTTP リクエストを送信し、Promise オブジェクトを使用してサーバー応答をカプセル化するための標準 JavaScript API です。

次は、フェッチ API を使用して POST リクエストを送信する基本的な手順です。

1. リクエストのパスとパラメータを設定します

最初に、リクエストとパラメータのパスを設定する必要があります。これは、次のコードを使用して実現できます。

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

上記のコードでは、リクエスト パスを http://example.com/api に設定し、パラメータは name=John および age=25 です。

さらに、リクエスト ヘッダー Content-type も application/x-www-form-urlencoded に設定されます。これは標準の POST リクエスト ヘッダーで、リクエスト本文のパラメーターがキーと値の形式であることをサーバーに伝えます。

2. サーバーから返されたデータを受信する

最後に、サーバーから返されたデータを受信する必要があります。フェッチ API の Promise オブジェクトを使用して処理できます。これは、次のコードを使用して実現できます。

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

上記のコードでは、response.json() メソッドを使用して応答本文を JSON 形式に変換し、then() メソッドを通じて応答データを処理します。 、および catch() メソッドを通じて例外を処理します。

4. 概要

この記事で紹介したメソッドを使用すると、XMLHttpRequest オブジェクトやフェッチ API の使用など、JavaScript で POST リクエストを作成できます。これらのメソッドは、データを非同期的にロードし、ページ全体を再ロードすることなくページを更新できます。実際のニーズに基づいて、POST リクエストを送信するための適切な方法を選択できます。

以上がJavaScriptで投稿投稿を書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。