ajax初步尝试

前段时间一直在进行ajax方面的学习，最近用在了项目中，也算小爽一把。 在自己做的项目中，其中的一个小模块是用户注册，在注册是需要多次遍历数据库来判断是否有重复的记录，数据访问量非常大，所以想把这些验证工作放在客户端来实现。

首先，添加ajax引用，将ajax.dll添加近来，然后在web.config中配置下，

<httpHandlers>
        <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
  </httpHandlers>

加上这个节点，下面是写ajax方法，为客户端调用做准备。为了方便管理单独放在一个类里面了。

 

using System;
using System.Data;
using System.Configuration;
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;

using Ucar.AppraiserClub.BLL;
using Ucar.AppraiserClub.Model;
using Ucar.Common;

public class AjaxServer
...{
    public AjaxServer()
    ...{
    }
    [Ajax.AjaxMethod()]
    public bool UserExists(string userName)
    ...{
        return UcarEstimater.Exists("loginName", userName);
    }
    [Ajax.AjaxMethod()]
    public bool CheckEmail(string email)
    ...{
        return UcarEstimater.Exists("email", email);
    }
    [Ajax.AjaxMethod()]
    public bool CheckUserID(string idcard)
    ...{
        return UcarEstimater.Exists("idCard", idcard);
    }

}

然后在页面类里面注册ajax方法，

 ---PageLoad事件#region---PageLoad事件
    protected void Page_Load(object sender, EventArgs e)
    ...{
        //Ajax.NET注册服务器端映射类
        Ajax.Utility.RegisterTypeForAjax(typeof(AjaxServer));
        ImageButton1.Attributes.Add("onclick", "javascript:return checkvalid();");
    }
    #endregion

最后一步是在页面中异步调用，同样也是为了方便，把js方法放在了一个单独的文件了

// JScript 文件
var state = false;
    function checkUserName()...{        
   
        if(document.getElementById("ctl00$ContentPlaceHolder1$txtUserName").value=="") ...{
            document.getElementById("ctl00_ContentPlaceHolder1_Label1").innerText="用户名不能为空！";
            document.getElementById("ctl00$ContentPlaceHolder1$txtUserName").focus();
            return;
       }
       AjaxServer.UserExists(document.getElementById("ctl00$ContentPlaceHolder1$txtUserName").value,checkUserNameResult);
    }    
    function checkUserNameResult(response)...{             
     
        if (response.error != null)...{ 
            alert(response.error); return; 
        }  
        if(response.value==true)...{
       
            document.getElementById("ctl00_ContentPlaceHolder1_Label1").innerText="对不起，该用户名已经存在！";
            state = true;
        }
        else
        ...{
           document.getElementById("ctl00_ContentPlaceHolder1_Label1").innerText="";
            state=false;
            }
    }
     function checkEmail()...{        
   
        if(document.getElementById("ctl00$ContentPlaceHolder1$txtemail").value == "") ...{
            document.getElementById("ctl00_ContentPlaceHolder1_Label2").innerText="email不能为空！";
            return;
       }
        
       AjaxServer.CheckEmail(document.getElementById("ctl00$ContentPlaceHolder1$txtemail").value,checkUserNameResult2);
    }    
    function checkUserNameResult2(response)...{             
     
        if (response.error != null)...{ 
            alert(response.error); return; 
        }  
        if(response.value==true)...{
       
            document.getElementById("ctl00_ContentPlaceHolder1_Label2").innerText="对不起，email已经存在！";
            state = true;
        }
        else
        ...{
           document.getElementById("ctl00_ContentPlaceHolder1_Label2").innerText="OK";
            state=false;
            }
    }
     function checkIdCard()...{        
   
        if(document.getElementById("ctl00$ContentPlaceHolder1$txtIdCard").value=="") ...{
            document.getElementById("ctl00_ContentPlaceHolder1_Label3").innerText="身份证不能为空！";
            return;
       }
        
       AjaxServer.CheckUserID(document.getElementById("ctl00$ContentPlaceHolder1$txtIdCard").value,checkUserNameResult1);
    }    
    function checkUserNameResult1(response)...{             
     
        if (response.error != null)...{ 
            alert(response.error); return; 
        }  
        if(response.value==true)...{
       
            document.getElementById("ctl00_ContentPlaceHolder1_Label3").innerText="对不起，身份证已经存在！";
            state = true;
        }
        else
        ...{
           document.getElementById("ctl00_ContentPlaceHolder1_Label3").innerText="OK";
            state=false;
            }
    }
    function checkvalid()
    ...{
        if(state)
        ...{
            alert('您填写的某些选项被别人占用！');
            return false;
        }
        return true;
    }

调用

 <input id="txtUserName" runat="server" maxlength="20" onblur="javascript:checkUserName()"
                                                style="width: 143px" type="text" />

在此不在叙述了。。。

初次使用ajax技术感觉是很爽，由于javascript基础较薄弱，所以写的js方法也十分麻烦，随着ajax架构技术的逐渐成熟，需要程序员做的事情越来越少了，简单控件的拖拽就可以实现异步调用。