燈明日記

■[WEB]『XML2JSON service を利用した簡単なサンプル』ソースを解読してみる

以下のページに『XML2JSON service を利用した簡単なサンプル』ソースがあります。

• http://www.drk7.jp/MT/archives/001011.html

私にとって簡単でなかったのでいろいろ調べてみました。

ちなみに、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;』から３行は、結果的にページオンロード時に『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);』は、いわゆるＤＯＭといわれ、子要素を追加しています。
• 『escape('･･･』は、アスキー以外の文字をURLエンコードしている。しかし、今回は不要かも･･･。
• 『function(e) { old(e); return lwws1.init(e); };』は、oldが必ずnullになるので不要かも･･･。

Permalink | コメント(0) | トラックバック(1) | 19:55