ASP.NET AJAX 是一個不受拘束的架構，可讓您快速地在所有常見的瀏覽器上，建立更有效率、更互動式、更高度個人化的新一代網頁經驗。
使用 ASP.NET AJAX，您可以：
- 以可重複使用的 AJAX 元件建立新一代界面。
- 透過可支援所有現今瀏覽器的強大 AJAX 控制項，以加強現有網頁。
- 持續使用 Visual Studio 2005，讓您的 ASP.NET 2.0 網站更上層樓。
- 直接從瀏覽器存取遠端服務與資料，完全不需撰寫複雜的指令碼。
- 以 Microsoft 提供的技術支援，享受不受拘束架構的好處。
查看本文，您需要對一下技術有一定的瞭解：
C#編程，xhtml標準，css2.0標準，asp.net 頁面模型， asp.net ajax library 類庫對javascript 的封裝（面向對象的javascript），JSON對象操作，UML基礎。
示例簡介：
一個能夠在ie7，firefox及各種主流的瀏覽器上都能正確顯示的欄目組件。
一 爲了你們能對我的程序設計有更清晰的認識，首先看一下我爲你們展示的程序執行順序圖：
這個順序圖主要由五大對象組成：
AjaxPage（ajax頁面，發出請求的主要對象），
webRequest（得到頁面請求，組裝一個請求，並服務器提出請求，再獲得迴應），
ServerHandler（服務器端的請求處理者，並回發一個請求），
json（javascript序列化對象，把一個服務器對象序列化爲客戶端識別的字符串），
caption （服務器端的實體對象）
二 AjaxPage頁面
在<form runat="server"></form>標記中我們要放入一個
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/cap1.js" />
<asp:ScriptReference Path="~/js/ajax.js" />
</Scripts>
</asp:ScriptManager>
這樣我們就能用Microsoft的asp.net ajax 中提供的面向對象的javascript編寫瀏覽器兼容的動態代碼。裏邊的
<asp:ScriptReference Path="~/js/cap1.js" />
<asp:ScriptReference Path="~/js/ajax.js" />
分別引用的兩個自己編寫的javascript代碼文件。
ajax.js中存放了兩個函數，是爲了處理AjaxPage異步回發請求。代碼如下：
/// <reference name="MicrosoftAjax.js"/>
function sendRequest(handlerfile, verb, onCompletedString)
{
///<summery>異步請求發送函數</summery>
///<para name="handlerfile">服務器端處理文件路徑</parm>
///<para name="verb">回傳類型GET或POST</parm>
///<para name="onCompletedString">回傳完成後的相應函數，如果爲null我們將會提供一個默認的</parm>
var webRequest = new Sys.Net.WebRequest();
webRequest.set_url(handlerfile);
// var rebody = 'data=' + encodeURIComponent('這個是發送到的數據！');
// webRequest.set_body(rebody);
//webRequest.get_handers()['content-length'] = rebody.length;
webRequest.set_httpVerb(verb);
//webRequest.set_timeout(3000);
if(onCompletedString === null)
{
webRequest.add_completed(onCompleted);
}
else
{
webRequest.add_completed(onCompletedString);
}
webRequest.invoke();
}
function onCompleted(response, eventArgs)
{
if(response.get_aborted())
{
alert('請求被取消！');
return ;
}
if(response.get_responseAvailable())
{
var statusCode = response.get_statusCode();
if(statusCode < 200 || statusCode > 300)
{
alert('沒有得到正確的結果');
}
else
{
alert('正常執行結果，但是您沒有指定完成後的處理函數');
//response.get_responseData()
//response.get_xml();
//response.get_object();//jeson 對象字符串
}
return ;
}
if(response.get_timedOut())
{
alert('請求超時！');
return ;
}
//如果上述條件都沒有達到，說明請求出現錯誤
alert('錯誤請求！');
return ;
}
以上，我寫了一個組裝請求的函數sendRequest（）其中參數都有註釋。還有一個就是
onCompleted(response, eventArgs)函數，這個函數表示異步請求完成後我們要做的一些事情，這裏我提供給大家的只是個參考。在代碼中你可以看到，如果你不提供自己的一個回調函數，就會執行我爲您提供的這個回調函數。
cap1.js存放了我自己定義的一個簡單的客戶端類，主要是爲了生成一個控件框架（見第一個圖），代碼如下：
/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("OA");
//構造一個cap1需要一個標題和內容
OA.cap1 = function(tit,context) {
if(tit === '' || context === '')
{
this._tit = '空白欄目';
this._context = '沒有相關內容！';
}
else
{
this._tit = tit;
this._context = context;
}
}
OA.cap1.prototype = {
get_tit : function()
{
return this._tit;
},
get_context : function()
{
return this._context;
},
get_style : function()
{
return this._style;
},
set_tit : function(value)
{
this._tit = value;
},
set_context : function(value)
{
this._context = value;
},
set_style : function(cssfilepath)
{
var style = document.createElement('link');
style.rel='stylesheet';
style.type = 'text/css';
style.href = cssfilepath;
document.getElementsByTagName('head')[0].appendChild(style);
},
getCap1 : function(div)
{
if(div.toString().length < 1)
{
return ;
}
var frm = new Sys.StringBuilder( '<div class="cap1_top"><div class="cap1_top"><div class="left_top"></div><div id="'+ div +'_tit" class="mid_top"></div>');
frm.append( '<div class="top_pic"></div><div class="rit_top"></div></div><div class="cap1_mid"><div id="'+div+'_mid_left" class="mid_left"></div>');
frm.append('<div id="'+div+'_txt" class="cap1_txt"></div><div id="'+div+'_mid_rit" class="mid_left"></div></div><div class="cap1_btm"><div class="btm_left"></div>');
frm.append('<div id="'+div+'_btm_mid" class="btm_mid"></div><div class="btm_rit"></div></div></div>');
$get(div).innerHTML = frm;
$get(div+"_tit").innerHTML=this.get_tit();
$get(div+"_txt").innerHTML= this.get_context();
var lineh = Sys.UI.DomElement.getBounds($get(div+"_txt")).height;
$get(div+"_mid_left").style.height = lineh + "px";
$get(div+"_mid_rit").style.height = lineh + "px";
var cap_width = Sys.UI.DomElement.getBounds($get(div)).width;
//調整cap1_top的寬度
$get(div+"_tit").style.width = cap_width - 51 + "px";
//調整cap1_mid的寬度
$get(div+"_txt").style.width = cap_width - 10 + "px";
//調整cap1_btm的寬度
$get(div+"_btm_mid").style.width = cap_width - 17 + "px";
}
}
OA.cap1.registerClass('OA.cap1');
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
這樣我們就可以在AjaxPage頁面上調用這兩個文件中的方法來實現異步回傳了：首先我們在頁面中放一個
<div id="capdemo" style="background:#eee;width:200px;height:400px;"οnclick="showCap1();"></div>
主要的是這個οnclick="showCap1();代碼如下：
function showCap1()
{
sendRequest('Handlers/Handler1.ashx', 'GET', onDivClick);
}
function onDivClick(response, eventArgs)
{
if(response.get_responseAvailable())
{
var obj = response.get_object();
var cap = new OA.cap1(obj.Tit, obj.Text);
cap.set_style('App_Themes/themeg/style1.css');
cap.getCap1('capdemo');
}
}
請把這段代碼放在AjaxPage頁面的一個<script type="text/javascript"></script>裏，這裏我還要指出一段有意思的代碼cap.set_style('App_Themes/themeg/style1.css');這段代碼把我們預先設計好的一個樣式表動態的添加到頁面的
<head></head>裏了（在文章的末尾，我會把樣式表文件的代碼貼上。）
三 ServerHandler事件處理程序
服務器端的事件處理程序很簡單。更具webRequest中設置的url，請求傳到我們的Handler1.ashx後，服務器會自動調用
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
string text = "<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf";
Caption caption = new Caption("測試控件",text);
JavaScriptSerializer json = new JavaScriptSerializer();
context.Response.Write(json.Serialize(caption));
context.Response.End();
}
方法。此方法的主要目的就是構造一個Response對象，裏邊有我們寫好的一個json（JavaScriptSerializer ）序列化後的caption對象。Caption類是一個很普通的實體類，定義如下：
public class Caption
{
public Caption()
{ }
public Caption(string tit, string text)
{
m_tit = tit;
m_text = text;
}
private string m_tit;
private string m_text;
public string Tit
{
get { return m_tit; }
}
public string Text
{
get { return m_text; }
}
}
這樣，我們的代碼幾乎全部都已經展示完畢。運行程序，點擊AjaxPage中的帶顏色的層，我們的控件就會出現在上邊。
謝謝看完！
css文件代碼：
.cap1_top
{
width:100%;
}
.left_top
{
float:left;
width:7px;
height:35px;
background-image:url(sty1/left_top.gif);
}
.mid_top
{
font-size:14px;
text-align:left;
line-height:35px;
float:left;
height:35px;
background-image:url(sty1/mid_top.gif);
}
.top_pic
{
float:left;
width:39px;
height:35px;
background-image:url(sty1/top_pic.gif);
}
.rit_top
{
float:left;
width:5px;
height:35px;
background-image:url(sty1/rit_top.gif);
}
.cap1_mid
{
width:100%;
margin:0px;
padding:0px;
}
.mid_left
{
float:left;
width:5px;
background-image:url(sty1/ver_line.gif);
}
.cap1_txt
{
float:left;
line-height:24px;
}
.cap1_btm
{
width:100%;
}
.btm_left
{
float:left;
width:7px;
height:9px;
background-image:url(sty1/btm_left.gif);
}
.btm_mid
{
float:left;
height:9px;
background-image:url(sty1/ali_line.gif);
}
.btm_rit
{
float:left;
width:10px;
height:9px;
background-image:url(sty1/btm_rit.gif);
}
