Ajax: A new way to build Web apps

Ajax|web

If you want to ask what is the most attractive thing to do, it is to create a Web application. After all, when was the last time you heard someone praising the interaction design of a product? They are cool and innovative projects (except the ipod).

Aside from this, web designers have no better way of designing an interactive web than a little envious of our desktop software colleagues. Desktop applications have a rich interface and the ability to respond to Web programs that are unmatched. Similarly, the rapid growth of the web has created a huge gap between the experience we provide and the experience that users get from desktop applications

And now the gap is disappearing. Take a look at "Google suggest". Observe that it displays the update speed of the suggested item as you entered, almost immediately. And look at "Google Maps". Zoom in, move and scroll with your mouse. These actions are almost immediately responsive without waiting for the page to refresh.

"Google suggest" and "Google Maps" are two typical examples of Ajax technologies. Ajax is the abbreviation for asynchronous JavaScript and XML, and it shows a fundamental shift in web development, which is what the Web can do. Definition of Ajax

Ajax is not a technology, it is actually several technologies, each of which has its own uniqueness, and together it becomes a powerful new technology. Ajax includes:

• XHTML and CSS
• Dynamic display and interaction using the Document Object model
• Data interaction and manipulation using XML and XSLT
• Using XMLHttpRequest for asynchronous data reception
• Use JavaScript to bind them together

The traditional Web application model works like this: Most user actions on the interface trigger an HTTP request that connects to a Web server. The server completes some processing---receives the data, processes the computation, then accesses the other database system, finally returns an HTML page to the client. This is an old-fashioned pattern that has been used since hypertext has been used as a web use, but readers who have read the Elements of User experience must know what limits the Web interface's lack of desktop software.

Figure 1: Comparison of the traditional Web application model (left) with the Ajax model (right).

This old approach has made us realize a lot of technology, but it does not produce a very good user experience. What is the user doing when the server is working on its own business? Yes, wait. Every action, the user has to wait.

Obviously, if we design web apps according to the desktop program's thinking, we don't want users to always wait. When the interface is loaded, why do you want to let the user spend half the time to fetch the data from the service each time? In fact, why do you always let users see the program to the server to fetch data? How Ajax is remarkable

By introducing an AJAX engine between the user and the server, you can eliminate the start of the web-stop-start-stop such an interaction process. It's like adding a layer of mechanism to the program to make it more responsive, and it does.

Unlike loading a page, at the beginning of a session, the browser loads an AJAX engine---is written in JavaScript and is usually in a hidden frame. This engine is responsible for drawing the user interface and communicating with the server side. The AJAX engine allows users to interact with the program in an asynchronous fashion-without waiting for the server to communicate. So the user does not need to open a blank window, see wait for the cursor constantly turn, wait for the server to complete and then respond.

Figure 2: Comparison of asynchronous interaction processes between traditional Web applications (above) and AJAX applications (lower).

Typically, the user action to produce an HTTP request is now invoked using JavaScript to invoke the Ajax engine instead. Any user action response no longer requires direct upload to the server---such as simple data validation, in-memory data editing, and even some page navigation---the engine can handle it itself. If the engine needs to fetch data from the server to respond to the user action---assume it submits the data to be processed, loads additional interface code, or receives new data---the engine makes the work asynchronous, usually using XML, without any further interaction with the user interface. Who is using Ajax

Google made a huge investment in the development of Ajax. Last year, all of Google's major products used the technology---Orkut, Gmail, and the latest beta version of Google Groups, Google suggest and Google Maps---they are all AJAX applications. (To learn more about the actual technical details of Ajax, see their analysis: Gmail, Google suggest, Google Maps). Other things like Flickr, using many of the AJAX features that people like, and Amazon's a9.com search engine are using similar techniques.

These projects prove that Ajax is not only academic, but also a lot of real world successful applications. It's not a lab technique. Ajax applications can be large and small, from very simple, like a single function of Google suggest to very complex Google Maps.