What are the advantages of JSON over XML?

Although XML has been widely used in many applications, it is not perfect. Especially in AJAX applications, XMLHttpRequest checks the MIME type of the returned data, XMLHttpRequest runs XML Parser to parse the returned documents and build the corresponding DOM tree in the memory. Then, you can use the standard DOM method of JavaScript to operate the DOM tree. As we all know, DOM is not an efficient method. Another problem is that if you want to use JavaScript objects instead of XML data directly, you have to traverse the entire DOM tree to create the corresponding objects.

JSON is displayed in front of us.

JSON provides a standard data exchange format that is more suitable for AJAX applications. JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines.

Both XML and JSON use structuring to mark data. We will use an address book example to show the differences between them.

The address book is represented in XML as follows:

<?xml version='1.0' encoding='UTF-8'?>  <card>     <fullname>Sean Kelly</fullname>     <org>SK Consulting</org>     <emailaddrs>        <address type='work'>kelly@seankelly.biz</address>        <address type='home' pref='1'>kelly@seankelly.tv</address>     </emailaddrs>     <telephones>        <tel type='work' pref='1'>+1 214 555 1212</tel>        <tel type='fax'>+1 214 555 1213</tel>        <tel type='mobile'>+1 214 555 1214</tel>     </telephones>     <addresses>        <address type='work' format='us'>1234 Main St            Springfield, TX 78080-1216</address>        <address type='home' format='us'>5678 Main St            Springfield, TX 78080-1316</address>     </addresses>     <urls>        <address type='work'>http://seankelly.biz/ </address>        <address type='home'>http://seankelly.tv/ </address>     </urls>  </card>  

In JSON, it is:

{      "fullname": "Sean Kelly",      "org": "SK Consulting",      "emailaddrs": [         {"type": "work", "value": "kelly@seankelly.biz"},         {"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}      ],       "telephones": [         {"type": "work", "pref": 1, "value": "+1 214 555 1212"},         {"type": "fax", "value": "+1 214 555 1213"},         {"type": "mobile", "value": "+1 214 555 1214"}      ],      "addresses": [         {"type": "work", "format": "us",          "value": "1234 Main StnSpringfield, TX 78080-1216"},         {"type": "home", "format": "us",          "value": "5678 Main StnSpringfield, TX 78080-1316"}      ],       "urls": [         {"type": "work", "value": "http://seankelly.biz/"},         {"type": "home", "value": "http://seankelly.tv/"}      ]   }  

JSON provides two structures:

1. Name/value pair, in the format of {"name": "value ",...} for example: {"fullname": "Sean Kelly"}, you can think of it as an object, a hash table, a dictionary, and so on.
2. Array, which is an ordered list of values. An array ends with "[" and. Values are separated by commas.

JSON values can be string, number, true, false, null, object, or array enclosed by double quotation marks ). These structures can be nested.

In fact, most modern computer languages support them in some form. This makes it possible to exchange a data format between programming languages that are also based on these structures.

War between XML and JSON in AJAX

In AJAX applications, you can use XMLHttpRequest to read XML or JSON files. A typical AJAX call is as follows:

var req = new XMLHttpRequest();   req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);   req.onreadystatechange = myHandler;   req.send(/*no params*/null);     

When the Web server responds, the processing subroutine (myHandler in this example) is called repeatedly.

An XML program segment that processes the address book may be:

function myHandler() {      if (req.readyState == 4 /*complete*/) {          // Update address field in a form with first street address          var addrField   = document.getElementById('addr');          var root        = req.responseXML;          var addrsElem   = root.getElementsByTagName('addresses')[0];          var firstAddr   = addrsElem.getElementsByTagName('address')[0];          var addrText    = fistAddr.firstChild;          var addrValue   = addrText.nodeValue;          addrField.value = addrValue;      }   }        

Note: XMLHttpRequest automatically creates a DOM tree. You can use the responseXML attribute to access the tree and perform a series of processing operations, such as accessing elements through getElementsByTagName. But for complicated XML, This is a tedious and tasteless task!

Look at JSON again:

function myHandler() {      if (req.readyState == 4 /*complete*/) {          var addrField = document.getElementById('addr');          var card = eval('(' + req.responseText + ')');          addrField.value = card.addresses[0].value;      }   }     

The first thing to do with JSON is to manually parse the JSON response, but remember that JSON is a subset of JavaScript. In fact, you only need to call a line of eval to complete the parsing. Next, the object accessing JSON is exactly the same as accessing any JavaScript Object:

Card. addresses [0]. the value is "1234 Main Stb &" card. addresses [0]. type is "work" card. addresses [1] is home address; card. fullname is "Sean Kelly"

After thousands of tests, the speed of JSON Parsing is almost 10 times faster!

To popularize JSON, there are two problems:

1. How many servers are willing to provide JSON output? As the speed advantage of JSON is recognized by everyone, I believe it will increase.
2. Executing the eval operation may cause a security vulnerability. So we 'd better use a JSON parser, but fortunately. You can find one in http://www.json.org. In the future, JSON support may be included in the ECMAScript standard.