JavaScript　POSTデータを送信する方法 | AJAXを活用したデータ送信手順の解説

JavaScriptを使ってWebサイト上でPOSTデータを送信する方法について、AJAXを活用した手順を解説します。

JavaScriptでPOSTデータを送信する方法は分からないのですが、どうすればいいですか？

AJAXを使ってPOSTデータを送信することができます。以下では、その手順を詳しく解説します。

AJAXとは何か？

AJAXは、JavaScriptを使って非同期通信を行うための技術です。この技術を使うことで、Webページを再読み込みすることなく、サーバーと通信してデータをやり取りすることができます。また、JSONやXML形式のデータを受け取ることもできます。

AJAXを使ったPOSTデータの送信手順

AJAXを使ったPOSTデータの送信手順は以下のとおりです。

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

AJAX通信をするためには、XMLHttpRequestオブジェクトを作成する必要があります。

以下のようにnew演算子を用いて、XMLHttpRequestオブジェクトを作成します。

const xhr = new XMLHttpRequest();

2. 送信するデータを作成する

POSTメソッドでデータを送信する場合、データを作成する必要があります。

以下は、JSON形式のデータを作成する例です。

const data = {
  'key1': 'value1',
  'key2': 'value2'
};

3. open()メソッドで通信を開始する

XMLHttpRequestオブジェクトを作成したら、open()メソッドを呼び出して通信を開始します。

以下は、open()メソッドを使って通信を開始する例です。

xhr.open('POST', '送信先のURL', true);

第1引数にはHTTPメソッドを指定します。この場合は、POSTメソッドを指定しています。第2引数には送信先のURLを指定します。第3引数には、非同期通信をするかどうかを指定します。trueを指定すると非同期通信を行います。

また、データを送信する際に、Content-Typeを設定する必要があります。これは、送信するデータの形式をサーバー側に伝えるためです。以下は、Content-Typeを設定する例です。

xhr.setRequestHeader('Content-Type', 'application/json');

この例では、Content-Typeをapplication/jsonに設定しています。JSON形式のデータを送信する場合は、このようにContent-Typeを設定する必要があります。他にも、formデータを送信する場合は、application/x-www-form-urlencodedなどのContent-Typeを設定する必要があります。

4. send()メソッドでデータを送信する

データを作成して通信を開始したら、send()メソッドを呼び出してデータを送信します。

以下は、send()メソッドを使ってデータを送信する例です。

xhr.send(JSON.stringify(data));

第1引数には、送信するデータを指定します。この場合は、先ほど作成したJSON形式のデータをJSON.stringify()メソッドを使って文字列に変換したものを指定しています。

5. レスポンスを受け取る

レスポンスを受け取るには、XMLHttpRequestオブジェクトのonreadystatechangeイベントを監視します。

以下は、onreadystatechangeイベントを使ってレスポンスを受け取る例です。

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

readyStateプロパティが4になり、statusプロパティが200になったら、レスポンスを受け取ることができます。レスポンスのデータは、responseTextプロパティに格納されます。上記の例では、レスポンスのデータをコンソールに表示しています。

サンプルプログラムを使った解説

以下は、AJAXを使ってPOSTデータを送信するためのサンプルコードです。このコードを実際に使って、POSTデータの送信を行うことができます。

const xhr = new XMLHttpRequest();
const url = '送信先のURL';
const data = { 'key': 'value' };

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');

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

xhr.send(JSON.stringify(data));

まず、XMLHttpRequestオブジェクトを作成しています。

次に、送信先のURLと送信するデータを設定します。この例では、URLには実際の送信先のURLを指定します。また、送信するデータはJSON形式で、keyというキー名でvalueという値を持つものを設定しています。

const url = '送信先のURL';
const data = { 'key': 'value' };

次に、XMLHttpRequestオブジェクトを設定します。

POSTメソッドで送信するためには、第1引数にPOSTを指定します。第2引数には、送信先のURLを指定します。第3引数には、非同期通信を行うかどうかを指定します。trueを指定すると、非同期通信を行います。

次に、Content-Typeを設定します。この例では、JSON形式のデータを送信するために、Content-Typeをapplication/jsonに設定しています。

次に、レスポンスを受け取るための設定を行います。onreadystatechangeイベントを設定し、readyStateが4で、statusが200のときにレスポンスのデータを受け取ります。受け取ったデータは、responseTextプロパティに格納されます。この例では、レスポンスのデータをコンソールに出力しています。

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

最後に、データを送信します。JSON.stringify()メソッドを使って、データをJSON形式の文字列に変換し、send()メソッドでデータを送信します。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

JavaScriptを使ってWebサイト上でPOSTデータを送信する方法について、AJAXを活用した手順を解説しました。

AJAXを使ってPOSTデータを送信する手順が分かりました。実際に使ってみたいと思います。

AJAXを使ったPOSTデータの送信は、JavaScriptを使ってWebサイト上でデータの送受信ができるようになる重要な手法です。

また、フレームワークやライブラリを使うことで、手軽に実装することができます。常に最新の技術を取り入れ、セキュリティにも配慮しながら、Web開発に取り組んでいきましょう。