|
我們以ASP網頁為例，做個簡單的示範。
AJAX技術既然是透過DOM(Document Object Model)來實現動態顯示，
所以網頁中一定會有個client端的javascript來呼叫物件。
<SCRIPT ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--
function GetData(KeyData){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
var strURL='getcode.asp?KeyData=' + KeyData;
xmlhttp.open('POST',strURL,false);
xmlhttp.Send(null);
var rc=xmlhttp.responseText;
return rc;
}
-->
</SCRIPT>
在這個script中，我們可以看到透過xmlhttp物件的建立，
我們可以連結到後端網頁getcode.asp中，取得server端處理內容，
然後將處理後結果，回傳給xmlhttp物件。
而，這，就是AJAX的精華所在了！
以下，我們以一個簡單的ASP sample，test.asp及其對應呼叫程式getcode.asp為例，說明其運作流程。
test.asp內容如下：
<%@ language="VBScript"%>
<HTML>
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<link href="include/emall.css" rel="stylesheet" type="text/css">
<SCRIPT ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--
function GetData(KeyData){
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
var strURL='getcode.asp?KeyData=' + KeyData;
xmlhttp.open('POST',strURL,false);
xmlhttp.Send(null);
var rc=xmlhttp.responseText;
return rc;
}
function btnclick() {
var rc=GetData('順子');
window.document.all.div01.innerHTML=rc;
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<input type="button" name="btn01" id="btn01" value="test" onclick="btnclick()">
<div id="div01" name="div01"></div>
</FORM>
</BODY>
</HTML>
getcode.asp內容如下：
<%@ language="VBScript"%>
<%
dim strReturn
strReturn="<table border=1><tr><td>從server回傳的表格, Key值為:"& Request.querystring("KeyData") &"</td></tr></table>"
Response.CharSet="big5"
Response.write strReturn
%>
當我們執行test.asp網頁後，網頁上只會有一個按鈕"test"。
按下test按鈕後，會觸發鈕按的onclick事件而去呼叫btnclick()函數。
而在btnclick函數中，又去呼叫GetData函數，並帶入了參數'順子'。
然後在GetData函數中，建立了Microsoft.XMLHTTP的ActiveXObject物件，隨即去server端getcode.asp取回回傳資料。
最後再透過div物件的innerHTML屬性，將server端處理過的內容更新在網頁上。
這樣就完成了一個AJAX的更新週期了！
嘿嘿∼有沒有發現AJAX的基本原理，其實一點也不難呢？ 
範例程式在附加檔案中，需要者請自行下載。
解開後，放在同一ASP目錄下，即可運作∼
♥順子老婆的網拍，請多關照∼
If you don't like something, change it.
If you can't change it, change your attitude.
Don't complain!
|
2006-05-13, 15:04
《分享》AJAX技術
