467,877 Members | 1,238 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

Benchmarking AJAX - JSON vs. XML

JSON vs. XML
JSON and XML are basically used for the same purposeóto represent and interchange data. I'll try to show you why you might want to use JSON rather than XML in an AJAX context by showing you an example of how an data class (actually, a list of PHP documentation pages) might be represented, first in XML. and then in JSON. This side-by-side comparison should let you begin to understand how to represent data in JSON. The XML version:
XML Version JSON Version

Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <root>
  3.     <data> 
  4.         <id>1</id>                    
  5.         <name>PHP </name> 
  6.     </data>
  7.     <data> 
  8.         <id>2</id>                    
  9.         <name>Table of Contents</name> 
  10.     </data>
  11.     <data> 
  12.         <id>7</id>                    
  13.         <name>Getting Started</name> 
  14.     </data>
  15.     <data> 
  16.         <id>8</id>                    
  17.         <name>Introduction</name> 
  18.     </data>
  19.     <data> 
  20.         <id>9</id>                    
  21.         <name>What is PHP?</name> 
  22.     </data>
  23.     <data> 
  24.         <id>10</id>                    
  25.         <name>What can PHP do?</name> 
  26.     </data>
  27.     <data> 
  28.         <id>11</id>                    
  29.         <name>A simple tutorial</name> 
  30.     </data>
  31.     <data> 
  32.         <id>12</id>                    
  33.         <name>What do I need?</name> 
  34.     </data>
  35. </root>



Expand|Select|Wrap|Line Numbers
  1.       {
  2.                 "data": [
  3.                            {
  4.                                 "id" :    "1",
  5.                                 "name" :    "PHP"                            
  6.                             },
  7.                             {
  8.                                 "id" :    "2",
  9.                                 "name" :    "Table of Contents" 
  10.                             },
  11.                             {
  12.                                 "id" :    "7",
  13.                                 "name" :    "Getting Started"  
  14.                             },
  15.                             {
  16.                                 "id" :    "8",
  17.                                 "name" :    "Introduction"
  18.                             },
  19.                             {
  20.                                 "id" :    "9",
  21.                                 "name" :    "What is PHP?"
  22.                             },
  23.                             {
  24.                                 "id" :    "10",
  25.                                 "name" :    "What can PHP do?"
  26.                             },
  27.                             {
  28.                                 "id" :    "11",
  29.                                 "name" :    "A simple tutorial"
  30.                             },
  31.                             {
  32.                                 "id" :    "12",
  33.                                 "name" :    "What do I need?" 
  34.                             }
  35.                     ]
  36.           };
  37.  
There's nothing complicated going on here; now data contains the JSON formatted data we've been looking at throughout this article. However, this doesn't do much, as the data still isn't in a format that is obviously useful.

JSON Responses + Accessing the data

While it might not be obvious, that lengthy string above is just an array, and once you've got that array in a JavaScript variable, you can access it easily. In fact, you can simply separate the array with period delimiters. So, to access the name of the first entry of the PHP documentation pages, you would use code like this in your javascript:

Expand|Select|Wrap|Line Numbers
  1. data.name[0];


Take note that the indexing is zero-based. So this begins with the data in the data variable; it then moves to the item called name and pulls off the first record ([0]); The result is the string value "PHP".

Here are a few more examples using the same variable.
Expand|Select|Wrap|Line Numbers
  1. data.name[1]
  2.   // Value is Table of Contentsy"
  3.  
  4.  
  5.  

With this little bit of syntax, you can work with any variety of JSON-formatted data, all without any extra JavaScript toolkits or APIs.

Modifying JSON data

Just as you can access data with the dot and bracket notation shown above, you can easily modify data in the same way:
Expand|Select|Wrap|Line Numbers
  1. data.name[1] = "PHP is HERE";


That's all you need to do to change data in a variable once you've converted from a string to JavaScript objects.

Test Now -Benchmarking AJAX - JSON vs XML


My test results here
Sep 24 '08 #1
  • viewed: 4854
Share:

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by DartmanX | last post: by
13 posts views Thread by iannorton | last post: by
4 posts views Thread by VK | last post: by
1 post views Thread by dan.goyette | last post: by
4 posts views Thread by UKuser | last post: by
6 posts views Thread by =?Utf-8?B?U2hhd24gU2VzbmE=?= | last post: by
11 posts views Thread by kj | last post: by
3 posts views Thread by George | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.