Introduction to JSON

May 08, 2021 JSON

1. JSON - Introduction

2. Online instance

3. JSON instance

4. What's in common with XML

5. Unlike XML

6. Why JSON?

JSON - Introduction

This section starts with a JSON instance and gives you a further look at JSON.

The first thing to understand is to understand JSON is a lightweight text data exchange format rather than a programming language, and its syntax supports only strings, values, boolean values and nulls, as well as objects and arrays on that basis, and detailed JSON syntax rules will be described in later chapters.

Online instance

With our editor, you can edit javaScript code online and then view the results at the click of a button:

JSON instance

<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>

<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>

Try it out . . .
Click the "Try it" button to view the online instance.

What's in common with XML

JSON is plain text
JSON is "self-describing" (human readable)
JSON has a hierarchy (values present in values)
JSON can be parsed via JavaScript
JSON data can be transferred using AJAX

Unlike XML

There is no end label
Shorter
Read and write faster
It can be parsed using the built-in JavaScript eval() method
Use an array
Reserved words are not used

Why JSON?

For AJAX applications, JSON is faster and easier to use than XML:

Use XML

Read the XML document
Use XML DOM to loop through the document
Read the value and store it in a variable

Use JSON

Read the JSON string
The JSON string is processed with eval().

This is the end of the introduction to JSON, and in the next chapter we'll start learning and using JSON!