據我所知,這項技術最初是由Microsoft在1999年提出來的,也就是我們所熟知的"使用遠程調用(remote calls)的DHTML / JavaScript web應用程序"。這項技術的核心就是通過瀏覽器發出一個異步的HTTP請求來調用服務端的網頁或服務,在返回結果后,無需刷新就可以更新整個網頁。這項技術經過不斷地完善,到目前為此,使用AJAX的web程序從表現上看已經非常類似于Windows程序了。
由于這項技術的實現需要依賴于前端的瀏覽器,因此,它的使用受到了限制。但在最近的幾年,由于瀏覽器功能的加強和一些公司,如Google、Amazon.com的許多基于AJAX的應用的不俗表現,終于使這項技術鳳凰涅磐、欲火重生。
現在AJAX的使用已經非常廣泛,任何帶有豐富用戶體驗的動態網頁都會不約而同地使用AJAX。
解決方案
本文所描述的使用AJAX的方法非常簡單,而且效率很高。同時這種方法還非常容易維護,并且開發人員無需任何的特殊技巧就可以實現它,而且使用這種方法還可以跨瀏覽器。
一個基本的AJAX實現需要兩個主要部分:一個使用JavaScript代碼編寫的客戶端HTML頁,這些JavaScript用來向服務端發送請求和接收響應;一個可以接收請求和向客戶端發送響應信息的遠程頁面。客戶端的JavaScript代碼的任務是建立一個XmlHttp對象,然后向服務端發送請求信息,最后通過回調方式處理服務端返回的響應信息。這一切都是由JavaScript代碼實現的。
本文的例子使用ASP.NET程序實現,在實現上要做到以下幾點:
1、AJAX可以在不同的ASP.NET頁上向不同的服務端頁發送請求。
2、遠程頁面URL可以包含動態可計算的參數,這樣做可以在ASP.NET的后端代碼中更方便地建立URL字符串。
3、遠程頁在更新HTML頁之前可以使用復雜的數據進行響應,這也可以由ASP.NET的后端代碼完成。
4、一個服務端頁面可以是一個擴展的第三方的頁面,也可以是本身的web頁或服務。
以上的幾點如圖1所示
圖1
實現基本的AJAX JavaScript方法
我將JavaScript方法分成兩部分:調用特殊頁的JavaScript方法和一般的JavaScript方法。特殊的方法包括一個回調方法,它的作用是更新頁面內容。而其它的AJAX方法負責建立一個XmlHttp對象,并向服務端發出一個異步的HTTP請求。
建立的XmlHttp對象因客戶端瀏覽器的不同而有所差異。本文只考慮兩種瀏覽器:一個是Microsoft的IE系列瀏覽器;另一個是 Mozilla系列瀏覽器,包括Mozilla Firefox、Netscape和Safari。我也在Opera瀏覽器上測試過,但我不能保證本文的代碼可以很好地運行Opera瀏覽器上。下面是如何建立XmlHttp對象的代碼:
function GetXmlHttpObject(handler)
{
var objXmlHttp = null;
if (!window.XMLHttpRequest)
{
// Microsoft
objXmlHttp = GetMSXmlHttp();
if (objXmlHttp != null)
{
objXmlHttp.onreadystatechange = handler;
}
}
else
{
// Mozilla | Netscape | Safari
objXmlHttp = new XMLHttpRequest();
if (objXmlHttp != null)
{
objXmlHttp.onload = handler;
objXmlHttp.onerror = handler;
}
}
return objXmlHttp;
}
function GetMSXmlHttp()
{
var xmlHttp = null;
var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0",
"Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"];
for(var i=0; i
xmlHttp = createXmlHttp(clsids[i]);
}
return xmlHttp;
}
function createXmlHttp(clsid) {
var xmlHttp = null;
try {
xmlHttp = new ActiveXObject(clsid);
lastclsid = clsid;
return xmlHttp;
}
catch(e) {}
}
由于MSXML5只是為Office設計的,因此,我們可以不考慮MSXML5。所以GetMSXmlHttp方法可以簡化為以下形式:
function GetMSXmlHttp() {
var xmlHttp = null;
var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"];
for(var i=0; i
xmlHttp = createXmlHttp(clsids[i]);
}
return xmlHttp;
}
我們可以看出,GetXmlHttpObject方法有一個handle參數,這個參數指向一個回調方法,這個回調方法將被定義在每一個需要刷新的aspx頁中,F在我們已經有了一個XmlHttp對象,接下來我們可以發送一個異步的HTTP請求了。
function SendXmlHttpRequest(xmlhttp, url) {
xmlhttp.open(’GET’, url, true);
xmlhttp.send(null);
}
在以上代碼中我使用了一個GET HTTP請求發送了一個URL,你可以很容易修改以上的JavaScript代碼,使其發送其它的HTTP方法。
寫在aspx頁中的方法
現在我們已經編寫完調用遠程頁面的所有方法。為了執行這些方法,我們需要為GetXmlHttpObject方法傳遞一個回調方法名,然后向SendXmlHttpRequest方法傳遞一個URL字符串。下面是相應的實現代碼:
var xmlHttp;
function executeCall(url)
{
try
{
xmlHttp = GetXmlHttpObject(CallbackMethod);
SendXmlHttpRequest(xmlHttp, url);
}
catch(e){}
}
//CallbackMethod will fire when the state
//has changed, i.e. data is received back
function CallbackMethod()
{
try
{
//readyState of 4 or ’complete’ represents
//that data has been returned
if (xmlHttp.readyState == 4 || xmlHttp.readyState == ’complete’)
{
var response = xmlHttp.responseText;
if (response.length > 0)
{
//update page
document.getElementById("elementId").innerHTML = response;
}
}
}
catch(e){}
}
CallbackMethod方法負責更新頁面。在我們的例子中,它只更新了指定的HTTP對象的inner HTML。但在實際應用中,可以更新更多的內容。
最后要解決的問題是我們如何在aspx頁中調用executeCall方法。如何調用executeCall方法取決于這個頁面要做什么。在一些情況下,executeCall方法可以在JavaScript事件出發時調用。如果這樣做,我們還可以使用相應的aspx頁后端C#代碼將這個方法注冊為啟動腳本。
Page.RegisterStartupScript("ajaxMethod", String.Format(" ", url));
我們可以將上面代碼加到ASP.NET后端代碼的Page_Prerender或Page_Load方法中。
服務端頁面
讓我們看看服務端頁面象什么。如果它是一個ASP.NET頁(我們假設的),我們僅僅對它的后端代碼感性趣。我們可以將.aspx文件中代碼都刪除,這樣絲毫不會影響這個aspx頁的功能。
例如,我們有一個將攝氏度轉換為華氏度的web service。如果你將這個web service的URL的引用加入到你的工程中,Visual Studio將產生一個叫"com.developerdays.ItempConverterservice" 的代理類,這個代理類使用當前的命名空間。有一個名為getTemp.aspx的aspx頁,它接收一個叫"temp"的查詢參數,這參數包含一個整數的攝氏度值。如http://localhost/getTemp.aspx?temp=25。這個aspx頁的后端代碼如下:
private void Page_Load(object sender, EventArgs e)
{
Response.Clear();
string temp = Request.QueryString["temp"];
if (temp != null)
{
try
{
int tempC = int.Parse(temp);
string tempF = getTempF(tempC);
Response.Write(tempF);
}
catch
{}
}
Response.End();
}
private string getTempF(int tempC)
{
com.developerdays.ITempConverterservice
svc = new ITempConverterservice();
int tempF = svc.CtoF(tempC);
return tempF.ToString();
}
現在我們要建立一個可以調用上面的getTemp.aspx頁的請求字符串,這個字符串將傳遞到RegisterStartupScript方法中。代碼如下:
int tempC = 25;
string url = String.Format("http://localhost/" +
"getTemp.aspx?temp={0}", tempC);
在一些簡單情況,如果要傳遞的只是簡單的文本,可以通過URL直接傳給executeCall方法。
結論
本文舉了一個在任何ASP.NET程序都可以使用AJAX技術的簡單例子。AJAX除了能給用戶一些全新的體驗外,也有一些缺點和不足。至于是否使用AJAX技術,這完全取決于開發人員自身,在本文中我只是舉了個簡單的例子,學習它并不需要太多的時間,也不需要任何特殊的技能。