CHAPTER 10 Ajax and Java Web Services

CHAPTER 10

Ajax and Java Web Services

In this chapter, I examine how Java Web Services can be used to support Ajax clients. Ajax, or Asynchronous JavaScript and XML, is a programming technique that enables you to create user interfaces for a Web browser that behave more like a local, stand-alone application than a collection of HTML pages.

Ajax is a good fit with Java Web Services. Using these two technologies together enables you to publish software components as services (via JAXWS) and create great browser-based user interfaces on top of them (via Ajax). The entire application can then be packaged as an EAR or WAR and deployed on a Java EE application server.

To demonstrate this capability, I pick up here where I left off at the end of Chapter 9. In that chapter, I showed you how to build an online shopping application, SOAShopper, which can search across multiple Web-service-enabled sites (i.e., eBay, Yahoo! Shopping, and Amazon). In this chapter, I show how you can develop an Ajax front-end to SOAShopper. In particular, the code examined in this chapter demonstrates how to write an Ajax application that consumes RESTful Java Web Services endpoints.

In the second half of this chapter, I review the JavaScript code that implements the SOAShopper Ajax front-end in quite a bit of detail. For those of you who are familiar with Web front-end coding and JavaScript, this detail may seem tedious. I include it because my assumption is that many readers of this book are server-side Java programmers who do not usually do a lot of JavaScript development and, therefore, might be interested in the detailed code explanation.

463

464

Ajax and Java Web Services

10.1 Quick Overview of Ajax

Ajax is a well-documented technology, and my purpose here is not to write a detailed tutorial on Ajax programming.1 However, I do want to go over some of the basics to set the stage for a discussion of the SOAShopper front-end and how it interacts with Java EE.

As many of you know, the major benefit of Ajax is that it allows a browser-based application to avoid the need for full-page refreshes each time new data is retrieved from the server. Ajax programmers use the JavaScript type XMLHttpRequest to exchange data with the server behind the scenes (i.e., without having to reload the entire HTML page being displayed by the browser). When new data (usually in XML format) is received by an XMLHttpRequest instance, JavaScript is used to update the DOM structure of the HTML page (e.g., inserting some rows in a table) without rebuilding the entire HTML page in memory.

To see what that means in practice, I walk you through some screen shots from the SOAShopper front-end. Then, in the rest of this chapter, I will show you how to write the code behind these screen shots.

If you build and deploy the SOAShopper application on your local machine2 and point your browser to , you should see something similar to what appears in Figure 10?1. This is the initial search screen for SOAShopper. The three labeled items in this figure are worth pointing out for discussion:

1. The URL where the application resides remains constant throughout its use. The search is performed and results are displayed without loading a new page. This is implemented by using JavaScript that updates the DOM residing in the browser's memory.

2. This search page offers you four search parameters: a set of keywords; a category to search; a low price; and a high price. These parameters correspond to the parameters supported by the SOAShopper offerSearch REST endpoint discussed in Chapter 9, Section 9.3 (see Figure 9?2). This search page contains JavaScript that converts these parameters into a query string that an XMLHttpRequest instance uses to invoke the offerSearch endpoint.

1. For a good introduction to Ajax, I recommend "Ajax in Action" [AIA]. 2. For instructions, see Appendix B, Section B.9.

10.1 Quick Overview of Ajax

465

1

2

3

Figure 10?1 The initial SOAShopper search screen.

3. At the bottom of Figure 10?1 appear some column headings (i.e., Source, Image, Price, Summary) for an empty table. Once a search is performed and the XMLHttpRequest has received the results, a JavaScript function contained in this page processes those results and loads them into the table. This table is implemented using the Dojo Foundation's [DOJO] FilteredTable widget.

As you can see from Figure 10?1, a user has entered some criteria for a search. The keywords value is "razr." The search category is CELLPHONES and the price range is $50.00?100.00. Figure 10?2 shows what happens to the screen when the user clicks on the Search button. The search takes a while to run (sometimes as long as a minute). This is not because the Java EE 5 application server is slow or because the JavaScript in the Web page is slow. Rather, it is because the shopping sites being searched (particularly eBay) can take quite a while to respond. To handle this, Ajax techniques are used to update the interface and let the user know the application is not broken.

There are two items labeled in Figure 10?2 that I want to point out:

466

Ajax and Java Web Services

1

2

Figure 10?2 Screen shot showing asynchronous processing in progress.

1. First, notice that an icon and some text have appeared below the Search button. The icon is actually an animated GIF that indicates the application is working to retrieve data from the server. The text shows us the URL of the REST endpoint from which the data has been requested: /soashopper/rest/shopper?keywords=razr&category =CELLPHONES¤cyId=USD&lowprice=50.00&highprice=100.00. This is the URL and query string structure that are used in Chapter 9, Section 9.3, for the SOAShopper REST endpoint. This icon and message appear while the XMLHttpRequest request is happening asynchronously. The search.html page has not been reloaded either. Rather, the DOM representation of search.html that was loaded by the Web browser (Firefox in this case) has been changed by a JavaScript function that inserted the animated GIF and text into the appropriate place.

2. The search results table is still empty because the asynchronous request for data from the SOAShopper REST endpoint has not yet completed.

10.1 Quick Overview of Ajax

467

1

2

Figure 10?3 Screen shot showing search results displayed in the Dojo table widget. Figure 10?3 shows the appearance of the SOAShopper search page

after the search results have been returned from the server. At this point, the XmlHttpRequest object has received the search data from the REST endpoint and invoked a JavaScript function to load that data into the results table. Two other items, labeled in the figure, are worth pointing out:

1. The animated GIF has disappeared and the text below the Search button has changed to indicate that the results have been received.

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download