使用AjaxPro實(shí)現(xiàn)無(wú)刷新數(shù)據(jù)檢測(cè)

Ajax（Asynchronous JavaScript and XML，異步JavaScript 和XML）的應(yīng)用，可以創(chuàng)建更好、更快、以及交互性更強(qiáng)的 Web 應(yīng)用程序。利用AjaxPro可以輕松創(chuàng)建Ajax應(yīng)用。本文主要總結(jié)一下AjaxPro的使用步驟，并實(shí)現(xiàn)Ajax無(wú)刷新檢測(cè)數(shù)據(jù)的簡(jiǎn)單功能。

在傳統(tǒng)方式中，用戶注冊(cè)的時(shí)候，常常需要用戶填寫完整個(gè)表單，再提交給服務(wù)器。當(dāng)系統(tǒng)檢測(cè)該用戶名已存在，便返回提示用戶，并需要重新填寫整個(gè)表單，用戶體驗(yàn)很不好。

而使用Ajax技術(shù)，在用戶注冊(cè)過(guò)程中，當(dāng)用戶輸入了想注冊(cè)的用戶名后，鼠標(biāo)離開編輯框，系統(tǒng)就檢測(cè)該用戶名是否存在，并立即提示用戶該用戶名是否可用?，F(xiàn)在的網(wǎng)站基本都采取了這種方法，避免傳統(tǒng)方式的弊端，提升用戶體驗(yàn)。如圖所示，163郵箱的注冊(cè)界面。

我要實(shí)現(xiàn)的是一個(gè)添加單詞的功能，當(dāng)鼠標(biāo)離開單詞輸入框時(shí)，檢測(cè)單詞數(shù)據(jù)庫(kù)中是否已存在該單詞，并給出相應(yīng)提示。（同用戶注冊(cè)原理一致）。

1、獲取AjaxPro

AjaxPro是免費(fèi)的Ajax類庫(kù)，官網(wǎng)是ajaxpro.info，現(xiàn)在搬到了微軟的開源托管網(wǎng)站CodePlex上，即ajaxpro.codeplex.com。

當(dāng)前***版為9.2.17.1，單擊Download，下載完成后，解壓9.2.17.1_DLL.zip，得到如圖所示的五個(gè)文件。我們將使用AjaxPro.2.dll和web.config配置文件。

2、添加引用

為項(xiàng)目添加AjaxPro的引用。右鍵項(xiàng)目下的“引用”目錄，添加引用，瀏覽找到AjaxPro.2.dll，確定。

3、配置web.config

為網(wǎng)站的web.config添加AjaxPro的配置信息，主要添加三部分內(nèi)容（具體代碼參考AjaxPro壓縮包中的web.config文件）。

1）在webconfig —— <configuration> —— <configSections>節(jié)點(diǎn)下，添加如下代碼：

<!--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>節(jié)點(diǎn)下，添加ajaxNet節(jié)點(diǎn)，即如下代碼：

<!--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.  
              
            <scriptReplacements> 
                <file name="prototype" path="~/ajaxpro/prototype.ashx" /> 
                <file name="core" path="~/ajaxpro/core.ashx" /> 
                <file name="converter" path="~/ajaxpro/converter.ashx" /> 
            </scriptReplacements> 
        --> 
 
    <!-- <encryption cryptType="" keyType="" /> --> 
 
    <!--  
            Set the enabled attribute to true to enable the use of an Ajax.NET Professional  
            token. This will send a token to the client that will be used to identify if the  
            requests comes from the same PC.  
        --> 
    <token enabled="false" sitePassword="password" /> 
 
    <!--  
            The oldStyle (or now configuration) section can be used to enable old styled JavaScript code or  
            functions that are not used any more. Some of them cannot be used together.  
              
            <configuration> 
                <renderNotASPAJAXDateTime/> 
                <objectExtendPrototype/> 
                <appCodeQualifiedFullName/> 
                <allowNumberBooleanAsString/> 
                <sessionStateDefaultNone/> 
                <includeMsPrototype/> 
                <renderDateTimeAsString/> 
                <noUtcTime/> 
                <renderJsonCompliant/> 
                <useSimpleObjectNaming/> 
            </configuration> 
        --> 
 
  </ajaxSettings> 
</ajaxNet> 

3）在webconfig —— <configuration>節(jié)點(diǎn)下，添加location節(jié)點(diǎn)，即如下代碼：

<!--Ajax配置信息 C--> 
<location path="ajaxpro"> 
  <system.web> 
    <httpHandlers> 
      <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> 
    </httpHandlers> 
    <!--  
    If you need to have Ajax.NET Professional methods running on the  
    login page you may have to enable your own authorization configuration  
    here.  
--> 
    <!--  
<authorization> 
    <deny users="?"/> 
</authorization> 
--> 
  </system.web> 
</location> 

4、注冊(cè)AjaxPro

導(dǎo)入AjaxPro命名空間，并在Page_Load事件處理中添加AjaxPro注冊(cè)代碼。

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)  
        {  
            //注冊(cè)AjaxPro，我的頁(yè)面是Addword.aspx，typeof中的類名就是Addword  
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Addword), this);  
        }  
    }  
} 

5、編寫前臺(tái)代碼及客戶端方法

關(guān)鍵點(diǎn)是TextBox的onblur事件處理，調(diào)用的是 JS函數(shù) checkWord()。（我在這里添加了ASP.NET驗(yàn)證控件和客戶端字符驗(yàn)證的JS函數(shù)，可以不考慮）

<div class="title"> 
    單 詞<asp:TextBox class="input_word" onblur="checkWord()" runat="server" ID="tb_word" 
        onkeypress="return JudgeChar(event.keyCode)"></asp:TextBox><span class="message"> 
            <asp:RequiredFieldValidator ID="word_message" ControlToValidate="tb_word" runat="server" 
                ErrorMessage="請(qǐng)輸入單詞" class="message"></asp:RequiredFieldValidator> 
        </span> 
</div> 

JS函數(shù)，checkWord()，用于同后臺(tái)異步通信。該函數(shù)將服務(wù)器返回的結(jié)果，設(shè)置為id=msg消息框div的InnerHTML，即填充div，顯示出驗(yàn)證信息。

<!--Ajax檢查單詞是否存在--> 
<script type="text/javascript" language="javascript"> 
    function checkWord() {  
        var word = document.getElementById('tb_word').value;  
        if (word != '') {  
            var result = HujiangDict.Admin.Addword.CheckWord(word).value;  
            document.getElementById('msg').innerHTML = result;  
        }  
    }  
 
</script> 

6、編寫服務(wù)端Ajax方法

后臺(tái)Ajax方法，要加上[AjaxMethod]標(biāo)記，這是提供給前臺(tái)JS調(diào)用的方法。該方法類型為string類型，這里返回的結(jié)果是一段html，及顯示驗(yàn)證結(jié)果的消息框。

/// <summary> 
/// AjAx方法 檢查單詞是否存在  
/// </summary> 
/// <param name="word"></param> 
/// <returns></returns> 
[AjaxMethod]  
public string CheckWord(string word)  
{  
    string result;  
    WordHelper wordHelper = new WordHelper();  
    //如果檢測(cè)數(shù)據(jù)庫(kù)中存在該單詞  
    if (wordHelper.ExistsWord(word))  
    {  
        result = "<div style=\"background:#FFEBEB;border:solid 1px red;margin:10px 0;border-radius:6px;padding:0 20px\">" +  
                            "詞庫(kù)中已存在單詞 <strong>"+word+"</strong>，您可以到 <a href=\"#\">單詞管理</a> 中編輯該單詞。</div>";  
    }  
    else  
    {  
        result = "<div style=\"background:#BEFFD1;border:solid 1px green;margin:10px 0;border-radius:6px;padding:0 20px\">" +  
                            "數(shù)據(jù)庫(kù)中尚無(wú)該單詞 <strong>"+word+"</strong>，可以添加！^_^</div>";  
    }  
    return result;  
}  

運(yùn)行結(jié)果

添加一個(gè)單詞庫(kù)中不存在的單詞，鼠標(biāo)離開編輯框時(shí)，提示“可以添加”。

添加單詞庫(kù)中已存在的單詞home時(shí)，提示“已存在”。

原文鏈接：http://www.cnblogs.com/libaoheng/archive/2012/04/10/2440573.html

【編輯推薦】

1. 使用jQuery實(shí)現(xiàn)ASP.NETGridView折疊伸展效果
2. ASP.NET顯示漸變圖片
3. .NET MVVM設(shè)計(jì)模式簡(jiǎn)介
4. 為什么我不再做.NET開發(fā)
5. 詳細(xì)解讀ASP.NET的異步