- Getting Started
- JavaScript Objects
- Serializing JavaScript Objects as JSON
- Deserializing JSON as Client-Side JavaScript Objects
Serializing JavaScript Objects as JSON
The JavaScript objects that we just created can be serialized into JSON easily with the JSON parser. First, we’ll need to download a copy of the parser and add it to the document. Here’s the code I’m using in the example to import the script:
<script type="text/javascript" src="javascript/utils/jsonparser.js"></script>
I’ve added the parser to my javascript directory, in a subdirectory called utils.
Here’s the final chunk of the code that needs to be included to import the appropriate JavaScript files:
<script type="text/javascript" src="javascript/Auto.js"></script> <script type="text/javascript" src="javascript/Car.js"></script> <script type="text/javascript" src="javascript/Wheel.js"></script> <script type="text/javascript" src="javascript/utils/jsonparser.js"></script> <script type="text/javascript" src="javascript/model/Ajax.js"></script> <script type="text/javascript" src="javascript/model/HTTP.js"></script> <script type="text/javascript" src="javascript/model/AjaxUpdater.js"></script>
With the appropriate files imported, we can get to the serialization by simply adding two div elements and an onload event to the HTML document. The two div elements will have the IDs body and loading. The loading tag will be used by the AJAX engine to show progress, and the body tag will be used to display messages.
<div id="loading"></div> <div id="body"></div>
The onload event targets the body element and sets its innerHTML property to the JavaScript objects as a serialized JSON string. To accomplish this goal, I use the toJSONString method from the jsonparser.js file on the Auto object:
<body onload="document.getElementById(’body’).innerHTML = ’<b>Local objects serialized as JSON</b><br/>Auto Object: ’+ Auto.toJSONString();">
This code takes the Auto object and all of its children and serializes them as a JSON string with the JSON parser’s toJSONString method. This data can then be used as a data-interchange format for the server.
Remember that earlier we called the setColor method to change the color of the Car object. I used it then because I wanted to show you that serialization can take place at any point during runtime, but will reflect up-to-date data from the objects.
If you take a look at the results from the onload event, you’ll see the Car and Wheel objects wrapped in brackets ([ ]). These brackets are representative of the parent object, which is Auto. This means that the serialized JavaScript objects can be sent to the server during runtime to store up-to-date data, and received from the server at application startup in order to retrieve the most current data from the database. The best part is that all of this data exchange with the server can be using JSON in order to create a seamless process.
Let’s take a look at how the same data can be received from the server side and deserialized into client-side JavaScript objects with up-to-date data, which would typically come from a database.