Ajax Login Page __ajax

The login interface is an essential function provided by the information system and an interface to provide maintenance information to the user. Next, I will lead you to create a beautiful, secure login interface, using the technology is Asp.net+jquery

First look at the preview effect

< param name= "wmode" value= "window" >  

Ajax login focus on Ajax, input username and password, use Ajax way to submit information to the server, server-side judgment when the user, there is a successful login and switch to the management interface (sometimes need to write cookies or use session, not discussed here), Does not exist prompts for login failure.

The basic flow chart is as follows

Above is the main idea, in order to create a secure login, in the use of Ajax to upload the password to the server, we can use MD5 to encrypt the password, of course, the database is stored in the encrypted string. jquery has one such MD5 encryption plug-in, the use is very convenient.

The process is known and can be easily implemented. Here are some of the main code

Default.aspx: The main is to provide hyperlinks, click Will call Thickbox, open the pop-up page.

Code
Code highlighting produced by Actipro Codehighlighter (freeware)
http://www.CodeHighlighter.com/

--> < div style = "margin-left:50px; margin-top:50px; ">
Welcome to use Backstage, < a href = "login.htm?" Tb_iframe&height=180&width=350&modal=true "class =" Thickbox "id =" Mytooltip "title =" Click Login, go to admin " ; Click Login. </a >
Continue to browse the front desk, < a href = ". /default.aspx "> Back to Foreground </a >

Login.htm: Real Login interface, responsible for login logic code
Code highlighting produced by Actipro Codehighlighter (freeware)
http://www.CodeHighlighter.com/

--> < script type = "Text/javascript" src = "js/jquery-1.3.2.js" ></script >
< script type = "Text/javascript" >
$ (). Ready (function () {
$ (' #Login '). Click (function () {
if ($ (' #username '). val () = "" | | $ (' #password '). val () = "") {
Alert ("User name or password cannot be empty.) " );
}
else {
$.ajax ({
Type: "POST",
URL: "Ajax/loginhandler.ashx",
Data: "Username=" + Escape ($ (' #username '). Val ()) + "&password=" + Escape ($ (' #password '). Val ()),
Beforesend:function () {
$ ("#loading"). CSS ("Display", "block"); Click the login to show loading, hide the input box
$ ("#login"). CSS ("display", "none");
},
Success:function (msg) {
$ ("#loading"). Hide (); Hide Loading
if (msg = = "Success") {
Parent.tb_remove ();
Parent.document.location.href = "admin.htm"; Skip to Admin interface if login succeeds
Parent.tb_remove ();
}
if (msg = = "Fail") {
Alert ("Logon failed.") " );
}
},
Complete:function (data) {
$ ("#loading"). CSS ("display", "none"); Click the login to show loading, hide the input box
$ ("#login"). CSS ("Display", "block");
},
Error:function (XMLHttpRequest, Textstatus, Thrownerror) {
}
});
}
});
});
</script >

< div id = "Loading" style = "text-align:center;" Display:none; padding-top:10% ">
< img src = "images/loadingajax.gif" alt = "Loading"/>
</div >
< div id = "Login" style = "Text-align:center" >
< div style = "position:absolute; right:0; top:0 ">< img src =" images/closebox.png "onclick =" Parent.tb_remove () "alt =" click close "style =" Cursor:pointer "/& gt;</div >

< table border = "0" cellpadding = "3" cellspacing = "3" style = "margin:0 auto;" >
< tr >
< TD style = "TEXT-ALIGN:RIGHT; padding:10px ">
< label >
User name: </label >
</td >
< td >
< input ID = "username" type = "text" size