使用AjaxPro实现无刷新数据检测

使用AjaxPro实现无刷新数据检测

Ajax（Asynchronous JavaScript and XML，异步JavaScript 和XML）的应用，可以创建更好、更快、以及交互性更强的 Web 应用程序。利用AjaxPro可以轻松创建Ajax应用。本文主要总结一下AjaxPro的使用步骤，并实现Ajax无刷新检测数据的简单功能。

在传统方式中，用户注册的时候，常常需要用户填写完整个表单，再提交给服务器。当系统检测该用户名已存在，便返回提示用户，并需要重新填写整个表单，用户体验很不好。

而使用Ajax技术，在用户注册过程中，当用户输入了想注册的用户名后，鼠标离开编辑框，系统就检测该用户名是否存在，并立即提示用户该用户名是否可用。现在的网站基本都采取了这种方法，避免传统方式的弊端，提升用户体验。如图所示，163邮箱的注册界面。

我要实现的是一个添加单词的功能，当鼠标离开单词输入框时，检测单词数据库中是否已存在该单词，并给出相应提示。（同用户注册原理一致）。

1、获取AjaxPro

AjaxPro是免费的Ajax类库，官网是ajaxpro.info，现在搬到了微软的开源托管网站CodePlex上，即ajaxpro.codeplex.com。

当前***版为9.2.17.1，单击Download，下载完成后，解压9.2.17.1_DLL.zip，得到如图所示的五个文件。我们将使用AjaxPro.2.dll和web.config配置文件。

2、添加引用

为项目添加AjaxPro的引用。右键项目下的“引用”目录，添加引用，浏览找到AjaxPro.2.dll，确定。

3、配置web.config

为网站的web.config添加AjaxPro的配置信息，主要添加三部分内容（具体代码参考AjaxPro压缩包中的web.config文件）。

1）在webconfig —— —— 节点下，添加如下代码：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2"
  
  
  
  
    requirePermission="false"
  
  
  
  
    restartOnExternalChanges="true"
  
  
  
  
/>
  
  
  
  

  
  
  
  

 
 
 
 

2）在webconfig —— 节点下，添加ajaxNet节点，即如下代码：

3）在webconfig —— 节点下，添加location节点，即如下代码：

4、注册AjaxPro

导入AjaxPro命名空间，并在Page_Load事件处理中添加AjaxPro注册代码。

 
 
 
 

  
  
  
  
using System; 
  
  
  
  
using System.Collections.Generic; 
  
  
  
  
using System.Linq; 
  
  
  
  
using System.Web; 
  
  
  
  
using System.Web.UI; 
  
  
  
  
using System.Web.UI.WebControls; 
  
  
  
  
using AjaxPro; 
  
  
  
  

  
  
  
  
namespace HujiangDict.Admin 
  
  
  
  
{ 
  
  
  
  
    public partial class Addword : System.Web.UI.Page 
  
  
  
  
    { 
  
  
  
  
        protected void Page_Load(object sender, EventArgs e) 
  
  
  
  
        { 
  
  
  
  
            //注册AjaxPro，我的页面是Addword.aspx，typeof中的类名就是Addword 
  
  
  
  
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Addword), this); 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
}
 
 
 
 

5、编写前台代码及客户端方法

关键点是TextBox的onblur事件处理，调用的是 JS函数 checkWord()。（我在这里添加了ASP.NET验证控件和客户端字符验证的JS函数，可以不考虑）

 
 
 
 

  
  
  
  

  
  
  
  
    单 词
  
  
  
  
        onkeypress="return JudgeChar(event.keyCode)">
  
  
  
  
            
  
  
  
  
                ErrorMessage="请输入单词" class="message">