AjaxAjax实现简单用户名重名询问

      
很已经想昭示这篇POST了,Ajax实现简单用户名重名询问,引用了xmlhttprequest
object pool,如下:

Ajax 1Ajax 2XMLHttpRequest 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"&gt;
 4 <html xmlns=”http://www.w3.org/1999/xhtml"&gt;
 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 = “检测中,请稍等Ajax 3“; 
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 class=”Hint”>
44         用户名:</div>
45     <div class=”Input” 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 class=”Info” 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&lt;/remarks&gt;
 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     }

 

相关文章