ASP.NET上实现AJAX注册提醒 _ASP

ASP.NET下实现AJAX注册提醒

Ajax全称是，主要是利用JavaScript实现异步的数据传输，首先说异步，异步是当前操作进行的时候，用户可以进行别的工作，拿最典型的注册来说，用户在填完用户名之后，网站将用户名发回服务器进行判断当前用户名是否存在的时候，用户可以继续往下填写其他信息，在用户进行其他工作的时候，服务器就将判断结果发回到浏览器了，这样用户不用等，大大的提高了用户的体验。

Ajax传输数据有很多中方式XML是一中，其他比如直接传字符串，html页面，也可以传CVS（用符号分割数据，然后读取的时候根据符号将数据分隔开），或者是Json数据格式，Json有点像实体，用来封装数据，然后传输数据的时候传的是Json对象。

下面是ajax实现注册用户名时提示的一个实例，如果没在VS里实现过ajax的读者可以跟着我一步一步的往下做：

首先在vs里建立一个web页面，添加两个框（用户名、密码），添加一个按钮（注册）；html代码页在文本框后面添加 <span>标签（这个页没有后台的C#代码），

代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxDemon.aspx.cs" Inherits="WebDevelop.ajaxDemon" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>注册信息</title>
    <link href="css/register.css" rel="stylesheet" type="text/css" />
    <script src="js/ulties.js" type="text/javascript"></script>
    <script src="js/register.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="register">
            <p>
                <asp:label runat="server" text="用户名　"></asp:label><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><span id="remind"></span>
            </p>

            <p> 
                <asp:Label ID="Label1" runat="server" Text="真实姓名"></asp:Label><asp:TextBox ID="txtTeacherName" runat="server"></asp:TextBox>
            </p>

            <p>
                <asp:Label ID="Label2" runat="server" Text="密　码　"></asp:Label><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
            </p>

            <asp:Button ID="btnRegister" runat="server"  Text="注册" />

        </div>
    </form>
</body>
</html>

接下来创建ulties.js文件：

function createRequest() {
    try {
        //创建XMLHttpRequest对象，适合非IE
        request = new XMLHttpRequest();
    } catch (tryMS) {
        try {
            //创建请求对象，适合高版本IE
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (otherMS) {
            try {
                //创建请求对象，适合低版本
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                request = null;
            }
        }
    }
    return request;

}

//页面加载时执行iniPage函数
window.onload = initPage;

function initPage() {
    //将checkUserName函数绑定到txtUserName控件的onblur方法
    document.getElementById("txtUserName").onblur = checkUserName;
}



function checkUserName() {
    //获得注册的用户名
    var userName = document.getElementById("txtUserName").value;
    if (userName == "") {
        return;
    }
    //创建请求对象
    userNameRequest = createRequest();
    if (userNameRequest == null) {
        alert("未成功创建请求对象");
    }
    else {
        //去掉用户名中可能包含的空格
        var username = escape(userName);
        //使用get方式传值时，需要将参数写入到url中
        var url = "AjaxUserNameCheck.aspx?username=" + username;
        //设置服务器响应时的回调函数
        userNameRequest.onreadystatechange = showUserNameStatus;
        //建立请求，Get表示使用get方法传递URL，true表示异步传输
        userNameRequest.open("GET", url, true);
        //发送请求：open方法中，使用get时send的参数为null,使用post时要传递的参数
        userNameRequest.send(null);

    }
}
//请求对象的回调函数，服务器有回应时调用
function showUserNameStatus() {
    //服务器状态
    if (userNameRequest.readyState == 4)
        if (userNameRequest.status == 200) {
            //向id为remind的标签中写入传回的内容
            document.getElementById("remind").innerHTML = userNameRequest.responseText;
        }
}

建立另一个web页，作为服务器端，在后台Page_Load事件中代码文件中写入如下代码：

	    //获取客户端传来的用户名
            string username = Request["username"].ToString();
            //判断用户名是否被占用，这里可以换成从数据库查询的结果
            if (username=="xqf")
            {
                
                Response.Clear();
                //回复客户端
                Response.Write("该用户名以被占用");
                Response.End();
            }
            else
            {
                Response.Clear();
                Response.Write("该用户名尚未被占用");
                Response.End();
            }

现在整个应用就构件好了（没有付CSS文件的内容，样式读者可随便定义）。执行一下网页，结果如下：

1楼lfmilaoshi5天前 10:57: 初步学习，积累。。。。