JavaScriptのXMLHttpRequestを使ったPOST送信方法
今回は、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オブジェクトを作り出しています。