Use jQuery and Ajax to build rich Internet applications

Bkjia.com documentOver the past few months, JQuery's Popularity Index has rapidly increased and has become the preferred JavaScript library for Web developers. At the same time, people's applications and needs for Rich Internet applications (RIA) are also growing rapidly, and we look forward to replacing desktop applications with browser-based applications. Both workbooks, payroll, and email applications now reproduce desktop-like experiences in browsers. As the number of these applications increases and functions become increasingly complex, the JavaScript library will become increasingly important because it is a solid foundation for building these applications. JQuery is undoubtedly the best choice for developers. 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 an article earlier in this series, you learned about the three basic components used to build RIA and add interactivity to pages. The first module is the Event module. With this module, users can capture arbitrary page interactions and respond programmatically. For example, you can add code to events such as Button clicking and mouse moving. The next module is the Attributes module, which explains how to obtain/set values on page elements and how to use them as data objects with variables. These values contain most of the information that determines the response to the user. Finally, you can see how to perform CSS processing and how to change the layout, color, and font of any elements on the page without reloading the page. After learning about these three modules, you will have mastered the three basic elements of the interactive Web page-getting user interaction (Event) and collecting information (Attribute) and provide feedback (CSS) based on events and information ).

In this article, we will further explore the three basic elements of interactive Web pages to provide the "cool" effects and features necessary for today's advanced Web applications. These additional modules are not crucial to the provision of RIA, but these effects and features will impress users and greatly expand the available range and features of RIA. The first module you will see is the Effects module, which contains many features, such as hidden elements, moving elements everywhere, and fade-in and fade-out elements. In other words, these are the "Highlights" that make Web pages cool ". The last module to be discussed is the Asynchronous JavaScript + XML (Ajax) module. Most people share this module with RIA. Ajax allows Web applications to interact with the server without the need to reload the page, transmit information to the server, and obtain information from it (contrary to some opinions on the Web, ajax is not just a cool JavaScript animation tool ). You will find that jQuery provides an extremely easy-to-use Ajax Tool. In fact, jQuery makes Ajax usage as simple as calling other JavaScript methods.

The sample application in this article is a summary of how the Effects and Ajax modules are integrated into this sample Web mail application. I will add some effects to this example program to make it more beautiful, and more importantly, I will add some Ajax code so that the information can be displayed without reloading the page mail application.

Effects Module

It is often concluded from its name that the Effects module only contains some animations and Effects, which are often avoided by some "regular" Web pages. However, this is not the case. Almost all applications will encounter this situation, that is, a page element needs to be hidden or its view should be switched based on the status of another page element. Such changes are important to an RIA because they allow you to load all page elements of a page and only display the required information by hiding/displaying specific elements. It is not advisable to reload the page. For example, a combo box with two options. One option is to hide the div, And the other option is to display the div. Obviously, hiding/displaying a div with client code is easier and more efficient than modifying the combo box and reloading the page to hide/display the div. It is up to you to hide/show or fade it in/out.

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

Listing 1. Hiding and displaying functions

Reference content is as follows: // 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, the show () and hide () functions can be used to control how page elements are displayed and hidden. Hide () is described as "beautiful" display/hide. For show (), it combines the effect of fade in and slide out.

Before going into some examples, let's look back at the parameters passed to these function effects. Each function (except the general show () and hide () Functions) allows you to pass in the speed and function to be called when the effect is complete. Speed is used to control the speed of results. This parameter can be a "slow", "fast", or "normal" string. In addition, if you need to precisely control the animation time, you need to specify the number of milliseconds with parameters. The second parameter of the Effects function is itself a function, which is called after the effect is complete. This is important if you want to combine several effects into a large-scale effect, because it can be used to reliably control when an effect is completed and when the next effect starts.

List 2. Compound Effect

Reference content is as follows: // The img with an ID of "picture" shocould 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!

The Effects module also has some other functions, which are very similar to show () and hide (), and basically implement the same functions. They are implemented in different ways. The slideDown () and slideUp () functions are used to show and hide a page element respectively. However, this is achieved by sliding the element down or down the animation effect (it is not difficult to see this from its name ). Similar to the enhanced hide () and show () functions I just mentioned, you can also control the sliding speed and the functions to be called when the effect is complete. In addition, there is another option to display/hide the page elements, namely, the fadeIn () and fadeOut () functions, as shown in its name, these two functions are used to fade the page element until the element is transparent and then disappear. They allow you to customize the speed and function to be called when the effect is complete.

• 5 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• Next Page