MooTools 1.1 Ajax

Jan 8th, 2010

<script type=”text/javascript”>
// 等一下把程式碼放在這裡。
window.addEvent(‘domready’, function() {
// 等一下把程式碼放在這裡。
$(‘showalert’).addEvent(‘click’, function() {
alert(‘Alert!’);
});

$(‘testmain’).addEvent(‘click’, function() {
$(“showdata”).innerHTML=”Show Data is here!!”;
});

$(‘test1’).addEvent(‘click’,function() {
var url=”test1.htm”;
new Ajax(url, {
method:’get’ ,
onComplete:function() {
$(“showdata”).innerHTML=this.response.text;
}
}).request();
});

$(‘test2’).addEvent(‘click’,function() {
var url=”test2.htm”;
new Ajax(url, {
method:’get’ ,
onComplete:function() {
$(“showdata”).innerHTML=this.response.text;
}
}).request();
});

$(‘test3’).addEvent(‘click’,function() {
var url=”test3.htm”;
new Ajax(url, {
method:’get’ ,
onComplete:function() {
$(“showdata”).innerHTML=this.response.text;
}
}).request();
});
});
</script>
<style type=”text/css”>
<!–
#showdata {
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
padding: 0.3em;
margin-top: 10px;
}
//–>
</style>
</head>
<body>
<form name=”myForm” id=”myForm”>
<table border=”1” width=”50%”>
<tr>
<td><a id=”testmain” href=”#”>Home</a></td>
<td><a id=”showalert” href=”#”>alert</a></td>
<td><a id=”test1” href=”#”>test1</a></td>
<td><a id=”test2” href=”#”>test2</a></td>
<td><a id=”test3” href=”#”>test3</a></td>
</tr>
<tr>
<td colspan=”5” id=”showdata”>Show Data is here!!</td>
</tr>
</table>
</form>
</body>