jQuery Simplifies Your AJAX/JavaScript Development : Page 4

jQuery in Action
A very simple application will demonstrate all of the interesting aspects of jQuery presented so far, specifically:

• The power and simplicity of the API
• CSS and DOM manipulation
• Asynchronous calls with direct support for JSON

The example application represents a article-aggregation site that enables users to navigate and search topic lists of interest. (Sample applications are included in the downloadable source code.) To begin, page users have access to a main page that lists articles entries related to a particular topic (in this case, Latin – see Figure 1). Entries are presented in a table with each row being a link to an article entry.

When the user clicks on an entry link, an abstract of the article displays in the area below the table (see Figure 2).

Figure 1. List of Articles: A main page lists articles entries related to a particular topic, in this case, Latin.

Figure 2. Article Entry View: An abstract of the article displays in the area below the table.

The user can then pick keywords from the article and perform a search for similar articles. The search is executed as jQuery's GetJSON call to results.txt, which returns a list of the matching articles (the JSON object) with matches based on the requested keywords. Matches are processed by the function renderTable:

	$.getJSON("http://localhost:8080/Articles/results.txt", //Gives us parsed JSON automatically
	  { keywords: params }, //The params for the query
	  renderTable	//The callback function

The renderTable function iterates over the results (the JSON object) and presents them in a results table (see Figure 3).

Figure 3. Results in the Table: The renderTable function iterates over the results (JSON object) and presents them in a results table.

For further development, the downloadable source code includes a sample HTML file with jQuery.js and a custom article.js script file inside the Articles.war file, which also provides simplified server-side functionality. Beyond these features, jQuery also provides excellent support for event-bound operations and AJAX effects, as well as extremely structured support for third-party extensions.

jQuery's support for event-bound operations is particularly attractive for developers, as is the jQuery event-binding method. Event-bound operations are accomplished through the bind() function, which supports DOM 0, DOM 1, and DOM 2 levels in a completely transparent fashion, making this complicated aspect of cross-browsers development much simpler.

Like other AJAX libraries, jQuery also supports a number of effects typical for AJAX-enabled applications, such as slide shows, fading, animations, and others.

Worth a Look
Now you know how one mature and complete library can help you implement your AJAX/JavaScript solutions in a simple, concise, and powerful fashion. I have chosen jQuery for all of the projects I have worked on during the past twelve months, and not once has it fallen short of expectations.

I strongly recommend this library for all of your AJAX implementations, and I encourage you to further explore all of its features and its many plugins. I expect that you will find jQuery a very valuable addition.

Previous Page