SON stands for JavaScript Object Notation and is a lightweight data-interchange format. Because it is text-based it is easy for humans to read and write, and it has a regular syntax that's easy to parse programmatically. JSON is basically a subset of JavaScript and, as you'll see, is even easier to parse than XML.

AJAX stands for Asynchronous JavaScript and XML. It's a Web development technique used to make non-blocking calls to the server using JavaScript. The "and XML" part is likely to fade away as the time goes by. Even though AJAX initially used XML as the format for transferring data, any format will work, including HTML, plain text and—why not—JSON. After all, from a machine viewpoint XML, HTML and JSON are all plain text!

In this article you'll see how to develop a news ticker using AJAX, JSON, JavaScript and PHP. Figure 1 should clarify the intent of the application.

Figure 1. News Ticker in action: The image doesn't pay off since the scrolling feature is not visible.

If you don't know PHP and are more familiar with another server-side technology such as ASP.NET or J2EE, don't worry; the techniques apply to these technologies/languages as well, and you'll find it will be very easy to translate the PHP script into another language.

Furthermore, by developing the sample app, you'll see how to implement the Observer Pattern in JavaScript.

JSON vs. XML
JSON and XML are basically used for the same purpose—to represent and interchange data. I'll try to show you why you might want to use JSON rather than XML in an AJAX context by showing you an example of how an employee class (actually, a list of employees) might be represented, first in XML. and then in JSON. This side-by-side comparison should let you begin to understand how to represent data in JSON. Here's the XML version:

XML Version	JSON Version
<?xml version='1.0' encoding='UTF-8'?> <employees> <employee> <surname>Lacava</surname> <name>Alessandro</name> <city>Milan</city> <state>Italy</state> <department>IT</department> </employee> <employee> <surname>Brown</surname> <name>John</name> <city>Rome</city> <state>Italy</state> <department>IT</department> </employee> </employees>	{ "employees" : [ { "surname" : "Lacava", "name" : "Alessandro", "city" : "Milan", "state" : "Italy", "department" : "IT" }, { "surname" : "Brown", "name" : "John", "city" : "Rome", "state" : "Italy", "department" : "IT" } ] }

As you can see JSON is less verbose than XML, which translates directly to improved performance—less data means fewer bytes to transfer and parse, in other words JSON requires less bandwidth and fewer memory and CPU resources. JavaScript developers know that JSON is a subset of JavaScript. Indeed, the JSON code you just saw is a literal representation of arrays and objects in JavaScript!