Deep understanding of the processing of AJAX Response Information (2)

Source: Internet
Author: User
Tags add format object error handling eval header json string
ajax| response Request Status

The requested State of the Ajax object is the same as the HTTP status of the requested file. The HTTP object contained in the Ajax file handles all the HTTP status code definitions for the WWW description and returns them to the request method. The status code is divided into five sections:

· 1XX of information

· Success of the 2XX

· REDIRECT 3xx

· Client Error 4xx

· Server Error 5XX

The first one in the number above represents a category's status code. For example, the success is 2xx, which means that it contains all the status codes between 200-299. The HTTP object checks the first digit of the status code and performs a conversion based on the category to which the code belongs. After the category is detected, the HTTP object sends it to the response method, which returns the status code as a string. This is the HTTP state 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
}
}

The status code is handled by detecting the first digit of the code. Once code detection is complete, the original status code is sent to an appropriate method that sends a string-form status code to the Onresponse method. Then we can show the message to the user, and if something goes wrong, he or she knows what's going on. On the other hand, if the request is successful, the data is displayed.

   ResponseText and Responsexml

The content of the response information can be in many different forms, such as XML, plain text, (X) HTML, or JavaScript object symbols (JSON). We can do this in two different ways, depending on the format of the data received: using ResponseText or Responsexml. The ResponseText method is used in those formats that are not xml-based. It takes the response information as a string and returns the exact content. Plain text, (X) HTML and JSON all use ResponseText. It is easy to use this method on plain text or HTML:

if (ajax.checkreadystate (' body ', ' loading ... ', ' Loading ... ', ' loading ... ') = = "OK")
{
document.getElementById (' body '). InnerHTML = Ajax.request.responseText;
}

It's the easiest! Once the response information is loaded, we call the Ajax object, retrieve its value with ResponseText, and add it to the page.

Processing JSON response information requires a little more skill than working with plain text or (X) HTML. Here is an example of how we parse a JSON file:

{' Header ': ' How to Handle the Ajax Response ',
' Description ': ' An in-depth explanation's how to handle the Ajax response. '
' sourceURL ': ' Http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip '}

The data is divided into two parts by a colon (:): The label name and the value. The additional data is separated by commas (,) into a new name/value pair. Now that we know what JSON looks like, here's how we analyze it:

if (ajax.checkreadystate (' body ', ' loading ... ', ' Loading ... ', ' loading ... ') = = "OK")
{
Eval ("var response = (" +ajax.request.responsetext+ ")");
document.getElementById (' body '). InnerHTML = "<b>" + Response.header + "</b><br/>"
+ response.description + "<br/><br/>"
+ "<a href= '" + Response.sourceurl + "' >download the source files</a>";
}

JSON data is first parsed by JavaScript (using the Simple eval () procedure). Once the data has been parsed and the response information object established, we can simply get their response information values by name.

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

The use of Responsexml is also quite simple. But like the JSON format, XML requires data analysis. The first transaction we need to perform is to identify the root node in the XML response information.

var response = Ajax.request.responseXML.documentElement;

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/><br/>"
+ "<a href= '" + sourceURL + "' >download the source files</a>";

When JavaScript is used, JSON is faster than XML, because JSON requires less parsing code than XML, which directly results in faster parsing of large amounts of data. The place where JSON is inferior to XML is that XML is more supported and has more server-side development options. 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 handle a lot of information, including the ready state, error handling, and loading status, and eventually display it. With this information, you can focus on the response information and provide more information to the user.
    • 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)


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.