JavaScript

最終更新日：
公開日：

レシピ

Ajax

XMLHttpRequestオブジェクトを使ってAjaxを実装する

XMLHttpRequestオブジェクトを使ったAjaxによるファイル読み込み、データ送信などを実装する方法について解説します。

この記事のポイント

  • XMLHttpRequestオブジェクトで通信メソッドとURLを指定する
  • RESTful APIで使う4種類のメソッドGET、POST、PUT、DELETEに対応したAjaxを実装する

目次

XMLHttpRequestオブジェクトを使ったAjax

XMLHttpRequestオブジェクトを使うと簡単にAjaxを使うことができます。
通信先のURLのみでなくメソッドも指定できるため、RESTful APIの実装でも使うことができます。

今回はRESTful APIで使う基本的なGET（取得）、POST（作成）、PUT（更新）、DELETE（削除）の4種類のメソッドを使って、XMLHttpRequestオブジェクトのAjax実装例を解説していきます。

GETメソッドによるデータの取得

GETメソッドを使った通信はデータを取得するときによく使用されます。
以下の例はサーバーからJSON形式のデータが入ったファイル「test.json」を取得してコンソールに出力します。

取得するファイル test.json

[
	{
		"title": "K331",
		"category": "Classic",
		"release_date": "2019-11-25"
	},
	{
		"title": "Paradise",
		"category": "Rock",
		"release_date": "2019-12-18"
	},
	{
		"title": "Baby",
		"category": "Pops",
		"release_date": "2020-01-07"
	}
]

こちらのファイルを、以下のコードで取得します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

	// (1) XMLHttpRequestオブジェクトのコンストラクタを実行
	const xhr = new XMLHttpRequest();

	// (2) 通信メソッドと取得するデータのURLを指定
	xhr.open('get', '/test.json');

	// (3) リクエスト（要求）を送信
	xhr.send();

	// (4) 通信完了したらレスポンスからJSONデータを取得してコンソール出力
	xhr.addEventListener('readystatechange', () => {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log( JSON.parse(xhr.response) );
		}
	});
});

XMLHttpRequestオブジェクトは使用する前にコンストラクタを呼び出す必要があります。
(1)では「new XMLHttpRequest();」でコンストラクタを実行して、作成したオブジェクトを変数xhrに入れます。

続いて、(2)の部分でopenメソッドを実行して、通信メソッドとURLを指定します。
今回はJSON形式のファイルを取得するため、URLには「/test.json」を指定します。

(3)でsendメソッドを実行すると、(2)で指定したURLにリクエスト（要求）を送信します。

(4)では、サーバーとの通信が正常に完了したか確認するためにXMLHttpRequestオブジェクトのreadyStateプロパティとstatusプロパティの値をチェックします。

readyStateプロパティはXMLHttpRequestオブジェクトの状態が入っており、最初は0、openメソッドが実行されたら1、sendメソッドを実行してレスポンスヘッダーを受けったら2、レスポンスデータを受け取っているときは3、レスポンスデータの受け取りが終わり通信完了したら4と、通信状態が進むにつれて値が更新されていきます。

もう1つのstatusプロパティはレスポンスヘッダーから受け取ったHTTPステータスコードの値が入っています。
通信が正常だったときは200、URLが見つからなかったときは404、サーバー側でエラーが起こっているときは500など通信状況に応じて値が設定されます。

2つのプロパティを確認していずれも正常だった場合は受け取ったレスポンスデータをコンソールに出力します。
レスポンスデータはXMLHttpRequestオブジェクトのresponseプロパティに入っています。
今回はJSON形式のデータを受け取りますが、そのまま出力するとただの文字列になってしまうため、事前にJSON.parseメソッドを実行してJSONデータの解析を行います。

取得したデータを出力すると以下のようになります。

コンソール出力例

(3) [{…}, {…}, {…}]
	0: {title: "K331", category: "Classic", release_date: "2019-11-25"}
	1: {title: "Paradise", category: "Rock", release_date: "2019-12-18"}
	2: {title: "Baby", category: "Pops", release_date: "2020-01-07"}

GETメソッドによるデータの送信

検索やページング（ページネーション）など公開されたデータにアクセスするときはGETメソッドでデータを送信することがあります。
GETメソッドによるデータ送信はURLにパラメータを指定するのと同じ形になります。

以下の例では、a要素をクリックしたらURLと一緒にパラメータ「mode」「id」をデータとして一緒に送信します。

HTML コード例

<a id="link_next" href="/page.php?mode=next&id=5">次のページへ</a>

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

	// (1) XMLHttpRequestオブジェクトのコンストラクタを実行
	const xhr = new XMLHttpRequest();

	// (2) a要素がクリックされたら処理を実行するようにイベントリスナーに登録
	const link_next = document.getElementById("link_next");
	link_next.addEventListener('click', (e) => {

		e.preventDefault();

		// (3) 通信メソッドと取得するデータのURLを指定
		xhr.open( 'get',  e.target.href);

		// (4) リクエスト（要求）を送信
		xhr.send();
	});

	// (5) 通信完了したらレスポンスからJSONデータを取得してコンソール出力
	xhr.addEventListener('readystatechange', () => {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log(xhr.response);
		}
	});
});

今回はa要素のイベントリスナーの登録などが加わりますが、大まかな流れは先ほどのJSONデータを取得したときと同じです。
a要素のhref属性に設定されたURLとパラメータを(3)のopenメソッドに直接渡して通信を行っています。

POSTメソッドによるデータの送信

POSTメソッドはフォームに入力された値をサーバーに送信するときに使用されます。
RESTfulでは新しい会員登録をするときのような「新規登録」のシーンでAPIと通信を行うときに使用されます。

今回は簡易的な新規会員登録フォームを想定して、「ユーザー名（input_username）」と「パスワード（input_password）」に入力された値を送信ボタンが押されたタイミングでサーバーに送信します。
今回は使用例なので最初からvalue属性に値をして、すでに入力があるものとして進めていきます。

HTML コード例

<article>
  <h1>新規会員登録</h1>
	<form method="post" action="">
		<div>
			<label for="input_name">ユーザー名</label>
			<input type="text" name="input_username" value="Hanako">
		</div>
		<div>
			<label for="input_password">パスワード</label>
			<input type="password" name="input_password" value="Password">
		</div>
		<input type="submit" id="btn_submit" name="btn_submit" value="送信">
	</form>
</article>

以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。
その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

	// (1) XMLHttpRequestオブジェクトとFormDataオブジェクトのコンストラクタを実行
	const xhr = new XMLHttpRequest();
	const fd = new FormData();
  
	// (2) 送信ボタンがクリックされたら処理を実行するようにイベントリスナーに登録
	const btn_submit = document.getElementById("btn_submit");
	btn_submit.addEventListener('click', (e) => {

		e.preventDefault();

		// (3) 通信メソッドと取得するデータのURLを指定
		xhr.open( 'post', '/adduser.php');

		// (4) フォームに入力されたデータを取得
		const input_username = document.querySelector('input[name=input_username]');
		const input_password = document.querySelector('input[name=input_password]');

		// (5) FormDataオブジェクトにデータをセット
		fd.append('username', input_username.value);
		fd.append('password', input_password.value);

		// (6) リクエスト（要求）を送信
		xhr.send(fd);
	});

	// (7) 通信完了したらレスポンスからJSONデータを取得してコンソール出力
	xhr.addEventListener('readystatechange', () => {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log( xhr.response );
		}
	});
});

(1)はXMLHttpRequestオブジェクトとFormDataオブジェクトのコンストラクタを実行します。

(2)は送信ボタンが押されたときに、Ajaxによる通信を行うように設定しています。
処理の真っ先に「e.preventDefault();」を実行していますが、これはHTML要素のデフォルト動作を取り消すことができます。
今回の場合は送信ボタンによるデフォルトのフォーム送信を取り消すために実行します。

(3)はメソッドと通信先の指定です。
ここでPOSTメソッド「post」を指定し、第2パラメータの送信先「/adduser.php」を指定します。

(4)ではユーザー名とパスワードの入力値を取得して、(5)でFormDataオブジェクトにセットしています。
ここまでで通信の準備が整ったので、続く(6)でsendメソッドを実行して通信を開始します。

最後に、(7)で無事に通信完了したかを確認してレスポンスをコンソール出力したら終了です。

PUTメソッドによるデータの送信

PUTメソッドはPOSTメソッドと同様に、フォームに入力された値をサーバーに送信するときに使用します。
RESTfulではすでに登録されたデータを更新するときにAPIと通信を行うときに使用されます。
上記のPOSTメソッドが会員の新規登録のようなシーンで使われるのに対して、PUTメソッドは登録情報の更新（編集）のようなシーンで使うイメージです。

以下の例はすでに登録された会員のパスワード変更を想定して、「パスワード（input_password）」の入力蘭と更新するデータを特定するための「ユーザーID（input_userid）」を送信ボタンが押されたタイミングでサーバーに送信します。

今回は使用例なのでパスワードはすでに「NewPassword」と入力されていることとして進めていきます。
また、ユーザーIDはinput要素の「type=”hidden”」として設置します。

HTML コード例

<article>
  <h1>登録情報の更新</h1>
	<form method="post" action="">
		<div>
			<label for="input_password">パスワード</label>
			<input type="password" name="input_password" value="NewPassword">
		</div>
		<input type="submit" id="btn_submit" name="btn_submit" value="送信">
		<input type="hidden" name="input_userid" value="1102">
	</form>
</article>

以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。
その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

	// (1) XMLHttpRequestオブジェクトとFormDataオブジェクトのコンストラクタを実行
	const xhr = new XMLHttpRequest();
	const fd = new FormData();
  
	// (2) 送信ボタンがクリックされたら処理を実行するようにイベントリスナーに登録
	const btn_submit = document.getElementById("btn_submit");
	btn_submit.addEventListener('click', (e) => {

		e.preventDefault();

		// (3) 通信メソッドと取得するデータのURLを指定
		xhr.open( 'put', '/edituser.php');

		// (4) フォームに入力されたデータを取得
		const input_userid = document.querySelector('input[name=input_userid]');
		const input_password = document.querySelector('input[name=input_password]');

		// (5) FormDataオブジェクトにデータをセット
		fd.append('userid', input_userid.value);
		fd.append('password', input_password.value);
    
		// (6) リクエスト（要求）を送信
		xhr.send(fd);
	});

	// (7) 通信完了したらレスポンスからJSONデータを取得してコンソール出力
	xhr.addEventListener('readystatechange', () => {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log( xhr.response );
		}
	});
});

大まかな流れは上記POSTメソッドと同様です。

(3)の通信メソッドの指定が「put」を指定している点が重要なポイントです。
それ以外では入力項目が「ユーザー名」から「ユーザーID」へと変更になっているだけでほぼ同じです。

DELETEメソッドによるデータの送信

DELETEメソッドはPUTメソッドと同様にサーバーへデータを送信するときに使います。
使用するシーンは登録されたデータを削除するときにAPIと通信するときです。
上記のPUTメソッドが会員情報の更新（編集）だったのに対して、DELETEメソッドは退会時などの削除するシーンで使うイメージです。

以下の例はすでに登録された会員のデータを削除することを想定して、削除するデータを特定するための「ユーザーID（input_userid）」を送信ボタンが押されたタイミングでサーバーに送信します。

HTML コード例

<article>
	<h1>退会</h1>
	<p>このまま退会を進める場合は「退会する」ボタンを押してください。</p>
	<form method="post" action="">
		<input type="submit" id="btn_submit" name="btn_submit" value="退会する">
		<input type="hidden" name="input_userid" value="1102">
	</form>
</article>

以下のJavaScriptコードでは、input要素のvalue属性から入力値を取得してFormDataオブジェクトにセットします。
その後、XMLHttpRequestオブジェクトのsendメソッドでリクエストを送信するときにFormDataオブジェクトも一緒に送信することで、フォームのデータをサーバーに送信します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', () => {

	// (1) XMLHttpRequestオブジェクトとFormDataオブジェクトのコンストラクタを実行
	const xhr = new XMLHttpRequest();
	const fd = new FormData();
  
	// (2) 送信ボタンがクリックされたら処理を実行するようにイベントリスナーに登録
	const btn_submit = document.getElementById("btn_submit");
	btn_submit.addEventListener('click', (e) => {

		e.preventDefault();

		// (3) 通信メソッドと取得するデータのURLを指定
		xhr.open( 'delete', '/deleteuser.php');

		// (4) ユーザーIDを取得
		const input_userid = document.querySelector('input[name=input_userid]');

		// (5) FormDataオブジェクトにデータをセット
		fd.append('userid', input_userid.value);
    
		// (6) リクエスト（要求）を送信
		xhr.send(fd);
	});

	// (7) 通信完了したらレスポンスからJSONデータを取得してコンソール出力
	xhr.addEventListener('readystatechange', () => {
		if( xhr.readyState === 4 && xhr.status === 200) {
			console.log( xhr.response );
		}
	});
});

大まかな流れは上記PUTメソッドと同様です。
(3)で指定する通信メソッドが「delete」を指定している点が重要なポイントになります。

以上、XMLHttpRequestオブジェクトを使った各種メソッドのAjax実装でした。

関連記事

前のページへ 一覧に戻る 次のページへ