When applications enhanced with Asynchronous JavaScript + XML (Ajax) development techniques first appeared on the Web, Web developers were in awe. Suddenly, the possibilities for Web sites and Web applications seemed unlimited. In the past, many developers and users considered Web sites and Web applications to be rough, ugly, and complex versions of their desktop counterparts. Then along came Ajax-enhanced applications and Web sites, and developers and users alike realized that you could do a lot more within a browser. Along with the ability of modern Web browsers to handle advanced Document Object Model (DOM) scripting and sophisticated Cascading Style Sheets (CSS) support, Ajax was the final touch needed to make interfaces that can change, update, and respond immediately by talking to the server in the background. However, this excitement may have been taken too far at times, resulting in less-than-optimal user experience.
The rules of the Web development game have changed, and many developers have experimented with using Ajax for anything and everything possible. Some sites have even given up Hypertext Markup Language (HTML) in exchange for sites powered entirely by JavaScript™ code.
Ask an average Web user what they think of all this Ajax stuff, and he or she will probably give you a blank stare. Some users are blissfully ignorant of the technologies used to build the sites they use, and many prefer it that way. They're more interested in good user experiences -- being able to do the things they need to do as easily as possible -- hopefully with the mechanics of the application safely tucked away in the background.
This article looks at what Ajax makes possible and also examines when the problems caused by using Ajax outweigh the benefits gained. Hopefully, you will be inspired to use Ajax in some ways you hadn't previously considered, and also see that you needn't go crazy to build a crowd-pleasing site.
Few things are more annoying or unnecessary than having to refresh a Web page continuously. For users who are waiting to see if they won an auction, keeping an eye on sports scores, or closely following the latest weather forecasts, Ajax enhancements to these types of Web pages can greatly improve their experiences.
Web pages that updated automatically were possible with simple JavaScript code even before Ajax techniques came along. However, the only way to update a JavaScript Web page was to refresh the entire page. This is the main reason the advent of Ajax techniques in Web applications had such a revolutionary impact on the Web.
When a page is being refreshed the old way, there is no way the user can interact with it. Ajax pages can asynchronously (the A in Ajax) ask the Web server for data with the user unaware that there is a transaction occurring in the background. When the data comes back, just a portion of the page is updated.
The Web doesn't need to be real-time
Parts of a page that update automatically can certainly be a refreshing change for users, but they can also be an architectural nightmare for your Web servers. If a Web site gets 1,000 visitors a day, its Web server can probably handle it. But if each Web page on that site uses Ajax to refresh itself every second, and the average person leaves the page open for ten minutes, suddenly the site gets 600,000 page requests a day.
To avoid this type of a situation with a Web server, developers should be mindful of minimizing the frequency of updates. If you know the information is updated every few minutes, try to time the Ajax requests to the same frequency. If the information is updated every second, consider pacing the refresh to be as slow as possible without being frustrating for users (for instance, once every five or ten seconds).
You can also provide a simple refresh link that triggers the Ajax call only when the user wants it. While this is similar to using the Refresh button in the browser, it's faster and puts less demand on the Web server if it only needs to retrieve a small amount of data.
Small changes can have a big impact
Ajax is best used for making small changes and updates to a page. In the old days of the Web, even the most minor update to a page required that the entire page be refreshed. With Ajax and JavaScript code, pages can make updates in near-real time. Pages can be designed to update a list of comments as new comments are added, to display a ticker tape of recent items, or to show a progress bar updated in real-time, for example.
The key goal here for developers should be enhancing usability or, in other words, making things easier for users. Users who have to wait for a page to load can feel like they're wasting time, and before Ajax was introduced into Web applications, many users opted to use desktop applications over Web applications because they were faster and more responsive. Ajax enhancements eliminate the waiting and the scrolling, bringing Web applications up to the level of responsiveness of many traditional desktop applications.
Big changes can bring big difficulties
While small changes to a page can be a pleasant addition, more drastic changes, such as nearly or completely replacing the entire contents of a page, can confuse users and lead to unwanted consequences.
Users might perceive the Back and Forward buttons and bookmarks to be broken if a site is updated too often with Ajax. (This perception can occur with Flash sites just as easily as with Ajax-only sites.) Users expect they can click the Back button to return to the previous page or view. Further contributing to the poor user experience, when they click the Forward button again, they're not brought to the view they just saw but instead are brought to the initial view, as if they had refreshed the Ajax site.
Users can be frustrated if they load a page temporarily and then return to a previously viewed site, expecting to see things as they were but are greeted with something unexpected. Unfortunately, the browser might have reloaded the page to its initial state, often resulting in lost changes. Similarly, if users want to share a particular view or page of a site with someone, or bookmark a page for themselves, they expect and believe that they can simply copy the URL from the browser and use that -- and rightly so.
If the content of a page changes so much that users feel like they are on a new page, then maybe they should just be sent to a new page after all. However, if developers absolutely need to use Ajax to change the content on a page, it's best to use an Ajax History tool to restore the Back and Forward buttons and bookmark functionality. These tools work by using hashes (for example, "#tab3") to alter the URL without loading a new page. When users click the Back or Forward buttons or load a bookmarked URL, the JavaScript code sees the hash and regenerates the view they expect. Of course, this only works with browsers that support the JavaScript language.
Unleash information from Web pages
The Internet has another great feature you've likely noticed: you can access a seemingly unlimited amount of information without needing a copy of it on your local computer. With Ajax, you can build an interactive interface to some gigantic database sitting on a server across the world and accomplish things nobody has ever dreamed of.
Google Maps was one of the first Ajax applications that captured the imagination of developers and users alike. Here is a Web site that lets you browse maps and satellite photos of the entire Earth without ever having to refresh the page. The unleashing of data in this way is likely the greatest potential of Ajax.
Map Web sites were around for years before Google Maps, but Google Maps is special because Ajax allowed for interfaces that were never possible before. On traditional map sites, you click a link to move the view to the west. Then an entirely new page containing the adjusted map view is generated. So you have to wait for the page to clear, load again, and then scroll down to the map.
This awkward interface was the result of a fundamental limitation of the Web. The only way to get anything from a Web server was to visit a new URL and download a new Web page containing the new content. If you wanted to see any slight change in the content you were already viewing, such as moving a map slightly to the west, you had to load a whole new map. Because Ajax allows data to be retrieved asynchronously in the background, there is no need to clear and load the entire page. Only the data and the image tiles for the map need to be loaded. You can still generate a URL to a specific map view, but this is no longer the only way to load more information.
You can use a Web page as an interface to data in many other scenarios. Think of pagination scenarios, such as when you look at search results that are split into pages. User interface controls such as Previous Page and Next Page don't need to load entirely new Web pages each time. Using Ajax, you can load the results for the next page asynchronously, and update the page accordingly. You can even pre-load the next page so it displays instantly when the user wants to see it.
By separating the information from the document, you can also speed things up and save some bandwidth. Most of the time, raw data in the form of Extensible Markup Language (XML) or JavaScript Serialized Object Notation (JSON) is smaller than its representation in HTML on a Web page, especially when factoring in the rest of the page, such as the header, navigation, and footer.
Leave information on Web pages
Ajax opens up possibilities for retrieving raw data from Web servers, but that does not mean you don't need old-fashioned Web pages anymore. It is important that users can access the URL to a slice of data so that they can share it with each other.
Ajax can also make it impossible for search engines to crawl your site. Search engine optimization of your site's content isn't just about drawing users to your site -- it is also a usability issue. You probably find most sites you use throughout the day through search engines, and you probably only use a page or two from most sites you encounter. If the content your site offers is hidden behind a layer of Ajax wizardry, search engines don't know about it, and therefore most of the world will be unable to find your site. It is important that you make the information on your site available through traditional HTML pages, even if you also make it available through JSON or XML.
Web user interfaces are regularly used to let users simply save data to a Web server or easily create, update, or delete items. Of course these tasks were always possible with HTML forms, but Ajax makes it easy to send data asynchronously in the background. Consider using Ajax and JavaScript code to simplify adding, editing, and deleting content; they can make managing a list of items much easier. You can also enhance the addition of single items, such as writing on a message board, by using Ajax to send the message to the server and immediately add the message to the page using DOM scripting.
Most users don't expect a Web site to use Ajax; many users haven't even heard of it. Therefore, when you work Ajax into your page designs, you need to be sure to communicate that fact with your intended users. For example, if a form is submitted or data sent to the server using Ajax, the application must communicate to users whenever any of the following actions occur:
- Data is being sent or retrieved. This action is often indicated by an animated graphic such as a spinner, or by a phrase such as "Loading…" or "Saving…"
- Data has been successfully sent or retrieved. You can show a "Success" message or use JavaScript animation to bring the users' attention to a specific part of the page.
- There is an error or timeout when talking to the Web server. This is typically communicated with an explanation message that gives users an opportunity to try again.
If the application fails to communicate, it might leave users unsure about what is actually happening. If they click a Form Submit button and nothing happens, they might assume the Web site is broken. If the application fails to communicate that an error occurred, users generally assume that their action succeeded. This assumption can lead to extreme frustration if the reality is that the action did not succeed, especially if a user has just spent a long time working on the content of the form. If the application informs users when there is an error or timeout, at least the user has an opportunity to copy and paste the data and save it locally, thus avoiding one of the worst possible user experiences.
Finding an Ajax-powered balance
Ajax makes it possible to do innovative things on the Web, but it can also make it possible to do things against users' assumptions. Keep in mind that each time you add Ajax to a site, you're also responsible for fixing any problems it causes for your users.
Progressive enhancement is a Web development strategy that ensures all content and functionality is available to all browsers but allows more advanced Web browsers to take advantage of technologies such as JavaScript programming and Ajax to create an even better experience. To help ensure your applications are designed for the best possible experience, follow the golden rule of Progressive Enhancement: Develop without any JavaScript code first, and then add JavaScript code when you have a working site. Essentially, you build a basic Web site with real links and forms pointing to real URLs. Then, you use JavaScript programming and Ajax to change the functionality of those links and forms.
For example, say you want to have a comment form that submits comments using Ajax and
then updates the page to show the comments in place, all without refreshing the page. First, build the comment form as you normally would without any JavaScript code and ensure that it works. Next, add a JavaScript onsubmit event to the form. When the form submits, use Ajax to save the comment to the server and DOM scripting to update the page. This way, the form works fine for those without JavaScript language support, but works even better for those with modern Web browsers.
Some Web sites are built completely with JavaScript code and Ajax -- a practice I recommend that you avoid if at all possible. By building a site like this, be aware that you exclude a segment of the Web's potential viewing population, and not just the minority of users who choose to disable JavaScript language support. You also exclude search engines that are hungry for your content and, therefore, people searching on the Web. In addition, you exclude potential users who are trying to access your content with devices and browsers on which you haven't tested your site. Remember, with a JavaScript-only site, the slightest JavaScript error can break the entire site. By having a non-JavaScript site to fall back on, you ensure that you don't exclude any potential users (and potential customers!) from accessing your great content.
Ajax has completely changed the way developers build Web applications, for better or for worse. It is important that you make sure the choice to include Ajax enhancements to your applications improves your users' experiences. Do your best to avoid creating confusing, unpredictable, and disappointing situations. For many developers, these decisions can mean success or failure for your business.
Learn
-
Progressive Enhancement:
Paving the Way for Future Web Design: Check out this publication from hesketh.com to learn more about the Progressive Enhancement Web development strategy.
-
"Progressive enhancement with Ajax": This article by Jeremy Keith also endorses Progressive Enhancement.
-
Unobtrusive Ajax
(O'Reilly, July 2007): Learn how to separate behavior, content, and presentation when developing for the Web.
-
developerWorks technical events and webcasts: Stay current with technology in these sessions.
-
The developerWorks Web development zone is packed with tools and information for Web 2.0 development.
-
The developerWorks Ajax resource center contains a growing library of Ajax content as well as useful resources to get you started developing Ajax applications today.
-
The technology bookstore: Browse for books on these and other technical topics.
Discuss
- Participate in the discussion forum.
-
developerWorks blogs: Check out these blogs and get involved in the developerWorks community.
Jesse Skinner is a freelance Web developer specializing in Ajax, JavaScript, and CSS. He is the author of O'Reilly's Unobtrusive Ajax and has spoken at The Ajax Experience on the same topic. If you'd like to read more about Ajax, JavaScript, and CSS, visit Jesse's blog at The Future of the Web.
Comments (Undergoing maintenance)
Table of contents
- Along came Ajax
- Get rid of the refresh
- The Web doesn't need to be real-time
- Small changes can have a big impact
- Big changes can bring big difficulties
- Unleash information from Web pages
- Leave information on Web pages
- Ajax can save your site
- Ajax can ruin your site
- Finding an Ajax-powered balance
- Summary
- Resources
- About the author
- Comments
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Webcast: Rational software process automation: Real value delivered, real customer stories
- Buy: WebSphere Portal Express
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
