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

更新時(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í)筆記對照學(xué)習(xí)，效果會(huì)更好。

應(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請求頁面</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>請輸入回傳至服務(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ā)送請求" 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對象，請更新瀏覽器"); 
} 
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; 
} 
} 
} 

3、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ù)庫中相應(yīng)的數(shù)據(jù)，如輸入拼音或輸簡稱后即可自動(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ù)庫連接字符串，為連接數(shù)據(jù)庫做準(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ù)庫，，請根據(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ù)，請取消對下行的注釋。
[System.Web.Script.Services.ScriptService]//
必需，告訴.net runtime該WebService被允許從客戶端調(diào)用

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

 
public class WebService : System.Web.Services.WebService 
　{ 
　　　　public WebService () {　　　　 } 
　　　 　//構(gòu)建Web服務(wù)的函數(shù) 
　　[WebMethod] 
　　　 public string[] getdepalist(string prefixText,int count) 
{ 
//連接數(shù)據(jù)庫 
　　　　　　　 string sqlstr = System.Configuration.ConfigurationSettings.AppSettings["ConnString"]; 
　　　　　 　　SqlConnection sqlcon=new SqlConnection(sqlstr); 
//從數(shù)據(jù)庫中的表里用select語句返回查找結(jié)果 
　　　　　　　 string mysql = "select Area_Full from ST_Area where Area_Full like" + "'" + prefixText + "%' or Area_Spell like" + "'" + prefixText + "%'" ; 
//使用SqlDataAdapter對控件進(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控件的使用非常簡單：
　　在Web窗體中添加ScriptManager控件，添加textbox，取名txtreptime，點(diǎn)擊“添加擴(kuò)展程序”，在彈出的“擴(kuò)展程序向?qū)А睂υ捒蛑羞x擇CalendarExtender控件，即可。Web窗體源頁面相應(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í)間的格式。

以上是對兩個(gè)擴(kuò)展控件的案例的介紹，希望大家舉一反三，更好的在實(shí)踐中應(yīng)用！

作者：星光科技時(shí)間：2009年9月17日
注：寫這個(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í)筆記對照學(xué)習(xí)，效果會(huì)更好。
AJAX技術(shù)是多種計(jì)算機(jī)技術(shù)的結(jié)晶，它的名稱來自：Asynchronism(異步)、JavaScript、And、XML這4個(gè)單詞首字母，即異步JavaScript請求處理XML技術(shù)。簡單的描述就是數(shù)據(jù)異步傳輸網(wǎng)頁局部刷新的技術(shù)。AJAX很流行，WEB程序設(shè)計(jì)中如果不應(yīng)用AJAX技術(shù)，可以說是不完善的設(shè)計(jì)。就好象黑白電視機(jī)與彩電一樣，AJAX就是后者，是一種技術(shù)更新的革命！
本人學(xué)習(xí)AJAX時(shí)間并不長，僅10余天，不能說百分之百掌握，但也有所領(lǐng)悟?，F(xiàn)在把自己的學(xué)習(xí)經(jīng)過和體會(huì)寫下來，與君共分享。
一、學(xué)習(xí)經(jīng)過：
AJAX技術(shù)的文章和書籍很多，視頻也不少，可以說是近兩年最熱的技術(shù)。但大多書籍介紹的全而不細(xì)，或是重點(diǎn)不突出，給人一種云山霧罩的感覺！這其中不乏清華大學(xué)等知名教授寫的書。本人就有此方面的親身體會(huì)，我先是下載了傳智播客ajax視頻教程，看了幾節(jié)就看不下去了，后來又買了一本AJAX技術(shù)的書，很厚的一本60元人民幣。也是天很熱，耐心看了八天實(shí)在看不下去了，感覺AJAX技術(shù)很深?yuàn)W，無法真正領(lǐng)會(huì)，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過起較為靡爛的幸福生活。后來，天氣涼爽了，閑暇之余又想起AJAX這件事，于是就買來幾瓶冰鎮(zhèn)啤酒，幾袋小食品，一袋瓜子，在家里邊看邊飲，好生自在！沒有想到的是，這一看卻是一通百通，AJAX技術(shù)就這樣在一天時(shí)間里掌握了，而且還有自己對AJAX技術(shù)的獨(dú)到領(lǐng)悟：AJAX應(yīng)用很簡單，完全可以不用編碼或少量編碼。

您可能感興趣的文章: