『XML2JSON service を利用した簡単なサンプル』ソースを解読してみる
以下のページに『XML2JSON service を利用した簡単なサンプル』ソースがあります。
私にとって簡単でなかったのでいろいろ調べてみました。
ちなみに、XML2JSON serviceを簡単に説明すると、従来からあるWEBサービスの返すXMLをJSONに変換するWEBサービスです。
XML2JSON service を利用した簡単なサンプルソース
var city = '63'; var day = 'tomorrow'; var name = 'lwws1'; var proxy = 'http://app.drk7.jp/xml2json/'; var lwws1 = {}; lwws1.init = function() { var script = document.createElement('script'); script.charset = 'UTF-8'; script.src = proxy + 'var=' + this.name + '&url=' + escape('http://weather.livedoor.com/forecast/webservice/rest/v1?city=' + this.city + '&day=' + this.day); document.body.appendChild(script); } lwws1.onload = function(data){ var d = document.getElementById('id_result'); d.innerHTML = data["location"]["pref"] +' '+ data["location"]["city"] +' '+ data["telop"] +' '+ '<img src="' + data["image"]["url"] + '"><br>'+ data["description"]; } var old = window.onload; window.onload = (typeof old != 'function') ? lwws1.init : function(e) { old(e); return lwws1.init(e); };http://www.drk7.jp/MT/archives/001011.html
全体の流れ
- まずはじめに、lwws1オブジェクト『var lwws1 = {};』を作成し、そこにメソッド『initとonload』を動的に割り付けています。
- つぎに、『var old = window.onload;』から3行は、結果的にページオンロード時に『lwws1.init』が実行されるようにする。
- 『lwws1.init』が実行されると、charsetがUTF-8のscript要素がbody要素の子要素として作成されます。
- このscript要素では、サーバー側でXML2JSON Serviceが起動され、Livedoor Weather Web ServiceのXMLを取得してJSONに変換し、これを含むJavaScriptソースを作成して標準出力します(たぶん)。
- 標準出力されたJavaScriptソースは、JSONデータを『lwws1.data』に格納しています。
- そして、『lwws1.data』を引数として『lwws1.onload』を実行します。
- すると、結果が表示されます。めでたし、めでたし。
補足
- 『lwws1.init = function() {・・・』は、昨今よく使われている、いわゆる関数リテラルをメソッドに格納しています。
- 『windows.onload = 関数(イベントハンドラ)』は、ページがオンロード時にその関数が実行される。
- 『document.body.appendChild(script);』は、いわゆるDOMといわれ、子要素を追加しています。
- 『escape('・・・』は、アスキー以外の文字をURLエンコードしている。しかし、今回は不要かも・・・。
- 『function(e) { old(e); return lwws1.init(e); };』は、oldが必ずnullになるので不要かも・・・。