Below I will bring you a simple example of using AJAX to implement page login and registered user name verification. Let me share it with you now and give it as a reference for everyone.
AJAX stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.
AJAX is a technology for creating fast, dynamic web pages. At its core is the JavaScript object XMLHttpRequest. First introduced in Internet Explorer 5, this object is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the responses without blocking the user.
By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.
Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.
Imagine if you submit the registration information when registering, wait a few seconds and then the page is reloaded. As a result, a prompt box pops up telling you that "the username has been used". That would be very annoying. one thing. So here, using AJAX to implement asynchronous requests, you can communicate with the database without reloading the page.
Create XMLHTTPRequest object
Use javascript to create an XMLHTTPRequest object in the html page to implement AJAX asynchronous requests:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //Create XMLHTTP object, 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 caching issues). No requests have been made here yet.
readyState == 4 indicates that the server has returned completion data. You may have experienced 2 (the request has been sent and is being processed), 3 (part of the data in the response is available, but the server has not completed generating the response)
Note:
Don’t think it’s wrong if if (xmlhttp.readyState == 4) is executed before send, xmlhttp.send(); only then starts sending the request. At this time, the request starts to be sent and the execution continues without waiting for the server to return data, so it will not be blocked and the interface will not be stuck. This is the meaning of "asynchronous" in AJAX.
AJAX encapsulation
In actual project development, AJAX asynchronous requests will be used in many places, but the code to create the object is so long. Copying and pasting is troublesome, and it will also affect the viewing quality of the code, so AJAX needs to be encapsulated. Encapsulate it into a js function file and import it into the web page for reference.
Simple AJAX encapsulated code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
After the encapsulation is completed, we can start writing the login judgment code (I use .net):
First, create a The html page login.htm and the ashx general handler userhandle.ashx have an action parameter in the requested URL, and the request is processed in the general handler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
After receiving the request action in the general processing program, it will judge and execute the relevant query and return a string. After the front page receives it, it will judge and execute the corresponding function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
After the server determines, it sends success or fail to the client. In this way, the login using AJAX asynchronous request is completed.
As for the registration to determine the user name, I will just paste it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Ajax submission form page refreshes quickly solution
Two solutions for Ajax opening a new window and being intercepted by the browser
The above is the detailed content of A simple example of using AJAX to implement page login and registered user name verification. For more information, please follow other related articles on the PHP Chinese website!