Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
JavaScript and JSON Essentials

You're reading from   JavaScript and JSON Essentials Build light weight, scalable, and faster web applications with the power of JSON

Arrow left icon
Product type Paperback
Published in Apr 2018
Publisher
ISBN-13 9781788624701
Length 226 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Sai S Sriparasa Sai S Sriparasa
Author Profile Icon Sai S Sriparasa
Sai S Sriparasa
Bruno Joseph D'mello Bruno Joseph D'mello
Author Profile Icon Bruno Joseph D'mello
Bruno Joseph D'mello
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Getting Started with JSON 2. The JSON Structures FREE CHAPTER 3. AJAX Requests with JSON 4. Cross-Domain Asynchronous Requests 5. Debugging JSON 6. Building the Carousel Application 7. Alternate Implementations of JSON 8. Introduction to hapi.js 9. Storing JSON Documents in MongoDB 10. Configuring the Task Runner Using JSON 11. JSON for Real-Time and Distributed Data 12. Case Studies in JSON 13. Other Books You May Enjoy

JSON, a data exchange format

To define JSON, we can say it is a text-based, lightweight, and 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 popular languages, some of which are C#, PHP, Java, C++, Python, and Ruby.

JSON can be used in web applications for data transfer. Consider the following block diagram of the simple client-server architecture. Assume that the client is a browser that sends an HTTP request to the server, and the server serves the request and responses as expected. This is visualized as in the following screenshot:

In the preceding two-way communication, the data format used is a serialized string, with the combination of key-value pairs enveloped in parentheses; that is JSON!

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. This 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 a second time 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:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- This is an example of student feed in XML -->
<students>
<student>
<studentid>101</studentid>
<firstname>John</firstname>
<lastname>Doe</lastname>
<classes>
<class>Business Research</class>
<class>Economics</class>
<class>Finance</class>
</classes>
</student>
<student>
<studentid>102</studentid>
<firstname>Jane</firstname>
<lastname>Dane</lastname>
<classes>
<class>Marketing</class>
<class>Economics</class>
<class>Finance</class>
</classes>
</student>
</students>

Let us take a look at the example in JSON:

/* This is an example of student feed in JSON */
{
"students" :{
"0" :{
"studentid" : 101,
"firstname" : "John",
"lastname" : "Doe",
"classes" : [
"Business Research",
"Economics",
"Finance"
]
},
"1" :{
"studentid" : 102,
"firstname" : "Jane",
"lastname" : "Dane",
"classes" : [
"Marketing",
"Economics",
"Finance"
]
}
}
}

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 thousand and go upwards. Another point to note is that 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 smartphones 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 users away from the site. JSON has come 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.

Let us zoom in on the following block diagram, which shows how the requested data is sent in the client-server architecture mentioned earlier:

A Multipurpose Internet Mail Extensions (MIME) type is an internet media type; it is a two-part identifier for content that is being transferred over the internet. 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 MIME type headers are not sent across the browser, it treats the incoming JSON as plain text.

Nowadays, the content-type key, which is derived from mime-type itself, is used in the headers.
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime