YUI!Connect編

Javascript

YUI!でajaxする練習です。

<html>
<head>
<script src="yahoo-min.js"></script>
<script src="event-min.js"></script>
<script src="connection-min.js"></script>
<script type="text/javascript">

function ajax() {
  var callback = {
    success: function(o){
      document.getElementById('msg').innerHTML = '<b>' + o.responseText + '</b>';
    },
    failure: function(o) {alert('失敗!');},
    cache: false
  };
  YAHOO.util.Connect.asyncRequest('GET', 'http://localhost:5555/test/ajax.do', callback, null);
}

</script>
</head>
<body>
<input type="button" value="ajax!" onclick="ajax();"><br><br>
成功時は以下にメッセージが表示されます。<br>
<div id="msg" style="width:100px;border:dotted 1px blue;"></div>
</body>
</html>

こんな感じです。
キモはYAHOO.util.Connectオブジェクト。メソッドはasyncRequestです。あとはプログラムを見ればなんとなく分かると思います。
第三引数にオブジェクトを渡す。その中には成功時はどうするか、失敗時はどうするかっていう関数を定義する。上の例であれば成功時はdivタグ内部に太字でメッセージが表示されると。ちなみにデフォルトではキャッシュがオンになってます。
簡単に使えました〜♪