XML.ObjTreeでXMLオブジェクトを作成
Ajaxぽい実装するときにサーバ側でHTMLコードを整形して渡すのが面倒だったので、直接XMLをJavaScriptに渡してなんやかんやできるものがないかと探してみたところ、JSANのXML.ObjTreeクラスというものがあったので使ってみました。(ここも参照)
HTTP.Requestクラスもあるみたいですが、prototype.jsを以前使ったことがあるのでそちらで代用。prototype.jsとObjTree.jsをHTML側で読み込みます。
function callXml(param) { var url = '/test.rss'; var req = new Ajax.Request ( url, { method: 'get', onComplete: setResult, onFailure: reportError, }); }
呼び出すときはこんな感じ。
function setResult(res) { var tree = new XML.ObjTree().parseXML(res.responseText); var ultag = document.createElement('ul'); for (var i = 0; i < tree["rdf:RDF"].item.length; i++) { var item = tree["rdf:RDF"].item[i]; console.log(item); var litag = document.createElement('li'); var atag = document.createElement('a'); atag.href = item.link; atag.title = item["dc:subject"]; atag.appendChild(document.createTextNode(item.title)); litag.appendChild(atag); ultag.appendChild(litag); } $('deli').appendChild(ultag); }
処理するときはこんな感じ。ここでは、テスト用RSSとしてdel.icio.usのRSSを使っており、エントリをリンク付きでリスト表示しています。aタグのtitle属性にタグ情報を埋め込んだのでマウスを載せるとタグ一覧を見られたり(あんまり必要ないけど)
XMLをパースしてオブジェクトとして使えるので使いやすいです。
イテレータを使ってうまいことやってみたいけどそれはまた後日。