Introduction to the five States of javascript ajax, javascriptajax

Source: Internet
Author: User

Introduction to the five States of javascript ajax, javascriptajax

In Pragmatic ajax (static dynamic website) A Web 2.0 Primer, I accidentally saw the introduction to readyStae status. I think this introduction is very practical:

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 ed.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0-(not initialized) The send () method has not been called
1-(load) The send () method has been called and a request is being sent.
2-(Loading completed) The send () method is executed completely and all response content has been received
3-(interaction) parse the response content
4-(complete) The response content has been parsed and can be called on the client

The five States of readyState are mostly unknown in other books. For example, in Foundations of ajax (static dynamic website), only table 2-2 in The book lists the state "name"-The state of the request. the five possible values are 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, and 4 = complete. Ajax (static dynamic website) in Action does not seem to mention the details of these five States at all. Although Professional ajax (static dynamic website) is not satisfactory, it still has advantages:

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 already ed.
4 (Complete): All data has been encrypted Ed and the connection has been closed.

ReadyState has five possible values:
0 (not initialized): (xml (standardization is getting closer and closer) HttpRequest) object has been created, but the open () method has not been called yet.
1 (load): the open () method has been called, but no request has been sent.
2 (Loading completed): The request has been sent completely.
3 (interaction): Some response data can be received.
4 (complete): All data has been received and the connection has been closed.

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

ReadyState Status Code
Status of the xml (standardization is getting closer and closer) HttpRequest Object
(0) UNINITIALIZED
The object has been created but not initialized. (The open method has not been called .)
(The xml (standardization is getting closer and closer) HttpRequest) object has been created, but has not been initialized (the open method has not been called ).
(1) LOADING
Load The object has been created, but the send method has not been called.
(The xml (standardization is getting closer and closer) HttpRequest) object has been created, but the send method has not been called yet.
(2) 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) status and header are not available yet.
(3) INTERACTIVE
Interactive 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 attributes to obtain some results at this time, an error will occur because the status and response header are not fully available.
(4) COMPLETED
Complete All the data has been encoded ed, and the complete data is available in the responseBody and responseText properties.
All data has been received, and the complete data can be extracted from the responseBody and responseText attributes.

Based on the introduction of the five States of readyState in the above books, I think Pragmatic ajax (static dynamic website) A Web 2.0 Primer is in place, because it mentions the issue of parsing the received data, it is not mentioned in other books, and this is exactly "(3) as a necessary conversion process, the interaction stage exists between loading completion and (4) completion, that is, what is the task. To sum up, I think the ideal interpretation method should be to define the States accurately in the "State: task (target) + process + performance (or feature)" expression mode, it is easy to understand. The following is a summary:

ReadyState statusDescription

(0) not initialized
At this stage, check whether the xml (standardization is getting closer and closer) HttpRequest object is created and prepare for uninitialized calling the open () method. If the value is 0, the object already exists. Otherwise, the browser reports an error -- the object does not exist.

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

(2) Load completed
In this phase, the server receives response data. However, the raw data returned by the server cannot be directly used on the client. If the value is 2, all response data has been received. Prepare for data parsing in the next stage.

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

(4) Completed
At this stage, it is confirmed that all data has been resolved to the available format of the client, and the resolution has been completed. If the value is 4, the data is parsed. You can use the corresponding attributes of the HttpRequest object in xml (standardization is getting closer and closer) to obtain the data.

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

In specific applications, the meaning of the five States of readyState (xml (standardization is getting closer and closer) HttpRequest object in each stage of the lifecycle is clarified, it can eliminate the mystery of ajax (static dynamic website) core (behind the unknown words, either it is an old mystery, making a mysterious sense; or it is "stunned by others"), and quickly grasp the essence, it is extremely beneficial to reduce the frustration in learning and enhance self-confidence.

For example, the following example is used:

Copy codeThe Code is as follows:
// Declare an array
Var states = ["Initializing ......",
"Initializing the request ...... Successful!
Sending request ......",
"Successful!
Receiving data ......",
"Done!
Parsing data ......",
"Done!
"];

// Code snippet In the callback function
If (xml (standardization is getting closer and closer) Http. readyState = 4)
{
Var span = document. createElement ("span ");
Span. innerHTML = states [xml (standardization is getting closer and closer) Http. readyState];
Document. body. appendChild (span );

If (xml (standardization is getting closer and closer) Http. status = 200)
{
Var xml (standardization is getting closer and closer) doc = xml (standardization is getting closer and closer) Http. responsexml (standardization is getting closer and closer );
// Other code
}

// Do not forget to destroy it to prevent memory leakage
Xml (standardization is getting closer and closer) Http = null;
} Else {
Var span = document. createElement ("span ");
Span. innerHTML = states [xml (standardization is getting closer and closer) Http. readyState];
Document. body. appendChild (span );
} The result is as follows:

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

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


Differences between javascript and AJAX

Javascript is a script language executed on the client. Ajax is a javascript-based technology mainly used to provide asynchronous refresh (only refreshing part of the page, rather than refreshing the whole page ). One is language, the other is technology, and the two are essentially different.

JavaScript ajax Problems

Url: conPath + 'numshow/productTempChoice! GetRecoList. action ',
Data: 'tempid = '+ proId,
DataType: 'html ',
Type: 'post ',
Success: function (result)

After you trigger this ajax event, the url will execute the request corresponding to this URL. Here you are an ACTION. Assuming that STRUTS is configured in JAVA, it will find the corresponding background based on this ACTION. program to execute the corresponding method ..
While
Data: 'tempid = '+ proId, that is, the parameter you pass in to the background. You can GET the value of proId assigned to your page in the background GET tempId.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.