AJAX介紹
其實AJAX應用的核心就是XMLHttpRequest，通過現象看本質，即使使用微軟的AJAX服務器控件最終也是需要這些的，只不過使用微軟AJAX服務器控件開發AJAX應用時我們不需要關心JS腳本的實現，只需關心業務邏輯就可以了，因而可以簡化開發和提高開發速度。AJAX的基礎是XHTML、CSS、DOM、JavaScript、XML及XMLHttpRequest。
正確使用AJAX技術可以改善用戶體驗，是用戶與服務器的交互更流暢，某些情況下還能減少服務器流量。在以前AJAX只是作為一種比較炫的技術為一些大型網站所使用，現今這個比雲計算還要流行了，至少雲計算更多地還是停留在人們的概念裡，而AJAX確確實實應用在WEB開發當中了。WEB開發人員的招聘都是言必精通AJAX技術。
下面分別講講在ASP.NET開發中可以供選擇的開發AJAX應用的方式：
采用純JavaScript實現
在武俠小說中絕頂高手飛花摘葉都可以傷人，在WEB開發領域真正的高手也可以無需借助任何其它庫就可以開發出AJAX應用。不適用任何第三方庫開發AJAX應用就需要自己區分浏覽器來實例化XMLHttpRequest對象實例，下面的代碼是一個簡單的調用AJAX的代碼：
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>獲取服務器時間的例子</title>
<mce:script language="javascript" type="text/javascript"><!--
var request=false;
//實例化XMLHttpRequest
function createXMLHttpRequest()
{
try
{
//下面的方法有可能拋出異常，表示當前浏覽器不支持此方法
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)//當通過上面的方法實例XMLHttpRequest發生異常
{
try
{
//下面的方法有可能拋出異常，表示當前浏覽器不支持此方法
request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)//當通過上面的方法實例XMLHttpRequest發生異常
{
request=false;
}
}
//當上面的方法都不能實例化XMLHttpRequest時，表示非IE浏覽器
if(!request&&typeof XMLHttpRequest!=’undefined’)
{
//非IE浏覽器實例化XMLHttpRequest的方法
request=new XMLHttpRequest();
}
}
//發送客戶端請求的方法
function getServerTime(format)
{
//調用上面的方法實例化XMLHttpRequest
createXMLHttpRequest();
//要請求的URL地址，注意escape是javascript中的方法
//用於對特殊字符進行轉義
var url="ServerTime.aspx?format="+escape(format);
//alert(url);//可以通過這種方法查看服務器的返回結果
//通過GET方式打開請求，第三個參數true表示異步發送請求，false則為同步
request.open("GET",url,true);
//當request的等待狀態發生變化時要執行的客戶端方法
request.onreadystatechange=update;//update是客戶端的javascript方法
//因為在請求的url中已經附帶了參數，所以這裡的參數是null
//表示不再發送額外的數據
request.send(null);
}
//當接收到服務器的響應之後執行的客戶端方法
function update()
{
if(request.readyState==4)
{
//alert(request.responseText);//查看服務器響應結果
document.getElementById("time").innerHTML=request.responseText;
}
}
// --></mce:script>
</head>
<body>
<table border="0">
<tr>
<td>服務器時間</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);" /></td>
</tr>
<tr>
<td><input type="button" value="時分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime(’mm-dd’);" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>獲取服務器時間的例子</title>
<mce:script language="javascript" type="text/javascript"><!--
var request=false;
//實例化XMLHttpRequest
function createXMLHttpRequest()
{
try
{
//下面的方法有可能拋出異常，表示當前浏覽器不支持此方法
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1)//當通過上面的方法實例XMLHttpRequest發生異常
{
try
{
//下面的方法有可能拋出異常，表示當前浏覽器不支持此方法
request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2)//當通過上面的方法實例XMLHttpRequest發生異常
{
request=false;
}
}
//當上面的方法都不能實例化XMLHttpRequest時，表示非IE浏覽器
if(!request&&typeof XMLHttpRequest!=’undefined’)
{
//非IE浏覽器實例化XMLHttpRequest的方法
request=new XMLHttpRequest();
}
}
//發送客戶端請求的方法
function getServerTime(format)
{
//調用上面的方法實例化XMLHttpRequest
createXMLHttpRequest();
//要請求的URL地址，注意escape是javascript中的方法
//用於對特殊字符進行轉義
var url="ServerTime.aspx?format="+escape(format);
//alert(url);//可以通過這種方法查看服務器的返回結果
//通過GET方式打開請求，第三個參數true表示異步發送請求，false則為同步
request.open("GET",url,true);
//當request的等待狀態發生變化時要執行的客戶端方法
request.onreadystatechange=update;//update是客戶端的javascript方法
//因為在請求的url中已經附帶了參數，所以這裡的參數是null
//表示不再發送額外的數據
request.send(null);
}
//當接收到服務器的響應之後執行的客戶端方法
function update()
{
if(request.readyState==4)
{
//alert(request.responseText);//查看服務器響應結果
document.getElementById("time").innerHTML=request.responseText;
}
}
// --></mce:script>
</head>
<body>
<table border="0">
<tr>
<td>服務器時間</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);" /></td>
</tr>
<tr>
<td><input type="button" value="時分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime(’mm-dd’);" /></td>
</tr>
</table>
</body>
</html>
注意XMLHttpRequest.readyState共有５種狀態，其可能值和對應描述如下：
0：請求未初始化，還沒有調用 open()。
1：請求已經建立，但是還沒有發送，還沒有調用 send()。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，沒有全部完成。
4：響應已完成；您可以獲取並使用服務器的響應了。
從上面的代碼中可以看出每次實例化XMLHttpRequest對象都需要判斷，一些常用的操作也可以封裝一下，利用Prototype這個JavaScript腳本庫就可以輕松做到這一點，實際上早期很多人就用到了Prototype來開發AJAX應用，並且在Prototype中還封裝了其它很多通用的方法，大大提高了我們的開發效率。
使用Prototype
在Prototype中提供了一個Ajax對象，這樣開發人員就可以直接使用Ajax對象而不必考慮如何判斷浏覽器類型再決定如何實例化XMLHttpRequest對象的實例了。下面的代碼是使用了Protype之後的代碼：
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用Prototype獲取服務器時間的例子</title>
<mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
function getServerTime(format) {
//要請求的URL地址，注意escape是javascript中的方法
//用於對特殊字符進行轉義
var url = "ServerTime.aspx";
var params = "format=" + escape(format);
var ajax = new Ajax.Request(
url,
{
method: ’get’,
parameters:params,
onComplete:update
}
);
}
//當接收到服務器的響應之後執行的客戶端方法
function update(request) {
$("time").innerHTML = request.responseText;
}
// --></mce:script>
</head>
<body>
<table border="0">
<tr>
<td>服務器時間</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);" /></td>
</tr>
<tr>
<td><input type="button" value="時分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime(’mm-dd’);" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用Prototype獲取服務器時間的例子</title>
<mce:script type="text/javascript" language="javascript" src="prototype.js" mce_src="prototype.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
function getServerTime(format) {
//要請求的URL地址，注意escape是javascript中的方法
//用於對特殊字符進行轉義
var url = "ServerTime.aspx";
var params = "format=" + escape(format);
var ajax = new Ajax.Request(
url,
{
method: ’get’,
parameters:params,
onComplete:update
}
);
}
//當接收到服務器的響應之後執行的客戶端方法
function update(request) {
$("time").innerHTML = request.responseText;
}
// --></mce:script>
</head>
<body>
<table border="0">
<tr>
<td>服務器時間</td><td><div id="time"></div></td>
</tr>
<tr>
<td><input type="button" value="完整時間" onclick="javascript:void getServerTime(’yyyy-mm-dd hh:mm:ss’);" /></td><td><input type="button" value="年月日" onclick="javascript:void getServerTime(’yyyy-MM-dd’);" /></td>
</tr>
<tr>
<td><input type="button" value="時分秒" onclick="javascript:void getServerTime(’hh:mm:ss’);" /></td><td><input type="button" value="月份日期" onclick="javascript:void getServerTime(’mm-dd’);" /></td>
</tr>
</table>
</body>
</html>
