Implement page login with Ajax and register user name verification

Ajax is " ASynchronous JAvascript And XML (Asynchronous JavaScript and XML) refers to a web development technology that creates interactive Web applications.

AJAX is a technique for creating fast-moving web pages. Its core is JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and process the response without blocking the user.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page. Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

Just imagine if the registration information, after a few seconds after the page overload, the result of a pop-up box to tell you that "username has been used", it would be very annoying thing. So here, using AJAX to implement asynchronous requests, you can communicate with the database without overloading the page.


      

Creating XMLHttpRequest Objects

Use JavaScript to create an XMLHttpRequest object in an HTML page to implement an AJAX asynchronous request:
 

  

<span style= "FONT-SIZE:14PX;" >       var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): New ActiveXObject (' microsoft.xmlhttp ');
            Xmlhttp.open ("POST", "ajaxtest.ashx" + "i=5&j=10", true);
            Xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readystate = 4)
                {
                    if (xmlhttp.status = 200)
                    {
                        alert (xmlhttp.responsetext);
                    }
                    else
                    {
                        alert ("AJAX server returned an error.") ");
                    }
                }
            }
            Xmlhttp.send (); 


</span>

var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): New ActiveXObject (' microsoft.xmlhttp '); Create XMLHTTP objects, consider compatibility

Xmlhttp.open ("POST", "ajaxtest.ashx" + "i=5&j=10", true); Prepare to issue a POST request to the server's GETDATE1.ASHX (get may have a caching problem). No request has been made here yet.

ReadyState = 4 indicates that the server returned complete data. You may experience 2 before (request sent, in process), 3 (some of the data in the response is available, but the server has not completed the response generation)
Note: Do not assume that if (Xmlhttp.readystate = 4) is executed before send, Xmlhttp.send (); This is the time to start sending the request. At this point began to send the request after the server to return data, continue to execute downward, so will not block, the interface is not card, this is Ajax "A" meaning "asynchronous".

Encapsulation of AjaxIn the actual project development, there will be many use of Ajax asynchronous request, but the creation of object code so long, copy paste is troublesome, but also affect the appreciation of the Code, so need to encapsulate Ajax. Encapsulate it into a JS feature file and import it into a Web page for reference.

Simple Ajax encapsulated post code:

<span style= "Font-family:times New roman;font-size:14px;" >         function Ajax (Url,onsuccess,onfail)
        {
            var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): New ActiveXObject (' microsoft.xmlhttp ');
            Xmlhttp.open ("POST", url, true);
            Xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readystate = 4)
                {
                    if (xmlhttp.status = 200)
                    {
                        onsuccess (xmlhttp.responsetext);//The logical operation
                    }
                    else
                    {
                        onfail (xmlhttp.status); The failure is a logical operation}}}
            xmlhttp.send ()///At this point, the request is started
        }</span>

Once the package is complete, we can start writing the login code (I'm using. NET):
First, create an HTML page login.htm and ashx generic handler userhandle.ashx, with an action parameter in the requested URL that handles the request in a generic handler.

function Submit1_onclick () {
            var name = document.getElementById ("name"). Value;
            var PSW = document.getElementById ("PSW"). Value;
            if (PSW!= "" && name!= "") { 
             //Invoke Ajax
             Ajax (". /userhandle.ashx?operate=login&username= "+ name +" &psw= "+ PSW, function (resText) {
                    if (ResText =" Fail ") {
                        alert ("User name or password is incorrect.) ");
                        return false;
                    }
                    else {
                        document.write (resText);}}
                )
            }
            else {
                alert ("Please enter full login information.") ");
                return false;
            }
        }

In the general processing program received the request action, judge and execute the relevant query, return a string, the front page received, judge and perform the corresponding function.

public void Login (HttpContext context)
        {
            USERBLL ub = new USERBLL ();
            string userName = context. request["UserName"];
            String USERPSW = context. request["PSW"];      
            BOOL B = UB. Login (UserName, USERPSW);//encapsulating the BLL layer method to determine whether the username password is correct
            if (b = = true)
            {context
                . session["Name"] = UserName;
                Context. session["Role" = "user";
                Context. Response.Write ("Success");
           }
            Else
            {context
                . Response.Write ("fail");
            }
        

After the server is judged, send success or fail to the client. This is accomplished by using an AJAX asynchronous request implementation login.

As for the registration is to judge the user name, I just paste it up:

function check () {var userName = document.getElementById ("Text1"). Value; if (UserName = = "" | |
                UserName = = null) {document.getElementById ("Namemeg"). Style.color = "Red";
            document.getElementById ("Namemeg"). InnerHTML = "User name is 6-10 digits in English or digital"; } else {ajax (".... /userhandle.ashx?operate=checkname&username= "+ userName, function (resText) {if (ResText = =" Forbid "
                    ) {document.getElementById ("Namemeg"). Style.color = "Red";
                document.getElementById ("Namemeg"). InnerHTML = "User name contains illegal words";
                    else if (ResText = = "already have") {document.getElementById ("Namemeg"). Style.color = "Red";
                document.getElementById ("Namemeg"). InnerHTML = "username already used";
                    else {document.getElementById ("Namemeg"). Style.color = "green"; document.getElementById ("Namemeg"). Innerhtml = "can be used"; }
            })
            }
        }