AJAX-depth understanding of the treatment response information

Posted by john
9/20/2007
Related Tags:

  User interaction (interaction) drives the Web site.    Response to understand how to deal with information, particularly in the use of new forms of interaction (such as AJAX), and this is very important.    Kris Hadloc explained AJAX requests - response to the nature of the process, you should be aware of these elements, the better for the user interaction services. 

  Request and response 

  AJAX engine at many aspects, each side is important.    If the engine is the implementation of the request and receive responses sent information services, then it has a lot of information in response to the treatment method.    Response information is in the process of dealing with an important part, this is because users will ultimately respond to information and interaction.    This paper explained in detail how to deal with AJAX response information, and for users to provide feedback information, in accordance with the need to innovate.    We request from the beginning ready, and then explain the status of response information, callback (callback) response and analysis of information.    This paper also explained response to a number of other information, such as loading information, error handling and Display response information. 

  I set up a sample for you to download.    Examples of this include an object-oriented AJAX engine, you can use any application in AJAX use it again.    In response to the information discussed before, I want to point out that the engine and how to build AJAX request issued.    First of all, let us look at the AJAX engine code (not bring Response Information Processing): 

  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); 
  ) 
  ) 
  In order to establish this object and issued 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 reflect the request of your choice, or request the path XML server-side scripting, when the receiver to respond to the information you want to call the callback method.    Now you are on the engine and how AJAX request has been issued and we have a certain understanding, we have to look at how to deal with the request. 

  Ready (Ready) Status 

  Ready status by the callback methods to deal with, when we made the request, the callback method has been set up well.    In the example, is set to onResponse callback method, which was used in this paper deal with all the analysis of the operation of the code.    We will use the following code callback method to detect the state of readiness AJAX object: 

  Function onResponse () 
  ( 
  If (ajax.checkReadyState ( 'body', 'loading ...',' loading ...', 'loading ...') == "OK") 
  ( 
  / / Here is the analysis of the code) 
  ) 
  The above code, we will transfer method checkReadyState four parameters.    The first parameter we want to show that the loading (loading) - div ID, the other three are from the definition of parameters corresponding to the different states of loading information.    I chose to load the news div name is body, it allows new data was included in the time, content and loading information is merged together.    Below is the actual checkReadyState method, which we have just discussed the deal with the code, and div convey to us to show that the parameters into it.    This method has also been included in the example of the 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); 
  ) 
  ) 
  CheckReadyState method for users to provide feedback page state information is useful.    The following table shows the value of its detection: 

  Uninitialized state value 0 (Uninitialized) 1 Loading (under load) 2 Loaded (already included) 3 Interactive (interactive) 4 Complete (completed) 
  You can load for each state to add a customized news - it is a simple string, it can also be a picture of the format string label (for example, an animated show that the loading GIF).    Below is an example: 

  Var loader = "<img src='images/loader.gif'>"; 
  Ajax.checkReadyState ( 'body', loader, loader, loader); 
  Not only way to deal with the request checkReadyState state, it also contains the HTTP object detection and returned to the requesting state. 

  A total of two.    1 2 8 


Related articles:

Novice web design notes 29 issues
  When you INTERNET this information Be traveling in the ocean, will find that many rich content, including original design unique personal website, I do not know you see this beautiful graceful website is a bit echocardiography.    Once you have the conditions for the Internet, and ...
Imitate the examples of high-speed objects
  Animation effects:  <EMBED SRC=http://www.webjx.com/img/flashs200409073.swf WIDTH=550 HEIGHT=200 PLAY=TRUE LOOP=TRUE QUALITY=HIGH>   3, open the "blending," and choose the linear filling, for the intermediate grey color (or black transparency then adjusted to 50), the t...
Use CSS Print regional and paging control, print simple statements
<html> <head>   <meta Name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">    <title> See </ title>    <meta Http-equiv="Content-Type" content="text/html; charset=gb2312">  &...
Page layout and design of the layout of basic knowledge
  Typesetting and page layout design of small foundation    Some people always believed that the website is the most important, do not need to engage in some window-dressing on things, but also to show MUD analogy.    However, safflower also need greenery foil.   ...
The ultimate questions, web printing (finishing)
  WEB printing usually need ScriptX.cab, here is the same, so is the same principle here will be explained in detail is how to control print issue.    Print the document must have two:    1: configuration: setting.js    2: Showing documents: print.js  &nb...