Introduction to the 5 states of javascript ajax_Basic knowledge

I accidentally saw the introduction of readyStae status in "Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer". I feel that this introduction is very practical. The excerpt is as follows:

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 - (uninitialized) send() method has not been called yet
1 - (Loading) The send() method has been called and the request is being sent
2 - (Loading completed) The send() method has been executed and all response content has been received
3 - (Interactive) Parsing response content
4 - (Complete) The response content parsing is completed and can be called on the client

Most other books are unclear about these five states of readyState. For example, in "Foundations of ajax (Static Dynamic Website)", Table 2-2 in the book simply lists the "name" of the state - The state of the request. The five possible values ​​are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete. However, "ajax (dynamic website staticization) in Action" does not seem to mention the details of these five states at all. Although "Professional ajax (static website staticization)" is not satisfactory, it still has merits:

There are five possible values ​​for readyState:
0 (Uninitialized): The object has been created but the open() method hasn't been called.
1 (Loading): The open() method has been called but the request hasn't been sent.
2 (Loaded): The request has been sent.
3 (Interactive). A partial response has been received.
4 (Complete): All data has been received and the connection has been closed.

readyState has five possible values:
0 (uninitialized): (xml(standardization is getting closer) HttpRequest) object has been created, but the open() method has not been called.
1 (Loading): The open() method has been called, but the request has not been sent yet.
2 (Loading completed): The request has been sent.
3 (Interactive): Partial response data can be received.
4 (Complete): All data has been received and the connection has been closed.

In "Understanding ajax (static website staticization): Using JavaScript to Create Rich Internet Applications", the following table is used to illustrate:

readyState Status Code
Status of the xml (standardization is getting closer) HttpRequest Object
(0) UNINITIALIZED
Not initialized The object has been created but not initialized. (The open method has not been called.)
(xml (standardization is getting closer) HttpRequest) object has been created, but has not been initialized (the open method has not been called yet).
(1) LOADING
Loading The object has been created, but the send method has not been called.
(xml (standardization is getting closer) HttpRequest) object has been created, but the send method has not been called yet.
(2) LOADED
Loading completed The send method has been called, but the status and headers are not yet available.
The send method has been called, (HTTP response) status and headers are not available yet.
(3) INTERACTIVE
Interaction Some data has been received. Calling the responseBody and responseText properties at this state to obtain partial results will return an error, because status and response headers are not fully available.
Some data has been received. However, if you call the responseBody and responseText properties to obtain partial results at this time, an error will occur because the status and response headers are not fully available yet.
(4) COMPLETED
Complete All the data has been received, and the complete data is available in the responseBody and responseText properties.
All data has been received and the complete data can be extracted in the responseBody and responseText properties.

According to the introduction of the five states of readyState in the above books, I think "Pragmatic ajax (dynamic website staticization) A Web 2.0 Primer" is more accurate because it mentions the analysis of the received data. , this is not mentioned in other books, and this is the reason why the "(3) interaction" stage exists as a necessary conversion process between "(2) loading completion" and "(4) completion" , that is, what its mission is. To sum up, I think the ideal explanation method should be to define these states in the expression mode of "state: task (goal) process performance (or characteristics)" which is more accurate and easy to understand. The summary of the current test is as follows:

readyState statusDescription

(0) not initialized
This stage confirms whether the xml (standardization is getting closer) HttpRequest object is created and prepares for uninitialization by calling the open() method. A value of 0 indicates that the object already exists, otherwise the browser will report an error - the object does not exist.

(1)Load
At this stage, the xml (standardization is getting closer) HttpRequest object is initialized, that is, the open() method is called, and the object status is set according to the parameters (method, url, true). And call the send() method to start sending requests to the server. A value of 1 indicates that a request is being sent to the server.

(2) Loading completed
This stage receives the response data from the server. But what is obtained is only the raw data of the server response and cannot be used directly on the client. A value of 2 indicates that all response data has been received. And prepare for the next stage of data analysis.

(3)Interaction
This stage parses the received server-side response data. That is, according to the MIME type returned by the server-side response header, the data is converted into a format that can be accessed through the responseBody, responseText or responsexml (standardization is getting closer) attributes, and is ready for invocation on the client. Status 3 indicates that the data is being parsed.

(4) Completed
At this stage, it is confirmed that all data has been parsed into a format usable by the client and the parsing has been completed. A value of 4 indicates that the data parsing is completed and the data can be obtained through the corresponding attributes of the xml (standardization is getting closer) HttpRequest object.

In summary, the life cycle of the entire xml (standardization is getting closer) HttpRequest object should include the following stages:
Create - initialize request - send request - receive data - parse data - complete

In specific applications, by clarifying the meaning of the five states of readyState (various stages of the life cycle of xml (standardization is getting closer) HttpRequest object), you can eliminate the mystery of the core of ajax (dynamic website staticization) sense (the reason behind the unclear words is either to make things mysterious and create a sense of mystery; or to "make people faint and make people aware"). Quickly grasping the essence is extremely beneficial to reducing frustration in learning and enhancing self-confidence.

For example, through the following example:

Copy code The code is as follows:

//Declare array
var states = ["Initializing...",
"Initializing request...successful!
Sending request...",
"Success!
Receiving data...",
"Done!
Parsing data...",
"Done!
”];

//Code snippet inside the callback function
if (xml(standardization is getting closer)Http.readyState==4)
{
var span = document.createElement("span");
span.innerHTML = states[xml(standardization is getting closer)Http.readyState];
document.body.appendChild(span);

if (xml(standardization is getting closer)Http.status == 200)
{
var xml (Standardization is getting closer) doc = xml (Standardization is getting closer) Http.responsexml (Standardization is getting closer);
//Other codes
}

//Don’t forget to destroy to prevent memory leaks
xml (standardization is getting closer)Http = null;
}else{
var span = document.createElement("span");
span.innerHTML = states[xml(standardization is getting closer)Http.readyState];
document.body.appendChild(span);
}The results are as follows:

Initializing request...successful!
Sending request...successful!
Receiving data... Done!
Parsing data... Done!

We can easily understand what the xml (standardization is getting closer) HttpRequest object is doing at each stage. Therefore, it is easy to have a truly simple and clear understanding of the core part of ajax (dynamic website staticization).