こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptでデータを送信する方法について説明します。JavaScriptはサーバと通信を行いたいときなどに、データを送信しますが、POST送信やGET送信など、名前は聞いたことがあっても、その違いなどについては理解が難しいですよね。
そこで、JavaScriptでデータを送信する方法だけでなく、HTMLタグを用いたデータ送信法などについても説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
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を使った方法について説明します。
基本構文
|
1 2 3 4 5 6 7 8 9 10 |
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などを用いることでデータを正しく取得することができます。
では、実践プログラム例を見てみましょう。
実践プログラム例
|
1 2 3 4 5 6 7 8 9 10 |
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メソッドについて解説します。
基本構文
|
1 2 3 4 5 |
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通信でも設定できますが、送信できるデータ量はわずかになります。
実践プログラム例
|
1 2 3 4 5 |
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については以下に記事を参考にしてください。
JavaScript初心者のためのjQueryの$を分かりやすく解説！jQueryを作ってみよう！
まとめ
いかがでしたでしょうか？今回は、JavaScriptでデータを送信する方法について説明しました。
JavaScriptでは、POST通信とGET通信を使い分けることで、高品質なサービスを作ることができます。ぜひ、JavaScriptのデータの送信について理解し、エラーの少ないWebサービス作成やシステム構築に活かしてください。
