现在的位置: 首页 > 综合 > 正文

XMLHttpRequest实现无刷新验证用户名

2012年07月05日 ⁄ 综合 ⁄ 共 4035字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 在用户注册时，我们经常需要检查用户名是否存在，本文就是实现无刷新验证用户名

打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx

代码如下：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title>无标题页</title>  
  6.     <script type="text/javascript"><!--  
  7.     var xmlHttp=null;       
  8.          
  9.         function createXMLHttpRequest()  
  10.         {  
  11.             if(xmlHttp == null){  
  12.                 if(window.XMLHttpRequest) {  
  13.                     //Mozilla 浏览器  
  14.                     xmlHttp = new XMLHttpRequest();  
  15.                 }else if(window.ActiveXObject) {  
  16.                     // IE浏览器  
  17.                     try {  
  18.                         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
  19.                     } catch (e) {  
  20.                         try {  
  21.                             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  22.                         } catch (e) {  
  23.                             //alert('创建失败');  
  24.                         }  
  25.                     }  
  26.                 }  
  27.             }  
  28.         }  
  29.         function openAjax()  
  30.         {    
  31.             if( xmlHttp == null)  
  32.             {                 
  33.                 createXMLHttpRequest();   
  34.                 if( xmlHttp == null)  
  35.                 {  
  36.                     //alert('出错');  
  37.                     return ;  
  38.                 }  
  39.             }                         
  40.              
  41.             var val=document.getElementById('txt').value;             
  42.                           
  43.             xmlHttp.open("get","VerifyUserNameHandler.ashx?para="+val+"&date="+new Date(),true);              
  44.             xmlHttp.onreadystatechange=xmlHttpChange;  
  45.             xmlHttp.send(null);  
  46.              
  47.             document.getElementById('resultSpan').innerHTML='正在检查,请稍候...';  
  48.         }  
  49.          
  50.         function xmlHttpChange()  
  51.         {          
  52.             if(xmlHttp.readyState==4)  
  53.             {                              
  54.                 if(xmlHttp.status==200)  
  55.                 {           
  56.                     var res=xmlHttp.responseText;                           
  57.                     document.getElementById('resultSpan').innerHTML=res;  
  58.                      
  59.                     if(res=='恭喜，用户名可以使用。')  
  60.                     {  
  61.                         setTimeout("document.getElementById('resultSpan').innerHTML='';",2000);  
  62.                     }  
  63.                     else if(res=='抱歉，用户名已被使用。')  
  64.                     {  
  65.                         document.getElementById('txt').focus();  
  66.                     }  
  67.                 }  
  68.             }  
  69.         }        
  70. // --></script>  
  71. </head>  
  72. <body>  
  73.     <form id="form1" runat="server">         
  74.     用户名:<input type="text" id='txt' value="Sandy" onblur="openAjax();" />  <span id="resultSpan"></span>  
  75.     </form>  
  76. </body>  
  77. </html>  

 

然后新建一个一般处理程序，命名为 VerifyUserNameHandler.ashx

代码如下：

  1. <%@ WebHandler Language="C#" Class="VerifyUserNameHandler" %>  
  2. using System;  
  3. using System.Web;  
  4. using System.Collections;  
  5. using System.Collections.Generic;  
  6. public class VerifyUserNameHandler : IHttpHandler {  
  7.      
  8.     public void ProcessRequest (HttpContext context) {  
  9.         //context.Response.ContentType = "text/plain";  
  10.         string _name = context.Request.QueryString["para"];  
  11.         _name = string.IsNullOrEmpty(_name) ? "" : _name;             
  12.         System.Threading.Thread.Sleep(3000);//用线程来模拟数据库查询工作  
  13.         string[] Names = new string[] { "Sandy", "阿非", "abc" };//这里用Names数组来代替数据库中的结果集  
  14.         if (Array.IndexOf<string>(Names, _name) == -1)  
  15.         {  
  16.             context.Response.Write("恭喜，用户名可以使用。");  
  17.         }  
  18.         else  
  19.         {  
  20.             context.Response.Write("抱歉，用户名已被使用。");  
  21.         }  
  22.     }  
  23.    
  24.     public bool IsReusable {  
  25.         get {  
  26.             return false;  
  27.         }  
  28.     }  
  29. }  

 

到这里程序已经完成。

主要是利用了XMLHttpRequest对象采用异步的方式去访问服务器，获得响应后触发定义好的回调函数

本文是XMLHttpRequest对象异步方式对服务器发送Get方式的请求，访问服务器的文件为.ashx

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞