1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > asp.net ajax检查用户名是否存在代码

asp.net ajax检查用户名是否存在代码

时间:2019-10-10 12:10:30

相关推荐

asp.net ajax检查用户名是否存在代码

原文 ajax检查用户名是否存在代码

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

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

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");提示:在下一章,我们将使用 XMLHttpRequest 对象从服务器取回 XML 信息。

代码如下:

01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03.<html xmlns="/1999/xhtml" >

04.<head runat="server">

05. <title>无标题页</title>

06. <script type="text/网页特效"><!--

07. var xmlHttp=null;

08.

09. 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').innerText='正在检查,请稍候...';

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').innerText=res;

58.

59. if(res=='恭喜,用户名可以使用。')

60. {

61. setTimeout("document.getElementById('resultSpan').innerText='';",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" οnblur="openAjax();" /> <span id="resultSpan"></span>

75. </form>

76.</body>

77.</html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="/1999/xhtml" >

<head runat="server">

<title>无标题页</title>

<script type="text/javascript"><!--

var xmlHttp=null;

function createXMLHttpRequest()

{

if(xmlHttp == null){

if(window.XMLHttpRequest) {

//Mozilla 浏览器

xmlHttp = new XMLHttpRequest();

}else if(window.ActiveXObject) {

// IE浏览器

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

//alert('创建失败');

}

}

}

}

}

function openAjax()

{

if( xmlHttp == null)

{

createXMLHttpRequest();

if( xmlHttp == null)

{

//alert('出错');

return ;

}

}

var val=document.getElementById('txt').value;

xmlHttp.open("get","VerifyUserNameHandler.ashx?para="+val+"&date="+new Date(),true);

xmlHttp.onreadystatechange=xmlHttpChange;

xmlHttp.send(null);

document.getElementById('resultSpan').innerText='正在检查,请稍候...';

}

function xmlHttpChange()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

var res=xmlHttp.responseText;

document.getElementById('resultSpan').innerText=res;

if(res=='恭喜,用户名可以使用。')

{

setTimeout("document.getElementById('resultSpan').innerText='';",2000);

}

else if(res=='抱歉,用户名已被使用。')

{

document.getElementById('txt').focus();

}

}

}

}

// --></script>

</head>

<body>

<form id="form1" runat="server">

用户名:<input type="text" id='txt' value="Sandy" οnblur="openAjax();" /> <span id="resultSpan"></span>

</form>

</body>

</html>

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

代码如下:

view plaincopy to clipboardprint?

01.<%@ WebHandler Language="C#" class="VerifyUserNameHandler" %>

02.using System;

03.using System.Web;

04.using System.Collections;

05.using System.Collections.Generic;

06.public class VerifyUserNameHandler : IHttpHandler {

07.

08. public void ProcessRequest (HttpContext context) {

09. //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.}

<%@ WebHandler Language="C#" class="VerifyUserNameHandler" %>

using System;

using System.Web;

using System.Collections;

using System.Collections.Generic;

public class VerifyUserNameHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

//context.Response.ContentType = "text/plain";

string _name = context.Request.QueryString["para"];

_name = string.IsNullOrEmpty(_name) ? "" : _name;

System.Threading.Thread.Sleep(3000);//用线程来模拟数据库查询工作

string[] Names = new string[] { "Sandy", "阿非", "abc" };//这里用Names数组来代替数据库中的结果集

if (Array.IndexOf<string>(Names, _name) == -1)

{

context.Response.Write("恭喜,用户名可以使用。");

}

else

{

context.Response.Write("抱歉,用户名已被使用。");

}

}

public bool IsReusable {

get {

return false;

}

}

}

到这里程序已经完成。

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。