Getting Started with JSON

Exclusive offer: get 80% off this eBook here
JavaScript and JSON Essentials

JavaScript and JSON Essentials — Save 80%

Successfully build advanced JSON-fueled web applications with this practical, hands-on guide with this book and ebook

₨554.00    ₨110.80
by Sai Srinivas Sriparasa | October 2013 | Open Source Web Development

This article by Sai Srinivas Sriparasa, author of JavaScript and JSON Essentials, shows the importance of JSON or JavaScript Object Notation and also explains why it is a very popular data interchange format.

(For more resources related to this topic, see here.)

JSON was developed by Douglas Crockford. It is text-based, lightweight, and a human-readable format for data exchange between clients and servers. JSON is derived from JavaScript and bears a close resemblance to JavaScript objects, but it is not dependent on JavaScript. JSON is language-independent, and support for the JSON data format is available in all the popular languages, some of which are C#, PHP, Java, C++, Python, and Ruby

JSON is a format and not a language.

Prior to JSON, XML was considered to be the chosen data interchange format. XML parsing required an XML DOM implementation on the client side that would ingest the XML response, and then XPath was used to query the response in order to access and retrieve the data. That made life tedious, as querying for data had to be performed at two levels: first on the server side where the data was being queried from a database, and the second time was on the client side using XPath. JSON does not need any specific implementations; the JavaScript engine in the browser handles JSON parsing.

XML messages often tend to be heavy and verbose, and take up a lot of bandwidth while sending the data over a network connection. Once the XML message is retrieved, it has to be loaded into memory to parse it; let us take a look at a students data feed in XML and JSON.

The following is an example in XML:

Let us take a look at the example in JSON:

As we notice, the size of the XML message is bigger when compared to its JSON counterpart, and this is just for two records. A real-time feed will begin with a few thousands and go upwards. Another point to note is the amount of data that has to be generated by the server and then transmitted over the Internet is already big, and XML, as it is verbose, makes it bigger. Given that we are in the age of mobile devices where smart phones and tablets are getting more and more popular by the day, transmitting such large volumes of data on a slower network causes slow page loads, hang ups, and poor user experience, thus driving the users away from the site. JSON has come about to be the preferred Internet data interchange format, to avoid the issues mentioned earlier.

Since JSON is used to transmit serialized data over the Internet, we will need to make a note of its MIME type. A MIME (Multipurpose Internet Mail Extensions) type is an Internet media type, which is a two-part identifier for content that is being transferred over the Internet. The MIME types are passed through the HTTP headers of an HTTP Request and an HTTP Response. The MIME type is the communication of content type between the server and the browser. In general, a MIME type will have two or more parts that give the browser information about the type of data that is being sent either in the HTTP Request or in the HTTP Response. The MIME type for JSON data is application/json. If the MIME type headers are not sent across the browser, it treats the incoming JSON as plain text.

The Hello World program with JSON

Now that we have a basic understanding of JSON, let us work on our Hello World program. This is shown in the screenshot that follows:

The preceding program will alert World onto the screen when it is invoked from a browser. Let us pay close attention to the script between the <script> tags.

In the first step, we are creating a JavaScript variable and initializing the variable with a JavaScript object. Similar to how we retrieve data from a JavaScript object, we use the key-value pair to retrieve the value. Simply put, JSON is a collection of key and value pairs, where every key is a reference to the memory location where the value is stored on the computer. Now let us take a step back and analyze why we need JSON, if all we are doing is assigning JavaScript objects that are readily available. The answer is, JSON is a different format altogether, unlike JavaScript, which is a language.

JSON keys and values have to be enclosed in double quotes, if either are enclosed in single quotes, we will receive an error.

Now, let us take a quick look at the similarities and differences between JSON and a normal JavaScript object. If we were to create a similar JavaScript object like our hello_world JSON variable from the earlier example, it would look like the JavaScript object that follows:

The big difference here is that the key is not wrapped in double quotes. Since a JSON key is a string, we can use any valid string for a key. We can use spaces, special characters, and hyphens in our keys, which is not valid in a normal JavaScript object.

When we use special characters, hyphens, or spaces in our keys, we have to be careful while accessing them.

The reason the preceding JavaScript statement doesn't work is that JavaScript doesn't accept keys with special characters, hyphens, or strings. So we have to retrieve the data using a method where we will handle the JSON object as an associative array with a string key. This is shown in the screenshot that follows:

Another difference between the two is that a JavaScript object can carry functions within, while a JSON object cannot carry any functions. The example that follows has the property getName, which has a function that alerts the name John Doe when it is invoked:

Finally, the biggest difference is that a JavaScript object was never intended to be a data interchange format, while the sole purpose of JSON was to use it as a data interchange format.


This article introduced us to JSON, took us through its history, and its advantages over XML. It focussed on how JSON can be used in web applications for data transfer

Resources for Article:

Further resources on this subject:

JavaScript and JSON Essentials Successfully build advanced JSON-fueled web applications with this practical, hands-on guide with this book and ebook
Published: October 2013
eBook Price: ₨554.00
Book Price: ₨924.00
See more
Select your format and quantity:

About the Author :

Sai Srinivas Sriparasa

Sai Srinivas Sriparasa is a web developer and an open source evangelist living in the Stamford area. Sai was the lead developer for building Dr. Oz’s website, and has led teams for companies such as Sprint Nextel, West Interactive, and Apple. Sai’s repertoire includes JavaScript, PHP, Python, HTML5, responsive web development, ASP.NET, C#, and Silverlight.

Books From Packt

 Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

 Object-Oriented JavaScript - Second Edition
Object-Oriented JavaScript - Second Edition

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

 Moodle JavaScript Cookbook
Moodle JavaScript Cookbook

Jasmine JavaScript Testing
Jasmine JavaScript Testing

Social Data Visualization with HTML5 and JavaScript
Social Data Visualization with HTML5 and JavaScript

 iPhone JavaScript Cookbook
iPhone JavaScript Cookbook

Object-Oriented JavaScript
Object-Oriented JavaScript

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software