【JavaScript入門】FormやAjaxのPOST送信・取得の方法まとめ！

こんにちは、ライターのマサトです！今回は、JavaScriptでサーバーと通信を行う際に欠かせない「POST」を行う方法について学習をしていきましょう！この記事では、

という基本的な内容から、

などの応用的な使い方に関しても解説していきます。この記事で、POST通信をしっかり学習して自分のスキルアップを目指しましょう！

「POST」とは？

一般的にHTTP通信を行う場合は、「GET」「POST」が主に使われています。特に、本記事のテーマである「POST」による通信には以下のような特徴があります。

特に２つ目の「第三者に知られずに」…というのは重要です。「GET」の場合はURLに送信する情報が表示されるので、大事なデータは「POST」で通信する必要があります。

例えば、パスワードなどユーザー情報をサーバーへ送信する場合には注意が必要です。

FormによるPOST

この章では、Form(フォーム)を使ったPOST通信の方法について学習していきます。HTMLを使った基本的な手法と、JavaScriptから動的に通信する方法について見ていきましょう！

Formを使ってPOST送信する方法

まずは、HTMLからFormを作ってPOSTする方法について見ていきます。考え方としては、送信先となる「サーバーのパス」と通信方法の「POST」をFormタグに指定すればOKです。

<form action=【サーバーのパス】 method="POST"></form>

サーバーのパスは「action属性」に、通信方法は「method属性」にそれぞれ記述することになります。例えば、テストサーバーとして「https://httpbin.org/post」のパスに、簡単な文字列を送信する場合は次のようになります。

<form action="https://httpbin.org/post" method="POST">

    <input name="mytext" type="text">
    <input type="submit" value="送信">


</form>

入力ボックスに文字列を入れて送信ボタンをクリックすれば、POST通信が実行されるわけです。

注意点として、送信したいデータのフォーム要素には必ず「name属性」を付与してください。この例だと、「name=”mytext”」と記述している要素がデータとして送信されます。

JavaScriptから動的にPOST送信する方法

次に、HTMLタグを使わずにJavaScriptだけでPOST通信をしてみましょう！基本的な考え方はそれほど変わらないのですが、JavaScriptからFormを生成する手順が必要になります。

var form = document.createElement('form');
var request = document.createElement('input');

このように「createElement()」を使ってForm要素とデータを入力するInput要素を生成しておきます。あとは、このフォーム要素をJavaScriptからサーバーのパスや通信の種類を設定するだけです。次のサンプル例を見てください！

function postForm(value) {

    var form = document.createElement('form');
    var request = document.createElement('input');

    form.method = 'POST';
    form.action = 'https://httpbin.org/post';

    request.type = 'hidden'; //入力フォームが表示されないように
    request.name = 'text';
    request.value = value;

    form.appendChild(request);
    document.body.appendChild(form);

    form.submit();

}

この例では、生成したフォーム部品に「action / method」属性を指定しています。また、全体を関数として囲むことで再利用しやすくしており、引数の「value」が送信するデータになります。実行するには次のように記述します！

postForm('hello world')

これにより、サーバーへ「hello world」という文字列が送信されることになります。

AjaxによるPOST

この章では、AjaxによるPOST通信について見ていきましょう！「XMLHttpRequest()」の使い方からPOSTによる送受信について学んでいきます。

「XMLHttpRequest()」によるAjax通信の作り方

まずは、Ajax通信に必要な「XMLHttpRequest()」の基本的な使い方をおさらいしておきましょう！一般的には、通信の種類（GET / POST）やサーバーのパスを指定し、データを取得するという流れで進んでいきます。

次のサンプル例を見てください！

var xhr = new XMLHttpRequest();
 
xhr.open(【どんな方法で？】, 【どのサーバーに？】);
xhr.send();
 
xhr.onreadystatechange = function() {
 
    if(【いつデータを取得するか？】) {
 
        //データを取得した後の処理を書く
    }
}

まず最初に、XMLHttpRequest()のインスタンスを作成するところから始めます。次に、【どんな方法で？】の箇所が通信の種類「GET / POST」になり、続けてサーバーのパスを指定します。

「onreadystatechange」の処理内で、どのような条件になったらデータを取得するかを分岐処理で記述します。ここで言う「条件」というのは、通信が正常に行われたかどうかをチェックするという意味になります。

詳細な設定方法については、以下の記事で体系的にまとめているのでぜひ参考にしてみてください！

Ajaxを使ってPOST送信する方法

Ajax通信の基本的な組み立て方を把握したところで、実際にPOST通信をしてみましょう。POSTによる通信では、「setRequestHeader()」の追記が必要になります。次のサンプル例を見てください！

var xhr = new XMLHttpRequest();
 
xhr.open('POST', 'https://httpbin.org/post');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');

この例では、「open()」を使って通信の種類(POST)とサーバーのパスを指定しているのが分かります。

また、「setRequestHeader()」に関しては「content-type」を上記のように指定しないと正常にデータを取得できないので注意が必要です。あとは、送信したいデータを「send()」の引数として設定するだけです！

xhr.send( 'name=taro&age=30' );

上記のように【name属性 = 値 & name属性 = 値・・・】という形のデータを設定します。もちろん、フォームからユーザーの入力したデータを送信することも可能です。

POSTデータを取得する方法

POSTでデータを送信したら、サーバーからレスポンスが返ってきます。このレスポンスを取得するには、先ほど紹介した「onreadystatechange」を使います。次のサンプル例を見てください！

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

「readyState」で通信が完了したかどうか（4は完了の意味）を確認します。「status」で通信が正常に行われているか（200は正常の意味）を確認します。

両方の確認で問題なければ、サーバーからのレスポンスを正常に取得することができます。取得するには「responseText」を使って、文字列としてデータを受け取ることになります。

jQueryによるPOST

最後に、jQueryによるお手軽なPOST通信の方法についても解説をしておきます。jQueryを使うとAjax通信の処理を大幅に簡略化できる特徴があるので覚えておくと役に立ちます。使うのは「$.post()」メソッドになります。

これは、第１引数に「サーバーのパス」を指定し、第２引数へ「送信データ」を設定するだけです。次のサンプル例を見てみましょう！

$.post( 'https://httpbin.org/post', 'name=taro' )

基本的には、この１行だけでPOST通信は完成してしまうのです。ただし、サーバーからのレスポンスを取得しなければいけないので、次のように追記しておきます。

$.post( 'https://httpbin.org/post', 'name=taro' )
 
.done(function( data ) {
 
    console.log( data.form );
 
})

「done()」を続けて記述することで、正常に通信ができている場合に限りデータを取得することができます。全体のコードを見ても、XMLHttpRequest()を使った処理よりも簡単で理解しやすいことが分かるでしょう。

さらに、詳細なjQueryによるPOST通信に関しては次の記事でまとめているので、ぜひ参考にして見てください！

まとめ

今回は、JavaScriptからPOST通信を行う方法について学びました！最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！