XML データ処理を試す前に OpenLayers.loadURL をみてみます。
Ajax の HTTP 通信に Internet Explorer では ActiveXObject("Msxml2.XMLHTTP") をそれ以外のブラウザでは XMLHttpRequest() を使用します。
この２つのオブジェクトを仮に oj とすれば open メソッドを使い、次のようにファイルをロードします。
oj.open("GET", "./test.xml", true);
"GET" には、"GET" または "POST" が入り、ファイルに直接パラメータを追加します。
oj.open("GET", "./test.xml?sort=faverit", true);
"POST" では send() メソッドに引数を渡します。
oj.open("POST", "./test.xml", true);
request.send("sort=favorite");
"./test.xml" はファイルの場所。
true は、非同期／同期の設定で、true または省略で非同期です。
全体は,例えば次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML Load Test</title>
<script src="./trunk/build/jugl.js"></script>
</head>
<body>
<!-- XML処理マークアップ6 -->
<h2>JavaScript の XML処理</h2>
<div id="loadStatus">loading..</div>
<br />
<div id="template_id6">
<div jugl:content="node"></div>
<!-- HTTPRequest -->
<script type="text/javascript">
var res, oj, node;
function createHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
return null
}
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
return null
}
}
var oj = createHttpRequest();
// XML ファイルの読み込みと処理
oj.open("GET", "./jugl_flickr.xml", true);
oj.send(null);
oj.onreadystatechange = function(){
if (oj.readyState == 4 && oj.status == 200) {
updateStatus("loaded");
on_loaded(oj);
}
else {
updateStatus("unloaded");
}
}
function on_loaded(oj){
res = oj.responseXML;
node = res.documentElement.nodeName;
(new jugl.Template("template_id6")).process();
}
function updateStatus(msg) {
document.getElementById("loadStatus").firstChild.nodeValue = msg;
}
</script>
</body>
</html>
OpenLayers では次のようになります。（詳細はオンラインドキュメントをみてください。）
var url = "./test.xml";
OpenLayers.loadURL(url, null, null, onSuccessFunc, onFailureFunc);
１番目（url） は、ファイルの場所。
２番目（null）は、GET パラメータ（上記の GET と同じ）。
３番目（null）は、コールバック関数を渡したオブジェクト。
４番目（onSuccessFunc）は、ロード成功時のコールバック関数。
５番目（onSuccessFunc）は、ロード失敗時のコールバック関数。
です。
jugl_test.html に次のように追加します。
---
<!-- 「jugl:attributes を使うマークアップ4」 の直後-->
<h2>OpenLayers の XML処理</h2>
<!-- XML処理マークアップ5 -->
<div id="loadStatus2">loading..</div>
<br />
<div id="template_id5">
<div jugl:content="string"></div>
</div>
<script type="text/javascript">
//<![CDATA[
// 処理コード4
---
// 「処理コード4」の直後
// 処理コード5
var string;
var format2 = new OpenLayers.Format.XML();
var doc = null;
function loadSuccess2(request) {
updateStatus2("loaded");
if(!request.responseXML.documentElement) {
doc = format2.read(request.responseText);
} else {
doc = request.responseXML;
}
string = doc.documentElement.nodeName;
(new jugl.Template("template_id5")).process();
}
function updateStatus2(msg2) {
document.getElementById("loadStatus2").firstChild.nodeValue = msg2;
}
//]]></script>
次のコードはルートノードの名前を表示します。
string = doc.documentElement.nodeName;
結果は、
OpenLayers の XML処理
loaded
wfs:FeatureCollection
通常の Ajax の処理でも（当然ですが）同じ結果になります。
Jugl を試しているときに、次のコードでノードプロパティが表示されることを見つけました。
マークアップ（HTML）部分を
<div jugl:repeat="item node">
<div jugl:content="item + ': ' + node[item]"></div>
</div>
として、string = doc.documentElement.nodeName; を次のコードに換えます。
string = doc.documentElement;
結果は、
nodeName: wfs:FeatureCollection
tagName: wfs:FeatureCollection
getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] }
firstChild: [object Text]
nodeType: 1
childNodes: [object NodeList]
---
これはルートノードのプロパティです。
OpenLayers の examples の XML Parsing Example（xml.html）で OpenLayers の XMLデータ処理をしています。
そこで使われているものがここのプロパティ一覧にあります。
string = doc.documentElement; を次のコードに換えます。
string = doc.documentElement.childNodes;
結果は、
0: [object Text]
1: [object Element]
2: [object Text]
3: [object Element]
4: [object Text]
length: 5
item: function item() { [native code] }
子ノードの数（length doc.documentElement.childNodes.lemgthの結果と同じ）が５個になります。
item とあるので次の様にして結果をみてみます。
string = doc.documentElement.childNodes.itme(0);
結果は、（nodeName だけ）
itme(0): nodeName: #text
itme(1): nodeName: gml:featureMember
itme(2): nodeName: #text
itme(3): nodeName: gml:featureMember
itme(4): nodeName: #text
コードを次の様に換えて結果をみます。
string = doc.documentElement.childNodes.itme(0).childNodes;
item(偶数) の結果は、
length: 0
item: function item() { [native code] }
で中身はありません。
item(奇数) の結果は、
0: [object Element]
length: 1
item: function item() { [native code] }
で、さらに次のコードに換えて結果をみます。
string = doc.documentElement.childNodes.itme(1).childNodes.itme(0);
結果は、
nodeName: fs:flickr
---（以下省略）
で、さらに次のコードに換えて結果をみます。
string = doc.documentElement.childNodes.itme(1).childNodes.itme(0).childNodes;
結果は、
0: [object Text]
1: [object Element]
2: [object Text]
3: [object Element]
---
length: 33
item: function item() { [native code] }
コードを次の様に換えて結果をみます。
上記の結果の奇数だけ確かめます。
string = doc.documentElement.childNodes.item(1).childNodes.item(0).childNodes.item(1);
結果は、（nodeName だけ）
itme(1): nodeName: fs:geometry
itme(3): nodeName: fs:isfamily
---
itme(9): nodeName: fs:title
---
itme(25): nodeName: fs:img_url
---
で、各ノードのプロパティに textContent とあるのでつぎのようにコードを換えると
マークアップ部分
<div jugl:content="string"></div>
string = doc.documentElement.childNodes.item(1).childNodes.item(0).childNodes.item(1).textContent;
itme(1).textContent: 139.77701,35.713345
itme(3),textContent: 0
---
itme(11).textContent: near Uenokouen
---
itme(25).textContent: http://farm3.static.flickr.com/2626/4052485410_519b430129_m.jpg
---
になります。
0 件のコメント:
コメントを投稿