揭开AJAX神秘的面纱(AJAX个人学习笔记)第3/5页

更新时间：2009年09月18日 13:50:55 作者：

写这个学习笔记，只是记载一下自己的学习经过和体会，把一些学习重点记录下来，以备今后的巩固复习及应用，很多知识点没有详细介绍，所以并不完全适用于初学者，如果你是初学者，最好选择一本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="发送请求" 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中是否存在? 即参数分隔符 
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控件为了实现自动完成功能及动态绑定数据，例如谷歌或百度搜索栏自动查找列表效果。在后台绑定数据库中相应的数据，如输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入。
使用步骤如下：
　　第一步：在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节添加数据库连接字符串，为连接数据库做准备：

复制代码代码如下:

 
<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为要连接的数据库，，请根据实际情况填写。
　　第三步：建立Web服务（WebService）。要使用AutoCompleteExtender，我们要通过Web服务传递数据。在解决方案资源管理器单击项目-〉添加新项-〉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 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]//
必需，告诉.net runtime该WebService被允许从客户端调用

复制代码代码如下:

 
public class WebService : System.Web.Services.WebService 
　{ 
　　　　public WebService () {　　　　 } 
　　　 　//构建Web服务的函数 
　　[WebMethod] 
　　　 public string[] getdepalist(string prefixText,int count) 
{ 
//连接数据库 
　　　　　　　 string sqlstr = System.Configuration.ConfigurationSettings.AppSettings["ConnString"]; 
　　　　　 　　SqlConnection sqlcon=new SqlConnection(sqlstr); 
//从数据库中的表里用select语句返回查找结果 
　　　　　　　 string mysql = "select Area_Full from ST_Area where Area_Full like" + "'" + prefixText + "%' or Area_Spell like" + "'" + prefixText + "%'" ; 
//使用SqlDataAdapter对控件进行数据的填充 
　　　　　　　 SqlDataAdapter da= new SqlDataAdapter(mysql, sqlcon); 
　　　　　　　 DataSet ds=new DataSet(); 
　　　　　　　 if (count == 0) 
　　　　　　　 { count = 10;} 
　　　　　　　 da.Fill(ds, "Depa_Full"); 
//List是一个集合，根据特殊条件找到我们所需要的值 
　　　　　　　 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是指调用Web服务的函数名。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表。

CalendarExtender控件使用：
CalendarExtender控件的使用非常简单：
　　在Web窗体中添加ScriptManager控件，添加textbox，取名txtreptime，点击“添加扩展程序”，在弹出的“扩展程序向导”对话框中选择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日
注：写这个学习笔记，只是记载一下自己的学习经过和体会，把一些学习重点记录下来，以备今后的巩固复习及应用，很多知识点没有详细介绍，所以并不完全适用于初学者，如果你是初学者，最好选择一本AJAX学习的书籍，然后与这篇学习笔记对照学习，效果会更好。
AJAX技术是多种计算机技术的结晶，它的名称来自：Asynchronism(异步)、JavaScript、And、XML这4个单词首字母，即异步JavaScript请求处理XML技术。简单的描述就是数据异步传输网页局部刷新的技术。AJAX很流行，WEB程序设计中如果不应用AJAX技术，可以说是不完善的设计。就好象黑白电视机与彩电一样，AJAX就是后者，是一种技术更新的革命！
本人学习AJAX时间并不长，仅10余天，不能说百分之百掌握，但也有所领悟。现在把自己的学习经过和体会写下来，与君共分享。
一、学习经过：
AJAX技术的文章和书籍很多，视频也不少，可以说是近两年最热的技术。但大多书籍介绍的全而不细，或是重点不突出，给人一种云山雾罩的感觉！这其中不乏清华大学等知名教授写的书。本人就有此方面的亲身体会，我先是下载了传智播客ajax视频教程，看了几节就看不下去了，后来又买了一本AJAX技术的书，很厚的一本60元人民币。也是天很热，耐心看了八天实在看不下去了，感觉AJAX技术很深奥，无法真正领会，就放弃了，去登山、游泳、下海、和美眉聊天、游戏，过起较为靡烂的幸福生活。后来，天气凉爽了，闲暇之余又想起AJAX这件事，于是就买来几瓶冰镇啤酒，几袋小食品，一袋瓜子，在家里边看边饮，好生自在！没有想到的是，这一看却是一通百通，AJAX技术就这样在一天时间里掌握了，而且还有自己对AJAX技术的独到领悟：AJAX应用很简单，完全可以不用编码或少量编码。

您可能感兴趣的文章:

解决AJAX请求中含有数组的办法
这篇文章主要给大家介绍了如何解决AJAX请求中含有数组的问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，有需要的朋友们下面跟着小编一起来看看吧。
2016-12-12
AJAX验证数据库内容并将值显示在页面
光标离开文本框，在本页面的相应地方获取数据库中改值所对应的其他数据，相应的实现代码如下，感兴趣的朋友可以看看
2014-08-08
ASP AJAX 静态分页
这个页面注意是调用来自数据库中的数据。
2009-01-01
ajax和jsonp跨域的原理本质详解
跨域问题是我们在开发中经常会遇到的一个需求，下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
AJAXRequest v0.2
AJAXRequest v0.2...
2006-12-12
ajax问题总结比较全
在看文章前，先指定一个变量xhr，xhr代表ajax对象。测试浏览器：ie为ie6，firefox为2，其他的未测试。统称ie6为ie，firefox2为ff。
2011-01-01
ajax实现输入提示效果
这篇文章主要为大家详细介绍了ajax实现输入提示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
AJAX对服务器返回XML的处理方法
这篇文章主要介绍了AJAX对服务器返回XML的处理方法,实例分析了Ajax的实现技巧及针对XML返回数据的处理方法,需要的朋友可以参考下
2015-03-03
Ajax获得站点文件内容实例不涉及服务器
选择一部著作，会通过 Ajax 实时获得相关的名字，一个简单的不涉及服务器的Ajax实例,需要的朋友可以参考下
2014-05-05
Ajax Hacking
[红色]Ajax Hacking...
2006-11-11