Simple examples of page login and User Name authentication using AJAX, ajax instances

Simple examples of page login and User Name authentication using AJAX, ajax instances

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX is a technology used to create fast dynamic web pages. Its core is the JavaScript Object XMLHttpRequest. This object was first introduced in Internet Explorer 5. It is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Imagine if the registration information is submitted during registration and the page is reloaded several seconds later, a prompt box will pop up to tell you that the user name has been used ", it will be very annoying. So here, we can use AJAX to Implement Asynchronous requests, so that we can communicate with the database without reloading the page.

Create an XMLHTTPRequest object

Create an XMLHTTPRequest object in the html page using javascript to implement AJAX asynchronous requests:

<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 ("error returned by AJAX server! ") ;}} Xmlhttp. send (); </span>

Var xmlhttp = window. XMLHttpRequest? New XMLHttpRequest (): new ActiveXObject ('Microsoft. xmlhttp'); // creates an XMLHTTP object and considers compatibility.

Xmlhttp. open ("POST", "AJAXTest. ashx? "+" I = 5 & j = 10 ", true); //" prepare "sends a Post request to the server's GetDate1.ashx (GET may cause cache problems ). No request has been sent.

ReadyState = 4 indicates that the server has returned complete data. May have gone through 2 (the request has been sent and is being processed), 3 (some data is available in the response, but the server has not yet completed the response generation)

Note: 

Do not think that if (xmlhttp. readyState = 4) is not executed before sending, xmlhttp. send (); then send the request. After sending the request, the server will continue to execute the request without waiting for the server to return data. Therefore, the interface will not be blocked. This is the meaning of "A" in AJAX, "Asynchronous ".

AJAX Encapsulation

In actual project development, there will be multiple AJAX asynchronous requests, but it is troublesome to copy and paste the object code so long, and it will also affect the viewing of the Code, therefore, AJAX needs to be encapsulated. Encapsulate it into a js function file and import it on the webpage for reference.

Code after simple AJAX encapsulation:

<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); // logical operation upon success} else {onfail (xmlhttp. status); // The failure is a logical operation }}} xmlhttp. send (); // The request is sent.} </span>

After encapsulation, we can start to write the login judgment code (I use. net ):

First, create an HTML page login.htm and a general ashx processing program userhandle. ashx. Add an action parameter to the request url to process the request in a general processing program.

Function submitemailonclick () {var name = document. getElementById ("name"). value; var psw = document. getElementById ("psw"). value; if (psw! = "" & Name! = "") {// Call AJAX ajax (".../userhandle. ashx? Operate = login & userName = "+ name +" & psw = "+ psw, function (resText) {if (resText =" fail ") {alert ("incorrect user name or password! "); Return false ;}else {document. write (resText) ;}} else {alert (" Enter the complete logon information! "); Return false ;}}

In general, the processing program receives the request action, determines and executes the relevant query, and returns a string. After receiving the request, the foreground page determines and executes 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); // The encapsulated bll layer method to determine whether the user name and password are correct if (B = true) {context. session ["Name"] = userName; context. session ["role"] = "user"; context. response. write ("success");} else {context. response. write ("fail ");}}

After the server completes judgment, it sends success or fail to the client. This completes the login using AJAX asynchronous requests.

As for registration, the user name is determined, and 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 = "the user name is 6-10 English letters or numbers";} else {ajax (".. /userhandle. ashx? Operate = checkName & userName = "+ userName, function (resText) {if (resText =" forbid ") {document. getElementById ("nameMeg "). style. color = "red"; document. getElementById ("nameMeg "). innerHTML = "username contains invalid words";} else if (resText = "already have") {document. getElementById ("nameMeg "). style. color = "red"; document. getElementById ("nameMeg "). innerHTML = "user name used";} else {document. getElementById ("nameMeg "). style. color = "green"; document. getElementById ("nameMeg "). innerHTML = "available ";}})}}

The above is all the content of the simple example that I brought to you by Using AJAX to implement page login and register username verification. I hope you can support the help house a lot ~