Ajax makeover, part 1th: Improving existing sites with Ajax and jquery

Ajax technology has changed the appearance of large commercial web applications, but many smaller web sites do not have enough resources to rebuild the full user interface (UI). Some of the new features of Ajax can solve real-world interface problems and improve the user experience. This article will show you how to use a simple modal window to eliminate pop-up windows and navigation corners. By applying the idea of progressive enhancement (progressive enhancement), these enhanced UI features are guaranteed to not compromise site accessibility, and to strictly comply with WEB standards.

This article assumes that you have a solid grasp of Hypertext Markup Language (hypertext Markup language,html) and cascading style sheets (cascading style sheet,css), with a basic understanding of JavaScript programming and Ajax. The sample application is built using client code only; The techniques demonstrated in this article apply to any server-side application framework. To run the sample site, you need to run at least one basic WEB server on the local host. Alternatively, you can just follow the source code and view the running sample site on my Web server (see Resources for a link).

Introduction to the concept: using Ajax to improve your site

Guide the user to follow a specific path-that is, from product search to payment purchase-this requirement is as long as the Web itself. It has always been fraught with risks: getting users to lose their way. The longer and more complex your navigation path, the more content users experience. You need to provide users with enough information to prevent them from losing interest in the navigation process.

In the WEB 1.0 world, the shopping site streamlines the user experience by constructing a smooth path (from search and result to selection and purchase). When the purchase path provides information that does not meet the needs of the user, they need to navigate through the product details or comparison pages that provide more information. The problem with this approach is that they leave the user out of the purchase path and increase the user's chances of abandoning the purchase. It is also difficult to maintain because your navigation logic must store information about how the user reached the dead end.

Pop-up windows seem to provide a solution. The direct distribution path in the main window is not disturbed by providing supplemental information through a pop-up window. Unfortunately, however, pop-up windows are confusing and objectionable. They may be easier to maintain than the navigation detours above, but they are likely to leave the user out of the purchase process that you want them to complete.

Fortunately, the open source JavaScript Library provides a simple way to get rid of navigation detours and pop-up windows completely. This article demonstrates how to use Ajax and Dynamic HTML (DHTML) techniques to present supplemental information in ToolTips, Lightbox, and other modal windows. Because these elements can be inserted dynamically into any page, they can maintain a fast, step-by-step path from the home page to the purchase.

Application Introduction: Customize Me now

The sample applications in this article are primarily for e-business. I've constructed a fictional shopping application Customize me now, allowing users to customize and buy a different set of products: pizza, bags or marketable securities. Of course, in practice, these product categories will never appear on the same site. However, putting them together can demonstrate the complex, real navigation challenges that many sites face.

This article first provides a Web 1.0 version of Customize Me now and then improves it to Web version 2.0, and when you learn that supplemental information is provided only through an Ajax call, you can imagine how smooth the navigation path is. The technology involved here is suitable for any process that needs to be simple and can guide the user. Configure the product, do a survey, register some services, or simply complete a registration form-all of these processes can be streamlined using Ajax.

Technical Introduction: Ajax, ToolTips, modal windows and Lightbox

Now, perhaps it's no longer necessary to introduce Ajax: it's everywhere in the Web development world. Over the years, smart programmers have been using JavaScript code to incrementally update WEB pages instead of communicating with the server. But just because of the adoption of the XMLHttpRequest object-initially a windows®internet explorer® extension, but now supports many different browsers-makes Ajax popular. Whenever you see a WEB application that is very similar to a desktop application, it is likely to take on Ajax. This article is not intended to discuss the basics of Ajax programming, but you will use many open source libraries that use AJAX technology.

The Ajax UI typically uses ToolTips, Lightbox, and modal windows. They all refer to a pop-up screen of a browser viewport (viewport) instead of running in a separate window. ToolTips (tooltips) are usually small windows that provide contextual content, and hover over a trigger element to display it. The modal window (Modal windows) is usually large and is triggered by a single click event. Lightbox is a special mode window that separates the original content of the window from the schema content by semitransparent overlap. Any such container can populate a variety of content: inline content that is hidden using DHTML technology, new content pulled from the server via Ajax calls, or a complete, stand-alone document in the IFRAME. The popular DVD rental service Netflix provides an excellent example of these interface elements.