Meet JSON

If you have done Web application development with any modern toolset or technology lately, you have undoubtedly run across a trusty friend of mine: JSON (pronounced Jason). In recent years, JSON, or JavaScript Object Notation, has become the data interchange format of choice for Web applications. It has allowed many Web frameworks to flourish and has tremendously simplified my own job of creating IBM i web applications and frameworks. That’s why I decided to write a series of articles on JSON, in which I will explain the what, the why, and the how of JSON in detail.

Let’s get going!

JSON is a data interchange format. Instead of starting out with a boring textbook definition for JSON, let’s compare it to something you are probably already familiar with. Prior to JSON, one of the most common ways to exchange data in Web applications was through the use of XML. Since everyone has heard of XML, I like to define JSON as an alternative to XML that is intentionally made simple to use in Web applications. That is, when storing and exchanging data, we can use a format that is easier to process in the Web browser.

JSON is mostly relevant when used with true browser applications, that is, applications that use an HTML or a Rich DHTML (Dynamic HTML) front-end. If a Web application runs in an Applet, ActiveX Control, or Flash object, JSON will not help much, since these are all browser add-ons.

To get a feel for why JSON is such a good fit for true browser applications, let’s dissect the acronym for JavaScript Object Notation. The first part, JavaScript, refers to the browser’s built-in client-side language. The importance of JavaScript in Web application development cannot be underestimated. JavaScript is the only high-level language that the browser understands natively. If any exchange or processing of data is going to happen, JavaScript is most likely to be involved. This is especially true in recent years, where a technique called AJAX has become the predominant way to initiate most client-server communication from the Web browser. AJAX allows JavaScript to call the server for bits of data, instead of reloading the entire browser page with every user interaction.

Let’s now look at a typical interaction between a user and the browser.

• A user enters a customer number and clicks a button to see a list of customer orders.
• The browser, through the use of JavaScript and AJAX, sends a request to the IBM i for a list of customer orders.
• IBM i runs server-side code, typically RPG or PHP, to produce the list to send back as a response.
• The browser receives the response from the IBM i and renders the list of orders on the page.

At its core, the generated response is really just a string of data, or a stream of bytes, sent through the HTTP server back to the browser. It could be formatted in any way–comma delimited data, EDI-style fixed width chunks, or XML. The preferred way, however, is a format permeated with brackets and curly braces that we call JSON.

Which brings me to the second acronym, Object Notation. You may have heard that JavaScript is loosely typed and has fairly flexible syntax. Object Notation refers to the syntax in JavaScript that allows you to declare objects (also thought of as records or data structures) and arrays on the fly. Here is what the order list response may look like:

[ { "order_num": 1, "ship_to_location": "Dayton, OH", "total_amount": 308.29 }, 
{ "order_num": 2, "ship_to_location": "Irvine, CA", "total_amount": 456.50 }, 
{ "order_num": 3, "ship_to_location": "Rochester, MN", "total_amount": 56.00 } ]

Don’t worry about the syntax details just yet. But do realize that this is as native as it gets when it comes to representing data for JavaScript. JSON is the only format that doesn’t have to be parsed by the extra client-side code. It is automatically evaluated and consumed without any special parsing! In this case, when the PHP or RPG program sends the above string of data, an array of orders is automatically created on the client-side. Each order is represented by a JavaScript object, which is similar to a record in RPG. Now, the browser can proceed to render the data on the screen, without any other processing or delay. And that’s the beauty of the JSON format!

I hope this served as a good introduction to JavaScript Object Notation. But there is a lot more to discuss! We will dive into more details on how JSON is constructed, received, processed, debugged, and how JSON can present a graphical user interface for RPG applications in coming articles.

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot