Introduction to 5 states of javascript ajax

  • 2020-03-30 03:42:22
  • OfStack

In Pragmatic ajax(dynamic website static) A Web 2.0 Primer, I happened to see an introduction to the status of readyStae. I felt that the introduction was very realistic. The translation is as follows:

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

0 - (uninitialized) has not yet called the send() method
1 - (loaded) the send() method has been called and the request is being sent
2 - (load completed) the send() method has completed and received the full response
3 - (interaction) parsing the response content
4 - (complete) the response content is parsed and ready to be invoked on the client side

Most of the other books are vague about readyState's five states. As in Foundations of ajax(dynamic website static), only 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. Ajax in Action doesn't seem to mention any of these five states in detail. Professional ajax(static dynamic web sites) has its drawbacks, but it still has something to recommend it:

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.
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) : the (XML (getting closer to standardization)HttpRequest object has been created, but the open() method has not been called.
1 (load) : the open() method has been called, but no request has been sent.
2 (load complete) : the request has been sent.
3 (interaction) : partial response data can be received.
4 (done) : all data has been received and the connection is closed.

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

ReadyState Status Code
Status of the XML: HttpRequest Object
UNINITIALIZED (0)
The object has been created but not initialized. (The open method has not been called.)
The HttpRequest object is created but not initialized (the open method is not called yet).
(1) LOADING
Load The object has been created, but The send method has not been called.
The HttpRequest object has been created, but the send method has not yet been called.
(2) the LOADED
The send method has been called, but The status and headers are not yet available.
The send method has been called, and the (HTTP response) state and header are not available.
(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.
Partial data has been received. But calling the responseBody and responseText properties to get partial results at this point will cause an error because the state and response headers are not fully available.
(4) COMPLETED
All the data has been received, and the complete data is available in the responseBody and responseText properties.
All of the data has been received, and the full data can be extracted in the responseBody and responseText properties.

According to the above A few books about the state of the readyState five in the introduction, I think is "Pragmatic ajax (static) dynamic website A Web 2.0 Primer" is in place, because it addressed the issue of received data parsing, other did not mention this in the book, and this is the stage "(3) interaction" as A necessary transformation process exists in "(2) load the complete" to "(4) finish" between the reason, that is what is its mission. To sum up, I think the ideal interpretation method should be "state: task (goal) + process + performance (or feature)" to define these states accurately and easily. The trial summary is as follows:

ReadyState state instructions

(0) uninitialized
This stage verifies that the HttpRequest object is created for the XML (which is getting closer to standardization) and is ready 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
This stage initializes the HttpRequest object for XML (which is getting closer to standardization) by calling the open() method and setting the object state according to the parameters (method,url,true). And call the send() method to start sending the request to the server. A value of 1 indicates that a request is being sent to the server.

(2) load completed
This stage receives the response data on the server side. However, only the raw data of the server response is obtained, which cannot be used directly on the client side. A value of 2 indicates that the complete response data has been received. And prepare for the next stage of data parsing.

(3) interaction
This stage parses the received server-side response data. That is, the data is converted into a format that can be accessed via the responseBody, responseText, or responsexml(increasingly standardized) properties based on the MIME type returned by the server-side response header, ready for invocation on the client side. State 3 indicates that the data is being parsed.

(4) finish
This stage confirms that all data has been resolved into a format available to the client and that the parsing is complete. A value of 4 indicates that the data has been parsed and can be retrieved through the corresponding attributes of the XML (increasingly standardized)HttpRequest object.

In general, the entire XML (increasingly standardized)HttpRequest object lifecycle should include the following phases:
Create - initialize the request - send the request - receive the data - parse the data - complete

In specific applications, by clarifying the meaning of the five states of readyState (XML (which is getting closer and closer to standardization) and the various phases of the HttpRequest object's life cycle), we can remove the mystery of the core of ajax(dynamic website static). Or is "with its dizzy, make a person clear"), grasp its essence quickly, to reduce the frustration in the study and enhance self-confidence are extremely beneficial.

For example, through the following example:


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


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 code
} //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 the request... Success!
Sending a request... Success!
Receiving data... Done!
Parsing the data... Done!

It's easy to see what XML (standardization is getting closer)HttpRequest objects are doing at various stages. As a result, it's easy to get a really straightforward understanding of the core of ajax(static dynamic web sites).


Related articles: