Introduction

Asynchronous JavaScript and XML (AJAX) is a group of technologies used together as a Web development technique for creating interactive Web applications. With Ajax, instead of loading a Web page, a browser loads an Ajax engine (written in JavaScript), which displays the page the user sees, and then communicates with the server. The Ajax engine allows a user's interaction with the application to happen simultaneously, irregardless of the actions of the server.

When used with WebSphere Commerce, Ajax eliminates the time customers spend staring at a browser window and an hourglass icon, waiting for the server to do something. A customer makes their request through the browser and the Ajax engine responds and gets the information from the WebSphere Commerce Server. This tutorial provides widgets developers can use to enhance the functionality of their WebSphere Commerce v5.6.1 application. The tutorial provides instructions on how to enable dynamic caching with Ajax using the full test environment.

This tutorial shows examples where you can use Ajax with WebSphere Commerce. The examples display simple and complex scenarios where Ajax is used to serve customers better by eliminating page refresh, providing customers with immediate results:

• Scenario one - Menu population
• Scenario two - Credit check
• Scenario three - Quick SKU lookup

Through the scenarios, you will see how display (css) and Java script are used to invoke instantaneous server calls without traditional Web page refreshing. Caching Ajax requests for performance improvement is also examined. Note: The scenarios in this tutorial may not directly apply to your business needs. The aim of this tutorial is to provide a sample package to form the basis for your Ajax implementations.

Scenario one - Menu population

This scenario displays how to populate a menu given user input. When a country or region is selected, the state or province dropdown menu is populated via an Ajax call to the server to retrieve the state or province names within the selected country. If your store only services one or two countries, it is more efficient to bypass an Ajax call altogether and load all state/provinces on the initial page load. Caching is demonstrated in this example to speed up performance. Figure 1 shows the State/Province field instantaneously displaying options once a Country/Region has been selected.

Scenario two - Credit check

This scenario demonstrates a smooth and friendly way to inform your user to wait while you retrieve data for them from a backend system. Web Service and MQ messaging calls are not always instantaneous and require users to wait. In the traditional method, a user clicks a link and waits for a synchronous message to be sent and received before the Web page returns to the user. During busy times, requests may take longer then expected, which can prompt users to click the Refresh button on their browser. This causes the server to handle yet another request, and slows down the process. In this scenario, the Web page is redrawn and instantaneously informs the user to wait. Next, a request is issued to the MQ server to get data (in this case, Credit data) for a particular user. When the result returns, it is instantly displayed. If a set timeout or error occurs, an error message and refresh button are displayed to the user. Figure 2 shows what a customer will see when their credit check information is being retrieved from the server.

Scenario three - Quick SKU lookup

This scenario is more complex and applicable to smaller catalogs. In this scenario, the user types in two characters (configurable #) into the SKU text area, and an Ajax call is made to assist the user in finding the SKU. Each extra character entered narrows the list of SKUs without further requests being made to the server. These lookup results are cached for performance. Figure 3 shows the options customers will see when they enter in partial SKU number.

1 of 9 | Next

Comments

Back to top

Table of contents

• Introduction
• Deploying the assets
• Integrating Ajax assets with the ConsumerDirect store
• Testing Ajax
• Enabling dynamic caching on full test environment (optional)
• Conclusion
• Download
• Resources
• About the authors

---

1 of 9 | Next

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into WebSphere on developerWorks

Discover knowledge paths

Skill-building guides for WebSphere, Linux, open source, cloud, Java, business analytics, and more.

Special offers