Ajax programming in the BEA WEBLOGIC Portal-part 1th

Summary

Portal applications are ideal for extracting information from multiple sources and providing application services for portlets that contain portal Web applications. For users, the Portlet application is a stand-alone entity, similar to a window application on the desktop. What if performing an operation in one window application causes the content in all other applications to be refreshed? This is the case for most of the current portals. Transferring through page flow in one portlet causes the entire Web page to be refreshed, including all other portlets on the page.

To avoid this sometimes-desirable behavior, web developers use the so-called ajax--style programming approach. Ajax, which is asynchronous Java and XML (asynchronous Java and XML), is a collection of technologies, including XHTML, CSS, JavaScript, Dom, and XMLHttpRequest objects for creating interactive Web applications. This article explains the rationale for using AJAX programming methods in the BEA WebLogic portal environment and provides some best practices and recommendations to avoid many of the mistakes that novice AJAX programmers often make.

Introduction to Ajax

Consider a Web application that draws a street map based on some user criteria, such as street address, city, and state. Such applications have existed for many years in the user interface and have rarely changed. The user enters an address and then clicks a button, and the center of the page displays a map of the surrounding area. Users often need to zoom in and out to show the surrounding area more clearly, or they need to move the map a little to the left or right to find some major street or landmark landmarks to help them locate. This experience can be obtained by visiting maps.yahoo.com or mapquest.com. Come on, try this. Address: East Wacker Drive Chicago, IL

Eventually, you'll see a map of downtown Chicago, Wacker and Michigan Street. On the right, you will see a series of zoom levels from which you can select one. What happens when you select a zoom level? The entire page will be refreshed, which will take quite some time. Now, what happens when you move the map to the left or right? You will inevitably refresh the entire page, and the entire map needs to be downloaded again. The page size is usually 75 to 100k, and the average return time is approximately 3-10 seconds, depending on your network connection speed.

Now using Google Maps to do the same, this is a site that uses Ajax technology entirely. Enter the address, and then click Search. The page will be fully displayed. Now zoom in. Note that page content outside the map is not refreshed. Here's a list of what's going on behind this:

The user clicks the zoom control. The zoom control invokes a JavaScript method. The JavaScript method calls the server to request new map information. The server creates a new image and sends it back to the browser. The browser replaces the existing image data with the new image data. The user sees the new image in the location of the old image.

Notice that there are no arrows on the map that indicate east and west. How does a user interact with a map? Just drag as you would in a scrolling window. Try clicking on the center of the map and dragging the map to the left. Notice how the map responds when you drag the map! Here is a list of what's going on behind this:

The user drags the map to the left. The Web page uses the image information it downloads, and the user waits for the page to redraw the map based on the data that the client already has. If the image data is not retrieved beforehand, the browser will get the additional information it needs from the server (the newly appearing map area). The new data is added to the existing data and redrawn in the browser. The user sees the map scrolling to the right, like a real big picture.

Here are the benefits of using AJAX technologies:

The amount of data transferred between the client and the server is greatly reduced. The perceptible system response time is significantly shortened. Due to timely feedback, users feel more comfortable with the control of the application. Users like this site, because using it can improve their productivity. Users will visit the site again so that their competitors ' customers will be reduced.

The above demo of the AJAX-style user interface is impressive. (If you're not convinced that your competitor has been enraged after a few days using Google Maps, you don't have to read the following.) ）

For a complete introduction to Ajax, read an Introduction to Ajax (Chinese version, dev2dev,2005 year November).

The portal problem that Ajax solves

Consider potential customers who use Java applets heavily and want to use their existing assets to create portals. Wrapping existing applets and other page flows into the Portlet container is a simple thing to do, but consider the problems that occur when you conduct a portal test. For example, an action in one porlet causes a refresh and subsequent reload, and reinitialize all other applet-based portlets on the page. If the applet being discussed has a backend connection, the reinitialization of the portlet will cause the server to discard the existing connection and then force the applet to reconnect, which not only adds to the burden on the server, but also allows the portal user to see a few seconds of "rest time", during which time the Applet-based portlets must remain gray until they have completed initialization.

This is clearly a potential flaw. Tell customers to rewrite all applets because JSP-based applications are not a useful response, especially for customers who have invested heavily in existing assets. In addition, the portal must help customers wrap their existing applications instead of forcing them to rewrite the entire system.

We need a way to get a single portlet to manipulate or get new data without causing the page to refresh. While this obviously has some disadvantages (which I will discuss later in this article), in this case, it is absolutely necessary to avoid page refreshes as the entry barrier to use the portal.

Note: A workable solution for this problem is iframes, the inline frames, a browser-based mechanism that makes a piece of the screen a separate entity that does not refresh when the page is reloaded. Using techniques similar to those used in AJAX programming, we can use XML-RPC for server invocation to get the data and load it into a DOM document. An article on Apple's developer Web site is a great way to sum up the pros and cons of this approach. I'm sure the supporters of both sides have had a great debate about why IFRAMEs is better or better Ajax, but Ajax has become popular, and IFRAMEs is not. As a result, this article only introduces Ajax and does not discuss iframes.