JavaScript

最終更新日：
公開日：

レシピ

Ajax

XMLHttpRequestでファイルを読み込む

XMLHttpRequestを使って指定したURLからテキストファイルや画像ファイルなどを読み込む方法について解説します。

この記事のポイント

  • 読み込むファイルはopenメソッドで指定する
  • イベントreadystatechangeの発生を検出して通信が正常に完了したか確認する
  • 読み込むファイル形式によってはresponseTypeプロパティを指定する

目次

XMLHttpRequestによるAjaxでファイルを読み込む

XMLHttpRequestオブジェクトによってサーバーにリクエスト（要求）を送信することで、指定した各種ファイルを読み込むことができます。

openメソッドで指定したファイルはサーバーに存在するファイルであれば、基本的にはどの形式でも読み込むことができます。
しかしファイルの形式によってはresponseTypeプロパティに受け取るレスポンスのファイル形式を予め設定しておく必要があります。

以降では、以下の形式の各種ファイルをXMLHttpRequestオブジェクトで取得する例を上から順に解説していきます。

  • テキストファイルを読み込む
  • JSONファイルを読み込む
  • XMLファイルを読み込む
  • HTMLファイルを読み込む
  • 画像ファイルを読み込む
  • 音声ファイルを読み込む
  • 動画ファイルを読み込む

ファイル形式はそれぞれ異なりますが、読み込む流れは基本的に共通しています。
解説では以下のHTMLコードにあるid属性「file_area」を持つdiv要素の中に、読み込んだファイルを挿入してページに表示します。

HTML コード例

<article>
	<h1>JavaScriptレシピ</h1>
	<div id="file_area"></div>
</article>

CSS コード例

#file_area {
  padding: 20px;
  border: 4px solid #4a93cb;
}
#file_area img,
#file_area video {
  width: 100%;
  max-width: 200px;
  height: auto;
}

JavaScriptは以下の(1)〜(5)は全ファイル共通の流れになります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './text/test.txt');
	// xhr.responseType = 'blob'; (ファイル形式によって設定）

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) 取得したレスポンスをページに表示

		}
	}
});

ページの読み込みが完了したときに発生するイベントDOMContentLoadedを検知したら、XMLHttpRequestオブジェクトでファイルを取得してページに表示します。

(2)のresponseTypeプロパティの設定はファイル形式によって必要になります。
テキストファイルでは設定不要ですが、画像や動画などのリソースファイルやHTMLを取得するときに設定します。

(5)では受け取ったレスポンスを参照して、ファイル内容をページに表示する処理が入ります。
ここもファイル形式によって異なるため、以下のそれぞれの解説を参照してください。

テキストファイルを読み込む

もっとも基本的なプレーンのテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.txt」を読み込みます。

テキストファイル test.txt

Hello!
This is a test text for reading by Ajax.

こちらのテキストファイルをXMLHttpRequestオブジェクトで読み込んでいきます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './text/test.txt');
  
	// (3) リクエスト（要求）を送信
	xhr.send();

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) テキストファイルをページに表示
			const file_area = document.getElementById('file_area');
			file_area.innerHTML = this.responseText.replace(/\n/g, "
");
		}
	};
});

(2)で取得するファイル名「‘./text/test.txt’」を指定して、(3)のsendメソッドでリクエスト（要求）をサーバーに送信したらファイルを取得することができます。

受け取ったレスポンスに含まれるファイル内容はresponseTextプロパティから取得することができます。
今回は通常のテキストですが、テキストファイル内の改行を反映するためにdiv要素のinnerHTMLプロパティに対してresponseTextプロパティの文字列を挿入します。

テキストを挿入するときにreplaceメソッドを実行していますが、テキスト内の改行コード「\n」をbr要素に変換しています。
この変換を行うことで、HTML内にテキストを挿入したときに改行を反映することができます。

JSONファイルを読み込む

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"
	}
]

こちらのファイルをXMLHttpRequestオブジェクトで読み込んで、それぞれの「title」と「release_date」のデータを取り出してページに表示します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './text/test.json');

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) JSONファイルのデータをページに表示
			const file_area = document.getElementById('file_area');
			const json_data = JSON.parse(this.responseText);
			const ul_element = document.createElement('ul');

			for(var data of json_data) {
        
				const li_element = document.createElement('li');
				li_element.textContent = data.title + " (リリース日：" + data.release_date + ")";

				ul_element.appendChild(li_element);
			}

			file_area.appendChild(ul_element);
		}
	};
});

レスポンスで受け取ったJSONデータはresponseTextプロパティに入っています。
この時点ではただの文字列なので、このデータをJSON.parseメソッドを使ってオブジェクト形式に変換します。

変換したデータをfor文に渡して、「title」と「release_date」のデータを取得してli要素を作成します。
作成したli要素はul要素に追加していきます。

for文を抜けたあとはここまで作成したul要素をdiv要素に挿入し、データを表示します。

XMLファイルを読み込む

XML形式のテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.xml」を読み込みます。

テキストファイル test.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

	<url>
		<loc>https://test.com/</loc>
		<lastmod>2020-11-06</lastmod>
		<changefreq>daily</changefreq>
		<priority>1.0</priority>
	</url>

	<url>
		<loc>https://test.com/blog/</loc>
		<lastmod>2020-10-16</lastmod>
		<changefreq>daily</changefreq>
		<priority>0.8</priority>
	</url>
		<url>
			<loc>https://test.com/blog/trip/</loc>
			<lastmod>2019-06-10</lastmod>
			<changefreq>monthly</changefreq>
			<priority>0.5</priority>
		</url>
			<url>
				<loc>https://test.com/blog/trip/alaska-report/</loc>
				<lastmod>2019-06-10</lastmod>
				<changefreq>yearly</changefreq>
				<priority>0.3</priority>
			</url>
			<url>
				<loc>https://test.com/blog/trip/different-rate-in-thailand/</loc>
				<lastmod>2019-06-10</lastmod>
				<changefreq>yearly</changefreq>
				<priority>0.3</priority>
			</url>

	<url>
		<loc>https://test.com/about/</loc>
		<lastmod>2019-06-10</lastmod>
		<changefreq>yearly</changefreq>
		<priority>0.8</priority>
	</url>
	<url>
		<loc>https://test.com/contact/</loc>
		<lastmod>2019-06-10</lastmod>
		<changefreq>yearly</changefreq>
		<priority>0.8</priority>
   </url>

</urlset>

こちらのファイルをXMLHttpRequestオブジェクトで読み込んで、body要素内にある全てのp要素を取り出してページに表示します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './text/test.xml');

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) XMLファイルのデータをページに表示
			const sitemap = this.responseXML;
			const urls = sitemap.querySelectorAll('url');
			const ul_element = document.createElement('ul');

			for(var url_data of urls) {

				const li_element = document.createElement('li');
				const url = url_data.querySelector("loc");
				const last_update = url_data.querySelector("lastmod");

				li_element.innerHTML = "URL：" + url.textContent + "<br>最終更新日：" + last_update.textContent;
				ul_element.appendChild(li_element);
			}

			file_area.appendChild(ul_element);
		}
	};
});

ファイルから読み込んだXMLデータはresponseXMLを参照することでアクセスします。
XMLデータはDocumentオブジェクトなので、HTMLと同様にDOMツリーの操作を行うことができます。

そのため、特定の要素を全て取得したいときはquerySelectorAllメソッドに「url」を指定したり、特定の要素を1つだけ取得するときはquerySelectorメソッドを使うことが可能です。
要素内のテキストについてもHTML操作と同様にtextContentプロパティから参照します。

なお、responseTextプロパティには1つの文字列になったXMLデータが入っています。

HTMLファイルを読み込む

HTML形式のテキストファイルを読み込んでページに表示します。
サンプルページはこちら

以下の内容の「test.html」を読み込みます。

テキストファイル test.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>読み込みテスト用HTML | GRAYCODE JavaScript</title>
</head>
<body>
	<h1>JavaScriptレシピ</h1>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
	<p>テキスト4</p>
	<p>テキスト5</p>
</body>
</html>

こちらのファイルをXMLHttpRequestオブジェクトで読み込んで、DocumentオブジェクトからquerySelectorAllメソッドを使って全てのp要素を取り出してdiv要素に挿入します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './text/test.html');
	xhr.responseType = 'document';

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) HTMLファイルのデータをページに表示
			const file_area = document.getElementById("file_area");
			const html = this.responseXML;
			const p_elements = html.querySelectorAll('p');

			for(var p of p_elements) {
				file_area.appendChild(p);
			}
		}
	};
});

HTMLファイルを読み込むときは、sendメソッドでリクエスト（要求）を送信する前にresponseTypeプロパティに「document」をセットする必要があります。

読み込んだHTMLデータはXML形式と同様にresponseXMLプロパティから取得します。
データはDocumentオブジェクトなので、JavaScriptからHTML要素を操作するときと同じDOMツリーの操作を使うことができます。

画像ファイルを読み込む

画像ファイルを読み込んでページに表示します。
ファイル形式はJPEG形式、PNG形式、GIF形式のいずれも可能です。
サンプルページはこちら

今回の例ではPNG形式の画像「bear.png」を読み込みます。

くま

こちらのファイルをXMLHttpRequestオブジェクトで読み込んで、img要素を作成してsrc属性に画像ファイルのパスを挿入します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './image/bear.png');
	xhr.responseType = 'blob';

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) 画像ファイルをページに表示
			const file_area = document.getElementById('file_area');
			const img_element = document.createElement('img');

			img_element.src = URL.createObjectURL(this.response);
			file_area.appendChild(img_element);
		}
	};
});

画像ファイルのようなリソースファイルを読み込むときは、sendメソッドでリクエスト（要求）を送信する前にresponseTypeプロパティに「blob」をセットする必要があります。

読み込んだ画像ファイルはresponseプロパティから取得することができます。
データはBlobオブジェクトでそのままでは表示できないため、URL.createObjectURLメソッドを実行してURLを取得してからimg要素のsrc属性に設定することでページに表示します。

音声ファイルを読み込む

音声ファイルを読み込んでページで再生できるようにします。
読み込むファイルはmp3形式、aac形式、wav形式などいずれの形式も可能です。
サンプルページはこちら

今回の例ではmp3形式の音声ファイル「bgm01.mp3」をXMLHttpRequestオブジェクトで読み込み、audio要素を作成してsrc属性に音声ファイルのパスを挿入して再生できる状態にしていきます。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './audio/bgm01.mp3');
	xhr.responseType = 'blob';

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) 音声ファイルをページに表示
			const file_area = document.getElementById("file_area");
			const audio_element = document.createElement('audio');

			audio_element.src = URL.createObjectURL(this.response);
			audio_element.controls = true;
			file_area.appendChild(audio_element);
		}
	};
});

画像、音声、動画などのリソースファイルを読み込むときは、sendメソッドでリクエスト（要求）を送信する前にresponseTypeプロパティに「blob」をセットする必要があります。

読み込んだ音声ファイルはresponseプロパティから取得することができます。
データはBlobオブジェクトでそのままではページに挿入できないため、URL.createObjectURLメソッドを実行してURLを取得してからaudio要素のsrc属性に設定します。

音声ファイルが再生可能な状態まで読み込まれたらコントローラが表示され、再生や一時停止、ボリュームの調整など各種操作を行うことができるようになります。

動画ファイルを読み込む

動画ファイルを読み込んでページで再生できるようにします。
読み込むファイルはmp4形式、webm形式、ogg形式などいずれの形式も可能です。

サンプルページはこちら
※動画ファイルの読み込みに時間がかかるため、表示されるまでに多少時間がかかります。

今回の例ではwebm形式の動画ファイル「swiss.mov」をXMLHttpRequestオブジェクトで読み込み、video要素を作成してsrc属性に動画ファイルのパスを挿入して再生できる状態にします。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) XMLHttpRequestオブジェクトを作成
	const xhr = new XMLHttpRequest();

	// (2) 取得するファイルの設定
	xhr.open('get', './movie/swiss.mov');
	xhr.responseType = 'blob';

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

	xhr.onreadystatechange = function() {

		// (4) 通信が正常に完了したか確認
		if( xhr.readyState === 4 && xhr.status === 200) {

			// (5) 動画ファイルをページに表示
			const file_area = document.getElementById("file_area");
			const video_element = document.createElement('video');

			video_element.src = URL.createObjectURL(this.response);
			video_element.controls = true;
			file_area.appendChild(video_element);
		}
	};
});

画像ファイルや音声ファイルのときと同様に、動画ファイルもリソースファイルなのでsendメソッドでリクエスト（要求）を送信する前にresponseTypeプロパティに「blob」をセットする必要があります。

読み込んだ動画ファイルはresponseプロパティから取得できます。
データはBlobオブジェクトでそのままではページに挿入できないため、URL.createObjectURLメソッドでURLを取得してvideo要素のsrc属性に設定します。

動画ファイルが再生可能な状態まで読み込まれたらページに表示され、コントローラより再生や一時停止、ボリュームの調整など各種操作を行うことができるようになります。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

関連記事

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