ywork2020.com

Title

HTTP 通信で外部データファイルを読み込む

目次 (INDEX)

XMLHttpRequest とは

ここで説明する XMLHttpRequest とは次の語句からなる javascript のクラスです。
XML
読み: エックスエムエル
意味: データに意味を持たせることができる拡張可能なマークアップ言語
HTTP
読み: エイチティティピー
意味: Web サーバと Web クライアントの間でデータの送受信を行うために用いられる通信規約
request
読み: リクエスト
意味: 依頼、要請

目次に戻る

XMLHttpRequest の概要

XMLHttpRequest クラスは、HTTP 通信環境下で Web サーバーにリクエストを送り、かつ、任意の情報ファイルを受け取ることができます。

この XMLHttpRequest はクラスのコンストラクターであり、インスタンスを生成して使用します。

このクラスを使って、ご自身のローカル環境で開発を行うには HTTP で通信できるサーバーが必要になります。

目次に戻る

XMLHttpRequest を使うための環境構築

ローカル環境でのテストや開発には、あなたのローカルネットワークに HTTP 通信でのリクエストに対してレスポンスを返すことができるサーバー PC が必要になります。

サーバー PC といっても特別な PC が必要なわけではなく、普通の PC に HTTP 通信機能を提供してくれるソフトウェアをインストールすれば問題ありません。

また、テストや開発もサーバーとしての機能をもつ PC を使って行えばよいので、PC は 1台でも問題ありません。 環境の構築が完了したら、Web ブラウザで http から始まる URL を指定してファイルにアクセスするだけで XMLHttpRequest の機能を利用することができます。 開発環境の構築については以下のリンクページを参考にしてください。

XAMPP ( Web 開発環境の構築 )

目次に戻る

データファイルのサンプル

このページでは XMLHttpRequest を使って、テキストデータをタブ文字で区切って列挙した形式の tsv ファイル ( .tsv ) をリクエストします。

tsv はデータとデータの区切りを認識するために TAB コードを挟んで記録する形式のファイルです。

サンプルコード: tsv ( db-sample-xhr.tsv ) 
分類	コード	備考
CSS	margin: 値;	マージン プロパティ<br>要素の外側余白を設定します。
CSS	padding: 値;	パディング プロパティ<br>要素の内側余白を設定します。
HTML	<!DOCTYPE html>	これはHTML5 文書であると宣言するコードです。<br>※HTML文書の最初に宣言する必要がありますが、HTML要素ではありません。
HTML	<img>	イメージ 要素<br>画像を表示する為のタグ
JavaScript	Date()	デイト オブジェクト<br>年月日時間などのタイムスタンプを取得操作するオブジェクトです。
JavaScript	getElementById()	ゲットエレメントバイアイディ メソッド<br>documentオブジェクトのメソッドです。<br>要素をIDで特定して、要素のプロパティ取得と操作を行うことができます。

目次に戻る

Microsoft Excel を使った tsv ファイルの作成方法

はじめにファイル作成の準備として メモ帳 等のテキストエディターで新規ファイルを拡張子 .tsv で作成してください。 保存する時は文字コードを UTF-8 に設定することを忘れないで下さい。

次に Microsoft Excel を起動して以下の様な形式のデーターを作成します。

カラム1カラム2カラム3
データデータデータ
データデータデータ

Excel のシートに作成した表の範囲 ( カラムとデータが含まれる全てのセル ) を選択してコピーします。 後は、事前に作成しておいた tsv ファイルのテキストに 先ほどコピーした内容を貼り付けます。

以上で tsv 形式のデーターファイル の作成は完了です。

カンマ区切り ( .csv ) ファイルについては Excel の名前を付けて保存の機能からファイルの種類で選択すれば作成できますので、ここでの説明は割愛します。

目次に戻る

サンプルコードと実行結果

ここでは XMLHttpRequest を使って tsv ファイルをリクエストし、レスポンスとして得られたデーターを 表の形式で表示します。

このサンプルでは以下のファイルを使用します。ファイルは全て同じディレクトリにあるものとします。

  • js-xhr-tsv.html ( このページのファイルです。 )
  • db-sample-xhr.tsv ( TAB 文字で区切られたテキストデータファイルです。 )
  • no-enter-submit.js ( テキストボックスでエンターが押されても無反応にするためのスクリプトファイルです。)
  • db-sample-xhr.js ( レスポンスで得たデーターから検索したデーターを表示するためのスクリプトファイルです。)
サンプルコード: HTML ( js-xhr-tsv.html ) 
<head>
	<meta charset="utf-8">
	<title> JavaScript : XMLHttpRequest </title>
	<script src="no-enter-submit.js"></script>
	<script src="db-sample-xhr.js"></script>
</head>
<body>
	<form id="idform" action="js-xhr-tsv.html" name="nmForm">
		1句検索 ( 検索キーワードを 1 句入力 ):<br>
		<input type="text" value="" id="idtext" name="nmtext" autocomplete="off">
		<input type="button" value="検索" onclick="getData()">
	</form>	
	<p id="idResult"></p>
</body>
サンプルコード: script ( no-enter-submit.js ) 
document.onkeypress = enter;
function enter(){if( window.event.keyCode == 13 ){return false;}}
サンプルコード: script ( db-sample-xhr.js ) 
function getData(){
	const xhr = new XMLHttpRequest();		//サーバーにリクエストするオブジェクトを生成
	xhr.open("get","db-sample-xhr.tsv",true);		//ゲットコマンド
	xhr.send(null);		//ヌル値を送る
	xhr.onload = function(){	//読込みイベントで関数を実行
		writetext(xhr.responseText);		//レスポンステキストを引数に関数を実行
	};
};
function writetext(res){
	let result = "";		//これに HTML のテーブルを組み立てて格納
	let record = res.split('\n');		//レスポンスを改行毎にレコード配列に変換して格納
	let sword =document.forms.idform.idtext.value;		//サーチワード
	let swordtolower = sword.toLowerCase();		//サーチワードを小文字に変換して格納
	let field = record[0].split('\t');		//ここでレコードからフィールド名を配列に格納
	let fieldcount = field.length;		//これにフィールドカウントを格納
	let recordtolower;		//レコード内容を小文字に変換して格納
	let x = 0;		//カウンター変数
	let i = 0;		//カウンター変数
	result = result + "<table><thead><tr>";		//（開始）テーブルヘッダーを作成
	for(x = 0 ; x < fieldcount ; ++x){
		result = result + "<th>" + field[x] + "</th>";
	}
	result = result + "</tr></thead><tbody>";		//（終了）テーブルヘッダーを作成
	for(i = 1 ; i < record.length ; i++){
		recordtolower = record[i].toLowerCase();		//レコード配列を小文字に変換
		if (recordtolower.match(swordtolower) != null){		//検索マッチング
			field = record[i].split('\t');		//フィールド配列にレコードを設定
			result = result + "<tr>";
			for(x = 0 ; x < fieldcount ; ++x){
				result = result + "<td>" + field[x] + "</td>";
			}
			result = result + "</tr>";
		}
	}
	result = result + "</tbody></table>";
	document.getElementById("idResult").innerHTML = result ;		//テーブル表示
}

サンプルでのテスト方法:
初めにテキストボックスが空の状態で検索ボタンをクリックしてみて下さい。するとレコードが全件表示されます。

次にテキストボックスに半角文字で 「 html 」 , 「 css 」, 「 java 」 の何れかのキーワードを入力して検索ボタンをクリックしてみて下さい。 するとキーワードにマッチしたレコードが検索、表示されます。
また、他のキーワードでも是非、検索してみてください。

なお、このサンプルでは半角文字と全角文字は別の文字として扱われますので、テストするキーワードにはご注意ください。

実行結果:
1句検索 ( 検索キーワードを 1句入力 ):
   

検索した結果が、ここに挿入されます。

目次に戻る

サンプルコードでカンマ区切り ( .csv ) ファイルを使うには

このページのサンプルでカンマ区切り ( .csv ) ファイルを使うには、 db-sample-xhr.js のコードの 14行目にある split('\t') の部分を split(',') に置き換えて下さい。

目次に戻る