JavaScript

Creating the Front End of a Headlines System with AJAX

In this first part of a two-part series, I will show you how to develop a small application which uses AJAX as its workhorse. The application will display dynamic headlines, previously fetched from a simple XML file, on a web page.

These days, the number of websites that use AJAX for the driving technology to build richer Web applications is really remarkable. To see an illustrative example in action, you must take a look at the progressively popular Google's Gmail service, which demonstrates how an excellent implementation of JavaScript-based HTTP requests can be used for creating a full-featured web-based email application.

However, there's no need to examine only the Gmail service to realize the deep impact that AJAX-driven applications have had in the vast terrain of Web development. As you've probably seen, the Web includes plenty of sites that utilize AJAX to provide visitors with a richer and more interactive experience. Many of them introduce this technology particularly for creating small applications.

Speaking more specifically, there are numerous websites (most of them are online newspapers) that use a huge variety of AJAX-based systems to display their breaking news and headlines on the front page. This is very handy since these mechanisms also have additional features, like navigational buttons, cool image pre loaders, sound controls, and so forth.

To be frank, I don't want to be that ambitious with reference to the subject of this series, but since I found the above mentioned applications interesting, I propose to build a headlines system with AJAX, which can be easily extended with only minor hassles. In addition, one of the best features offered by this news-displaying mechanism is its ability to read all the headlines from a single XML file, something that speaks for itself about the versatility of the system.

Having introduced the theme of this two-part series, it's time to leap forward and learn how this AJAX-based headlines system can be created in a few simple steps. Let's get started!