Amazon Web サービスブログ: XML→JSON展開クラス

Kawasaki YusukeさんがJKL.ParseXMLというJavascriptのクラスを開発、公開しています。

JKL.ParseXML は、サーバ上のXMLファイルをダウンロード～解析して、
JavaScript のオブジェクト（配列・連想配列）に変換するクラスです。

ブラウザのJavascriptでECS 4.0を呼び出すページを作るのに、XMLをDOMで扱う必要がなくなるので便利です。Cool。さっそく利用させていただいて、JKL.ParseXML＋ECS 4.0なページを作ってみました。以下にソースを載せておきます。

Update: ちょこっとコードを直してみました。ちなみにInternet Explorerでしか動作確認できていません。
Update2: さらにコードを直しました。Firefoxでも動作しました。ma.laさんのページとantipop（けんたろ）さんのページを参考にさせていただきました（というかほとんどパクりました）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style><!--
body { 
  background:#fff; 
  margin: 0px 0px 10px 0px;
  padding: 0; 
  font-family: "Trebuchet MS", Trebuchet, verdana, arial, sans-serif; 
  font-size: 12px; 
  color: #333; 
}
td.1 {
  border-top: 1px solid green;
}
--></style>
<script type="text/javascript" src="jkl-parsexml.js" charset="Shift_JIS"></script>
<script><!--
window.onload = function() {
  if (location.hash) {
    var hash = location.href.replace(/.*?#/,"");
    var ar = hash.split(":");
    var kw = ar[0];
    var subid = ar[1];
    document.getElementById("kw").value = decodeURIComponent(kw);
    document.getElementById("subid").value = subid;
    XMLJSON(kw, subid);
  }
  window.onload = null;
};

function XMLJSON(kw, subid) {
  kw = encodeURIComponent(kw);
// url はセキュリティの関係でリレーする仕組みが必要でしょう。
  var url = "http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&Operation=ItemSearch&SearchIndex=Electronics&ResponseGroup=Small,Images&Keywords=" + kw + "&SubscriptionId=" + subid;
  var xml = new JKL.ParseXML( url );
  var tid = setInterval(CountUp, 20);
  var callback = function (data) {
    var src = "<table>";
    try {
    for (i = 0; i < data.ItemSearchResponse.Items.Item.length; ++i) {
      var item = data.ItemSearchResponse.Items.Item[i];
      src += "<tr><td rowspan='3' class='1'><img src='" + item.SmallImage.URL + "'></td>";
      src += "<td class='1'>" + item.ItemAttributes.Title + "</td></tr>";
      src += "<tr><td>" + item.ItemAttributes.Manufacturer + "</td></tr>";
      src += "<tr><td><a href='" + item.DetailPageURL + "'>Amazonで見る</a></td></tr>";
    }
    src += "</table>";
    document.getElementById("result").innerHTML = src;
    } finally {
    clearInterval(tid);
    }
    location.hash = kw + ":" + subid;
  };
  xml.async(callback);
  xml.parse();
}

function CountUp() {
  document.getElementById("result").innerHTML += "-";
}
// --></script>
</head>
<body>
Keywords: <input id="kw"><input type="button" onclick="return XMLJSON(document.getElementById('kw').value, document.getElementById('subid').value);" value="ItemSearch - Electronics"/>
<br/><input id="subid" value=""/>
<hr/>
<div id="result"></div>
</body>
</html>