XHR readyState

AJAX - onreadystatechange event

When a request is sent, the client needs to determine when the request will complete, so the XMLHttpRequest object onreadystatechange and then implement a response.

When a request is sent to the server, we need to perform some response-based tasks.

Every readyState changes, the onreadystatechange

readyState property contains status information for XMLHttpRequest.

Here are three important properties of the XMLHttpRequest object:

ReadyState status description

0: The request is not initialized

This phase confirms whether the XMLHttpRequest object was created open() uninitialization, with a value of 0 indicating that the object already exists, otherwise the browser will report an error: the object does not exist.

1: The server connection has been established

This phase initializes the XMLHttpRequest object open() complete the setting of the object state according to the （ method , url , true ） and call the send() to start sending requests to the service side.

A value of 1 indicates that a request is being sent to the service side.

2: The request has been received

This phase receives server-side response data. However, only the raw data of the service-side response is obtained and cannot be used directly on the client side.

A value of 2 indicates that full department response data has been received and is ready for the next phase of data resolution.

3: Request processing

This phase resolves the received server-side response data to prepare for client-side calls by converting the data into a format that can be accessed through the properties of responseBody responseText responseXML based on the type of MIME returned by the server-side response header.

Status 3 indicates that the data is being parsed.

4: The request is complete and the response is ready

This phase confirms that all the data has been resolved to a format that is available to the client and that the resolution has been completed. A value of 4 indicates that the data has been parsed and can be obtained through the properties of the XMLHttpRequest object.

In summary, the life cycle of the entire XMLHttpRequest object should include the following phases:

1. Create
   
2. Initialize the request
   
3. Send the request
   
4. Receive data
   
5. Parse the data
   
6. Complete
   

In onreadystatechange we specify the tasks that are performed when the server responds to a prepared process.

When readyState equal to 4 and the status is 200, the response is ready:

Note: onreadystatechange is triggered 5 times (0 - 4), corresponding to each change in readyState

Tip: The state of XHR.readyState changes as follows:

• 0: The request is not initialized and open()
  
• 1: The request has been established, but has not been sent, and send()
  
• 2: The request has been sent and is in process (usually now you can get the content header from the response).
  
• 3: The request is in process;
  
• 4: The response is complete;
  

Use the callback function

A callback function is a function that is passed as an argument to another function.

If you have multiple AJAX tasks on your site, you should write a standard function for creating an XMLHttpRequest object and call it for each AJAX task.

The function call should contain the URL and the tasks performed when onreadystatechange event occurs (each call may be different):

In the next section, you'll learn about AJAX ASP/PHP!

Related articles

HTTP status code