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

こんにちは、大学院で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を使った方法について説明します。

基本構文

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

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

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

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

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

実践プログラム例

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

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

POSTメソッド

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

基本構文

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

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

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

実践プログラム例

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


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

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

まとめ

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

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

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?