揭開AJAX神秘的面紗(AJAX個人學習筆記)第3/5頁
更新時間：2009年09月18日 13:50:55 作者：
寫這個學習筆記，只是記載一下自己的學習經(jīng)過和體會，把一些學習重點記錄下來，以備今后的鞏固復習及應用，很多知識點沒有詳細介紹，所以并不完全適用于初學者，如果你是初學者，最好選擇一本AJAX學習的書籍，然后與這篇學習筆記對照學習，效果會更好。
應用二案例代碼：
Default.aspx 文件代碼（同樣只有前臺代碼，后臺無任何代碼）：
復制代碼 代碼如下:
<%@ 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>請輸入回傳至服務器的文本</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>服務器處理后文本顯示如下</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("客戶端瀏覽器版本過低，不支持XMLHttpRequest對象，請更新瀏覽器");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
function addUrlParameter(url,parameterName,parameterValue)
{
url+=(url.indexOf("?"))==-1 ? "?" : "&";//判斷當前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擴展名屬于自定義的，在新建時選擇添加新項中的一般處理程序)：
復制代碼 代碼如下:
<%@ 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 = "服務器獲得你的消息，時間:" + 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 擴展控件的應用
Ajax擴展控件在VS2800中就有，但需要安裝一下。具體安裝方法見相關文章（我的博客中就有）。下面介紹其中兩個最讓人心動的控件：AutoCompleteExtender控件（文本框自動下拉列表查找控件）和CalendarExtender控件（選擇日期控件）
AutoCompleteExtender控件的使用：
使用AutoCompleteExtender控件為了實現(xiàn)自動完成功能及動態(tài)綁定數(shù)據(jù)，例如谷歌或百度搜索欄自動查找列表效果。在后臺綁定數(shù)據(jù)庫中相應的數(shù)據(jù)，如輸入拼音或輸簡稱后即可自動查找全稱，鼠標點選實現(xiàn)快速錄入。
使用步驟如下：
第一步：在input.aspx窗體中添加一個TextBox控件，取名txtdep，添加擴展程序并選取AutoCompleteExtender控件。
拖進設計界面后代碼如下所示：
復制代碼 代碼如下:
<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ù)庫做準備：
復制代碼 代碼如下:
<appSettings>
<add key="ConnString" value="server=(local);uid=sa;pwd=;persist security info=False;initial catalog= demo;Max Pool Size=1000"/>
</appSettings>
其中，server為SQL服務器名稱，案例為本地，uid、pwd為SQL Server用戶名和密碼，initial catalog為要連接的數(shù)據(jù)庫，，請根據(jù)實際情況填寫。
第三步：建立Web服務（WebService）。要使用AutoCompleteExtender，我們要通過Web服務傳遞數(shù)據(jù)。在解決方案資源管理器單擊項目-〉添加新項-〉Web服務。這里使用了默認的名稱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 服務，請取消對下行的注釋。
[System.Web.Script.Services.ScriptService]//
必需，告訴.net runtime該WebService被允許從客戶端調(diào)用
復制代碼 代碼如下:
public class WebService : System.Web.Services.WebService
{
public WebService () { }
//構(gòu)建Web服務的函數(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對控件進行數(shù)據(jù)的填充
SqlDataAdapter da= new SqlDataAdapter(mysql, sqlcon);
DataSet ds=new DataSet();
if (count == 0)
{ count = 10;}
da.Fill(ds, "Depa_Full");
//List是一個集合，根據(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();
}
}
第四步：設置AutoCompleteExtender控件，具體設置代碼如下：
復制代碼 代碼如下:
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1"
ServicePath="WebService.asmx"
ServiceMethod="getdepalist "
MinimumPrefixLength="0">
</ajaxToolkit:AutoCompleteExtender>
其中，ServicePath是指Web服務的文件名。ServiceMethod是指調(diào)用Web服務的函數(shù)名。MinimumPrefixLength是指輸入多少個字符后開始列出輸入提示列表。
CalendarExtender控件使用：
CalendarExtender控件的使用非常簡單：
在Web窗體中添加ScriptManager控件，添加textbox，取名txtreptime，點擊“添加擴展程序”，在彈出的“擴展程序向?qū)А睂υ捒蛑羞x擇CalendarExtender控件，即可。Web窗體源頁面相應代碼為：
復制代碼 代碼如下:
<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"自加，控制時間的格式。
以上是對兩個擴展控件的案例的介紹，希望大家舉一反三，更好的在實踐中應用！
作者：星光科技 時間：2009年9月17日
注：寫這個學習筆記，只是記載一下自己的學習經(jīng)過和體會，把一些學習重點記錄下來，以備今后的鞏固復習及應用，很多知識點沒有詳細介紹，所以并不完全適用于初學者，如果你是初學者，最好選擇一本AJAX學習的書籍，然后與這篇學習筆記對照學習，效果會更好。
AJAX技術是多種計算機技術的結(jié)晶，它的名稱來自：Asynchronism(異步)、JavaScript、And、XML這4個單詞首字母，即異步JavaScript請求處理XML技術。簡單的描述就是數(shù)據(jù)異步傳輸網(wǎng)頁局部刷新的技術。AJAX很流行，WEB程序設計中如果不應用AJAX技術，可以說是不完善的設計。就好象黑白電視機與彩電一樣，AJAX就是后者，是一種技術更新的革命！
本人學習AJAX時間并不長，僅10余天，不能說百分之百掌握，但也有所領悟?，F(xiàn)在把自己的學習經(jīng)過和體會寫下來，與君共分享。
一、學習經(jīng)過：
AJAX技術的文章和書籍很多，視頻也不少，可以說是近兩年最熱的技術。但大多書籍介紹的全而不細，或是重點不突出，給人一種云山霧罩的感覺！這其中不乏清華大學等知名教授寫的書。本人就有此方面的親身體會，我先是下載了傳智播客ajax視頻教程，看了幾節(jié)就看不下去了，后來又買了一本AJAX技術的書，很厚的一本60元人民幣。也是天很熱，耐心看了八天實在看不下去了，感覺AJAX技術很深奧，無法真正領會，就放棄了，去登山、游泳、下海、和美眉聊天、游戲，過起較為靡爛的幸福生活。后來，天氣涼爽了，閑暇之余又想起AJAX這件事，于是就買來幾瓶冰鎮(zhèn)啤酒，幾袋小食品，一袋瓜子，在家里邊看邊飲，好生自在！沒有想到的是，這一看卻是一通百通，AJAX技術就這樣在一天時間里掌握了，而且還有自己對AJAX技術的獨到領悟：AJAX應用很簡單，完全可以不用編碼或少量編碼。
相關文章
這篇文章主要給大家介紹了如何解決AJAX請求中含有數(shù)組的問題，文中給出了詳細的示例代碼，相信對大家的理解和學習很有幫助，有需要的朋友們下面跟著小編一起來看看吧。2016-12-12
AJAX驗證數(shù)據(jù)庫內(nèi)容并將值顯示在頁面
光標離開文本框，在本頁面的相應地方獲取數(shù)據(jù)庫中改值所對應的其他數(shù)據(jù)，相應的實現(xiàn)代碼如下，感興趣的朋友可以看看2014-08-08
這個頁面注意是調(diào)用來自數(shù)據(jù)庫中的數(shù)據(jù)。2009-01-01
跨域問題是我們在開發(fā)中經(jīng)常會遇到的一個需求，下面這篇文章主要給大家介紹了關于ajax和jsonp跨域的原理本質(zhì)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
AJAXRequest v0.2...2006-12-12
在看文章前，先指定一個變量xhr，xhr代表ajax對象。測試瀏覽器：ie為ie6，firefox為2，其他的未測試。統(tǒng)稱ie6為ie，firefox2為ff。2011-01-01
這篇文章主要為大家詳細介紹了ajax實現(xiàn)輸入提示效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了AJAX對服務器返回XML的處理方法,實例分析了Ajax的實現(xiàn)技巧及針對XML返回數(shù)據(jù)的處理方法,需要的朋友可以參考下2015-03-03
選擇一部著作，會通過 Ajax 實時獲得相關的名字，一個簡單的不涉及服務器的Ajax實例,需要的朋友可以參考下2014-05-05
[紅色]Ajax Hacking...2006-11-11