在前面的Blog中我使用原始的XMLHttpRequest做了一個簡單的測試。下面我將使用prototype.js來實現類似的測試。
HTML文件
<html>
<head>
<title>Test</title>
<script src="prototype.js"></script>
</head>
<body style="background-color:#cccccc">
<script>
function showmessage() ｛
new Ajax.Request('getmessage.py', ｛method:"get", onComplete:onComplete｝);
｝
function onComplete(transport)｛
a = transport.responseXML.getElementsByTagName("a")[0];
$('message').innerHTML = a.firstChild.nodeValue;
｝</script>
<span id="message" style="display:inline">message</span>
<div><a id="demoPanelLink" href="javascript:showmessage();">Click Here</a></div>
</body>
</html>
那麼主要的變化是：
- 創建Ajax(它定義在prototype.js)的一個實例，傳入要訪問的URL和調用的選項參數。
在缺省情況下，Ajax會以POST方式向後臺發送業務，這裏因爲測試很簡單，因此我要使用GET方法。於是設置method:"get"。這是Ajax內部識別用的，因此並不是"GET"。然後傳入一個傳輸完成時對應的處理方法，這裏爲onComplete。那麼一旦處理完成，Ajax會自動調用onComplete這個方法，同時會傳入處理時所創建的XMLHttpRequest對象。 - 定義一個onComplete處理方法，參數爲將要傳入的XMLHttpRequest對象。
因此你可以使用這個方法來解析數據。
上面的例子執行完成後的效果就是，當你點擊鏈接時，它上面的文字會從message變爲hello, world。請注意，這個hello, world是從後臺來的。