揭开AJAX神秘的面纱(AJAX个人学习笔记)

3、AJAX基本原理及案例代码
AJAX技术：我的理解就是JavaScritp前后台参数传递的技术，这里参数可以是参数值或数据流。学习AJAX基本原理，有助于对AJAX扩展控件的应用，是不可缺少的一部分。
下面列举两个AJAX最常用的方式，以便学习者体会AJAX应用原理。如初学者对部分代码不能理解，可以查找相关命令及资料！
应用方式一：
在日常的ASP.NET Ajax实现中，这种方式是最简单的、最常用的开发方式。这种方式典型的实现步骤如下所示：
创建XMLHttpRequest对象，请求特定的Ajax处理页面。
Ajax处理页面在Page_Load事件中，接收XMLHttpRequest对象的异步请求。
Ajax处理页面根据请求内容，做出相应的回应，回应可以采用this.Response.Write或this.Response.OutPutStream将响应文本或响应的XML Document放入Response对象的方式。
前台JavaScript脚本通过XMLHttpRequest对象的responseText或responseXml来接收服务器回应，并动态修改页面内容，从而实现Ajax异步无刷新应用。

应用方式二：
在ASP.NET 中，内置了一种非常适合Ajax开发的后台处理方式即HttpHandler类，实际上所有的HttpHandler类都实现了IHttpHandler接口，用以进行请求接收和回送响应。
IHttpHandler这个接口提供了最基本的Web请求和Web响应的封装，可以将此接口看作是Web容器提供的基本的Web实现方式的封装类。
IHttpHandler接口具有一个方法：ProcessRequest(HttpContext context)，及一个布尔值属性：IsReusable。所有实现IHttpHandler接口的类都必须实现上述方法和属性，其中ProcessRequest方法用于接收和处理请求以及发送响应，而IsReusable指示其他请求是否可以使用IHttpHandler实例也就是说后继的Http请求是不是可以继续使用实现了该接口的类的实例，一般情况下设定为true。

应用一案例代码：
Default.aspx 文件代码（只有前台代码，后台无任何代码）:

Ajax.js 文件代码（createXmlHttp()函数部分很通用，可以在自己的应用程序中不用修改而直接复制）：

AjaxPage.aspx 文件代码（前台）：

AjaxPage.aspx.cs 文件代码（后台）：


应用二案例代码：
Default.aspx 文件代码（同样只有前台代码，后台无任何代码）：

Ajax.js 文件代码：

AjaxHandler.ashx 文件代码(ashx扩展名属于自定义的，在新建时选择添加新项中的一般处理程序)：

4、ASP.NET AJAX Control Toolkit 扩展控件的应用
Ajax扩展控件在VS2800中就有，但需要安装一下。具体安装方法见相关文章（我的博客中就有）。下面介绍其中两个最让人心动的控件：AutoCompleteExtender控件（文本框自动下拉列表查找控件）和CalendarExtender控件（选择日期控件）

AutoCompleteExtender控件的使用：
　　 使用AutoCompleteExtender控件为了实现自动完成功能及动态绑定数据，例如谷歌或百度搜索栏自动查找列表效果。在后台绑定数据库中相应的数据，如输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入。
使用步骤如下：
　　第一步：在input.aspx窗体中添加一个TextBox控件，取名txtdep，添加扩展程序并选取AutoCompleteExtender控件。
　　拖进设计界面后代码如下所示：
　
第二步：在Web.config文件中appSettings节添加数据库连接字符串，为连接数据库做准备：

其中，server为SQL服务器名称，案例为本地，uid、pwd为SQL Server用户名和密码，initial catalog为要连接的数据库，，请根据实际情况填写。
　　第三步：建立Web服务（WebService）。要使用AutoCompleteExtender，我们要通过Web服务传递数据。在解决方案资源管理器单击项目-〉添加新项-〉Web服务。这里使用了默认的名称WebService.asmx。
　WebService.asmx的代码修改如下：

　第四步：设置AutoCompleteExtender控件，具体设置代码如下：

　　其中，ServicePath是指Web服务的文件名。ServiceMethod是指调用Web服务的函数名。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表。

CalendarExtender控件使用：
CalendarExtender控件的使用非常简单：
　　在Web窗体中添加ScriptManager控件，添加textbox，取名txtreptime，点击“添加扩展程序”，在弹出的“扩展程序向导”对话框中选择CalendarExtender控件，即可。Web窗体源页面相应代码为：

其中，EnableScriptGlobalization="true"自加，使控件显示中文；Format="yyyy-MM-dd"自加，控制时间的格式。

以上是对两个扩展控件的案例的介绍，希望大家举一反三，更好的在实践中应用！

在应用中可能出现的问题：如ASP.NET验证控件在自定义控件使用中，出现错误，不能使用验证控件。为了避免错误，完全可以采取Javastript脚本来验证（即RegExp对象，使用正则表达式）。

AJAX个人学习笔记到此，基本上算是结束了，有很多本人认为不算重要的地方，没有囊括其中，有兴趣的朋友可以查阅相关资料和书籍。毕竟这只是一份学习笔记，侧重点是突出重要知识点。
介绍Ajax Control Toolkit 34个服务器端控件 主要属性及应用 可以查看下一篇文章。

最新评论