ASP.NET下实现AJAX注册提醒
Ajax全称是，主要是利用JavaScript实现异步的数据传输，首先说异步，异步是当前操作进行的时候，用户可以进行别的工作，拿最典型的注册来说，用户在填完用户名之后，网站将用户名发回服务器进行判断当前用户名是否存在的时候，用户可以继续往下填写其他信息，在用户进行其他工作的时候，服务器就将判断结果发回到浏览器了，这样用户不用等，大大的提高了用户的体验。
Ajax传输数据有很多中方式XML是一中，其他比如直接传字符串，html页面，也可以传CVS（用符号分割数据，然后读取的时候根据符号将数据分隔开），或者是Json数据格式，Json有点像实体，用来封装数据，然后传输数据的时候传的是Json对象。
下面是ajax实现注册用户名时提示的一个实例，如果没在VS里实现过ajax的读者可以跟着我一步一步的往下做：
首先在vs里建立一个web页面，添加两个框（用户名、密码），添加一个按钮（注册）；html代码页在文本框后面添加 <span>标签（这个页没有后台的C#代码），
register.css为样式文件，ulties.js封装了创建请求对象（ajax中用户传递客户端发出的请求）的方法，register.js封装了剩余的js代码
代码如下
<%@ 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;}
register.js文件中的代码：
//页面加载时执行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文件的内容，样式读者可随便定义）。执行一下网页，结果如下：
