About JSON and XML (Part 1) - Images: Japanese

Hey there, everyone!

We've covered HTTP communication as part of the Ajax prerequisites — now there's one more thing we need: 'JSON'. Let's take a look at what it is.

JSON's full name is 'JavaScript Object Notation', and it's pronounced "JAY-son". For the record, it has absolutely nothing to do with a certain hockey-mask-wearing, Friday the 13th enthusiast.

JSON is a type of data description language, and it's what the vast majority of the modern IT industry uses for data exchange — so it's a pretty important one.

Now, "what's a data description language?" — think of it as "a standardized way to express data using array and map (associative array) concepts." In JavaScript, associative arrays are called objects.

To understand data description languages, it helps to recall what arrays and associative arrays actually are. Arrays and associative arrays are data structures built around the concept of "key-value pairs."

Here's how you'd define an array and an associative array (object) in JavaScript:

var arr = ['miku', 'IA']; // array

var map = { // associative array (object)
	"name": "Miku Hatsune",
	"category": "VOCALOID"
};

If you're reading this article, you're probably already familiar with arrays and associative arrays. And when it comes to precisely identifying or extracting specific pieces of data, these structures are incredibly powerful.

At their core, they're just a way of labeling data or grouping it into categories — but the usefulness of that simple concept for data handling is hard to overstate.

The catch is that even though almost every programming language has some form of arrays and associative arrays, the syntax and internal behavior can differ quite a bit between languages.

For example, here's how you'd define them in PHP:

$arr = ['miku', 'IA']; // array

$map = [ // associative array
	'name' => 'personal account',
	'category' => 'VOCALOID'
];

The underlying concept of arrays and associative arrays is basically the same, but the syntax is noticeably different from JavaScript's.

It would be nice if everything could be built in the same language, but that's rarely the case. When you need to send data defined in one language and receive it in another, there's no straightforward way to handle it without some shared format. That's the problem data description languages solve.

In other words: "let's agree on a standardized format for expressing array/associative array-style data so that it can be understood by multiple languages."

Before JSON became widespread, 'XML' (Extensible Markup Language) was commonly used. XML looks like this:

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="testxsl.xsl"?>
<VOCALOID>
	<name0>Miku Hatsune</name0>
	<name1>IA</name1>
</VOCALOID>

That looks familiar, right? It's because HTML was actually designed with XML syntax as a reference. XML uses opening and closing tags just like HTML to structure data.

XML is perfectly functional, but writing it is a bit tedious, isn't it?

If you've written HTML, you've probably felt it — opening and closing tags take some effort to type, and it's easy to forget a closing tag or make a mistake. Those little errors tend to accumulate.

So people started thinking: "is there a more concise way to describe data using the same array/associative array concepts?" And the answer they landed on was JavaScript.

Let's look at JavaScript's array and associative array syntax again:

var arr = ['miku', 'IA']; // array

var map = { // associative array (object)
	"name": "Miku Hatsune",
	"category": "VOCALOID"
};

Compared to XML, it's a lot more compact. The array and associative array concepts are clearly represented, and it reads nicely. A solid choice.

JSON is the data description language that was created by smart people based on JavaScript's syntax. Here's what JSON looks like:

{
	"name":"Miku Hatsune",
	"category":"VOCALOID"
}

As you can see, it's almost identical to JavaScript syntax. And compared to XML, you can write the same data in far fewer characters — which also means smaller data payloads. That's a nice bonus.

Almost every programming language (with a few exceptions) has built-in support for processing JSON, so using JSON for communication tends to make everything run smoothly. And even in the rare case where a language doesn't have native JSON support, it's pretty easy to write your own parser by splitting strings. JSON is flexible like that.

In the next article, we'll go over how to actually write JSON. See you there!

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする