にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

XML.ObjTreeでXMLオブジェクトを作成

Ajaxぽい実装するときにサーバ側でHTMLコードを整形して渡すのが面倒だったので、直接XMLJavaScriptに渡してなんやかんやできるものがないかと探してみたところ、JSANXML.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.usRSSを使っており、エントリをリンク付きでリスト表示しています。aタグのtitle属性にタグ情報を埋め込んだのでマウスを載せるとタグ一覧を見られたり(あんまり必要ないけど)
XMLをパースしてオブジェクトとして使えるので使いやすいです。
イテレータを使ってうまいことやってみたいけどそれはまた後日。