Using jquery, part 3rd: Building Rich Internet applications with jquery and Ajax

This article supporting source code

Brief introduction

In recent months, the JQuery popularity index has climbed rapidly and is now the preferred JavaScript Library for WEB developers. At the same time, applications and requirements for rich Internet applications (Application,ria) are growing rapidly, as well as looking to replace desktop applications with browser-based applications. Both spreadsheets, payroll, and e-mail applications now reproduce a desktop-like experience in the browser. As the number of these applications grows and the functionality becomes more complex, JavaScript libraries will become increasingly important because they are a solid foundation for building these applications. JQuery has undoubtedly become a developer's best choice. This series of articles explores jQuery in depth and provides a solid foundation. With this foundation, developers can quickly and easily build their own RIA.

In a previous article in this series, you learned about the three basic components that are used to build an RIA and to add interactivity to a page. The first module is the Event module, which captures the user's arbitrary interaction with the page and responds in a programmatic way. For example, you can attach code to a button click, mouse move, and so on. The next module is the Attributes module, which explains how to get/set values on page elements and how to use them as data objects with variables. These values contain most of the information that determines what kind of response to provide to the user. Finally, you see how to do CSS processing and how to change the layout, color, font, and so on for any element on the page without reloading the page. Once you know these three modules, you have mastered the three basic elements of an interactive Web page-Get user interaction (event), gather information (Attribute), and provide feedback (CSS) based on events and information.

In this article, the three basic elements of an interactive Web page are explored further to provide the "cool" effects and features that are required for today's advanced Web applications. These additional modules are not critical to providing an RIA, but these effects and features can impress the user and greatly extend the scope and nature of the RIA's availability. The first module you will see is the effects module, which contains many features, such as hidden elements, moving elements everywhere, fading elements, and so on. In other words, these are the "bright spots" that make Web pages cool. The last module to discuss is the asynchronous JavaScript + XML (Ajax) module. Most people equate this module with RIA. Ajax makes it possible for WEB applications to interact with the server without overloading the pages, to deliver information to the server, and to get information from it (contrary to some opinions on the Web, Ajax is not simply a cool JavaScript animation tool). You'll find JQuery provides an incredibly easy-to-use Ajax tool. In fact, JQuery makes the use of Ajax as simple as invoking other JavaScript methods.

The sample application in this article is a summary showing how effects and Ajax modules fit into this sample WEB mail application. I'm going to add some effect to the sample program to make it more beautiful, and more importantly, I'm going to add some Ajax code so that I can display the information without overloading the page mail application.

Effects module

It is often easy to conclude from its name that the effects module contains only a few animations and effects, and these animations and effects are often avoided by some "regular" Web pages. But that is not the case. Almost all applications encounter situations where a page element needs to be hidden or its view should be switched based on the state of another page element. Such changes are important for an RIA because they allow you to load all the page elements of a page and then display only the information you need by hiding/displaying specific elements. The way to overload a page is not desirable. For example, a combo box with two options, one option is to hide the div, and one option is to display the div. Obviously, it is simpler and more efficient to hide/display this div with client code than to change the combo box and overload the page hide/display div. Only hide/show or let it fade in/out, it is entirely up to you.

As mentioned above, the most basic effect function is the show () and hide () functions. This is intuitive; they can be used to show and hide an element on a page, respectively.

Listing 1. hiding and displaying functions

//　shows　every　<p>　on　the　page
$("p").show();

//　hides　every　<p>　on　the　page
$("p").hide();

//　hides　every　other　<p>　on　the　page
$("p:odd").hide();

In addition to these basic operations, you can use Show () and hide () functions to more control how page elements are displayed and hidden. Related documents describe hide () as "graceful" display/hide, for Show (), which is the effect of combining fade and slide.

Before you begin to delve into some examples, it's worth looking back at the arguments passed to these effect functions. Each function (except the common Show () and Hide () functions) allows you to pass in the speed and function to be invoked when the effect is complete. Speed is used to control how quickly the effect appears. This parameter can be a "slow", "fast" or "normal" string. In addition, if you need to control the animation time accurately, you need to specify the number of milliseconds with the parameter. The second parameter of the effects function is itself a function that is called after the effect completes. This is important if you want to combine several effects into a larger effect, because it allows you to reliably control when an effect finishes and when the next effect starts.

Listing 2. Composite effect

//　the　img　with　an　ID　of　"picture"　should　start　hidden
//　when　the　"showPicture"　button　is　pressed,　show　the　img　with　an　ID　of　"picture"
//　and　animate　it,　so　it　appears　quickly　in　a　fade　In　and　slide　out,　and　when
//　it's　done　being　shown,　show　the　caption　of　the　picture,　which　is
//　always　in　the　span　right　after　the　　tag　

<input　type="button"　id="showPicture">

<span>This　is　the　picture's　caption</span>

//　jQuery　code　inside　the　document.ready()　function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
　　$("#picture").show("fast",　function(){
　　　　$("#picture").next().show();
　　});
});

//　notice　how　it　took　more　text　to　describe　what　you　want　to　happen　than　it　took
//　to　actually　code　it!