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