prototype.js × Ajax

jQueryのAjaxを一通り学習したところで、

次はprototype.jsでのAjaxのお勉強。

Ajax.Requestでxmlを指定して取ってきた
第一引数：リクエストするURL
第二引数：各種オプション(コールバックとか)

<div id="result"></div>

<script type="text/javascript">
  // Ajax.Requestオブジェクトを生成
  new Ajax.Request('sakos.xml', {
    method: 'get',
    onSuccess: showSako
  });

  // Ajax.Requestの結果を受け取る関数
  function showSako(response){
    var sakos = response.responseXML.getElementsByTagName('sako');
    for(var i=0;i<sakos.length;i++){
      $('result').innerHTML +=
        '<li>' + sakos[i].getAttribute('name').escapeHTML() + '</li>';
    }
  }
</script>


<?xml version="1.0" encoding="UTF-8"?>
<sakos>
  <sako name="さこちゃん"/>
  <sako name="http://www.sakochan.net"/>
  <sako name="http://d.hatena.ne.jp/osk__12/"/>
</sakos>

他にも、Ajax.Updaterでhtmlを取ってくるのも試してみた
第一引数：取得したHTMLを流し込む要素のid属性
第二引数：リクエストするURL

<div id="result"></div>

<script type="text/javascript">
  new Ajax.Updater('result', 'sako.html', {
    method: 'get'
  });
</script>
</script>

Ajax.RequestとAjax.Updaterの違いは、
Ajax.RequestはXMLHttpRequestを簡単に扱うための汎用的なオブジェクトで、
Ajax.UpdaterはサーバがHTMLを返す場合に、特定要素をサーバが返却するHTMLで置き換えたいというケースで使用するオブジェクト
らしい。うーむ、むずかしい