【Javascript】XMLHttpRequest風IFRAMEによるデータ通信1

XMLHttpRequest風IFAMEによるデータ通信1

---

1: iframeで動的なテーブル書き換え (JSON)
2: XMLHttpRequestとの機能比較
3: データフォーマット
4: [ソース] jsgt_JSONIframeReqestライブラリ
5: [ソース] テーブル出力処理用ライブラリ

前回までは、 一般的なAjaxの方法や、Ajaxアプリの代表格のひとつといわれているGoogle Maps APIの使い方などについていくつか紹介してきました。

今回は、いわゆるXMLHttpRequestを利用したAjax的方法から少し脱線してみます。

XMLHttpRequestの代わりに、iframe要素を利用して、以前、XMLHttpRequestで作成した動的テーブル書き換え等とほとんど同じ機能を実装してみようという試みです。

imageやscript、iframe要素のsrc属性などを用いたダイナミックなローディングのテクニックは、Netscapeの2.0でJavaScriptがこの世に登場した当初から多くの人々が試してきました。そのなかのいくつかはセキュリティ上の問題があり、現在のブラウザでは使えなくなっていますが、いくつかの方法は今も広く利用されています。

そこで、今回は、現在利用できるテクニックの中から、iframeを利用してXMLHttpRequest風の動作を実現する方法を試してみました。


iframeを使う利点は、XMLHttpRequestよりも多くのブラウザで動作することです。また、日本語による文字化けの心配もほとんどありません。デメリットとしては、HTTPクライアントとしてのHTTPヘッダのset/getやステータスコードなどが使えないことや、HTTPメソッドはGETしか使えないことです(手間をかければたぶんPOSTも使えるとは思いますが…)。

ちなみに、別ドメインへのアクセスはブラウザの実装次第です(昔のブラウザではデフォルトでアクセスできましたが、 現在のブラウザでは、通常はXMLHttpRequest同様にアクセスできなくなっています)。

iframeで動的なテーブル書き換え (JSON)

→サンプル

まずは、上記のリンクからサンプルをご覧ください。以前Ajaxで作成した動的テーブル書き換えと同じ動作をするのがわかるでしょう。 「英語」や「理科」などのリンクに触れるタイミングで、それぞれの科目ごとに用意したファイルを動的に読み込み、データテーブルとグラフを書き換えています。

今回iframeで通信するためのクラスのソースは後述しますが、とりあえずそれを使うためのスクリプトと、データのサンプルを説明します。

このサンプルでは、下記のように、XMLHttpRequest風IFAMEによるデータ通信ライブラリとテーブル処理用ライブラリの二つを読み込んで使用します。

このうち、テーブル処理用は、以前の動的テーブル書き換えで使ったものを少し修正したものです。これらのスクリプトのライセンスは、いつものように、著作権表示義務無し、商用利用、改造、自由、連絡不要です。利用される場合は自己責任でご使用ください。

<!-- IXMLHttpRequest風IFAMEによるデータ通信ライブラリ -->
<script type="text/javascript" charset="utf-8" 
        src="./jsgt_JSONIframeReqest.js"></script>

<!-- テーブル処理用ライブラリ -->
<script type="text/javascript" charset="utf-8" 
        src= "./writetable.js"></script>

<script type = "text/javascript">
<!--

//jsgt_JSONIframeReqestのインスタンス(使える状態)のtest1を作ります
var test1 = new jsgt_JSONIframeReqest();

//送信処理
function setData(dataFileName)
{
	test1.open({url:dataFileName});
	test1.send();
}

//受信処理
test1.onload = function()
{
	tHead = test1.responseJson.head;
	tData = test1.responseJson.data;
	
	//受信データをテーブルに加工 'tdiv'はテーブルを出力するDIVのID名 './bar1.gif'はグラフバー。
	writeTable('tdiv',tHead,tData,'./bar1.gif'); 
}
//-->
</script>

<!-- このDIVへテーブルを出力します -->
<div id="tdiv"></div>

基本的には、上記のような準備をしておいて、後述するロード用データファイルを用意したら、下記のようなリンク(ボタンでもなんでもかまいません)などからwritetable.js内の関数setData()やreWriteTable()を起動すれば使えます。

<a href="javascript:void(0)" 
     onclick="test1.show(test1)"
	 onmouseover="setData('./file/sansu.htm')">算数</a> | 
<a href="javascript:void(0)" 
	 onmouseover="setData('./file/kokugo.htm')">国語</a> | 
	 

<a href="javascript:void(0)" 
	 onmouseover="if(test1.readyState>=2)reWriteTable('tdiv',tHead,tData,sortD)">▼降順</a> | 

一応、ミソといえる部分？は、受信時処理の関数 test1.onload 内で、XMLHttpRequestならtest1.responseTextやtest1.responseXMLで受け取る部分がtest1.responseJsonになっていることです。

しかも、受信時点で、すでに、test1.responseJson.head、test1.responseJson.dataというJavaScriptのプロパティとして受け取っています。

つまり、test1.responseTextやtest1.responseXMLで受け取ったときのように文字列やXMLをJavaScriptがわかる形式に分解したり加工したり、eval()する手間も要りません。

なぜかというと、読み込まれる算数(sansu.htm)や英語(eigo.htm)のファイルの中に、各データがArrayLiteralやObjectLiteralなどJavaScriptとしてすでに使える状態で準備してあるからです。

以前の動的テーブル書き換えでは、今回と同様にJSONでデータを用意しましたが、あくまでもテキストファイルでしたので、使う際には受信したresponseTextをeval()を使ってJavaScript化していました。また、動的なテーブル書き換え3(XML)の時には、データをXMLで用意し、受け取ったresponseXMLからDOMの手法でデータを抽出する作業が必要でした。

それらに比べると、JavaScriptのオブジェクトとしてデータがすでに用意されていて、普通のJavaScript読み込みと同様に使えるということのプログラム的手軽さはそれなりに魅力的です。

では、このXMLHttpRequest風IFAMEによるデータ通信とXMLHttpRequestとの違いを、次のページで見てみましょう。 →次ページ