Ajax| Response Author: Tao Gang compilation Source: Pole Development editor: Ark [2006-03-09 17:26] User interaction (interaction) Drives Web site user interaction (interaction). 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 ("");
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.
- Ajax: A new way to build Web apps
- Discussion on the error handling mechanism of AJAX (2)
- Discussion on the error handling mechanism of AJAX (1)
- First experience. NET Ajax Brushless New technology
- A brief analysis of Ajax development Technology in Rails system (4)
