摘要：在網站實際的開發中，總會因爲客戶端和服務器端頻繁的交互而大大降低了網頁的瀏覽速度，在本文中首先對AJAX的技術要點作出了初步的介紹，並在實際開ASP.Net中發中讓網站開發語言和AJAX相結合，實現HTTP的異步請求以對網頁的加載進行優化。
關鍵字：AJAX，線程，異步請求
1.什麼是AJAX
1.1初識AJAX
其實Ajax不是一個技術，它更像是一個模式----標誌並描述有用的設計技巧的一種方法，AJAX全稱爲“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。它有機地包含了以下幾種技術：
基於web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操作；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將所有的東西綁定在一起。
1.2 AJAX與傳統開發的比較
傳統的web應用允許用戶填寫表單(form)，當提交表單時就向web服務器發送一個請求。服務器接收並處理傳來的表單，然後返回一個新的網頁。這個做法浪費了許多帶寬，因爲在前後兩個頁面中的大部分HTML代碼往往是相同的。由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。與此不同，AJAX應用可以僅向服務器發送並取回必需的數據，它使用SOAP或其它一些基於XML的web service接口，並在客戶端採用JavaScript處理來自服務器的響應。因爲在服務器和瀏覽器之間交換的數據大量減少，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了。
圖 傳統的開發與AJAX處理交互的比較
傳統web應用與AJAX應用的比較：交互模式
2.基於Ajax的應用程序架構
瀏覽器端框架被劃分成兩大類：
·應用程序框架：提供瀏覽器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要圍繞桌面GUI框架。
·基本結構框架：提供基本的管道和可移植的瀏覽器抽象，讓開發者去創建內容。典型的功能：
* 針對XMLHttpRequest的包裝器以封裝瀏覽器-服務器的交互。(所有的框架都提供這一功能)。
* XML操作和查詢。
* 根據來自XMLHttpRequest的應答執行DOM操作。
* 在一些情況中，與另外的瀏覽器端技術如Flash(和潛在的Java applets)集成在一起。
而服務器端框架通常以下面兩種方式工作(儘管它們在這裏根據語言的不同進行了分類)：
·HTML/JS生成：服務器提供完整的HTML/Javascript代碼生成和瀏覽器-服務器協調，結果是隻有瀏覽器端編碼可以被定製。
·遠程調用：Javascript調用直接被路由到服務器端功能(例如Java方法)並返回到Javascript回叫處理器；或者Javascript調用服務器以提取信息，例如會話細節，數據庫查詢等。
3. .NET使用AJAX的異步Http請求對網頁加載的優化一個例子
3.1 問題
事實上，用戶在操作計算機時，如果等待時間超過大約200毫秒，他們一般都感到厭煩。當你的基於萬維網的應用程序使用一個需要耗費許多秒甚至幾分鐘的進程時，這可能成爲一個問題。顯然，你不可能僅通過建立一個進度條對話框或一等待光標就算萬事大吉。
創建一個頁面-它用於爲五個不同的急症病人報告當前的體溫溫、血壓和另外一些信息。頁面裝載事件代碼爲數據格子創建一個數據集。然後，迅速處理多個病人並且調用該web服務以得到數據。然後，該方法把數據從web服務填充到該數據集並且把它依附於一個DATAGRID控件.Web服務要花費大約五秒鐘來取得每一項數據。因此，如果我讓該頁面加載運行，那麼在服務器返回一頁面前要花費大約一分鐘-這對於任何用戶都是無法接受的等待時間。
3.2 傳統開發中對於多數據查詢頁面加載的處理方法
* 線程解決方案：使用多線程的技術對頁面週期性地得到處理的更新
* 查詢解決方案：頁面將每隔一個時間間隔向它自己回寄一個查詢到的數據。請求工作在第一個頁面中就開始了。此後，該頁面將通過鉤住工作的數據輸送到頁面中的數據格子來監視頁面的輸出。
3.3 使用AJAX解決方案
頁面的Javascript中部分函數及其功能：
StartHTTPRequest:開始創建一個HTTP請求
function createHTTPRequest( handler )
{
var req = null;
if (typeof window.ActiveXObject != 'undefined' )
{
// Build the Microsoft variation
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = handler;
}
else
{
// Build the standards compliant variation
req = new XMLHttpRequest();
req.onload = handler;
}
return req;
}
addField：它增加從服務器中以XML形式返回的不同字段
function addField( sid, stitle )
{
s_fields.push( { id: sid, title: stitle } );//其中s_fiels是上邊定義的一個變量
}
getData：調用createHTTPRequest開始一個請求
var s_req = null;
function getData()
{
s_req = createHTTPRequest( handleResponse );
try {
s_req.open( 'GET', s_url+"&count="+s_reqcount, true );
s_reqcount += 1;
s_req.send( "" );
} catch( e ) {
alert( e.toString() );
}
}
handleResponse：函數分析XML並且爲該數據表格創建一些新的HTML-這個HTML將被放置到"grid"標籤中
在Internet Explorer中的頁面重載會在頁面變成一片空白並等待重載之時造成一次聽得見的鼠標擊鍵和一次屏幕閃動。如果它每隔兩秒發生一次，這可能相當煩人。AJAX提供了一種選擇-只有一個頁面加載並且頁面中的Javascript請求每隔500毫秒請求狀態時，才動態地更新頁面
在頁面中的Javascript首先激活addField調用。startup頁面開始第一次到服務器的請求。getData通過調用createHTTPRequest開始一個請求。這個函數通過具有跨平臺的代碼來構建HTTP請求對象。該HTTP請求是異步的。在請求完成時，調用handleResponse函數分析XML並且爲該數據表格創建一些新的HTML-這個HTML將被放置到"grid"標籤中。代碼中的page_load啓動以上工作，然後用數據請求頁面的URL設置隱藏的輸入字段。另創建一個get_data.aspx頁面使用一個請求ID並且返回一個當前數據集合的XML描述。該頁面代碼顯示於下:
//get_data.aspx
<%@Page Language="c#" Codebehind="get_data.aspx.cs" AutoEventWireup="false" Inherits="background.get_data"%>
頁面的後臺代碼，-它首先把響應的內容類型設置爲"text/xml"。如果在瀏覽器中不存在該AJAX代碼，那麼就不會從響應中生成一個XML文檔。此後，代碼得到請求並且要求DataSet生成該XML。當請求完成時頁面加載完成!
4 結論
在.Net中使用AJAX技術對上多數據查詢處理，和多客戶端/服務器端交互的頁面存在的問題有着很多方面的完善：因爲異步的HTTP請求，使Web頁面不用打斷交互流程進行重新加裁，就可以動態地更新。在B/S模式的開發中，客戶端用戶不必因爲頻繁的刷新而煩惱!爲複雜的客戶端和服務器端交互頁面提供了一個更加完美交互體系 (這也是很多人將AJAX稱之爲無刷新技術的一個主要原因) !
5 參考文獻
《AJAX技術彙總》
《AJAX+ASP.NET解決網頁打開等待問題》