当前位置:编程学习 > 网站相关 >>

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

前  言

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

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

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

 \

\

 

Ajax的实现方式,通常可以分为以下三种:

    1、利用纯粹的JavaScript实现;

    2、利用微软自带的Ajax控件库实现;

    3、利用第三方类库实现,如AjaxPro;

    这里介绍第三种方法,使用AjaxPro实现无刷新数据检测。

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

 \


\



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配置文件。

图像 8

 

2、添加引用

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

 图像 11


图像 9



3、配置web.config
    为网站的web.config添加AjaxPro的配置信息,主要添加三部分内容(具体代码参考AjaxPro压缩包中的web.config文件)。
    1)在webconfig —— <configuration> —— <configSections>节点下,添加如下代码:
<!--Ajax配置信息 A-->
<sectionGroup name="ajaxNet">

  <!--
If you are using Microsoft .NET 1.1 please remove the two attributes
requirePermission and restartOnExternalChanges, they are only supported
with .NET 2.0.
-->
  <section name="ajaxSettings"
    type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2"
    requirePermission="false"
    restartOnExternalChanges="true"
/>

</sectionGroup>
   2)在webconfig —— <configuration>节点下,添加ajaxNet节点,即如下代码:
<!--Ajax配置信息 B-->
<ajaxNet>
  <ajaxSettings>

    <urlNamespaceMappings useAssemblyQualifiedName="false" allowListOnly="false">
      <!--
                Set the attribute useAssemblyQualifiedName to true to enable
                use of assemblies placed in the GAC by using the full assembly
                qualified name.
               
                To hide internal knowledge of assemblies, classes and namespace
                you can override the name of the virtual http endpoints.
                   
                <add type="Namespace.Class1,Assembly" path="mypath" />
            -->
    </urlNamespaceMappings>

    <jsonConverters includeTypeProperty="true">
      <!--
                This section can be used to add new IJavaScriptConverters to the
                Ajax.NET Professional engine. If you want to disable built-in
                converters you can use the remove tag.
           
                <remove type="Namespace.Class1,Assembly"/>
                <add type="Namespace.Class2,Assembly"/>
                   
                <add type="AjaxPro.BitmapConverter,AjaxPro.2" mimeType="image/jpeg" quality="100"/>
            -->
    </jsonConverters>

    <!--
            Set the enabled attribute to true to get Stack, TargetSize and Source
            information if an exception has been thrown.
        -->
    <debug enabled="false" />

    <!--
            This is the default configuration used with Ajax.NET Professional. You
            can put there your static JavaScript files, or remove the path attribute
            to completly disable the files.
           
     &nbs

补充:Web开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,