Ajax实现简单用户名重名查询
很早就想发布这篇POST了，Ajax实现简单用户名重名查询，引用了xmlhttprequest object pool，如下：
?
/**
?* XMLHttpRequest Object Pool
?*
?* @author??? legend <legendsky@hotmail.com>
?* @link??????http://www.ugia.cn/?p=85
?* @Copyright?www.ugia.cn
?*/
var XMLHttp = {
??? _objPool: [],
??? _getInstance: function ()
??? {
??????? for (var i = 0; i < this._objPool.length; i ++)
??????? {
??????????? if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
??????????? {
??????????????? return this._objPool[i];
??????????? }
??????? }
??????? // IE5中不支持push方法
??????? this._objPool[this._objPool.length] = this._createObj();
??????? return this._objPool[this._objPool.length - 1];
??? },
??? _createObj: function ()
??? {
??????? if (window.XMLHttpRequest)
??????? {
??????????? var objXMLHttp = new XMLHttpRequest();
??????? }
??????? else
??????? {
??????????? var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
??????????? for(var n = 0; n < MSXML.length; n ++)
??????????? {
??????????????? try
??????????????? {
??????????????????? var objXMLHttp = new ActiveXObject(MSXML[n]);
??????????????????? break;
??????????????? }
??????????????? catch(e)
??????????????? {
??????????????? }
??????????? }
???????? }?????????
??????? // mozilla某些版本没有readyState属性
??????? if (objXMLHttp.readyState == null)
??????? {
??????????? objXMLHttp.readyState = 0;
??????????? objXMLHttp.addEventListener("load", function ()
??????????????? {
??????????????????? objXMLHttp.readyState = 4;
??????????????????? if (typeof objXMLHttp.onreadystatechange == "function")
??????????????????? {
??????????????????????? objXMLHttp.onreadystatechange();
??????????????????? }
??????????????? },? false);
??????? }
??????? return objXMLHttp;
??? },
??? // 发送请求(方法[post,get], 地址, 数据, 回调函数)
??? sendReq: function (method, url, data, callback)
??? {
??????? var objXMLHttp = this._getInstance();
??????? with(objXMLHttp)
??????? {
??????????? try
??????????? {
??????????????? // 加随机数防止缓存
??????????????? if (url.indexOf("?") > 0)
??????????????? {
??????????????????? url += "&randnum=" + Math.random();
??????????????? }
??????????????? else
??????????????? {
??????????????????? url += "?randnum=" + Math.random();
??????????????? }
??????????????? open(method, url, true);
??????????????? // 设定请求编码方式
??????????????? setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
??????????????? send(data);
??????????????? onreadystatechange = function ()
??????????????? {
??????????????????? if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
??????????????????? {
??????????????????????? callback(objXMLHttp);
??????????????????? }
??????????????? }
??????????? }
??????????? catch(e)
??????????? {
??????????????? alert(e);
??????????? }
??????? }
??? }
};?
ASPX:
?
?1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="THttpModule.Login" %>?
2??
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
4 <html xmlns="http://www.w3.org/1999/xhtml">?
5 <head runat="server">?
6???? <title>Login Page</title>?
7???? <style type="text/css" media="screen">?
8???????? @import url("http://www.taobao.com/home/css/tbsp/master/global_v3a.php?t=20080429.css");?
9???????? @import url("http://www.taobao.com/home/css/component.php?t=20080624.css");
10???????? @import url("http://www.taobao.com/home/css/component_ext.php?t=20080624.css");
11???????? @import url("http://www.taobao.com/home/css/sys/register060524.css?t=20080624.css");
12???? </style>
13???? <script src="js/xmlhttphelper.js" type="text/javascript"></script>
14???? <script language="javascript">
15???? <!-- Author PetterLiu?http://wintersun.cnblogs.com?-->
16???? var usernameCheckerTimer;
17 function CallbackSuccess(objXMLHttp) {
18??? var result = objXMLHttp.responseText;?
19??? document.getElementById("check_username_info").innerHTML = result;?
20??? alert(result);?
21??? }
22 function checkIsExist() {
23??? var uname = document.getElementById("username").value;?
24??? if (uname == "") {
25?????? return false;?
26?????? }
27??? var url = 'DataProvider.ashx';?
28??? var sdata = "username=" + uname;?
29??? XMLHttp.sendReq("post", url, sdata, CallbackSuccess);?
30??? }
31 function checkUsernameUsage() {
32??? clearTimeout(usernameCheckerTimer);?
33??? document.getElementById("check_username_info").innerHTML = "检测中，请稍等 ";?
34??? document.getElementById("check_username_info").className = "WarningMsg";?
35??? //delay time 750ms
36??? sernameCheckerTimer = setTimeout("checkIsExist();", 750);?
37??? }
38? </script>
39?
40 </head>
41 <body>
42???? <form id="form1" runat="server">
43???? <div style="width: 210px">
46???????? <input id="username" type="text" size="24" value="" />
47???????? <br />
48???????? <input type="button" name="check_username" value="检查用户名是否可用" onclick="checkUsernameUsage();" />
49???? </div>
50???? <div style="width: 360px">
51???????? <div id="username_info">
52???????? </div>
53???????? <div id="check_username_info">
54???????? </div>
55???? </div>
56???? </form>
57 </body>
58 </html>
59?
接收数据的httphandler
?1???? /// <summary>
?2???? /// Recevice Httphandler
?3???? /// <remarks>Author PetterLiu?http://wintersun.cnblogs.com</remarks>
?4???? /// </summary>
?5???? [WebService(Namespace = "http://tempuri.org/")]
?6???? [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
?7???? public class DataProvider : IHttpHandler
?8???? {
?9???????? /// <summary>
10???????? /// Process logic
11???????? /// </summary>
12???????? /// <param name="context">HttpContext</param>
13???????? public void ProcessRequest(HttpContext context)
14???????? {
15???????????? string username = context.Request.Form["username"];
16???????????? if (username == "petter")
17???????????????? context.Response.Write("用户名已存在。");
18???????????? else
19???????????????? context.Response.Write("恭喜你，你可以使用此用户名。");
20???????? }
21
22???????? public bool IsReusable
23???????? {
24???????????? get
25???????????? {
26???????????????? return false;
27???????????? }
28???????? }
29???? }
