ASP tutorial. NET AJAX Check the existence of the user name code
User registration, we often need to check whether the user name exists, this article is to implement the No Refresh authentication user name
Open the development Environment VS 2005, create a new project (or open an existing project), create a new Web form, and name it default.aspx
Creating XMLHttpRequest Objects
All modern browsers (ie7+, Firefox, Chrome, Safari, and Opera) have built XMLHttpRequest objects.
With a single line of JavaScript code, we can create XMLHttpRequest objects.
To create the syntax for a XMLHttpRequest object:
Xmlhttp=new XMLHttpRequest (); Older versions of Internet Explorer (IE5 and IE6) use ActiveX objects:
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP"); hint: In the next chapter, we will retrieve the XML information from the server using the XMLHttpRequest object.
The code is as follows:
01.<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
02.<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
03.<html xmlns= "http://www.w3.org/1999/xhtml" >
04.<head runat= "Server" >
<title> Untitled Page </title>
<script type= "text/web Effects" ><!--
Modified Var xmlhttp=null;
08.
function Createxmlhttprequest ()
10. {
One. if (xmlHttp = null) {
An. if window. XMLHttpRequest) {
//mozilla Browser
XmlHttp = new XMLHttpRequest ();
}else if (window. ActiveXObject) {
//IE Browser
try {
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {
//alert (' Create failure ');
24.}
25.}
26.}
27.}
28.}
function OpenAjax ()
30. {
if (xmlHttp = null)
32. {
Createxmlhttprequest ();
if (xmlHttp = null)
35. {
//alert (' error ');
The return of Panax Notoginseng;
38.}
39.}
40.
var val=document.getelementbyid (' txt '). Value;
42.
Xmlhttp.open ("Get", "verifyusernamehandler.ashx?para=" +val+ "&date=" +new date (), true);
Xmlhttp.onreadystatechange=xmlhttpchange;
Xmlhttp.send (NULL);
46.
document.getElementById (' Resultspan '). innertext= ' is checking, please wait ... ';
48.}
49.
function Xmlhttpchange ()
51. {
if (xmlhttp.readystate==4)
53. {
if (xmlhttp.status==200)
55. {
var Res=xmlhttp.responsetext;
document.getElementById (' Resultspan '). Innertext=res;
58.
res== ' Congratulations, user name can be used. ')
60. {
SetTimeout ("document.getElementById (' Resultspan '). innertext= ';", 2000);
62.}
The. else if (res== ' Sorry, user name is already in use.) ')
64. {
document.getElementById (' txt '). focus ();
66.}
67.}
68.}
69.}
70.//--></script>
71.</head>
72.<body>
<form id= "Form1" runat= "Server" >
74. User name: <input type= "text" id= ' txt ' value= "Sandy" onblur= "OpenAjax ();"/> <span "id= resultspan" ></span& " Gt
</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" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat= "Server" >
<title> Untitled Page </title>
<script type= "Text/javascript" ><!--
var xmlhttp=null;
function Createxmlhttprequest ()
{
if (xmlHttp = = null) {
if (window. XMLHttpRequest) {
Mozilla Browser
XmlHttp = new XMLHttpRequest ();
}else if (window. ActiveXObject) {
IE browser
try {
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {
Alert (' Create failed ');
}
}
}
}
}
function OpenAjax ()
{
if (xmlHttp = null)
{
Createxmlhttprequest ();
if (xmlHttp = null)
{
Alert (' Error ');
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= ' is checking, please wait ... ';
}
function Xmlhttpchange ()
{
if (xmlhttp.readystate==4)
{
if (xmlhttp.status==200)
{
var Res=xmlhttp.responsetext;
document.getElementById (' Resultspan '). Innertext=res;
if (res== ' Congratulations, user name can be used.) ')
{
settimeout ("document.getElementById" (' Resultspan '). innertext= '; ", 2000);
}
else if (res== ' Sorry, user name is already in use.) ')
{
document.getElementById (' txt '). focus ();
}
}
}
}
--></script>
</head>
<body>
<form id= "Form1" runat= "Server" >
User name: <input type= "text" id= ' txt ' value= "Sandy" onblur= "OpenAjax ();"/> <span "id= resultspan" ></span>
</form>
</body>
</html>
Then create a new generic handler named Verifyusernamehandler.ashx
The code is as follows:
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.
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);//using threads to simulate a database tutorial query work
string[] Names = new string[] {"Sandy", "a Non", "ABC"};//here replaces the result set in the database with a Names array
if (array.indexof<string> (Names, _name) = = 1)
15. {
Context. Response.Write ("Congratulations, user name can be used.") ");
17.}
. else
19. {
Context. Response.Write ("Sorry, user name is already in use.) ");
21.}
22.}
23.
public bool IsReusable {
get {
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);//using threads to simulate database query work
string[] Names = new string[] {"Sandy", "a Non", "ABC"};//here replaces the result set in the database with a Names array
if (array.indexof<string> (Names, _name) = = 1)
{
Context. Response.Write ("Congratulations, user name can be used.") ");
}
Else
{
Context. Response.Write ("Sorry, user name is already in use.) ");
}
}
public bool IsReusable {
get {
return false;
}
}
}
The program has been completed here.
The main thing is to use the XMLHttpRequest object to access the server in an asynchronous way, and then trigger the defined callback function after getting the response.
This article is a request that XMLHttpRequest object asynchronously sends a GET method to the server, and the file that accesses the server is. ashx