揭開(kāi)AJAX神秘的面紗（AJAX個(gè)人學(xué)習(xí)筆記）
作者：星光科技 時(shí)間：2009年9月17日 QQ: 114920781
注：寫(xiě)這個(gè)學(xué)習(xí)筆記，只是記載一下自己的學(xué)習(xí)經(jīng)過(guò)和體會(huì)，把一些學(xué)習(xí)重點(diǎn)記錄下來(lái)，以備今后的鞏固復(fù)習(xí)及應(yīng)用，很多知識(shí)點(diǎn)沒(méi)有詳細(xì)介紹，所以并不完全適用于初學(xué)者，如果你是初學(xué)者，最好選擇一本AJAX學(xué)習(xí)的書(shū)籍，然后與這篇學(xué)習(xí)筆記對(duì)照學(xué)習(xí)，效果會(huì)更好。
AJAX技術(shù)是多種計(jì)算機(jī)技術(shù)的結(jié)晶，它的名稱(chēng)來(lái)自：Asynchronism(異步)、JavaScript、And、XML這4個(gè)單詞首字母，即異步JavaScript請(qǐng)求處理XML技術(shù)。簡(jiǎn)單的描述就是數(shù)據(jù)異步傳輸網(wǎng)頁(yè)局部刷新的技術(shù)。AJAX很流行，WEB程序設(shè)計(jì)中如果不應(yīng)用AJAX技術(shù)，可以說(shuō)是不完善的設(shè)計(jì)。就好象黑白電視機(jī)與彩電一樣，AJAX就是后者，是一種技術(shù)更新的革命！
本人學(xué)習(xí)AJAX時(shí)間并不長(zhǎng)，僅10余天，不能說(shuō)百分之百掌握，但也有所領(lǐng)悟?，F(xiàn)在把自己的學(xué)習(xí)經(jīng)過(guò)和體會(huì)寫(xiě)下來(lái)，與君共分享。
一、學(xué)習(xí)經(jīng)過(guò)：
AJAX技術(shù)的文章和書(shū)籍很多，視頻也不少，可以說(shuō)是近兩年最熱的技術(shù)。但大多書(shū)籍介紹的全而不細(xì)，或是重點(diǎn)不突出，給人一種云山霧罩的感覺(jué)！這其中不乏清華大學(xué)等知名教授寫(xiě)的書(shū)。本人就有此方面的親身體會(huì)，我先是下載了傳智播客ajax視頻教程，看了幾節(jié)就看不下去了，后來(lái)又買(mǎi)了一本AJAX技術(shù)的書(shū)，很厚的一本60元人民幣。也是天很熱，耐心看了八天實(shí)在看不下去了，感覺(jué)AJAX技術(shù)很深?yuàn)W，無(wú)法真正領(lǐng)會(huì)，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過(guò)起較為靡爛的幸福生活。后來(lái)，天氣涼爽了，閑暇之余又想起AJAX這件事，于是就買(mǎi)來(lái)幾瓶冰鎮(zhèn)啤酒，幾袋小食品，一袋瓜子，在家里邊看邊飲，好生自在！沒(méi)有想到的是，這一看卻是一通百通，AJAX技術(shù)就這樣在一天時(shí)間里掌握了，而且還有自己對(duì)AJAX技術(shù)的獨(dú)到領(lǐng)悟：AJAX應(yīng)用很簡(jiǎn)單，完全可以不用編碼或少量編碼。
二、學(xué)習(xí)體會(huì)及重點(diǎn)
學(xué)習(xí)應(yīng)用的語(yǔ)言和工具軟件：本人是自學(xué)C#語(yǔ)言的，所以開(kāi)發(fā)環(huán)境是NET框架下（ASP.NET），開(kāi)發(fā)工具采用VS2008（VS2005也可以）。
學(xué)習(xí)重點(diǎn)：
AJAX控件的安裝，特別是AJAX Control Toolkit部分的安裝，詳見(jiàn)我的博客日志，有較為詳細(xì)的介紹，這里就不多說(shuō)了，唯一提醒的是：VS2008和VS2005在AJAX控件安裝和使用上有點(diǎn)區(qū)別，但不大！
1、AJAX控件5個(gè)基本控件的介紹
這是微軟所提供的AJAX最基本的五大控件，也是最實(shí)用的。使用它，你完全可以不用編寫(xiě)任何代碼，只是簡(jiǎn)單的設(shè)置一下相關(guān)屬性，就可以實(shí)現(xiàn)AJAX異步數(shù)據(jù)更新的效果。這是讓學(xué)習(xí)AJAX技術(shù)的人最為心動(dòng)的，是一種傻瓜式的應(yīng)用，效果不錯(cuò)。如果你想在以前編寫(xiě)的程序中應(yīng)用AJAX技術(shù)，用這五大基本控件，可以在十幾分鐘內(nèi)搞定。下面具體介紹一下：
（1）ScriptManager是腳本管理器，負(fù)責(zé)管理頁(yè)面中的Ajax控件的有關(guān)腳本資源。在一個(gè)Web頁(yè)面中只能有一個(gè)ScriptManager，在任何情況下使用ASP.NET Ajax控件必須在頁(yè)面中添加一個(gè)ScriptManager。（這個(gè)控件一般不需設(shè)置，如果想了解具體屬和和事件，可以查找有關(guān)資料。）
ScriptManager控件的前臺(tái)代碼形式如下所示：
<asp:ScriptManager ID="asm1" runat=” server” >
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference />
</Scripts>
<Services>
<asp:ServiceReference Path="" />
</Services>
</asp:ScriptManager>
下面重點(diǎn)介紹一下容易出錯(cuò)的一些屬性和方法：
1、ScriptMode屬性：指定發(fā)送模式。一個(gè)枚舉屬性，四個(gè)值：Auto、Debug、Release、Inherit。
Auto：默認(rèn)值。即根據(jù)Web.config中retail配置節(jié)的值來(lái)決定發(fā)送腳本的模式。如果retail節(jié)點(diǎn)值為true，即將發(fā)布模式的腳本發(fā)送至客戶端，否則發(fā)送調(diào)試版本。
Debug:當(dāng)retail屬性值為false時(shí)，ScriptManager控件將Debug版本的腳本發(fā)送至客戶端。
Release:當(dāng)retail屬性值為false時(shí)，ScriptManager控件將Release版本的腳本發(fā)送至客戶端。
Inherit：與Auto用法相同，但一般不用。
2、Services屬性：用以指定當(dāng)前頁(yè)面所引用的WEB服務(wù)，使用<asp:ServiceReference>節(jié)點(diǎn)可以注冊(cè)WEB服務(wù)，ScritpManage控件將為每一個(gè)注冊(cè)的Web服務(wù)生成客戶端代理。
（2）ScriptManagerProxy是ScriptManager的擴(kuò)展，是專(zhuān)門(mén)為使用了母版頁(yè)或用戶控件的工程中使用的腳本管理器。當(dāng)工程頁(yè)面中已使用了ScriptManager，那么在母版頁(yè)或用戶控件中就可以使用一個(gè)ScriptManagerProxy來(lái)代理ScripManager的工作。屬性上基本與ScriptManager控件一樣。
（3）UpdatePanel是使用最廣泛的Ajax控件，在頁(yè)面中嵌入U(xiǎn)pdatePanel，就可以實(shí)現(xiàn)頁(yè)面的局部刷新。頁(yè)面中可以有多個(gè)UpdatePanel，UpdataPanel之間也可以相互嵌套。（應(yīng)用重點(diǎn)）
Updatapanel就是實(shí)現(xiàn)頁(yè)面局部刷新的控件，UpdatePanel控件的前臺(tái)代碼如下所示：
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
內(nèi)容模板 放置內(nèi)容的區(qū)域
</ContentTemplate>
<Triggers> //設(shè)置提交服務(wù)器的方式：異步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指設(shè)置異步模式及controlID(引發(fā)更新的控件ID)和EventName（引發(fā)更新事件名稱(chēng)）
<asp:PostBackTrigger ControlID="" /> //指同步模式，一般不設(shè)置這個(gè)，可以不寫(xiě)這行代碼，因?yàn)閍jax實(shí)現(xiàn)的就是異步更新，同步就失去了意義！
</Triggers>
</asp:UpdatePanel>
重要屬性和事件：
ChildrenAsTriggers：當(dāng)UpdateMode屬性值為Conditional時(shí)，設(shè)定UpdatePanel中的子控件的異步請(qǐng)求服務(wù)器是否會(huì)引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解釋至前臺(tái)HTML代碼樣式，默認(rèn)值為Block即解釋為<div></div>，當(dāng)該屬性設(shè)置為Inline時(shí)，UpdatePanel被解釋為<span></span>
Triggers:設(shè)定觸發(fā)當(dāng)前UpdatePanel更新的控件和事件。（這個(gè)是重點(diǎn)）
UpdateMode:設(shè)定當(dāng)前UpdatePancl的更新模式：Always和Conditional。當(dāng)設(shè)定為Always時(shí)，UpdatePanel不管當(dāng)前是否存在Trigger都會(huì)更新。當(dāng)設(shè)定為Conditional時(shí)，只有當(dāng)前UpdatePancl設(shè)定了Trigger或ChildTrigger時(shí)，當(dāng)前UpdatePanel控件才會(huì)更新或提交頁(yè)面，或者當(dāng)服務(wù)器端調(diào)用Update()方法時(shí)才會(huì)更新UpdatePanel.
需要特別說(shuō)明的屬性和事件：
Trigger屬性：指示當(dāng)前UpdatePanel使用的提交服務(wù)器方式，有同步提交或異步提交兩種。同步提交只需要指定觸發(fā)提交的控件ID，同步提交將會(huì)提交整個(gè)頁(yè)面。異步提交需要設(shè)定觸發(fā)異步提交的控件ID和服務(wù)器端的事件。
頁(yè)面中多個(gè)UpdatePanel共存：當(dāng)頁(yè)面上有多個(gè)UpdatePanel共存時(shí)，需要設(shè)定頁(yè)面上所有的UpdatePanel控件的UpdateMode屬性為Conditional，否則只要任何一個(gè)UpdatePanel局部更新被觸發(fā)，將會(huì)更新所有頁(yè)面上的UpdatePanel。原因很簡(jiǎn)單，頁(yè)面上所有的UpdatePanel控件的UpdateMode默認(rèn)為Always。
多個(gè)UpdatePanel的嵌套使用：當(dāng)多個(gè)UpdatePanel控件嵌套使用時(shí)，處于并列的UpdatePanel更新時(shí)互不影響。但當(dāng)兩個(gè)UpdatePanel相互嵌套時(shí)，處于內(nèi)層的UpdatePanel局部更新時(shí)并不會(huì)影響到處層的UpdatePanel，但是外層的UpdatePanel局部更新時(shí)會(huì)更新所有嵌套在它內(nèi)部的UpdatePanel。
（4）顧名思義UpdateProgress執(zhí)行的是頁(yè)面局部刷新過(guò)程中的工作。UpdateProgress可以提供一個(gè)刷新過(guò)程中用戶狀態(tài)的友好信息，如向客戶提示“正在加載數(shù)據(jù)”等。
UpdateProgress控件前臺(tái)代碼非常簡(jiǎn)單，如下所示：
<asp:UpdateProgress runat="server" ID="upg1">
<ProgressTemplate> //模板
<div alige=”ecnter” style=”width:1100px”> //以下代碼是顯示的信息或圖片部分
<img src=”image/loading.gif” align=middle />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
重點(diǎn)屬性：
AssociatedUpdatePanelID:設(shè)定觸發(fā)UpdateProgress的UpdatePanel的ID，一般用于頁(yè)面中具有多個(gè)UpdatePanel的情況。
DisplayAfter:進(jìn)度信息顯示多少毫秒數(shù)。
DynamicLayout:布爾值屬性，設(shè)定當(dāng)前UpdateProgress是否動(dòng)態(tài)繪制，而不是直接解釋在前臺(tái)。
（5）在WinForm的開(kāi)發(fā)中，很多程序員都被Timer控件的功能所傾倒。Timer控件可以定期的觸發(fā)一些事件，比如提交整個(gè)頁(yè)面或刷新部分頁(yè)面等。
Timer控件的定義相當(dāng)簡(jiǎn)單，只需聲明控件即可，代碼如下所示：
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重點(diǎn)屬性：
Enabled：是否啟動(dòng)Timer控件，并觸發(fā)Tick事件。
Interval:Timer控件觸發(fā)Tick事件的間隔事件，單位ms.
Tick：Timer控件在設(shè)定Enabled屬性為true時(shí)，每隔Interval屬性限定的時(shí)間執(zhí)行事件。
提示：一般把Timer控件放置在UpdatePanel之處，不然局部更新時(shí)又會(huì)重新設(shè)置間隔時(shí)間。前臺(tái)代碼：
<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager>
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” >
</asp:Timer>
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate>
內(nèi)容模板 放置內(nèi)容的區(qū)域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
2、AJAX基本原理及案例代碼
AJAX技術(shù)：我的理解就是JavaScritp前后臺(tái)參數(shù)傳遞的技術(shù)，這里參數(shù)可以是參數(shù)值或數(shù)據(jù)流。學(xué)習(xí)AJAX基本原理，有助于對(duì)AJAX擴(kuò)展控件的應(yīng)用，是不會(huì)缺少的一部分。
下面列舉兩個(gè)AJAX最常用的方式，以便學(xué)習(xí)者體會(huì)AJAX應(yīng)用原理。如初學(xué)者對(duì)部分代碼不能理解，可以查找相關(guān)命令及資料！
應(yīng)用方式一：
在日常的ASP.NET Ajax實(shí)現(xiàn)中，這種方式是最簡(jiǎn)單的、最常用的開(kāi)發(fā)方式。這種方式典型的實(shí)現(xiàn)步驟如下所示：
創(chuàng)建XMLHttpRequest對(duì)象，請(qǐng)求特定的Ajax處理頁(yè)面。
Ajax處理頁(yè)面在Page_Load事件中，接收XMLHttpRequest對(duì)象的異步請(qǐng)求。
Ajax處理頁(yè)面根據(jù)請(qǐng)求內(nèi)容，做出相應(yīng)的回應(yīng)，回應(yīng)可以采用this.Response.Write或this.Response.OutPutStream將響應(yīng)文本或響應(yīng)的XML Document放入Response對(duì)象的方式。
前臺(tái)JavaScript腳本通過(guò)XMLHttpRequest對(duì)象的responseText或responseXml來(lái)接收服務(wù)器回應(yīng)，并動(dòng)態(tài)修改頁(yè)面內(nèi)容，從而實(shí)現(xiàn)Ajax異步無(wú)刷新應(yīng)用。
應(yīng)用方式二：
在ASP.NET 中，內(nèi)置了一種非常適合Ajax開(kāi)發(fā)的后臺(tái)處理方式即HttpHandler類(lèi)，實(shí)際上所有的HttpHandler類(lèi)都實(shí)現(xiàn)了IHttpHandler接口，用以進(jìn)行請(qǐng)求接收和回送響應(yīng)。
IHttpHandler這個(gè)接口提供了最基本的Web請(qǐng)求和Web響應(yīng)的封裝，可以將此接口看作是Web容器提供的基本的Web實(shí)現(xiàn)方式的封裝類(lèi)。
IHttpHandler接口具有一個(gè)方法：ProcessRequest(HttpContext context)，及一個(gè)布爾值屬性：IsReusable。所有實(shí)現(xiàn)IHttpHandler接口的類(lèi)都必須實(shí)現(xiàn)上述方法和屬性，其中ProcessRequest方法用于接收和處理請(qǐng)求以及發(fā)送響應(yīng)，而IsReusable指示其他請(qǐng)求是否可以使用IHttpHandler實(shí)例也就是說(shuō)后繼的Http請(qǐng)求是不是可以繼續(xù)使用實(shí)現(xiàn)了該接口的類(lèi)的實(shí)例，一般情況下設(shè)定為true。
應(yīng)用一案例代碼：
Default.aspx 文件代碼（只有前臺(tái)代碼，后臺(tái)無(wú)任何代碼）:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Ajax請(qǐng)求頁(yè)面</title>
<script type="text/javascript" language=javascript src="Ajax.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div align=center>
<div style="width:320px;height:150px" align=center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr width=300px>
<td>請(qǐng)輸入回傳至服務(wù)器的文本</td>
</tr>
<tr>
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td>
</tr>
<tr>
<td><input type=button runat=server id="btnRequest" value="發(fā)送請(qǐng)求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td>
</tr>
<tr>
<td>服務(wù)器處理后文本顯示如下</td>
</tr>
<tr>
<td>
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg">
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Ajax.js 文件代碼（createXmlHttp()函數(shù)部分很通用，可以在自己的應(yīng)用程序中不用修改而直接復(fù)制）：
var xmlHttp;
function createXmlHttp()
{
var activeKey=new Array("MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
if(window.ActiveXObject)
{
for(var i=0;i<activeKey.length;i++)
{
try
{
xmlHttp=new ActiveXObject(activeKey[i]);
if(xmlHttp!=null)
return xmlHttp;
}
catch(error)
{
continue;
}
}
throw new Error("客戶端瀏覽器版本過(guò)低，不支持XMLHttpRequest對(duì)象，請(qǐng)更新瀏覽器");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
function addUrlParameter(url,parameterName,parameterValue)
{
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當(dāng)前URL中是否存在? 即參數(shù)分隔符
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue);
return url;
}
function startRequest(customerStr)
{
xmlHttp=createXmlHttp();
xmlHttp.onreadystatechange=readyStateChangeHandler;
xmlHttp.open("GET",addUrlParameter("AjaxPage.aspx","customerInfo",customerStr),null);
xmlHttp.send(null);
}
function readyStateChangeHandler()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var str=xmlHttp.responseText;
var div=document.getElementById("divServerMsg");
div.innerHTML="<b>"+str+"</b>";
}
}
}
AjaxPage.aspx 文件代碼（前臺(tái)）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage.aspx.cs" Inherits="AjaxPage" %>
<!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 runat="server">
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
AjaxPage.aspx.cs 文件代碼（后臺(tái)）：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class AjaxPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = this.Request["customerInfo"].ToString();
string msg = "服務(wù)器獲得你的消息，時(shí)間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + this.Request.UserHostAddress;
this.Response.Write(msg);
this.Response.End();
}
}
應(yīng)用二案例代碼：
Default.aspx 文件代碼（同樣只有前臺(tái)代碼，后臺(tái)無(wú)任何代碼）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>Ajax請(qǐng)求頁(yè)面</title>
<script type="text/javascript" language=javascript src="Ajax.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div align=center>
<div style="width:320px;height:150px" align=center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr width=300px>
<td>請(qǐng)輸入回傳至服務(wù)器的文本</td>
</tr>
<tr>
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td>
</tr>
<tr>
<td><input type=button runat=server id="btnRequest" value="發(fā)送請(qǐng)求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td>
</tr>
<tr>
<td>服務(wù)器處理后文本顯示如下</td>
</tr>
<tr>
<td>
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg">
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Ajax.js 文件代碼：
var xmlHttp;
function createXmlHttp()
{
var activeKey=new Array("MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
if(window.ActiveXObject)
{
for(var i=0;i<activeKey.length;i++)
{
try
{
xmlHttp=new ActiveXObject(activeKey[i]);
if(xmlHttp!=null)
return xmlHttp;
}
catch(error)
{
continue;
}
}
throw new Error("客戶端瀏覽器版本過(guò)低，不支持XMLHttpRequest對(duì)象，請(qǐng)更新瀏覽器");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
function addUrlParameter(url,parameterName,parameterValue)
{
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當(dāng)前URL中是否存在? 即參數(shù)分隔符
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue);
return url;
}
function startRequest(customerStr)
{
xmlHttp=createXmlHttp();
xmlHttp.onreadystatechange=readyStateChangeHandler;
xmlHttp.open("GET",addUrlParameter("AjaxHandler.ashx","customerInfo",customerStr),null);
xmlHttp.send(null);
}
function readyStateChangeHandler()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var str=xmlHttp.responseText;
var div=document.getElementById("divServerMsg");
div.innerHTML="<b>"+str+"</b>";
}
}
}
AjaxHandler.ashx 文件代碼(ashx擴(kuò)展名屬于自定義的，在新建時(shí)選擇添加新項(xiàng)中的一般處理程序)：
<%@ WebHandler Language="C#" Class="AjaxHandler" %>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class AjaxHandler: IHttpHandler
{
public void ProcessRequest(System.Web.HttpContext context)
{
string str = context.Request["customerInfo"].ToString();
string msg = "服務(wù)器獲得你的消息，時(shí)間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + context.Request.UserHostAddress;
context.Response.Write(msg);
context.Response.End();
}
public bool IsReusable
{
get
{
return true;
}
}
}
3、ASP.NET AJAX Control Toolkit 擴(kuò)展控件的應(yīng)用
Ajax擴(kuò)展控件在VS2800中就有，但需要安裝一下。具體安裝方法見(jiàn)相關(guān)文章（我的博客中就有）。下面介紹其中兩個(gè)最讓人心動(dòng)的控件：AutoCompleteExtender控件（文本框自動(dòng)下拉列表查找控件）和CalendarExtender控件（選擇日期控件）
AutoCompleteExtender控件的使用：
使用AutoCompleteExtender控件為了實(shí)現(xiàn)自動(dòng)完成功能及動(dòng)態(tài)綁定數(shù)據(jù)，例如谷歌或百度搜索欄自動(dòng)查找列表效果。在后臺(tái)綁定數(shù)據(jù)庫(kù)中相應(yīng)的數(shù)據(jù)，如輸入拼音或輸簡(jiǎn)稱(chēng)后即可自動(dòng)查找全稱(chēng)，鼠標(biāo)點(diǎn)選實(shí)現(xiàn)快速錄入。
使用步驟如下：
第一步：在input.aspx窗體中添加一個(gè)TextBox控件，取名txtdep，添加擴(kuò)展程序并選取AutoCompleteExtender控件。
拖進(jìn)設(shè)計(jì)界面后代碼如下所示：
<asp:TextBox ID="txtdep" runat="server" ></asp:TextBox>
<cc1:AutoCompleteExtender ID="txtdep_AutoCompleteExtender" runat="server" EnableCaching="true" DelimiterCharacters="" Enabled="True" ServicePath=" " TargetControlID="txtdep" ></cc1:AutoCompleteExtender>
第二步：在Web.config文件中appSettings節(jié)添加數(shù)據(jù)庫(kù)連接字符串，為連接數(shù)據(jù)庫(kù)做準(zhǔn)備：
<appSettings>
<add key="ConnString" value="server=(local);uid=sa;pwd=;persist security info=False;initial catalog= demo;Max Pool Size=1000"/>
</appSettings>
其中，server為SQL服務(wù)器名稱(chēng)，案例為本地，uid、pwd為SQL Server用戶名和密碼，initial catalog為要連接的數(shù)據(jù)庫(kù)，，請(qǐng)根據(jù)實(shí)際情況填寫(xiě)。
第三步：建立Web服務(wù)（WebService）。要使用AutoCompleteExtender，我們要通過(guò)Web服務(wù)傳遞數(shù)據(jù)。在解決方案資源管理器單擊項(xiàng)目-〉添加新項(xiàng)-〉Web服務(wù)。這里使用了默認(rèn)的名稱(chēng)WebService.asmx。
WebService.asmx的代碼修改如下：
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Collections.Generic;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using AjaxControlToolkit;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//
若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。
[System.Web.Script.Services.ScriptService]//
必需，告訴.net runtime該WebService被允許從客戶端調(diào)用
public class WebService : System.Web.Services.WebService
{
public WebService () { }
//構(gòu)建Web服務(wù)的函數(shù)
[WebMethod]
public string[] getdepalist(string prefixText,int count)
{
//
連接數(shù)據(jù)庫(kù)
string sqlstr = System.Configuration.ConfigurationSettings.AppSettings["ConnString"];
SqlConnection sqlcon=new SqlConnection(sqlstr);
//
從數(shù)據(jù)庫(kù)中的表里用select語(yǔ)句返回查找結(jié)果
string mysql = "select Area_Full from ST_Area where Area_Full like" + "'" + prefixText + "%' or Area_Spell like" + "'" + prefixText + "%'" ;
//
使用SqlDataAdapter對(duì)控件進(jìn)行數(shù)據(jù)的填充
SqlDataAdapter da= new SqlDataAdapter(mysql, sqlcon);
DataSet ds=new DataSet();
if (count == 0)
{ count = 10;}
da.Fill(ds, "Depa_Full");
//List
是一個(gè)集合，根據(jù)特殊條件找到我們所需要的值
List<string> items = new List<string>(count);
for (int i = 1; i <= ds.Tables["Depa_Full"].Rows.Count; i++)
{
items.Add(ds.Tables["Depa_Full"].Rows[i - 1][0].ToString().Trim());
}
return items.ToArray();
}
}
第四步：設(shè)置AutoCompleteExtender控件，具體設(shè)置代碼如下：
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1"
ServicePath="WebService.asmx"
ServiceMethod="getdepalist "
MinimumPrefixLength="0">
</ajaxToolkit:AutoCompleteExtender>
其中，ServicePath是指Web服務(wù)的文件名。ServiceMethod是指調(diào)用Web服務(wù)的函數(shù)名。MinimumPrefixLength是指輸入多少個(gè)字符后開(kāi)始列出輸入提示列表。
CalendarExtender控件使用：
CalendarExtender控件的使用非常簡(jiǎn)單：
在Web窗體中添加ScriptManager控件，添加textbox，取名txtreptime，點(diǎn)擊“添加擴(kuò)展程序”，在彈出的“擴(kuò)展程序向?qū)?rdquo;對(duì)話框中選擇CalendarExtender控件，即可。Web窗體源頁(yè)面相應(yīng)代碼為：
<div><asp:ScriptManager ID="ScriptManager1" runat="server"
EnableScriptGlobalization="true"
></asp:ScriptManager></div>
<asp:TextBox ID="txtreptime" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="txtreptime_CalendarExtender" runat="server" Enabled="True"
Format="yyyy-MM-dd"
TargetControlID="txtreptime"> </cc1:CalendarExtender>
其中，EnableScriptGlobalization="true"自加，使控件顯示中文；Format="yyyy-MM-dd"自加，控制時(shí)間的格式。
以上是對(duì)兩個(gè)擴(kuò)展控件的案例的介紹，希望大家舉一反三，更好的在實(shí)踐中應(yīng)用！
作者：星光科技 時(shí)間：2009年9月17日
注：寫(xiě)這個(gè)學(xué)習(xí)筆記，只是記載一下自己的學(xué)習(xí)經(jīng)過(guò)和體會(huì)，把一些學(xué)習(xí)重點(diǎn)記錄下來(lái)，以備今后的鞏固復(fù)習(xí)及應(yīng)用，很多知識(shí)點(diǎn)沒(méi)有詳細(xì)介紹，所以并不完全適用于初學(xué)者，如果你是初學(xué)者，最好選擇一本AJAX學(xué)習(xí)的書(shū)籍，然后與這篇學(xué)習(xí)筆記對(duì)照學(xué)習(xí)，效果會(huì)更好。
AJAX技術(shù)是多種計(jì)算機(jī)技術(shù)的結(jié)晶，它的名稱(chēng)來(lái)自：Asynchronism(異步)、JavaScript、And、XML這4個(gè)單詞首字母，即異步JavaScript請(qǐng)求處理XML技術(shù)。簡(jiǎn)單的描述就是數(shù)據(jù)異步傳輸網(wǎng)頁(yè)局部刷新的技術(shù)。AJAX很流行，WEB程序設(shè)計(jì)中如果不應(yīng)用AJAX技術(shù)，可以說(shuō)是不完善的設(shè)計(jì)。就好象黑白電視機(jī)與彩電一樣，AJAX就是后者，是一種技術(shù)更新的革命！
本人學(xué)習(xí)AJAX時(shí)間并不長(zhǎng)，僅10余天，不能說(shuō)百分之百掌握，但也有所領(lǐng)悟?，F(xiàn)在把自己的學(xué)習(xí)經(jīng)過(guò)和體會(huì)寫(xiě)下來(lái)，與君共分享。
一、學(xué)習(xí)經(jīng)過(guò)：
AJAX技術(shù)的文章和書(shū)籍很多，視頻也不少，可以說(shuō)是近兩年最熱的技術(shù)。但大多書(shū)籍介紹的全而不細(xì)，或是重點(diǎn)不突出，給人一種云山霧罩的感覺(jué)！這其中不乏清華大學(xué)等知名教授寫(xiě)的書(shū)。本人就有此方面的親身體會(huì)，我先是下載了傳智播客ajax視頻教程，看了幾節(jié)就看不下去了，后來(lái)又買(mǎi)了一本AJAX技術(shù)的書(shū)，很厚的一本60元人民幣。也是天很熱，耐心看了八天實(shí)在看不下去了，感覺(jué)AJAX技術(shù)很深?yuàn)W，無(wú)法真正領(lǐng)會(huì)，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過(guò)起較為靡爛的幸福生活。后來(lái)，天氣涼爽了，閑暇之余又想起AJAX這件事，于是就買(mǎi)來(lái)幾瓶冰鎮(zhèn)啤酒，幾袋小食品，一袋瓜子，在家里邊看邊飲，好生自在！沒(méi)有想到的是，這一看卻是一通百通，AJAX技術(shù)就這樣在一天時(shí)間里掌握了，而且還有自己對(duì)AJAX技術(shù)的獨(dú)到領(lǐng)悟：AJAX應(yīng)用很簡(jiǎn)單，完全可以不用編碼或少量編碼。
二、學(xué)習(xí)體會(huì)及重點(diǎn)
學(xué)習(xí)應(yīng)用的語(yǔ)言和工具軟件：本人是自學(xué)C#語(yǔ)言的，所以開(kāi)發(fā)環(huán)境是NET框架下（ASP.NET），開(kāi)發(fā)工具采用VS2008（VS2005也可以）。
學(xué)習(xí)重點(diǎn)：
AJAX控件的安裝，特別是AJAX Control Toolkit部分的安裝，詳見(jiàn)我的博客日志，有較為詳細(xì)的介紹，這里就不多說(shuō)了，唯一提醒的是：VS2008和VS2005在AJAX控件安裝和使用上有點(diǎn)區(qū)別，但不大！
AJAX控件5個(gè)基本控件的介紹
這是微軟所提供的AJAX最基本的五大控件，也是最實(shí)用的。使用它，你完全可以不用編寫(xiě)任何代碼，只是簡(jiǎn)單的設(shè)置一下相關(guān)屬性，就可以實(shí)現(xiàn)AJAX異步數(shù)據(jù)更新的效果。這是讓學(xué)習(xí)AJAX技術(shù)的人最為心動(dòng)的，是一種傻瓜式的應(yīng)用，效果不錯(cuò)。如果你想在以前編寫(xiě)的程序中應(yīng)用AJAX技術(shù)，用這五大基本控件，可以在十幾分鐘內(nèi)搞定。下面具體介紹一下：
（1）ScriptManager是腳本管理器，負(fù)責(zé)管理頁(yè)面中的Ajax控件的有關(guān)腳本資源。在一個(gè)Web頁(yè)面中只能有一個(gè)ScriptManager，在任何情況下使用ASP.NET Ajax控件必須在頁(yè)面中添加一個(gè)ScriptManager。（這個(gè)控件一般不需設(shè)置，如果想了解具體屬和和事件，可以查找有關(guān)資料。）
ScriptManager控件的前臺(tái)代碼形式如下所示：
<asp:ScriptManager ID="asm1" runat=” server” >
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference />
</Scripts>
<Services>
<asp:ServiceReference Path="" />
</Services>
</asp:ScriptManager>
下面重點(diǎn)介紹一下容易出錯(cuò)的一些屬性和方法：
1、ScriptMode屬性：指定發(fā)送模式。一個(gè)枚舉屬性，四個(gè)值：Auto、Debug、Release、Inherit。
Auto：默認(rèn)值。即根據(jù)Web.config中retail配置節(jié)的值來(lái)決定發(fā)送腳本的模式。如果retail節(jié)點(diǎn)值為true，即將發(fā)布模式的腳本發(fā)送至客戶端，否則發(fā)送調(diào)試版本。
Debug:當(dāng)retail屬性值為false時(shí)，ScriptManager控件將Debug版本的腳本發(fā)送至客戶端。
Release:當(dāng)retail屬性值為false時(shí)，ScriptManager控件將Release版本的腳本發(fā)送至客戶端。
Inherit：與Auto用法相同，但一般不用。
2、Services屬性：用以指定當(dāng)前頁(yè)面所引用的WEB服務(wù)，使用<asp:ServiceReference>節(jié)點(diǎn)可以注冊(cè)WEB服務(wù)，ScritpManage控件將為每一個(gè)注冊(cè)的Web服務(wù)生成客戶端代理。
（2）ScriptManagerProxy是ScriptManager的擴(kuò)展，是專(zhuān)門(mén)為使用了母版頁(yè)或用戶控件的工程中使用的腳本管理器。當(dāng)工程頁(yè)面中已使用了ScriptManager，那么在母版頁(yè)或用戶控件中就可以使用一個(gè)ScriptManagerProxy來(lái)代理ScripManager的工作。屬性上基本與ScriptManager控件一樣。
（3）UpdatePanel是使用最廣泛的Ajax控件，在頁(yè)面中嵌入U(xiǎn)pdatePanel，就可以實(shí)現(xiàn)頁(yè)面的局部刷新。頁(yè)面中可以有多個(gè)UpdatePanel，UpdataPanel之間也可以相互嵌套。（應(yīng)用重點(diǎn)）
Updatapanel就是實(shí)現(xiàn)頁(yè)面局部刷新的控件，UpdatePanel控件的前臺(tái)代碼如下所示：
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
內(nèi)容模板 放置內(nèi)容的區(qū)域
</ContentTemplate>
<Triggers> //設(shè)置提交服務(wù)器的方式：異步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指設(shè)置異步模式及controlID(引發(fā)更新的控件ID)和EventName（引發(fā)更新事件名稱(chēng)）
<asp:PostBackTrigger ControlID="" /> //指同步模式，一般不設(shè)置這個(gè)，可以不寫(xiě)這行代碼，因?yàn)閍jax實(shí)現(xiàn)的就是異步更新，同步就失去了意義！
</Triggers>
</asp:UpdatePanel>
重要屬性和事件：
ChildrenAsTriggers：當(dāng)UpdateMode屬性值為Conditional時(shí)，設(shè)定UpdatePanel中的子控件的異步請(qǐng)求服務(wù)器是否會(huì)引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解釋至前臺(tái)HTML代碼樣式，默認(rèn)值為Block即解釋為<div></div>，當(dāng)該屬性設(shè)置為Inline時(shí)，UpdatePanel被解釋為<span></span>
Triggers:設(shè)定觸發(fā)當(dāng)前UpdatePanel更新的控件和事件。（這個(gè)是重點(diǎn)）
UpdateMode:設(shè)定當(dāng)前UpdatePancl的更新模式：Always和Conditional。當(dāng)設(shè)定為Always時(shí)，UpdatePanel不管當(dāng)前是否存在Trigger都會(huì)更新。當(dāng)設(shè)定為Conditional時(shí)，只有當(dāng)前UpdatePancl設(shè)定了Trigger或ChildTrigger時(shí)，當(dāng)前UpdatePanel控件才會(huì)更新或提交頁(yè)面，或者當(dāng)服務(wù)器端調(diào)用Update()方法時(shí)才會(huì)更新UpdatePanel.
需要特別說(shuō)明的屬性和事件：
Trigger屬性：指示當(dāng)前UpdatePanel使用的提交服務(wù)器方式，有同步提交或異步提交兩種。同步提交只需要指定觸發(fā)提交的控件ID，同步提交將會(huì)提交整個(gè)頁(yè)面。異步提交需要設(shè)定觸發(fā)異步提交的控件ID和服務(wù)器端的事件。
頁(yè)面中多個(gè)UpdatePanel共存：當(dāng)頁(yè)面上有多個(gè)UpdatePanel共存時(shí)，需要設(shè)定頁(yè)面上所有的UpdatePanel控件的UpdateMode屬性為Conditional，否則只要任何一個(gè)UpdatePanel局部更新被觸發(fā)，將會(huì)更新所有頁(yè)面上的UpdatePanel。原因很簡(jiǎn)單，頁(yè)面上所有的UpdatePanel控件的UpdateMode默認(rèn)為Always。
多個(gè)UpdatePanel的嵌套使用：當(dāng)多個(gè)UpdatePanel控件嵌套使用時(shí)，處于并列的UpdatePanel更新時(shí)互不影響。但當(dāng)兩個(gè)UpdatePanel相互嵌套時(shí)，處于內(nèi)層的UpdatePanel局部更新時(shí)并不會(huì)影響到處層的UpdatePanel，但是外層的UpdatePanel局部更新時(shí)會(huì)更新所有嵌套在它內(nèi)部的UpdatePanel。
（4）顧名思義UpdateProgress執(zhí)行的是頁(yè)面局部刷新過(guò)程中的工作。UpdateProgress可以提供一個(gè)刷新過(guò)程中用戶狀態(tài)的友好信息，如向客戶提示“正在加載數(shù)據(jù)”等。
UpdateProgress控件前臺(tái)代碼非常簡(jiǎn)單，如下所示：
<asp:UpdateProgress runat="server" ID="upg1">
<ProgressTemplate> //模板
<div alige=”ecnter” style=”width:1100px”> //以下代碼是顯示的信息或圖片部分
<img src=”image/loading.gif” align=middle />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
重點(diǎn)屬性：
AssociatedUpdatePanelID:設(shè)定觸發(fā)UpdateProgress的UpdatePanel的ID，一般用于頁(yè)面中具有多個(gè)UpdatePanel的情況。
DisplayAfter:進(jìn)度信息顯示多少毫秒數(shù)。
DynamicLayout:布爾值屬性，設(shè)定當(dāng)前UpdateProgress是否動(dòng)態(tài)繪制，而不是直接解釋在前臺(tái)。
（5）在WinForm的開(kāi)發(fā)中，很多程序員都被Timer控件的功能所傾倒。Timer控件可以定期的觸發(fā)一些事件，比如提交整個(gè)頁(yè)面或刷新部分頁(yè)面等。
Timer控件的定義相當(dāng)簡(jiǎn)單，只需聲明控件即可，代碼如下所示：
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重點(diǎn)屬性：
Enabled：是否啟動(dòng)Timer控件，并觸發(fā)Tick事件。
Interval:Timer控件觸發(fā)Tick事件的間隔事件，單位ms.
Tick：Timer控件在設(shè)定Enabled屬性為true時(shí)，每隔Interval屬性限定的時(shí)間執(zhí)行事件。
提示：一般把Timer控件放置在UpdatePanel之處，不然局部更新時(shí)又會(huì)重新設(shè)置間隔時(shí)間。前臺(tái)代碼：
<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager>
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” >
</asp:Timer>
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate>
內(nèi)容模板 放置內(nèi)容的區(qū)域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
3、AJAX基本原理及案例代碼
AJAX技術(shù)：我的理解就是JavaScritp前后臺(tái)參數(shù)傳遞的技術(shù)，這里參數(shù)可以是參數(shù)值或數(shù)據(jù)流。學(xué)習(xí)AJAX基本原理，有助于對(duì)AJAX擴(kuò)展控件的應(yīng)用，是不可缺少的一部分。
下面列舉兩個(gè)AJAX最常用的方式，以便學(xué)習(xí)者體會(huì)AJAX應(yīng)用原理。如初學(xué)者對(duì)部分代碼不能理解，可以查找相關(guān)命令及資料！
應(yīng)用方式一：
在日常的ASP.NET Ajax實(shí)現(xiàn)中，這種方式是最簡(jiǎn)單的、最常用的開(kāi)發(fā)方式。這種方式典型的實(shí)現(xiàn)步驟如下所示：
創(chuàng)建XMLHttpRequest對(duì)象，請(qǐng)求特定的Ajax處理頁(yè)面。
Ajax處理頁(yè)面在Page_Load事件中，接收XMLHttpRequest對(duì)象的異步請(qǐng)求。
Ajax處理頁(yè)面根據(jù)請(qǐng)求內(nèi)容，做出相應(yīng)的回應(yīng)，回應(yīng)可以采用this.Response.Write或this.Response.OutPutStream將響應(yīng)文本或響應(yīng)的XML Document放入Response對(duì)象的方式。
前臺(tái)JavaScript腳本通過(guò)XMLHttpRequest對(duì)象的responseText或responseXml來(lái)接收服務(wù)器回應(yīng)，并動(dòng)態(tài)修改頁(yè)面內(nèi)容，從而實(shí)現(xiàn)Ajax異步無(wú)刷新應(yīng)用。
應(yīng)用方式二：
在ASP.NET 中，內(nèi)置了一種非常適合Ajax開(kāi)發(fā)的后臺(tái)處理方式即HttpHandler類(lèi)，實(shí)際上所有的HttpHandler類(lèi)都實(shí)現(xiàn)了IHttpHandler接口，用以進(jìn)行請(qǐng)求接收和回送響應(yīng)。
IHttpHandler這個(gè)接口提供了最基本的Web請(qǐng)求和Web響應(yīng)的封裝，可以將此接口看作是Web容器提供的基本的Web實(shí)現(xiàn)方式的封裝類(lèi)。
IHttpHandler接口具有一個(gè)方法：ProcessRequest(HttpContext context)，及一個(gè)布爾值屬性：IsReusable。所有實(shí)現(xiàn)IHttpHandler接口的類(lèi)都必須實(shí)現(xiàn)上述方法和屬性，其中ProcessRequest方法用于接收和處理請(qǐng)求以及發(fā)送響應(yīng)，而IsReusable指示其他請(qǐng)求是否可以使用IHttpHandler實(shí)例也就是說(shuō)后繼的Http請(qǐng)求是不是可以繼續(xù)使用實(shí)現(xiàn)了該接口的類(lèi)的實(shí)例，一般情況下設(shè)定為true。
應(yīng)用一案例代碼：
Default.aspx 文件代碼（只有前臺(tái)代碼，后臺(tái)無(wú)任何代碼）:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Ajax請(qǐng)求頁(yè)面</title>
<script type="text/javascript" language=javascript src="Ajax.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div align=center>
<div style="width:320px;height:150px" align=center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr width=300px>
<td>請(qǐng)輸入回傳至服務(wù)器的文本</td>
</tr>
<tr>
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td>
</tr>
<tr>
<td><input type=button runat=server id="btnRequest" value="發(fā)送請(qǐng)求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td>
</tr>
<tr>
<td>服務(wù)器處理后文本顯示如下</td>
</tr>
<tr>
<td>
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg">
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Ajax.js 文件代碼（createXmlHttp()函數(shù)部分很通用，可以在自己的應(yīng)用程序中不用修改而直接復(fù)制）：
var xmlHttp;
function createXmlHttp()
{
var activeKey=new Array("MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
if(window.ActiveXObject)
{
for(var i=0;i<activeKey.length;i++)
{
try
{
xmlHttp=new ActiveXObject(activeKey[i]);
if(xmlHttp!=null)
return xmlHttp;
}
catch(error)
{
continue;
}
}
throw new Error("客戶端瀏覽器版本過(guò)低，不支持XMLHttpRequest對(duì)象，請(qǐng)更新瀏覽器");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
function addUrlParameter(url,parameterName,parameterValue)
{
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當(dāng)前URL中是否存在? 即參數(shù)分隔符
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue);
return url;
}
function startRequest(customerStr)
{
xmlHttp=createXmlHttp();
xmlHttp.onreadystatechange=readyStateChangeHandler;
xmlHttp.open("GET",addUrlParameter("AjaxPage.aspx","customerInfo",customerStr),null);
xmlHttp.send(null);
}
function readyStateChangeHandler()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var str=xmlHttp.responseText;
var div=document.getElementById("divServerMsg");
div.innerHTML="<b>"+str+"</b>";
}
}
}
AjaxPage.aspx 文件代碼（前臺(tái)）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage.aspx.cs" Inherits="AjaxPage" %>
<!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 runat="server">
<title>無(wú)標(biāo)題頁(yè)</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
AjaxPage.aspx.cs 文件代碼（后臺(tái)）：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class AjaxPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = this.Request["customerInfo"].ToString();
string msg = "服務(wù)器獲得你的消息，時(shí)間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + this.Request.UserHostAddress;
this.Response.Write(msg);
this.Response.End();
}
}
應(yīng)用二案例代碼：
Default.aspx 文件代碼（同樣只有前臺(tái)代碼，后臺(tái)無(wú)任何代碼）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>Ajax請(qǐng)求頁(yè)面</title>
<script type="text/javascript" language=javascript src="Ajax.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div align=center>
<div style="width:320px;height:150px" align=center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr width=300px>
<td>請(qǐng)輸入回傳至服務(wù)器的文本</td>
</tr>
<tr>
<td><asp:TextBox runat="server" ID="txtCustomerInfo"></asp:TextBox></td>
</tr>
<tr>
<td><input type=button runat=server id="btnRequest" value="發(fā)送請(qǐng)求" onclick="startRequest(document.getElementById('txtCustomerInfo').value)" /></td>
</tr>
<tr>
<td>服務(wù)器處理后文本顯示如下</td>
</tr>
<tr>
<td>
<div style="width:100%;background-color:Yellow;color:black;height:48px" id="divServerMsg">
</div>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Ajax.js 文件代碼：
var xmlHttp;
function createXmlHttp()
{
var activeKey=new Array("MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
if(window.ActiveXObject)
{
for(var i=0;i<activeKey.length;i++)
{
try
{
xmlHttp=new ActiveXObject(activeKey[i]);
if(xmlHttp!=null)
return xmlHttp;
}
catch(error)
{
continue;
}
}
throw new Error("客戶端瀏覽器版本過(guò)低，不支持XMLHttpRequest對(duì)象，請(qǐng)更新瀏覽器");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
function addUrlParameter(url,parameterName,parameterValue)
{
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當(dāng)前URL中是否存在? 即參數(shù)分隔符
url+=encodeURIComponent(parameterName)+"="+encodeURIComponent(parameterValue);
return url;
}
function startRequest(customerStr)
{
xmlHttp=createXmlHttp();
xmlHttp.onreadystatechange=readyStateChangeHandler;
xmlHttp.open("GET",addUrlParameter("AjaxHandler.ashx","customerInfo",customerStr),null);
xmlHttp.send(null);
}
function readyStateChangeHandler()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var str=xmlHttp.responseText;
var div=document.getElementById("divServerMsg");
div.innerHTML="<b>"+str+"</b>";
}
}
}
AjaxHandler.ashx 文件代碼(ashx擴(kuò)展名屬于自定義的，在新建時(shí)選擇添加新項(xiàng)中的一般處理程序)：
<%@ WebHandler Language="C#" Class="AjaxHandler" %>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class AjaxHandler: IHttpHandler
{
public void ProcessRequest(System.Web.HttpContext context)
{
string str = context.Request["customerInfo"].ToString();
string msg = "服務(wù)器獲得你的消息，時(shí)間:" + DateTime.Now.ToShortTimeString() + "<br>你的消息為:" + str + "<br>你的地址:" + context.Request.UserHostAddress;
context.Response.Write(msg);
context.Response.End();
}
public bool IsReusable
{
get
{
return true;
}
}
}
4、ASP.NET AJAX Control Toolkit 擴(kuò)展控件的應(yīng)用
Ajax擴(kuò)展控件在VS2800中就有，但需要安裝一下。具體安裝方法見(jiàn)相關(guān)文章（我的博客中就有）。下面介紹其中兩個(gè)最讓人心動(dòng)的控件：AutoCompleteExtender控件（文本框自動(dòng)下拉列表查找控件）和CalendarExtender控件（選擇日期控件）
AutoCompleteExtender控件的使用：
使用AutoCompleteExtender控件為了實(shí)現(xiàn)自動(dòng)完成功能及動(dòng)態(tài)綁定數(shù)據(jù)，例如谷歌或百度搜索欄自動(dòng)查找列表效果。在后臺(tái)綁定數(shù)據(jù)庫(kù)中相應(yīng)的數(shù)據(jù)，如輸入拼音或輸簡(jiǎn)稱(chēng)后即可自動(dòng)查找全稱(chēng)，鼠標(biāo)點(diǎn)選實(shí)現(xiàn)快速錄入。
使用步驟如下：
第一步：在input.aspx窗體中添加一個(gè)TextBox控件，取名txtdep，添加擴(kuò)展程序并選取AutoCompleteExtender控件。
拖進(jìn)設(shè)計(jì)界面后代碼如下所示：
<asp:TextBox ID="txtdep" runat="server" ></asp:TextBox>
<cc1:AutoCompleteExtender ID="txtdep_AutoCompleteExtender" runat="server" EnableCaching="true" DelimiterCharacters="" Enabled="True" ServicePath=" " TargetControlID="txtdep" ></cc1:AutoCompleteExtender>
第二步：在Web.config文件中appSettings節(jié)添加數(shù)據(jù)庫(kù)連接字符串，為連接數(shù)據(jù)庫(kù)做準(zhǔn)備：
<appSettings>
<add key="ConnString" value="server=(local);uid=sa;pwd=;persist security info=False;initial catalog= demo;Max Pool Size=1000"/>
</appSettings>
其中，server為SQL服務(wù)器名稱(chēng)，案例為本地，uid、pwd為SQL Server用戶名和密碼，initial catalog為要連接的數(shù)據(jù)庫(kù)，，請(qǐng)根據(jù)實(shí)際情況填寫(xiě)。
第三步：建立Web服務(wù)（WebService）。要使用AutoCompleteExtender，我們要通過(guò)Web服務(wù)傳遞數(shù)據(jù)。在解決方案資源管理器單擊項(xiàng)目-〉添加新項(xiàng)-〉Web服務(wù)。這里使用了默認(rèn)的名稱(chēng)WebService.asmx。
WebService.asmx的代碼修改如下：
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Collections.Generic;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using AjaxControlToolkit;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//
若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。
[System.Web.Script.Services.ScriptService]//
必需，告訴.net runtime該WebService被允許從客戶端調(diào)用
public class WebService : System.Web.Services.WebService
{
public WebService () { }
//構(gòu)建Web服務(wù)的函數(shù)
[WebMethod]
public string[] getdepalist(string prefixText,int count)
{
//
連接數(shù)據(jù)庫(kù)
string sqlstr = System.Configuration.ConfigurationSettings.AppSettings["ConnString"];
SqlConnection sqlcon=new SqlConnection(sqlstr);
//
從數(shù)據(jù)庫(kù)中的表里用select語(yǔ)句返回查找結(jié)果
string mysql = "select Area_Full from ST_Area where Area_Full like" + "'" + prefixText + "%' or Area_Spell like" + "'" + prefixText + "%'" ;
//
使用SqlDataAdapter對(duì)控件進(jìn)行數(shù)據(jù)的填充
SqlDataAdapter da= new SqlDataAdapter(mysql, sqlcon);
DataSet ds=new DataSet();
if (count == 0)
{ count = 10;}
da.Fill(ds, "Depa_Full");
//List
是一個(gè)集合，根據(jù)特殊條件找到我們所需要的值
List<string> items = new List<string>(count);
for (int i = 1; i <= ds.Tables["Depa_Full"].Rows.Count; i++)
{
items.Add(ds.Tables["Depa_Full"].Rows[i - 1][0].ToString().Trim());
}
return items.ToArray();
}
}
第四步：設(shè)置AutoCompleteExtender控件，具體設(shè)置代碼如下：
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1"
ServicePath="WebService.asmx"
ServiceMethod="getdepalist "
MinimumPrefixLength="0">
</ajaxToolkit:AutoCompleteExtender>
其中，ServicePath是指Web服務(wù)的文件名。ServiceMethod是指調(diào)用Web服務(wù)的函數(shù)名。MinimumPrefixLength是指輸入多少個(gè)字符后開(kāi)始列出輸入提示列表。
CalendarExtender控件使用：
CalendarExtender控件的使用非常簡(jiǎn)單：
在Web窗體中添加ScriptManager控件，添加textbox，取名txtreptime，點(diǎn)擊“添加擴(kuò)展程序”，在彈出的“擴(kuò)展程序向?qū)?rdquo;對(duì)話框中選擇CalendarExtender控件，即可。Web窗體源頁(yè)面相應(yīng)代碼為：
<div><asp:ScriptManager ID="ScriptManager1" runat="server"
EnableScriptGlobalization="true"
></asp:ScriptManager></div>
<asp:TextBox ID="txtreptime" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="txtreptime_CalendarExtender" runat="server" Enabled="True"
Format="yyyy-MM-dd"
TargetControlID="txtreptime"> </cc1:CalendarExtender>
其中，EnableScriptGlobalization="true"自加，使控件顯示中文；Format="yyyy-MM-dd"自加，控制時(shí)間的格式。
以上是對(duì)兩個(gè)擴(kuò)展控件的案例的介紹，希望大家舉一反三，更好的在實(shí)踐中應(yīng)用！
在應(yīng)用中可能出現(xiàn)的問(wèn)題：如ASP.NET驗(yàn)證控件在自定義控件使用中，出現(xiàn)錯(cuò)誤，不能使用驗(yàn)證控件。為了避免錯(cuò)誤，完全可以采取Javastript腳本來(lái)驗(yàn)證（即RegExp對(duì)象，使用正則表達(dá)式）。
AJAX個(gè)人學(xué)習(xí)筆記到此，基本上算是結(jié)束了，有很多本人認(rèn)為不算重要的地方，沒(méi)有囊括其中，有興趣的朋友可以查閱相關(guān)資料和書(shū)籍。畢竟這只是一份學(xué)習(xí)筆記，側(cè)重點(diǎn)是突出重要知識(shí)點(diǎn)。
下面部分是選學(xué)部分，介紹AJAX 擴(kuò)展的34個(gè)服務(wù)器端控件，可學(xué)，也可不學(xué)！具體學(xué)習(xí)情況和效果，依據(jù)個(gè)人需要。
介紹Ajax Control Toolkit 34個(gè)服務(wù)器端控件 主要屬性及應(yīng)用(因博客字?jǐn)?shù)要求，我就不寫(xiě)了，詳細(xì)內(nèi)容見(jiàn)下面地址的文章)
http://blog.163.com/lxg_5027/blog/static/392125320098283543854/edit/?mode=prev
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
