前段时间一直在进行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架构技术的逐渐成熟,需要程序员做的事情越来越少了,简单控件的拖拽就可以实现异步调用。