Javascript

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

Javascript関連情報

更新日：2006年01月28日

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

高橋登史朗

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

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

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

2: XMLHttpRequestとの機能比較

3: データフォーマット

4: [ソース] jsgt_JSONIframeReqestライブラリ

5: [ソース] テーブル出力処理用ライブラリ

XMLHttpRequestとの機能比較

今回作ったjsgt_JSONIframeReqestの機能は、ソースをみればわかりますが、一応、XMLHttpRequestとの簡単な比較をしてみました。 jsgt_JSONIframeReqestでは、HTTPクライアントの機能はブラウザまかせですので、 setRequestHeader()など、HTTPクライアント関連のメソッドやプロパティは存在しません。

その代わり、jsgt_JSONIframeReqestは、動作ブラウザが多く、XMLHttpRequestのようなブラウザ毎の動作の違いはありません。さらに、レスポンスデータをオブジェクトで自由なタイミングで渡せるメリットがあります。

XMLHttpRequest

jsgt_JSONIframeReqest

動作ブラウザ

win
	n7	m1	e6	o8
	○	○	○	△
mac
	n7	m1	e5	o8	s1.2	s2
	○	○	×	△	△	○
Linux
	n7	m1	o8	k3
	○	○	△	○

win
	n7	m1	e6	o8
	○	○	○	○
mac
	n7	m1	e5	o8	s1.2	s2
	○	○	○	○	○	○
Linux
	n7	m1	o8	k3
	○	○	○	○

インスタンス生成

new XMLHttpRequest()
new new ActiveXObject("Msxml2.XMLHTTP")
new ActiveXObject("Microsoft.XMLHTTP")
(* IE以外はnew XMLHttpRequest())

new jsgt_JSONIframeReqest()
(*対応ブラウザすべてで共通に使えます)

レスポンスデータ

responseXML
responseText
(*文字列として渡します)

responseJson
(*オブジェクトとして渡します)

readyState（0,1,2,3,4）

readyState
(*IEでは「3」で途中データを受け取れません)

readyState
(*対応ブラウザすべてで「3」で途中データを順次受け取れます。)

open

open(method,url[,async[,user[,password]]])

open(object)
(*Objectリテラルで渡します。現在渡せるのはURLと強制ロード(sload)。object ={url:URL[,sload:true|false]})

send

send(postData)

send()
(*POSTは現在使えません。送信はGETでURLに付加してください。)

onload

onload
(*IEではonloadを使えません)

onload
(*対応ブラウザすべてで共通に使えます)

onreadystatechange

onreadystatechange
(*Opera8.0でイベントが2重発生)

onreadystatechange
(*対応ブラウザすべてで共通に使えます)

setRequestHeader()

なし

getRequestHeader()

なし

status

なし

statusText

なし

n=Netscape/m=Mozilla(Firefox)/e=IE/o=Opera/s=Safari/k=Konqueror

データフォーマット

iframe要素には、onloadとonreadystatechangeのイベントがありますが、すべてのブラウザに実装されているわけではありません。そこで、今回は、データ側にコールバックの呼び出しを仕込むことで、すべてのブラウザで共通に動作するonloadとonreadystatechange を用意しました。

そのため、このjsgt_JSONIframeReqestを使うには、データ側の書き方を統一する必要があります。

今回は、データを乗せるコンテナとして HTMLファイルを利用し、その中のスクリプト要素内へJSON形式のデータを書いておく方法を採りました (注意:データ形式は、JavaScriptで渡せるなら何でも良いのですが、一応多少のフォーマット指針があった方があとで利用しやすいという理由で選びました)。

そして、iframeでそのHTMLファイルを呼び出すと、その中のJSONがJavaScriptのオブジェクトとして渡されるという仕組みになっています。

今回のサンプルで使ったデータは、たとえば、次のようになっています。

今回のサンプルでは、テーブルのヘッダ行とデータ行を「head」と「data」という二つのプロパティに分けて用意しました。この構造自体はXMLを書く場合と同様に自由に使いやすい構造を決めて使えばよいと思います。

【eiggo.htm】

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" charset="utf-8"><!-- ///// // jsgt_JSONIframeReqestデータフォーマット // @syntax parent.jsgt_data.response({JSON...}); // @see    http://jsgt.org/lib/jsoniframerequest/readme.htm // // responseする毎に、jsgt_JSONIframeReqestのonreadystatechangeイベントが // 発生しoj.responsJsonでJSONデータを渡します。データはpush追記されます。 // また、ページロード完了後にoj.onloadイベントが発生します。 // // Start data (OK chage here)/////////////////////////////////////////

parent.jsgt_JSONIframeReqest.response({url:location}, {
 	"head" : [[ "名前" , "英語" ]], 	"data" : [ 		[ "田中" , "24" ] , 		[ "中山" , "68" ] , 		[ "山本" , "55" ] , 		[ "本井" , "18" ] , 		[ "井上" , "99" ] , 		[ "上山" , "26" ]  	]  });


// End   data ////////////////////////////////////////////////////////
//--></script>
<!-- Start footer (Don't change)///////////////////////////////////-->
<body onload="
parent.jsgt_JSONIframeReqest.onfileloaded({url:location});
">
<!-- End footer ///////////////////////////////////////////////////-->
</body></html>

どうですか？出力されたテーブルと同じ構造のデータですから、わかりやすいでしょう？

このデータページがiframeへ読み込まれるたびに、データページ内の「...response(...)」が実行されます。

ページを読み終わったタイミングでbody要素のonloadに書いた「...onfileloaded({url:location});」が実行されて、jsgt_JSONIframeReqest側のoj.onloadイベントが発生します。この時、oj.readyState値は「4」に代わり、データが oj.responseJsonに渡ります。

JavaScriptでデータを取り出すときは、このサンプルなら、たとえば、oj.responseJson.head[0][1]で「英語」という文字列が取り出せます。 oj.responseJson.data[0][0]なら「田中」、oj.responseJson.data[0][1]なら「24」、 oj.responseJson.data[2][0]なら「山本」という具合です。

もし、データページ内のresponse()が複数あって、受信途中でデータを取り出したい場合は、oj.onreadystatechange毎に、oj.responseJson.part[0]、oj.responseJson.part[1]、oj.responseJson.part[2]、、、という具合に、各レスポンスがpart[oj.index]の下にコピーされていきます。

oj.indexは最初は0で、受信したデータ数だけカウントアップされます。

そして、ページを読み終わると、この最後のデータpart[oj.index]はoj.responseJson直下へコピーされます。

このようにして、oj.responseJson以下は受信した順番に、次のような構造を作っていきます。この結果、「onreadystatechange==3」の時点での着信データによる、極め細かな制御なども可能になると思います。

oj.responseJson
  ├.part[0]
  │　└{ data1-1:...,data1-2:... } //最初の着信 
  ├.part[1]
  │　└{ data2-1:...,data2-2:... } //1番目の着信
  ├.part[3] 
  │　└{ data3-1:...,data3-2:... } //2番目の着信
  ├.part[4] 
  │　└{ data4-1:...,data4-2:... } //4番目の着信
  ├.part[5]
  │　└{ data5-1:...,data5-2:... } //最後の着信
  │
  │//以下最後の着信(.part[5])のコピー ( oj.onloadで取得 )
  ├.data5-1
  ├.data5-2
  ├.data5-3
  ├. :
  └.data5-n

ちなみに、第一引数の「url:location」は、リクエストとレスポンスを一意に結びつけるおまじないですので省略できません。

回答募集中のトピック（お題）

人気Javascriptランキング