Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use asp.net to achieve ajax login page, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.

The following implementation of a classic login page, with the function of saving passwords, all the controls on the page are html controls, there are no server controls

1. Create a new static web page file named login.htm as the login page, as shown in the figure

Body tag code

The copy code is as follows:

User name:

Password:

Remember the password for a month

2. Introduce external js code into login.htm

Where aj.js is the class encapsulated by ajax, and loginCookie.js is the code for operating on Cookie.

The aj.js code is as follows

/ / JScript file

/ / ajax request function

/ / author: Wu Baoyou

/ / get call method: (1) instantiate var aj=new ajax (); (2) call get function aj.get (url,callback) (3) write callback function function callback (xhr) {xhr.responsetext}

/ / post call method: (1) instantiate var aj=new ajax (); (2) call post function aj.post (url,content,callback) (3) write callback function function callback (xhr) {xhr.responsetext}

/ / construct ajax object

Function ajax ()

{

Function getXHR () / / get xmlhttprequest

{

Var request=false

Try

{

Request = new XMLHttpRequest ()

}

Catch (trymicrosoft)

{

Try

{

Request = new ActiveXObject ("Msxml2.XMLHTTP")

}

Catch (othermicrosoft)

{

Try

{

Request = new ActiveXObject ("Microsoft.XMLHTTP")

}

Catch (failed)

{

Request = false

}

}

}

Return request

}

This.get = function (openUrl,successFun) / / the get method of the ajax object, which sends the request through get. OpenUrl is the requested page, and successFun is the function executed by the successful callback.

{

Var request = getXHR ()

Request.open ("get", openUrl,true)

/ / request.onreadystatechange = function ()

/ / {

/ / if (request.readystate==4)

/ / {

/ / if (request.status==200)

/ / {

/ / successFun (request)

/ /}

/ /}

/ /}

Request.onreadystatechange = update

Function update ()

{

If (request.readystate==4)

{

If (request.status==200)

{

SuccessFun (request)

}

}

}

Request.send (null)

}

This.post = function (openUrl,sendContent,successFun) / / the post method of the ajax object, which sends the request through post. OpenUrl is the requested page, and successFun is the function executed by the successful callback.

{

Var request = getXHR ()

Request.open ("post", openUrl,true)

Request.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); / / tells the server that the text is being sent

Request.onreadystatechange = update

Function update ()

{

If (request.readystate==4)

{

If (request.status==200)

{

SuccessFun (request)

}

}

}

Request.send (sendContent)

}

}

The loginCookie.js code is as follows

/ / JScript file

/ / SetCookie saves a Cookie. Parameters can be omitted except name and value.

/ / GetCookie fetches its value by the name of a Cookie.

/ / DelCookie deletes a Cookie, that is, makes a Cookie expire immediately. Parameters can be omitted except name.

/ / Test

/ / SetCookie ("username", "123"); expires stands for "month"

/ / alert (GetCookie ("username"))

/ / DelCookie ("username")

/ / alert (GetCookie ("username"))

Function SetCookie (name, value, expires, path, domain, secure) {

Var today = new Date ()

Today.setTime (today.getTime ())

If (expires) {expires * = 2592000;}

Var expires_date = new Date (today.getTime () + (expires))

[xss_clean] = name + "=" + escape (value)

+ (expires? "; expires=" + expires_date.toGMTString (): "")

+ (path? "; path=" + path: "")

+ (domain? "; domain=" + domain: "")

+ (secure? "; secure": "")

}

Function GetCookie (name) {

Var cookies = [xss_clean] .split (';')

Var cookie =''

For (var iTuno; I 0)

/ / {

/ / Response.Write ("this user exists\ n")

/ /}

/ / else

/ / {

/ / Response.Write ("does not have this user name\ n")

/ /}

Conn.Close ()

}

If (Request ["name"]! = null & & Request ["pwd"]! = null)

{

String name = Request ["name"] .ToString ()

String pwd = Request ["pwd"] .ToString ()

String strSql = "select * from [user] where upright nameplates'" + name + "'" + "and upright pwdlings'" + pwd + "

Conn.Open ()

OleDbCommand Comd = new OleDbCommand (strSql, Conn)

OleDbDataReader dr = Comd.ExecuteReader ()

If (dr.Read ())

{

Response.Write ("ok\ n")

}

Else

{

Response.Write ("fail\ n")

}

}

}

5. Create a new static page called loginIndex.htm as the home page after the user logs in

The body tag code is as follows

6. Introduce the loginCookie.js file into the loginIndex.htm page

7. Write the js code for the loginIdex.htm page and put it between the head tags

_ window.onload = function ()

{

If (GetCookie ('user_name') = = null | | GetCookie (' user_pwd') = = null) / / if you are not logged in, enter the URL directly in the web page

{

Alert ('you haven't logged in yet! \ nreturn to the landing page.')

Window.navigate ("login.htm")

}

Else

{

Var uname = GetCookie ('user_name')

Document.getElementById ('username') [xss_clean] = "Welcome:" + uname + "logout"; / / provide a "logout" button

}

}

Function off () / / logout event

{

If (window.confirm ("do you really want to log out?"))

{

Delcookie ("user_name")

Delcookie ("user_pwd")

Window.navigate ("login.htm")

}

}

8, complete, more client code, but good interactivity

The demonstration is as follows:

When the user name is entered and the mouse cursor leaves the user name box, the system will quickly verify whether the user name is legal

After entering the home page, a window appears with the currently logged-in user and the logout button

When the user clicks the logout button, it will kindly prompt you whether you are really logged out.

When you do not enter the user and password to log in, but also enter the home URL directly in the browser address bar, the system will prompt you not to log in and return directly to the login page.

When the user enters a valid user name and password and asks the system to remember the password, the system will display the last remembered user name and password in the input box the next time the user enters the login page.

And at this time, enter the home address directly in the browser's address bar, which can also be accessed normally.

Nbsp; {

Alert ("password error")

}

}

}

}

Function reset () / / reset

{

_ window.onload (); / / execute the form login event

Document.getElementById ("txtusername") .value= "

Document.getElementById ("txtpwd") .value= "

}

Function enterLogin ()

{

If (event.keyCode==13) / / execute the login statement if the Enter key is pressed

{

Login ()

}

}

4. Create a new page called login.aspx, which is used as the page requested by ajax. The login.aspx.cs code is as follows

Protected void Page_Load (object sender, EventArgs e)

{

OleDbConnection Conn = DBcon.get_con ()

If (Request ["uname"]! = null)

{

String username = Request ["uname"] .ToString ()

String strSql = "select * from [user] where upright nameplate'" + username + ""

Conn.Open ()

OleDbCommand Comd = new OleDbCommand (strSql, Conn)

OleDbDataReader dr = Comd.ExecuteReader ()

If (dr.Read ())

{

Response.Write ("ok\ n")

}

Else

{

Response.Write ("fail\ n")

}

/ / if (Comd.ExecuteNonQuery () > 0)

/ / {

/ / Response.Write ("this user exists\ n")

/ /}

/ / else

/ / {

/ / Response.Write ("does not have this user name\ n")

/ /}

Conn.Close ()

}

If (Request ["name"]! = null & & Request ["pwd"]! = null)

{

String name = Request ["name"] .ToString ()

String pwd = Request ["pwd"] .ToString ()

String strSql = "select * from [user] where upright nameplates'" + name + "'" + "and upright pwdlings'" + pwd + "

Conn.Open ()

OleDbCommand Comd = new OleDbCommand (strSql, Conn)

OleDbDataReader dr = Comd.ExecuteReader ()

If (dr.Read ())

{

Response.Write ("ok\ n")

}

Else

{

Response.Write ("fail\ n")

}

}

}

5. Create a new static page called loginIndex.htm as the home page after the user logs in

The body tag code is as follows

6. Introduce the loginCookie.js file into the loginIndex.htm page

7. Write the js code for the loginIdex.htm page and put it between the head tags

_ window.onload = function ()

{

If (GetCookie ('user_name') = = null | | GetCookie (' user_pwd') = = null) / / if you are not logged in, enter the URL directly in the web page

{

Alert ('you haven't logged in yet! \ nreturn to the landing page.')

Window.navigate ("login.htm")

}

Else

{

Var uname = GetCookie ('user_name')

Document.getElementById ('username') [xss_clean] = "Welcome:" + uname + "logout"; / / provide a "logout" button

}

}

Function off () / / logout event

{

If (window.confirm ("do you really want to log out?"))

{

Delcookie ("user_name")

Delcookie ("user_pwd")

Window.navigate ("login.htm")

}

}

8, complete, more client code, but good interactivity

The demonstration is as follows:

When the user name is entered and the mouse cursor leaves the user name box, the system will quickly verify whether the user name is legal

After entering the home page, a window appears with the currently logged-in user and the logout button

When the user clicks the logout button, it will kindly prompt you whether you are really logged out.

When you do not enter the user and password to log in, but also enter the home URL directly in the browser address bar, the system will prompt you not to log in and return directly to the login page.

When the user enters a valid user name and password and asks the system to remember the password, the system will display the last remembered user name and password in the input box the next time the user enters the login page.

And at this time, enter the home address directly in the browser's address bar, which can also be accessed normally.

On "how to use asp.net to achieve ajax login page" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.