Quick learning of Ajax 3 Ajax Login

After learning the previous two courses, we should have a simple impression on Ajax. The learning technology is for application. Next we will continue, and we may gradually make some small instances for future courses.

These examples will not be too large, but I expect to give you an example of completely Using ajax to interact with the server. I hope you can keep up with them. Of course I said, I am Based on ASP. NET's original ecological Ajax, so later

I will inevitably use. NET and C # development languages. Please forgive me, so do not miss out on the. NET development shoes.

This lesson has finally begun in a waste of words.

Well, what are our most common applications? haha, log on. Think about it. If a login needs to be implemented on the server, a problem may occur, that is, after I click the login button, I am depressed ~~~ The network speed is too low, and the screen is white.

After waiting for a long time to show a text,Login successful. In this case, the user experience is definitely unfriendly. Therefore, we use ajax to achieve this. At least there will be no white screen. Well, I plan to create a database first. Later, for various reasons.

Let's wait for the following example. When creating a database, let's simply implement the functions and then implement other functions.

What do I need for login? The user name and password verification code will not be completed this time. Secure transfer post

Prepare a table first

 <  Body  > <  Table > <  Tr  > <  Th  Colspan  = "2"> Login form </  Th  > </  Tr  > <  Tr  > <  TD  > User Name </  TD > <  TD  > <  Input  Type  = "Text"  ID  = "Name"/> </  TD  > </  Tr  > <  Tr  > <  TD  > Password </ TD  > <  TD  > <  Input  Type  = "Password"  ID  = "PWD"/> </  TD  > </  Tr  > <  Tr  > <  TD  Colspan  = "2" Align  = "Center"> <  Input  Type  = "Button"  Value  = "Login"  Onclick  = "Getajax ();"/> </  TD  > </  Tr  > <  Tr  > <  TD  Colspan = "2"  ID  = "Returnlogin"  Align  = "Center"> </  TD  > </  Tr  > </  Table  > </  Body  > 

The page won't be an artist.

Look at the effect.

What should we do next? Of course, it's about creating an XMLHttpRequest asynchronous object. What else can I do without this.

Well, forget it. Write Ajax.CodeAnd then do research.

    <  Style  Type  = "Text/CSS">  * { Padding : 0px ; Margin : 0px ; Font-size : 12px ;} Table { Margin : 0 auto ;}</  Style  > <  Script  Type  = "Text/JavaScript"> VaR XMLHTTP = False ; Try {XMLHTTP = New Activexobject ( "Msxml2.xmlhttp" );} Catch (E1 ){ Try {XMLHTTP = New Activexobject ("Microsoft. XMLHTTP" );} Catch (E2) {XMLHTTP = False ;}} If (! XMLHTTP && Typeof XMLHttpRequest! = 'Undefined' ) {XMLHTTP = New XMLHttpRequest ();} Function Getajax (){ VaR Name = Document. getelementbyid ( "Name" ). Value;VaR Pwd = Document. getelementbyid ( "PWD" ). Value; XMLHTTP. Open ( "Post" , "Login. ashx" , True ); XMLHTTP. setRequestHeader ( "Content-Type" , "Application/X-WWW-form-urlencoded" ); XMLHTTP. onreadystatechange = Function (){ If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200) {document. getelementbyid ( "Returnlogin" ). Innerhtml = XMLHTTP. responsetext;} XMLHTTP. Send ( "Name =" + Name + "& Pwd =" + PWD );} </  Script  > 

I am like the code above, so everyone should understand it,

 VaRName = Document. getelementbyid ("Name"). Value;

VaRPwd = Document. getelementbyid ("PWD"). Value;

This is to use js to obtain the values in the two text boxes.

Then we use the simple example in the last two courses to transmit two parameters to the "login. ashx" page.

Then the login. ashx code is as follows:

Public voidProcessrequest (HttpcontextContext) {context. response. contenttype ="Text/html";VaRName = context. request ["Name"]. Tostring ();VaRPassword = context. request ["PWD"]. Tostring ();If(Name ="Kingdz"& Password ="Kingdz") Context. response. Write ("Login successful");ElseContext. response. Write ("Logon Failed");}
 

Well, after the code is written, you can achieve the most basic login, and then the above username and password should be read from the database, but later, I thought about it, this is simple, and the speed is faster. (* ^__ ^ *) Hey ......

After successful login, I think most websites do not. What is displayed after successful login? Of course, it's about showing a person's basic information.

Now we try to implement that all the data I have written is virtual. First, you should first look for a beautiful picture and take the Avatar. Haha

 Public void Processrequest ( Httpcontext Context) {context. response. contenttype = "Text/html" ; VaR Name = context. request [ "Name" ]. Tostring (); VaR Password = context. request [ "PWD" ]. Tostring (); VaR Sex = "Male" ; VaR Age = 16; VaR Imageurl = "Images/6.png" ; // No code is written to find the path. The image path should have been read from the database. Haha  Stringbuilder SB = New  Stringbuilder (); If (Name = "Kingdz" & Password = "Kingdz" ) {Sb. append ( "<Table> <tr> <TD rowspan = '4'>  ); Sb. append (imageurl); sb. append ("'Alt = 'nginx'/> </TD> <TD align = 'left'> name :" ); Sb. append (name); sb. append ( "</TD> </tr> <TD align = 'left'> Gender :" ); Sb. append (sex); sb. append ( "</TD> </tr> <TD align = 'left'> Age :" ); Sb. append (AGE); sb. append ( "</TD> </tr> <TD align = 'left'> password :" ); Sb. append (password); sb. append ( "</TD> </tr> </table>" ); Context. response. Write (SB );} Else Context. response. Write ( "Logon Failed" );}

Modify this method, see? Here we need to splice the returned object responsetext into a table

Stringbuilder is highly efficient, haha

I solemnly declare that this Ajax is based on ASP. NET's "Original Ecology Ajax". The examples in this tutorial involve many C # languages.

Run the following:

Haha, the gender is wrong, but I think this effect is much better than that of a simple login. Of course, you can try the following effects.

After successful login, replace the current form

Okay, you should be able to log on. In the next lesson, we will discuss the following other Ajax functions that can be used to log on.Article.