Are you caught up with the latest web technologies? Knowledge of HTML is pretty much essential if you want to go beyond simple web activities like browsing and posting on forums.  Then there are more advanced topics, like CSS (learn more here), AJAX (learn more here), and JSON.

Whether you plan to be a web developer or not, it's a good idea to at least know what is JSON, why it's important, and why it's used all around the web today.

What Is JSON?

what-is-json-intro

JSON stands for JavaScript Object Notation. It's an open standard format that allows data to be transferred across the web by using attribute-value pairs. That might sound a bit confusing, so let's delve into that a little more.

Let's say I have a balloon and you want my balloon. One way to make that happen would be to actually pack up the balloon and send it to you by mail. But an alternative method would be to describe to you the attributes of my balloon, which would allow you to recreate the same exact balloon without having to actually send the physical balloon.

My balloon might have a material attribute of value rubber. It might have a color attribute of value red. It might have a diameter attribute of value ten inches. It might have a gas attribute of value helium. Those four attribute-value pairs are enough for you to visualize my balloon, right?

That's pretty much how JSON works when it transmits data across the Internet.

What Good Is JSON?

what-is-json-diagram

JSON wasn't the first to utilize attribute-value pairs as a way to transfer data over the Internet. The tech-savvy among you might notice that it sounds an awful lot like XML. Well, as it turns out, JSON and XML perform many of the same tasks. So why pick JSON over XML?

In today's web, asynchronous loading of data is important. In other words, webpages want to be able to load new data without having to refresh the entire page to get it. This results in a smoother and more favorable browsing experience. JSON is great for sending and receiving asynchronous data because it's simple and easy to use.

But XML does the same thing! So why do some people prefer JSON?

One answer to that question can be found in JSON's name: JavaScript Object Notation. It's recognized natively by JavaScript, which is one of the most popular languages in the world. Since JSON is a subset of JavaScript, there's very little extra learning you have to do once you know JavaScript.

Another reason is that JSON is more readable than XML. Sure, it's easy to get used to XML when you've used it for a while, but glancing at an XML file can be overwhelming with all of its tags and verbosity. JSON is cleaner, easier for newbies to understand, and quite flexible with its basic data types.

See what JSON's creators have to say about this comparison over on their JSON vs. XML page.

What Does JSON Look Like?

JSON is just a series of attribute-value pairs which can be nested within themselves when necessary. For example, if our data object was a person, that person could be represented by the following JSON data:

    

what-is-json-json

Each line starts with an attribute followed by a colon, then the value for that attribute. That value can alos be an array, as seen with the "phoneNumbers" attribute above. The value can also be a series of more attribute-value pairs, which you can see in action with the "address" attribute. This is called an object.

For comparison, here's the same data represented by XML:

    

what-is-json-xml

Conclusion

JSON is just a way to represent data objects when transmitting them across the Internet. It's an alternative to XML that's native to JavaScript, which is one reason why it's so popular and widespread. The most common use for JSON is pulling data from web servers on demand.

Hopefully you now have a better understanding of JSON and how it's used in web development. For further learning, the JSON page on MDN is a great place to start.

Image Credits: JSON Magnified Via Shutterstock