Book Image

JavaScript and JSON Essentials - Second Edition

By : Bruno Joseph D'mello, Sai S Sriparasa
Book Image

JavaScript and JSON Essentials - Second Edition

By: Bruno Joseph D'mello, Sai S Sriparasa

Overview of this book

JSON is an established and standard format used to exchange data. This book shows how JSON plays different roles in full web development through examples. By the end of this book, you'll have a new perspective on providing solutions for your applications and handling their complexities. After establishing a strong basic foundation with JSON, you'll learn to build frontend apps by creating a carousel. Next, you'll learn to implement JSON with Angular 5, Node.js, template embedding, and composer.json in PHP. This book will also help you implement Hapi.js (known for its JSON-configurable architecture) for server-side scripting. You'll learn to implement JSON for real-time apps using Kafka, as well as how to implement JSON for a task runner, and for MongoDB BSON storage. The book ends with some case studies on JSON formats to help you sharpen your creativity by exploring futuristic JSON implementations. By the end of the book, you'll be up and running with all the essential features of JSON and JavaScript and able to build fast, scalable, and efficient web applications.
Table of Contents (20 chapters)
Title Page
Copyright and Credits
Dedication
Packt Upsell
Contributors
Preface
Index

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.

Note

Nowadays, the content-type key, which is derived from mime-type itself, is used in the headers.