In-depth understanding of AJAX Response Processing

Request status

The Request status of the AJAX object is the same as that of the requested file. The HTTP object contained in the AJAX file processes all HTTP status code definitions described by W3C and returns them to the request method. Status Code is divided into five parts:

· 1xx of information

· Successful 2xx

· Redirection 3xx

· Client error 4xx

· Server error 5xx

The first digit in the preceding figure indicates the status code of a certain category. For example, if 2xx is successful, it means that it contains all the status code. The first number of the HTTP object check status code and performs a Conversion Based on the code category. After a category is detected, the HTTP object sends it to the response method, which returns the status code as a string. This is the HTTP status method:

This. status = function (_ status) { Var s = _ status. toString (). split (""); Switch (s [0]) { Case "1 ": Return this. getInformationalStatus (_ status ); Break; Case "2 ": Return this. getSuccessfulStatus (_ status ); Break; Case "3 ": Return this. getRedirectionStatus (_ status ); Break; Case "4 ": Return this. getClientErrorStatus (_ status ); Break; Case "5 ": Return this. getServerErrorStatus (_ status ); Break; } }

Status Code is processed by checking the first number of the Code. Once the code check is completed, the original status code is sent to an appropriate method, which sends a string form of status code to the onResponse method. Then we can display this message to the user. If any error occurs, she/he will know what happened. On the other hand, if the request is successful, the data is displayed.

　　ResponseText and ResponseXML

The content of the response information may be in different forms, such as XML, plain text, (X) HTML, or JavaScript Object symbol (JSON ). We can use two different methods to handle different received data formats: responseText or responseXML. The responseText method is used in XML-based formats. It uses the response information as a string to return precise content. ResponseText is used for plain text, (X) HTML, and JSON. Using this method in plain text or HTML is simple:

If (ajax. checkReadyState ('body', 'loading... ', 'loading...') = "OK ") { Document. getElementById ('body'). innerHTML = ajax. request. responseText; }

It's the simplest! Once the load response information is complete, we call the AJAX object, use responseText to retrieve its value, and add it to the page.

Processing JSON response information requires a little more skill than processing plain text or (X) HTML. The following is an example of a JSON file:

{'Header': 'How to Handle the Ajax response ', 'Description': 'an in-depth explanation of how to handle the Ajax response .', 'Sourceurl': 'http: // www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip '}

The data is divided into two parts by the colon (:): Tag Name and value. The additional data is divided into new name/value pairs by commas. Now we know what JSON looks like. Here is how we analyze it:

If (ajax. checkReadyState ('body', 'loading... ', 'loading...') = "OK ") { Eval ("var response = (" + ajax. request. responseText + ")"); Document. getElementById ('body'). innerHTML = "<B>" + response. header + "</B> <br/>" + Response. description + "<br/>" + "<A href = '" + response. sourceUrl + "'> Download the source files </a> "; }

JSON data is first analyzed by JavaScript (simple eval () process is used ). Once the data has been analyzed and the response information objects have been created, we can simply get their response information values by name.

ResponseText can not only add content to the page, but also be useful when debugging AJAX requests. For example, you may not be ready to analyze the data, because you do not know what the labels are, whether they are XML or JSON files. This requires a way to detect the analyzed data. Once you know all the tag names, all you need to do is write code.

ResponseXML is also quite simple to use. However, similar to the JSON format, XML requires data analysis. The first transaction we need to execute is to identify the root node in the XML response information.

Var response = ajax.request.responseXML.doc umentElement;

Next, we get all the elements by name and get their values:

Var header = response. getElementsByTagName ('header') [0]. firstChild. data; Var description = response. getElementsByTagName ('description') [0]. firstChild. data; VaR sourceurl = response. getelementsbytagname ('sourceurl') [0]. firstchild. Data;

Finally, we display the response information in the corresponding div Tag:

Document. getelementbyid ('body'). innerhtml = "<B>" + header + "</B> <br/>" + Description + "<br/>" + "<A href = '" + sourceurl + "'> download the source files </a> ";

JSON is faster than XML when JavaScript is used, because the analysis code required by JSON is much less than XML, which directly leads to a faster JSON speed when analyzing a large amount of data. JSON is not as good as XML Because XML is more supported and more server-side development options are supported. You can make a choice based on the environment and the purpose of the request.

AJAX response information is an important part of AJAX communication. You need to process a lot of information, including the ready status, error handling, and loading status, and finally display it. With this information, you can focus on the response information to provide more information.