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

Security Concerns and JSON Support in Other Languages
You've seen that parsing a JSON string is as simple as using the eval function. The problem with this function is that it executes any JavaScript code! This can be potentially dangerous if you're not sure where the data comes from, and is particularly dangerous when it comes from third parties and not from the same Web server. In such cases you should use a JSON parser rather than the built-in JavaScript eval command. A JSON parser accepts only JSON text (not any JavaScript) so it is much safer. Obtaining a JSON parser is simple for most languages. The official JSON Web site offers APIs for most languages, including PHP, Java and C# that you can use to parse JSON text without difficulty, with one or two lines of code. To parse JSON text safely on the client-side, you can use this open-source JavaScript implementation of a JSON parser. Even when you add a separate parser, the process stays very simple. Indeed, to encode and decode JSON text you just need a couple of lines of code.

For example, to convert from JSON text into JavaScript code you use the parseJSON method:

   var myObject = myJSONtext.parseJSON();

And to serialize a JavaScript data structure into JSON text you use the toJSONString method:

   var myJSONText = myObject.toJSONString();

The latter function also takes care of escaping double quotes and other embedded special characters during the conversion.

In this article you've seen how JSON can simplify the code of your AJAX Web applications. The sample app showed how you can develop a highly-customizable news ticker that implements the Observer Pattern in JavaScript. This pattern lets you extend the application easily. For example, you could create another observer component that displays the news items using a time interval. To do that, you would just need to create another JavaScript class and add the logic to its update method that receives a JavaScript array representing the news. Then you can add this new observer object to the observee, ContentRetriever. One way would be by passing it to the ContentRetriever's constructor:

   var marquee = new Marquee(...);
   var newTicker = new NewTicker(...);
   var contentRetriever = new ContentRetriever("./tickerDataRetriever.php", [marquee, newTicker]);
   ...
   contentRetriever.getContent();

Another way would be to add the observer using the ContentRetriever's attach method:

   var marquee = new Marquee(...);
   var contentRetriever = new ContentRetriever("./tickerDataRetriever.php", [marquee]);
   ...
   var newTicker = new NewTicker(...);
   contentRetriever.attach(newTicker);
   ...
   contentRetriever.getContent();

Running the Sample Code
This article touched many areas (JSON, AJAX, JavaScript, Observer Pattern, CSS), making it impossible to examine each and every line of code thoroughly. However, you can freely download the fully-commented code for this article and inspect the remaining code yourself. One last note. The PHP code for this article needs to be run on a Web server—Apache HTTP Server will do. If, for example, you put the code within the Ticker folder you would call it using a similar URL:

   http://localhost/Ticker/demo.htm

Of course you will need to change the preceding URL to match your environment.

Previous Page

Other Articles by this Author