2020/09/25

JavaScriptのXMLHttpRequestを使ったPOST送信方法

PROGRAM

今回は、JavaScriptのXMLHttpRequestを使ったPOST送信方法について、データの作り方と送信方法に分け、簡単に解説していきます。

フォームデータの作り方

XMLHttpRequestオブジェクトでデータをPOST送信するには、フォームデータを作る必要があります。

フォームデータは、FormDataオブジェクトを使って、それに対し、appendメソッドでデータを追加しながら作ります。

var formData = new FormData();
formData.append("username", "Tanaka");
formData.append("age", 22);

上記のコードでは、name属性が”username”でvalue属性が”Tanaka”のデータとname属性が”age”でvalue属性が22のデータのフォームデータを作成しています。

フォームデータのPOST送信の仕方

送信するデータの集まりであるFormDataオブジェクトは、XMLHttpRequestオブジェクトでPOST送信できます。

XMLHttpRequestのsendメソッドの引数に、作成したFormDataオブジェクトを指定することで、データがPOSTで送られます。

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/", true);
xhr.onload = function (e) {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 通信成功の場合の処理を書く
            console.log(xhr.responseText);
        } else {
            // サーバエラーの場合の処理を書く
            console.error(xhr.statusText);
        }
    }
};
xhr.onerror = function (e) {
    // 通信エラーの場合の処理を書く
    console.error(xhr.statusText);
};
xhr.send(formData);

上記のコードでは、先程作成したformDataというFormDataオブジェクトを、XMLHttpRequestを使い、”https://example.com/”に対し、非同期でPOST送信しています。

form要素に紐づけたフォームデータの作り方

FormDataオブジェクトでは、appendでデータを追加する以外にも、form要素と紐づけてデータを作ることも可能です。

form要素と紐づけることで、既存のHTMLをそのまま活用して、XMLHttpRequestでPOST送信できるため、コードが簡単になります。

var form = document.getElementById("form");
var formData  = new FormData(form);

上記のコードでは、DocumentのgetElementByIdメソッドで”form”というIDを持つform要素を取得し、それをFormDataのコンストラクタの引数に指定し、FormDataオブジェクトを作り出しています。

• facebook
• Tweet
• Read Later