極力簡単なAjaxのサンプル
ちゃんとした解説はHawk's W3 Laboratory : XML : XMLHttpRequestについてなどが参考になるかと思いますが、とりあえず最小限のソースコードで実際に動かすとしたらどんな感じになるのか、ということで。
ソースコードは上のHawk氏のサイトのものを参考にさせていただいてます。
ajaxtest.js内で自発的にXMLのデータを取りに行っているのが分かると思います。
ajaxtest.html
Simple <a class="keyword" href="http://d.hatena.ne.jp/keyword/Ajax">Ajax</a> Test
<a href="#" onClick="getAsyncData();">Try Ajax!</a>
<p id="output"></p>
ajaxtest.js
function createXMLHttpRequest() {
return this.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}function getAsyncData() {
var url="ajaxtest.xml";
var req = createXMLHttpRequest();
req.onreadystatechange = readyStateChangeHandler;
req.open("GET", url, true);
req.send(null);function readyStateChangeHandler() {
if (req.readyState == 4) { // all data recieved
if (req.status == 200) {
alert("Xml data recieved successfully.\n" +
"filename is '" + url + "'.\n" +
"media type is '" + req.getResponseHeader('Content-Type') + "'.");
output.innerText =
req.responseXML.documentElement.childNodes.item(0).text;
}
else {
alert("error. " + req.status + " " + req.statusText);
}
}
}
}
