本例供新手参考。

    功能说明:当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示【不可用】,否则,提示【可用】。

    必备知识:HTML、JavaScript、C#、ADO.NET,另外就是如何创建AJAX请求对象、使用open()和send()方法以及readyState、status、onreadystatechange、responseText的含义和用法。

    本例共用到2个页面:UserReg.aspx—用户注册页面(其实完全可以用静态页面)和 CheckUserName.aspx—把输入的用户名提交到这里验证。

    UserReg.aspx前台代码:

 

AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_02
 1AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_03<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserReg.aspx.cs" Inherits="UserReg" %>
 2AJAX实例一:用AJAX验证注册用户名是否可用_职场_06
 3AJAX实例一:用AJAX验证注册用户名是否可用_职场_06<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4AJAX实例一:用AJAX验证注册用户名是否可用_职场_06<html xmlns="http://www.w3.org/1999/xhtml">
 5AJAX实例一:用AJAX验证注册用户名是否可用_职场_06<head runat="server">
 6AJAX实例一:用AJAX验证注册用户名是否可用_职场_06    <title>无标题页</title>
 7AJAX实例一:用AJAX验证注册用户名是否可用_职场_06
 8AJAX实例一:用AJAX验证注册用户名是否可用_职场_12    <script language="javascript" type="text/javascript">
 9AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15    <!--
10AJAX实例一:用AJAX验证注册用户名是否可用_ajax_16    function CheckUserName(userName){
11AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15        var xmlhttp;
12AJAX实例一:用AJAX验证注册用户名是否可用_职场_20        try{
13AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
14AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24        }

15AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_25        catch(e){
16AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_28            try{
17AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
18AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24            }

19AJAX实例一:用AJAX验证注册用户名是否可用_ajax_33            catch(e){
20AJAX实例一:用AJAX验证注册用户名是否可用_ajax_36                try{
21AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                    xmlhttp = new XMLHttpRequest();
22AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24                }

23AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                catch(e)
24AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_42                {}
25AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24            }

26AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24        }

27AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15        
28AJAX实例一:用AJAX验证注册用户名是否可用_ajax_48        xmlhttp.onreadystatechange=function(){
29AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_51            if(xmlhttp.readyState == 4){
30AJAX实例一:用AJAX验证注册用户名是否可用_ajax_54                if(xmlhttp.status == 200){
31AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                    var showMes = document.getElementById("showMes");
32AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                
33AJAX实例一:用AJAX验证注册用户名是否可用_ajax_59                    if(xmlhttp.responseText == "1"){
34AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                        showMes.innerHTML="不可用";
35AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24                    }

36AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_64                    else{
37AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                        showMes.innerHTML= "可用";
38AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24                    }

39AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24                }

40AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24            }

41AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            
42AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24        }

43AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15        xmlhttp.open("get","CheckUserName.aspx?userName="+escape(userName));
44AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15        xmlhttp.send(null);
45AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24    }

46AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15    
47AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15    //-->
48AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_78    
</script>
49AJAX实例一:用AJAX验证注册用户名是否可用_职场_06
50AJAX实例一:用AJAX验证注册用户名是否可用_职场_06</head>
51AJAX实例一:用AJAX验证注册用户名是否可用_职场_06<body>
52AJAX实例一:用AJAX验证注册用户名是否可用_职场_06    <form id="form1" runat="server">
53AJAX实例一:用AJAX验证注册用户名是否可用_职场_06    <div>
54AJAX实例一:用AJAX验证注册用户名是否可用_职场_06        用户名<asp:TextBox ID="txtUserName" runat="server" onblur="CheckUserName(this.value);"></asp:TextBox>
55AJAX实例一:用AJAX验证注册用户名是否可用_职场_06        <span id="showMes"></span>
56AJAX实例一:用AJAX验证注册用户名是否可用_职场_06        <br />
57AJAX实例一:用AJAX验证注册用户名是否可用_职场_06        密&nbsp;&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
58AJAX实例一:用AJAX验证注册用户名是否可用_职场_06    </div>
59AJAX实例一:用AJAX验证注册用户名是否可用_职场_06    </form>
60AJAX实例一:用AJAX验证注册用户名是否可用_职场_06</body>
61AJAX实例一:用AJAX验证注册用户名是否可用_职场_06</html>
62AJAX实例一:用AJAX验证注册用户名是否可用_职场_06

 

    UserReg.aspx后台代码:无

    

     CheckUserName.aspx前台代码(把其他的HTML代码都清除,只留这一行):

    

AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_94
1AJAX实例一:用AJAX验证注册用户名是否可用_休闲_95<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUserName.aspx.cs" Inherits="CheckUserName" %>
2AJAX实例一:用AJAX验证注册用户名是否可用_职场_06

 

     CheckUserName.aspx后台代码:

   

AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_100
 1AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System;
 2AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Collections;
 3AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Configuration;
 4AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Data;
 5AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Linq;
 6AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web;
 7AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web.Security;
 8AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web.UI;
 9AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web.UI.HtmlControls;
10AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web.UI.WebControls;
11AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Web.UI.WebControls.WebParts;
12AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Xml.Linq;
13AJAX实例一:用AJAX验证注册用户名是否可用_职场_06using System.Data.SqlClient;
14AJAX实例一:用AJAX验证注册用户名是否可用_职场_06
15AJAX实例一:用AJAX验证注册用户名是否可用_职场_06public partial class CheckUserName : System.Web.UI.Page
16AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_116{
17AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15    protected void Page_Load(object sender, EventArgs e)
18AJAX实例一:用AJAX验证注册用户名是否可用_休闲_120    {
19AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15        using (SqlConnection conn = new SqlConnection(
20AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            System.Configuration.ConfigurationManager.AppSettings["ConnStr"]))
21AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_125        {
22AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            SqlCommand cmd = new SqlCommand();
23AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            cmd.Connection = conn;
24AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            cmd.CommandText = string.Format(
25AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                "Select Count(*) From PUsers Where UserName='{0}'",
26AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                Request.QueryString["userName"]);
27AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            conn.Open();
28AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            if (int.Parse(cmd.ExecuteScalar().ToString()) == 1)
29AJAX实例一:用AJAX验证注册用户名是否可用_ajax_135            {
30AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                Response.Write("1");
31AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24            }

32AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15            else
33AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_141            {
34AJAX实例一:用AJAX验证注册用户名是否可用_验证用户名_15                Response.Write("2");
35AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24            }

36AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24        }

37AJAX实例一:用AJAX验证注册用户名是否可用_ajax_24    }

38AJAX实例一:用AJAX验证注册用户名是否可用_xmlhttprequest_78}

39AJAX实例一:用AJAX验证注册用户名是否可用_职场_06

摘自:http://www.cnblogs.com/Ferry/archive/2008/12/24/1361435.html