AJAX In Action [176]
2
The type-ahead makes a request to the server.
3
It returns data to the client.
4
The client takes that data and displays the results in the table, div, textbox, or some other format. Licensed to jonathan zheng Examining type-ahead applications 363 However, there are things that some of the scripts do not handle well. Developers need to take into consideration bandwidth, server capacity, and the client’s configuration. If you forget about these factors, Ajax may hurt your user’s experience instead of improving it. The problems listed in table 10.1 are very common with Ajax applications. Table 10.1 Problems with type-ahead suggest Problem Result Posting back on every Large bandwidth consumption. Imagine the server-side bandwidth required keystroke for 1,000 users typing 10-characters words. Not caching data Requests are hitting the database each time even though they are returning a subset of data they already have. The 56K modem Yes, there are still people who dial in, and these users may see a lag in response time. Returning too many results Not limiting the results can send too much data to the client, slowing down response time. Too fancy an interface Fancy interfaces can be bad if they take a long time to render. Fast typists Some people can type fast. Certain type-ahead scripts have problems if the user is not a hunt-and-peck typist. Many developers tend to forget about bandwidth. Even one user who is filling in a simple word can post back a number of times. Combine this with a fast typist, and you can have more hits in a second than you normally would for the user’s entire session in a non-Ajax application. Keeping the user interface responsive is also very important. The more time a control takes to render, the longer the user has to wait before seeing it, and the less effective the type-ahead suggest is. Delays can also be introduced by hitting the server too hard. If requests are made too frequently, or if they return too much data, the responsiveness of the user interface will suffer. A good strategy for improving responsiveness is to cache the data on the client. (We can also cache data on the server, but that’s another issue, more familiar to developers of classic web apps.) A type-ahead suggest system will typically return fewer results as extra characters are typed, and these will often be a subset of earlier results. A simple implementation will discard previous requests and fetch all data from the server every time. A more intelligent solution might retain the results of the initial request and whittle away unwanted entries as the user types, Licensed to jonathan zheng 364 CHAPTER 10 Type-ahead suggest refreshing the user interface without going back to the server for every keystroke. This improves the application by increasing responsiveness and reducing the bandwidth. We’ll just be going through the result set that we have, making it quicker to pull the necessary information and eliminating the extra postbacks to the server. That’s enough of the theory for now. In the next section, we’ll take a look at a production-ready implementation of the type-ahead suggest. 10.1.2 Google Suggest Some people consider Google Suggest to be the cream of the crop of the typeahead suggest applications. Google Suggest is fast and user-friendly and does its job efficiently. In figure 10.1, Google Suggest is giving suggestions for the letter e. In figure 10.1, the result set for the letter e is limited to 10 results. Knowing the vast collection of data Google has, it could be billions of results. Google uses an algorithm to determine what should be displayed. Developers have dissected Google’s JavaScript code to figure out how it is accomplishing the task. Remember, JavaScript code cannot be completely hidden from view, although obfuscation can help. One of the impressive things about Google Suggest is that it accounts for fast typists by using timers to limit multiple postbacks in a short span of time. This had to be one of Google’s