Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Speed Up Your AJAX-based Apps with JSON : Page 2

Find out how to improve your Web application performance by leveraging AJAX and JSON. In particular, you'll see the advantages of using JSON over XML as a lightweight JavaScript data-interchange format.


advertisement
Arrays and Objects: the JSON Fundamental Pillars
Basically, you use JSON to represent arrays and objects. In this context, by "object" I mean an unordered set of name/value pairs. For example, the object person can be represented as follows:

{ "person" : { "firstName" : "John", "lastName" : "Brown", "age" : 30, "sex" : "M" } }

Curly brackets ({ }) delimit objects in JSON. Each object begins with { and ends with }. In this case, person is the name of the object, followed by a list of the object's properties expressed as name/value pairs. In the preceding example the properties are: firstName, secondName, age, and sex. The value of a property can be one of the following types: string, number, object, array, true, false, or null. The example above uses three strings and one number—the age.

On the other hand, an array is an ordered set of values, where the values can be any of the types already mentioned. Here's an example of an array in JSON:

{"states" : [ "California", "Florida", "Alabama" ] }

At the beginning of this article I stated that JSON is a subset of JavaScript—that is, JSON text is nothing more than a literal representation of JavaScript objects and arrays. If you're not a JavaScript expert and still don't believe me, I'm going to demonstrate that. Let's get back to the representation of an object. In JavaScript, you could define a person object like this:



var person = new Object(); person.firstName = "John"; person.lastName = "Brown"; person.age = 30; person.sex = "M";

Or, using the literal notation:

var person = { "firstName" : "John", "lastName" : "Brown", "age" : 30, "sex" : "M" };

At which point you might object that, even if this last version looks like the JSON syntax, it is still not the same. Well, you're right, but look at the following code:

var obj = eval( {"person" : { "firstName" : "John", "lastName" : "Brown", "age" : 30, "sex" : "M" } } ); //display a popup with the person's first name. alert(obj.person.firstName);

Now I bet you are convinced that JSON is nothing more than a subset of JavaScript. The eval built-in JavaScript function is a real JavaScript interpreter and can be used to execute any JavaScript code. Yes, that's right! It takes just one single line of code to parse a JSON message. At this point, those of you—well, us—that used JavaScript to parse XML, are really appreciating JSON. However I don't want to discredit XML. It is and remains a great data-interchange format. It's a "must-have" format to let two different technologies talk transparently. But, in this case, JavaScript and JSON are not two different technologies! Actually they speak the same language (JavaScript) so why use an "interpreter" to let them communicate?

Using JSON with AJAX
Since JSON is JavaScript and AJAX is JavaScript couldn't we use them together to build brilliant Web 2.0 applications? The answer is yes, of course. As a sample app I developed a news ticker. Figure 2 shows the architecture of the sample application.

 
Figure 2. News Ticker architecture: You should always try to separate data access, business logic and presentation layer.
 
Figure 3. Observer Pattern: The Observer pattern is one of the most commonly-used design patterns.
At the beginning of this article I said I was going to use the Observer Pattern to implement the sample application. Figure 3 shows a class diagram that represents a simplified version of this very useful pattern.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap