Ajax asynchronous request


Ajax concepts

Ajax(Asynchronous JavaScript and XML): asynchronous JavaScript and XML


Using Ajax, the page can be updated without refresh, the page can be submitted asynchronously, and the user experience can be improved


Use a special object (XMLHttpRequest) provided by the browser to send a request to the server asynchronously, and the server returns data. The browser can return to the page without refreshing, without interrupting the user's operation

Difference between synchronous and asynchronous

Case: when registering student information, the student's information (student number, name, address, birthday...) is filled in and ready to be submitted. When connecting with the database, it is found that the filled student number exists. When the server responds to the client, the data cannot be submitted. At this time, the role of synchronous and asynchronous requests is reflected

Synchronization: the whole page will be refreshed and the filled data will not be retained

Asynchronous: the whole page will not be refreshed, and the filled data will be retained


In the past, the way of interacting with the server was synchronous. When the client interacts with the server, the client can't do anything else. It can only wait for the response of the server and refresh the page


When the client is in normal operation, it can interact with the server at the same time. The server responds to the client and updates the information to the part of the web page. The real process page will not be refreshed

Implementation mode

Native js implementation

Create XMLHttpRequest object: send the request to the server and return the obtained result

The JavaScript object XMLHttpRequest is the core of the whole Ajax technology and provides the ability to send requests asynchronously

Common methods:

Method nameexplain
open(method,URL,async)Establish a connection to the server
Method parameter: Specifies the method to request Http, such as GET or POST
URL parameter: Specifies the address of the request
The async parameter specifies whether to use asynchronous requests, and its value is true or false
send(content)Send the parameters specified in the request
setRequestHeaderSet request header information

Common attributes:

onreadystatechange: event that specifies the callback function

ReadyState: status information of XMLHttpRequest

Status: status code of HTTP

responseText: get the text content of the response

Ready status codeexplain
0The XMLHttpRequest object did not complete initialization
1The XMLHttpRequest object starts sending requests
2The request sending of XMLHttpRequest object is completed
3The XMLHttpRequest object started reading the response, but it hasn't finished yet
4End of XMLHttpRequest object read response
Status codeexplain
200The server responded normally
400The requested resource could not be found
403No access
404The accessed resource does not exist
500Server internal error

GET mode

 var httpObj  = new XMLHttpRequest();
            httpObj.onreadystatechange=function (){
               // alert(httpObj.responseText);
                if (httpObj.readyState==4&&httpObj.status==200){

post mode

var httpObj = new XMLHttpRequest();
          httpObj.onreadystatechange = function (){
              if (httpObj.readyState==4&&httpObj.status==200){

Jquery implementation

Official API code

   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );

Implementation case code

                success:function (res){
                    if (res==0){
                        $("#idea").html(" student ID already exists ");

Keywords: Java Javascript Web Development Ajax http

Added by Cyberspace on Wed, 09 Feb 2022 11:32:19 +0200