Deep understanding of the processing of AJAX response information

Source: Internet
Author: User
Tags object error handling return string
ajax| response
The user's interactive operation (interaction) drives the Web site. It is important to understand how to handle response information, especially when using new forms of interaction (such as Ajax). Kris Hadloc explains the nature of the AJAX request-response process, and you should be aware of the content to better interoperate with the user.

   Requests and Responses

There are many aspects to the Ajax engine, each of which is important. If the engine performs a transaction that sends requests and receives response information, it has a number of ways to process the response information. Response information is an important part of the process because the user will eventually interoperate with the response information. This article explains in detail how to handle AJAX response information and provide feedback to users, as needed, to update them. We start with the ready state of the request, then explain the status of the response information, the callback (callback), and the profiling response information. This article also explains some other aspects of response information, such as loading messages, error handling, and displaying response information.

I set up an example for you to download. This example includes an object-oriented Ajax engine that you can use again in any AJAX application. Before I discuss the response information, I want to point out how to build an AJAX engine and make a request. First, let's look at the code for the Ajax engine (not with the Response Information Processing Section):

document.write ("<script type=\" text/javascript\ "src=\" js/http.js\ "></script>");
function Ajax ()
{
this.tostring = function () {return "Ajax";}
this.http = new http ();
This.makerequest = function (_method, _url, _callbackmethod)
{
this.request = (window. XMLHttpRequest)? New XMLHttpRequest (): New ActiveXObject ("MSXML2. XMLHTTP ");
This.request.onreadystatechange = _callbackmethod;
This.request.open (_method, _url, true);
This.request.send (_url);
}
}

To create this object and make a request, you only need to use the following two lines of code:

var ajax = new Ajax ();
Ajax.makerequest (' Get ', ' xml/content.xml ', onresponse);

The second line of code above reflects the request method you chose, the path to the XML, the server-side script that you requested, and the callback method you want to invoke when you receive the response information. Now that you have a certain understanding of the Ajax engine and how to make the request, let's look at how to handle the request.

   Ready (Ready) status

The ready state is handled by the callback method, and the callback method is set when we make the request. In the example, the Onresponse is set to the callback method, which is used in this article to handle all the parsing code operations. We will use the following code to detect the ready state of the Ajax object in the callback method:

function Onresponse ()
{
if (ajax.checkreadystate (' body ', ' loading ... ', ' Loading ... ', ' loading ... ') = = "OK")
{
Here is the analysis code
}
}

The code above shows that we will pass four parameters to the Checkreadystate method. The first parameter is the ID of the loaded (loading) message div that we want to display, and the other three parameters are custom load messages that correspond to different states. The name of the Div I chose to load the message is the body, which makes the content and load messages merged together when the new data is loaded. Here's the actual Checkreadystate method that handles the code we just discussed and displays it in the div with the arguments we pass in. This method is also included in the example Ajax engine.

This.checkreadystate = function (_id, _1, _2, _3)
{
Switch (this.request.readyState)
{
Case 1:
document.getElementById (_id). InnerHTML = _1;
Break
Case 2:
document.getElementById (_id). InnerHTML = _2;
Break
Case 3:
document.getElementById (_id). InnerHTML = _3;
Break
Case 4:
document.getElementById (_id). InnerHTML = "";
Return This.http.status (This.request.status);
}
}

The Checkreadystate method is useful for providing feedback on the status of a page to the user. The following table shows the values it detects:

Value State
0 Uninitialized (uninitialized)
1 Loading (Loading)
2 Loaded (already loaded)
3 Interactive (Interactive)
4 Complete (complete)

You can add a custom message for each load state-it can be a simple string, or it can be a string-formatted picture tag (such as an animated GIF). Here's an example:

var loader = "Ajax.checkreadystate (' body ', loader, loader, loader);

Not only does the Checkreadystate method handle the request state, it contains HTTP objects that also detect and return the requested State.







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.