【初心者向け】JavaScriptでデータを送信する方法は？メソッドの使い方や実践コード例について解説！

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！

本記事では、JavaScriptでデータを送信する方法について説明します。JavaScriptはサーバと通信を行いたいときなどに、データを送信しますが、POST送信やGET送信など、名前は聞いたことがあっても、その違いなどについては理解が難しいですよね。

そこで、JavaScriptでデータを送信する方法だけでなく、HTMLタグを用いたデータ送信法などについても説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！

目次 [非表示]

1 JavaScriptの送信とは？
2 GETメソッド
- 2.1 基本構文
- 2.2 実践プログラム例
3 POSTメソッド
- 3.1 基本構文
- 3.2 実践プログラム例
4 まとめ

JavaScriptの送信とは？

JavaScriptを始めとした、Webサービスの開発に伴い、データの送信については、プログラムの書き方だけでなく、原理や背景をある程度理解しておくことが必要です。Webサービスは、クライアントとサーバ間でリクエスト・レスポンスを繰り返すことで成立しています。このクライアントとサーバがデータのやり取りをする際には、HTTPというプロトコルで通信が行われています。

皆さんも、HTTPは聞いたことあるのではないでしょうか。そうです、Webページのurlの最初についていますよね！

このHTTPのメソッドにPOSTメソッドやGETメソッドと呼ばれるものがあります。データのやり取りをしたいときは、主にこれらのメソッドを使います。それぞれについて詳しく見ていきましょう。

POST送信

POSTはリソースを実装している機能に沿った処理をする方式です。POST送信は、URLからは判断できないデータを送信します。リクエスト内容をHTTP通信のボディ内に記述するため、URLを直接入力してもアクセスできず、ログインや登録などをして特定のページからのみアクセスできるようになっています。

データ量が多いときや、外部に漏らしたくない機密情報（パスワードやメールアドレスなど）を扱う際に適しています。また、特徴として、バイナリデータも送信できることが挙げられます。

GET送信

GETはリソース内容を転送するようにリクエストする方式です。GET送信は、URLにパラメータを付与し、データを取得するために使われます。POST送信と異なり、GET送信URLだけで指定できるので、URLをブラウザに入力すればアクセスできるため、読み取り専用とも言えます。

また、GET送信はクライアント側からは、サーバの処理内容については分からないため、比較的安全です。しかし、GET送信はテキストデータしか送信できないため、長いデータや公開範囲を限定したいデータについては向いていません。

結局、GETとPOSTの違いは？

GETとPOSTの違いはその意味の通り、GETはデータを取得する、POSTはデータの送信する、という違いです。

クライアント側はサーバ側のPHPにリクエストが来るとします。簡単に違いを例で示すと、「データが欲しい」という内容がGET送信、「データを送ります」という内容がPOST送信となります。

GETとPOSTは混同しやすいですが、この違いをはっきりさせて、目的や用途に応じて使い分けることが重要です！では、実際の使用方法について、それぞれ確認していきましょう！

GETメソッド

では、まずはGETメソッドの使い方について見ていきましょう。ここでは、Ajax通信によるGETを使った方法について説明します。

基本構文

var 変数名 = new XMLHttpRequest();

変数名.open('GET', URL名);
変数名.send();

変数名.onreadystatechange = function() {
    if(変数名.readyState === 4 && 変数名.status === 200) {
       // データが取得できた時の処理内容
    }
}

var 変数名 = new XMLHttpRequest();

変数名.open('GET', URL名);

変数名.send();

変数名.onreadystatechange = function() {

if(変数名.readyState === 4 && 変数名.status === 200) {

// データが取得できた時の処理内容

}

基本構文ですが、色々書いてあって難しいですよね。上から順に見ていきましょう。

今回は、XMLHttpRequestを用いたAjax通信での構文です。最初の行で、XMLHttpRequestをnew演算子で指定することで、インスタンスを作成しています。

3,4行目で、open関数とsend関数を用いることで、通信を行っています。このopen関数内の第一引数に、‘GET’を指定することで、GET通信となります。また、第二引数に取得したいデータの所在を表すURLを指定します。

6行目以降で、データを取得した際の処理内容を記述します。ここでは詳しい説明は省きますが、readStateが4、statusが200のときに、通信が成功したことを表し、responseTextなどを用いることでデータを正しく取得することができます。

では、実践プログラム例を見てみましょう。

実践プログラム例

var data_url = new XMLHttpRequest();

data_url.open('GET', 'http://data/want_data.json');
data_url.send();

data_url.onreadystatechange = function() {
    if(data_url.readyState === 4 && data_url.status === 200) {
       console.log(data_url.responseText);
    }
}

var data_url = new XMLHttpRequest();

data_url.open('GET', 'http://data/want_data.json');

data_url.send();

data_url.onreadystatechange = function() {

if(data_url.readyState === 4 && data_url.status === 200) {

console.log(data_url.responseText);

}

GET通信の実践的な使用法として、先ほどの基本構文にURLなどを記述したプログラムを書きました。3行目のように、open関数の第一引数に’GET’、第二引数にURLを指定することで、GET通信にてデータを取得することができます。

また、6行目以降の関数内にて、data_url.responseTextを用いることで、ここではwant_data.jsonのデータを得ることができます。

POSTメソッド

続いて、POSTメソッドについて解説します。

基本構文

var 変数名 = new XMLHttpRequest();

変数名.open('POST', URL名);
変数名.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
変数名.send(string);

var 変数名 = new XMLHttpRequest();

変数名.open('POST', URL名);

変数名.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

変数名.send(string);

POST通信は、3行目のopen関数の第一引数に‘POST’を指定します。

また、POST通信では4行目のように、setRequestHeaderを用いて、countent-typeを指定する必要があります。指定がないと、サーバ側でデータを受け取ることができません。ここでは、’application/x-www-form-urlencoded’を指定しています。

さらに、GET通信では何も指定しませんでしたが、POST通信では5行目のsend関数に送信するデータを設定します。GET通信でも設定できますが、送信できるデータ量はわずかになります。

実践プログラム例

var send_data = new XMLHttpRequest();

send_data.open('POST', 'http://send.com');
send_data.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
send_data.send('number=5&animal=dog');

var send_data = new XMLHttpRequest();

send_data.open('POST', 'http://send.com');

send_data.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

send_data.send('number=5&animal=dog');

先ほどの基本構文に、URLや送信するデータを記述しました。このように、POST通信によって、setRequestHeaderを指定し、sendの引数に送信したいデータを記述することで、データを送ることができます。

また、JavaScriptの通信に関して、理解が欠かせないjQueryについては以下に記事を参考にしてください。

2020.10.21JavaScript初心者のためのjQueryの$を分かりやすく解説！jQueryを作ってみよう！

まとめ

いかがでしたでしょうか？今回は、JavaScriptでデータを送信する方法について説明しました。

JavaScriptでは、POST通信とGET通信を使い分けることで、高品質なサービスを作ることができます。ぜひ、JavaScriptのデータの送信について理解し、エラーの少ないWebサービス作成やシステム構築に活かしてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。