揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)

更新時(shí)間：2009年09月18日 13:50:55 作者：

寫這個(gè)學(xué)習(xí)筆記，只是記載一下自己的學(xué)習(xí)經(jīng)過和體會(huì)，把一些學(xué)習(xí)重點(diǎn)記錄下來，以備今后的鞏固復(fù)習(xí)及應(yīng)用，很多知識(shí)點(diǎn)沒有詳細(xì)介紹，所以并不完全適用于初學(xué)者，如果你是初學(xué)者，最好選擇一本AJAX學(xué)習(xí)的書籍，然后與這篇學(xué)習(xí)筆記對(duì)照學(xué)習(xí)，效果會(huì)更好。

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)單的、最常用的開發(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腳本通過XMLHttpRequest對(duì)象的responseText或responseXml來接收服務(wù)器回應(yīng)，并動(dòng)態(tài)修改頁(yè)面內(nèi)容，從而實(shí)現(xiàn)Ajax異步無刷新應(yīng)用。

應(yīng)用方式二：
在ASP.NET 中，內(nèi)置了一種非常適合Ajax開發(fā)的后臺(tái)處理方式即HttpHandler類，實(shí)際上所有的HttpHandler類都實(shí)現(xiàn)了IHttpHandler接口，用以進(jìn)行請(qǐng)求接收和回送響應(yīng)。
IHttpHandler這個(gè)接口提供了最基本的Web請(qǐng)求和Web響應(yīng)的封裝，可以將此接口看作是Web容器提供的基本的Web實(shí)現(xiàn)方式的封裝類。
IHttpHandler接口具有一個(gè)方法：ProcessRequest(HttpContext context)，及一個(gè)布爾值屬性：IsReusable。所有實(shí)現(xiàn)IHttpHandler接口的類都必須實(shí)現(xiàn)上述方法和屬性，其中ProcessRequest方法用于接收和處理請(qǐng)求以及發(fā)送響應(yīng)，而IsReusable指示其他請(qǐng)求是否可以使用IHttpHandler實(shí)例也就是說后繼的Http請(qǐng)求是不是可以繼續(xù)使用實(shí)現(xiàn)了該接口的類的實(shí)例，一般情況下設(shè)定為true。

應(yīng)用一案例代碼：
Default.aspx 文件代碼（只有前臺(tái)代碼，后臺(tái)無任何代碼）:

復(fù)制代碼代碼如下:

 
<%@ 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ù)制）：

復(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("客戶端瀏覽器版本過低，不支持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)）：

復(fù)制代碼代碼如下:

 
<%@ 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>無標(biāo)題頁(yè)</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 

</div> 
</form> 
</body> 
</html> 

AjaxPage.aspx.cs 文件代碼（后臺(tái)）：

復(fù)制代碼代碼如下:

 
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)無任何代碼）：

復(fù)制代碼代碼如下:

 
<%@ 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 文件代碼：

復(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("客戶端瀏覽器版本過低，不支持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)中的一般處理程序)：

復(fù)制代碼代碼如下:

 
<%@ 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中就有，但需要安裝一下。具體安裝方法見相關(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)稱后即可自動(dòng)查找全稱，鼠標(biāo)點(diǎn)選實(shí)現(xiàn)快速錄入。
使用步驟如下：
　　第一步：在input.aspx窗體中添加一個(gè)TextBox控件，取名txtdep，添加擴(kuò)展程序并選取AutoCompleteExtender控件。
　　拖進(jìn)設(shè)計(jì)界面后代碼如下所示：

復(fù)制代碼代碼如下:

 
<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)備：

復(fù)制代碼代碼如下:

 
<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ù)器名稱，案例為本地，uid、pwd為SQL Server用戶名和密碼，initial catalog為要連接的數(shù)據(jù)庫(kù)，，請(qǐng)根據(jù)實(shí)際情況填寫。
　　第三步：建立Web服務(wù)（WebService）。要使用AutoCompleteExtender，我們要通過Web服務(wù)傳遞數(shù)據(jù)。在解決方案資源管理器單擊項(xiàng)目-〉添加新項(xiàng)-〉Web服務(wù)。這里使用了默認(rèn)的名稱WebService.asmx。
　WebService.asmx的代碼修改如下：

復(fù)制代碼代碼如下:

 
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è)置代碼如下：

復(fù)制代碼代碼如下:

 
<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è)字符后開始列出輸入提示列表。

CalendarExtender控件使用：
CalendarExtender控件的使用非常簡(jiǎn)單：
　　在Web窗體中添加ScriptManager控件，添加textbox，取名txtreptime，點(diǎn)擊“添加擴(kuò)展程序”，在彈出的“擴(kuò)展程序向?qū)А睂?duì)話框中選擇CalendarExtender控件，即可。Web窗體源頁(yè)面相應(yīng)代碼為：

復(fù)制代碼代碼如下:

 
<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)的問題：如ASP.NET驗(yàn)證控件在自定義控件使用中，出現(xiàn)錯(cuò)誤，不能使用驗(yàn)證控件。為了避免錯(cuò)誤，完全可以采取Javastript腳本來驗(yàn)證（即RegExp對(duì)象，使用正則表達(dá)式）。

AJAX個(gè)人學(xué)習(xí)筆記到此，基本上算是結(jié)束了，有很多本人認(rèn)為不算重要的地方，沒有囊括其中，有興趣的朋友可以查閱相關(guān)資料和書籍。畢竟這只是一份學(xué)習(xí)筆記，側(cè)重點(diǎn)是突出重要知識(shí)點(diǎn)。
介紹Ajax Control Toolkit 34個(gè)服務(wù)器端控件主要屬性及應(yīng)用可以查看下一篇文章。

您可能感興趣的文章: