Building Ajax portlets for the WebSphere Portal

Introduction: In our previous article in conjunction with Ajax and WebSphere portal, we discussed some of the issues and design concerns when using Ajax in a portal application. In this tutorial, we'll put new discoveries into use and create an Ajax Portlet application. To add interest, we decided to build a Portlet that uses Ajax and DHTML in a large amount. This gives you a rudimentary understanding of the capabilities of the technology and provides you with a useful tool for browsing the database. While most of the application is already written, you will be responsible for filling in the unfinished parts to make it work.

Before you start

In this tutorial, you will write code for AJAX-specific calls, check the DHTML code of the Action page, and complete the process of a full roundtrip Ajax call from the browser to the server. The entire application consists of hundreds of lines of code, but we only ask you to write code for the important components, and the rest of the code will be provided by us. Related steps include:

Write a browser-independent code for creating XMLHttpRequest (XHR) and processing XML document objects.

Sends an AJAX request to the server and operations the results returned.

Retrieves and operates the servlet context in the Portlet configuration to dynamically access the Ajax Servlet included in the Portlet. War file.

Enables JavaScript events to handle operations and to display or update data on a JSP page.

Deploy the Portlet application to websphere®portal and view the results.

We will also examine the code used to manipulate this particular application's data, including how to:

Enables and disables form elements during asynchronous Ajax calls.

After retrieving the new data via an Ajax call, use DHML to update the selection box.

Use InnerHTML to replace portions of the Web page to dynamically update HTML <div> region tags.

Set up

This tutorial assumes that you will use Rational®application Developer (RAD) or one of its family members, but you can edit and deploy the Portal application using any tool you like. All of the content in this exercise has nothing to do with a particular tool. You will also need to install the WebSphere Portal v5.x or later, as well as an available database, and of course we assume that the database is db2®.

To make all these parts work together, you need to import the application code into a RAD portal project and create at least one data source in WebSphere. The following steps will help you begin this task.