Advanced AJAX with JSON

• By Kris Hadlock
• Oct 13, 2006
• Article is provided courtesy of Sams

Like this article? We recommend
Understanding AJAX (Digital Short Cut): Consuming the Sent Data with XML and JSON

There’s no doubt that AJAX is a powerful and user-enhancing group of technologies, but its many possibilities still aren’t widely known. In this article, we’ll take a look at how easy it can be to create an extremely powerful data transfer between the server and the client-side AJAX engine, using JavaScript Object Notation (JSON) and the JSON parser. We’ll explore how to create a group of objects (often referred to as a package in other languages), how to serialize the objects as JSON to be sent to the server, and how to deserialize server-side JSON as client-side JavaScript objects.

This article assumes that you understand JavaScript and how to create a basic AJAX engine, make requests, and receive responses from the server via AJAX. To learn more about these topics, see my article "How To Use AJAX." To follow along with the examples, you’ll need to download the source files. (You can also view a live sample.)

Getting Started

This article uses an AJAX engine that I created in order to abstract our AJAX requests and help us to share AJAX engine code between different applications. In order to use this engine, we simply import three JavaScript files and make requests to an object named AjaxUpdater. The engine will handle the rest, including delegating the response to the callback method specified in the request. Here’s an example of how we would make requests with this engine as well as import the associated files:

<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>
<script type="text/javascript">
    document.load = AjaxUpdater.Update(’GET’, URL, callback);
</script>

Let’s get started by covering JavaScript objects.