AJAX In Action [226]
By using Ajax in the portal, we can keep all of the functionality in one area without having to send the server to multiple pages. There is no more worrying about what the back button is going to do when the user logs out. There will be no Licensed to jonathan zheng Summary 465 page history, since we never left the page. We talked about the drawbacks of navigating away from the page, but we were able to solve the problem by using Ajax to perform a request to the server. We also sent requests back to the server without the user knowing that data was being saved. By triggering Ajax with event handlers, we are able to save data quickly without disrupting the user’s interaction. A portal that uses Ajax introduces a new level of performance in a rich user interface. In the final section of this chapter, we looked at refactoring the portal code. In previous sections, we have focused on creating a reusable component that can be dropped in to an existing page. In this case, that isn’t appropriate, as the portal is the shell within which other components will reside. Our emphasis in these refactorings has been on increasing the maintainability of the code by isolating String constants, creating some generic methods, and separating the third-party library from our project code in a cleaner way. In this chapter, we’ve generated simple XML responses from the server and decoded them manually using JavaScript. In the next chapter, we’ll look at an alternative approach: using XSLT stylesheets on the client to transform abstract XML directly into HTML markup. Licensed to jonathan zheng Live search using XSLT This chapter covers ■ Dynamic search techniques ■ Using XSLT to translate XML to HTML ■ Bookmarking dynamic information ■ Building a live search component 466 Licensed to jonathan zheng Understanding the search techniques 467 With Ajax, it’s easy to perform server-side actions while controlling what is happening on the client. If a process takes an extended period of time, we can show animated GIFs that display messages that let the user know what’s happening. The user can perform other actions while the server-side process is taking place and will be less likely to think that the browser has frozen. In this chapter, we use this Ajax technique to create a live search. It utilizes Extensible Stylesheet Language Transformations (XSLT) to transform an XML document into an HTML layout. The XSLT translation is easier to maintain than the code to manually parse the XML and produce HTML using JavaScript statements. It uses a tree-oriented transformation on a dynamically generated XML document, which replaces the server-side code and the JavaScript on which the previous projects relied. We are eliminating the hassles of manually making sure that all the HTML elements are formed properly. As with previous examples, we first develop the code in a straightforward way and then refactor it into a reusable component. By the end of this chapter, you should understand the principles of using XSLT with Ajax and have a ready-rolled search component that you can drop into your own projects. 12.1 Understanding the search techniques When we perform searches, we are accustomed to seeing the page freeze while the search is conducted on the server. (At least, this is the case on websites that do not have 1,200 clustered servers that perform a search over 8 billion pages in less than a second. The budget constraints of your project may vary.) To eliminate the pause, some developers implement pop-up windows and frames. The additional window is used to perform the processing so the user’s experience can be enhanced, but this also creates problems. With