Web Applications with J2EE and .Net AJAX
Author: V V Narendra Kumar
If anything about current interaction design can be called “glamorous,” it’s creating Web applications. After all, when was the last time you heard someone rave about the interaction design of a product that wasn’t on the Web? (Okay, besides the iPod.) All the cool, innovative new projects are online.
Despite this, Web interaction designers can’t help but feel a little envious of our colleagues who create desktop software. Desktop applications have a richness and responsiveness that has seemed out of reach on the Web. The same simplicity that enabled the Web’s rapid proliferation also creates a gap between the experiences we can provide and the experiences users can get from a desktop application.
That gap is closing. Take a look at Google Suggest. Watch the way the suggested terms update as you type, almost instantly. Now look at Google Maps. Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.
Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
The classic web application model works like this: Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing—retrieving data, crunching numbers, talking to various legacy systems—and then returns an HTML page to the client. It’s a model adapted from the Web’s original use as a hypertext medium, but as fans of The Elements of User Experience know, what makes the Web good for hypertext doesn’t necessarily make it good for software applications.Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).
This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.
Obviously, if we were designing the Web from scratch for applications, we wouldn’t make users wait around. Once an interface is loaded, why should the user interaction come to a halt every time the application needs something from the server? In fact, why should the user see the application go to the server at all?
HOW AJAX IS DIFFERENT
An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary—an Ajax engine—between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
WHO’S USING AJAX
Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year—Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps—are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.
These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.
At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.
J2EE AJAX OVERVIEW
Some prime examples of Web 2.0 are web sites such as Google Maps and Flickr. Google Maps offers a highly responsive user interface (UI). For instance, you can view a map, and then move your cursor across it to see adjacent areas almost immediately. Flickr is a site on which users store and share photographs — users manage almost all the site’s content.
Other Web 2.0 sites provide a similarly rich user experience by doing things such as integrating services from other web sites or incorporating a steady stream of new information. For example, the Google map service can be brought into another web site, such as a site for purchasing cars, to present a map that highlights the location of auto dealerships that sell a particular car model. The term used for these site integrations is “mashups.” Or a sports-oriented site can continually update scores without requiring the user to request a page update.
WHAT IS AJAX?Ajax allows a web site to be — or appear to be — highly responsive because it supports asynchronous and partial refreshes of a web page.
A partial refresh means that when an interaction event fires — for example, a user enters information into a form on a web page and clicks a Submit button — the server processes the information and returns a limited response specific to the data it receives. Significantly, the server does not send back an entire page, as is the case for conventional, “click, wait, and refresh” web applications. Instead, the client then updates the page based on the response. Typically this means that only part of the page is updated. In other words, the web page is treated like a template: The client and the server exchange data, and the client updates parts of the template based on the data the client receives from the server. One way to think of this is that web applications that use Ajax are driven by events and data, whereas conventional web applications are driven by pages.
Asynchronous means that after sending data to the server, the client can continue processing while the server does its processing in the background. This means that a user can continue interacting with the client without noticing a lag in response. For example, a user can continue to move the mouse over a Google map and see a smooth, uninterrupted change in the display. The client does not have to wait for a response from the server before continuing, as is the case for the traditional, synchronous, approach.
Another important aspect of Ajax-enabled sites is that the events that trigger Ajax responses aren’t limited to submitting data in a form or clicking on a link. Moving a mouse over an area on a web page, typing part of an entry in a field, or — as in the Google Maps case — dragging a map around with a cursor can be enough to trigger an Ajax response. This dynamic interaction between the user and the web page moves web applications closer to what users experience in highly responsive desktop applications, often termed rich desktop applications. So Web 2.0 applications are often called rich Internet applications.
The following technologies are typically included in Ajax:
• Cascading Style Sheets (CSS), a markup language for defining the presentation style of a page, such as fonts and colors.
• Document Object Model (DOM), which provides a logical view of a web page as a tree structure.
Like other web applications, an Ajax-enabled web application uses a markup language such as HTML or XHTML to present web pages, or a server-side technology such as JavaServer Pages (JSP) technology to generate web pages. In addition, server-side application systems play a key role in processing Ajax applications. A server-side application system such as Java Platform, Enterprise Edition (Java EE), that includes support for data validation, user identity management, and persistence fits very well with the Ajax methodology. See the Ajax and Server-Side Java Technologies section of this article.
Figure 3 illustrates how these technologies work together to handle a user action that triggers an Ajax responseFigure 3: How Ajax Technologies Handle a User Action
3. The web server processes the request and returns an XML document that contains the result.
4. The XMLHttpRequest object calls the callback function and exposes the response from the web
server so that the request can be processed.
5. The client updates the HTML DOM representing the page with the new data.
AJAX AND SERVER-SIDE JAVA TECHNOLOGIES
MICROSOFT AJAX OVERVIEW-.NET FRAMEWORK 4
When you build an Ajax application, you provide your users with a richer and more responsive user experience. You can use Ajax features to enhance server-based ASP.NET Web Forms applications by using server-side ASP.NET controls, such as the UpdatePanel control
If you want to create Ajax client-side interactivity without using server controls, use jQuery. In Visual Studio, a jQuery library is included in the application when you create a project by using the ASP.NET Web Site project template, ASP.NET Web Application project template, and the ASP.NET MVC 2 Web Application project template. When you develop using jQuery, Visual Studio provides IntelliSense, and the Microsoft Content Delivery Network (CDN) provides downloadable versions of the jQuery library for efficient deployment
WHY USE MICROSOFT AJAX FEATURES?
Web Forms applications that use Ajax features offer the following features:
• Familiar interactive UI elements such as progress indicators, tool tips, and pop-up windows.
• Improved efficiency for Web Forms application, because significant parts of a Web page’s processing can be performed in the browser.
• Partial-page updates that refresh only the parts of the Web page that have changed.
• Client integration with ASP.NET application services for forms authentication, roles, and user profiles.
• Auto-generated proxy classes that simplify calling Web service methods from client script.
• The ability to customize server controls to include client capabilities.
• Support for the most popular browsers, which includes Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari.
ARCHITECTURE OF MICROSOFT AJAX APPLICATIONS
A Microsoft Ajax Web application consists of either a client-only solution or a client and server solution. A client-only solution uses Microsoft Ajax Library but does not use any ASP.NET server controls. For instance, an HTML can include script elements that reference the Microsoft Ajax Library .js files. The Microsoft Ajax Library allows Ajax applications to perform all processing on the client. A client and server solution consists of using both the Microsoft Ajax Library and ASP.NET server controls.
The following illustration shows the functionality that is included in the client-script libraries and server components that are included with .NET Framework 4.
Microsoft Ajax client and server architecture
The illustration shows the functionality of the client-based Microsoft Ajax Library, which includes support for creating client components, browser compatibility, and networking and core services. The illustration also shows the functionality of server-based Microsoft Ajax features, which include script support, Web services, application services, and server controls. The following sections describe the illustration in more detail.
MICROSOFT AJAX CLIENT ARCHITECTURE
The client architecture includes libraries for component support, browser compatibility, networking, and core services.
Client components enable rich behaviors in the browser without postbacks. Components fall into three categories:
• Components, which are non-visual objects that encapsulate code.
• Behaviors, which extend the behavior of existing DOM elements.
• Controls, which represent a new DOM element that has custom behavior.
The type of component that you use depends on the type of client behavior you want. For example, a watermark for an existing text box can be created by using a behavior that is attached to the text box. For more information, see Creating Client Components and Controls.
The browser compatibility layer provides Microsoft Ajax scripting compatibility for the most frequently used browsers (including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari). This enables you to write the same script regardless of which supported browser you are targeting. For more information, see Browser Security Settings for Ajax Enabled ASP.NET Pages.
The networking layer handles communication between script in the browser and Web-based services and applications. It also manages asynchronous remote method calls. In many scenarios, such as partial-page updates that use the Update Panel control, the networking layer is used automatically and does not require that you write any code.
The networking layer also provides support for accessing server-based forms authentication, role information, and profile information in client script. This support is also available to Web applications that are not created by using ASP.NET, as long as the application has access to the Microsoft Ajax Library.
A base class library, which includes components such as string builders and extended error handling.
For more information, see Creating Custom Client Script by Using the Microsoft Ajax Library.
Debugging and Error Handling
The core services include the Sys.Debug class, which provides methods for displaying objects in readable form at the end of a Web page. The class also shows trace messages, enables you to use assertions, and lets you break into the debugger. An extended Error object API provides helpful exception details with support for release and debug modes. For more information, see Debugging and Tracing Ajax Applications Overview.
AJAX SERVER ARCHITECTURE
The server pieces that support Ajax development consist of ASP.NET Web server controls and components that manage the UI and flow of an application. The server pieces also manage serialization, validation, and control extensibility. There are also ASP.NET Web services that enable you to access ASP.NET application services for forms authentication, roles, and user profiles.
Ajax features in ASP.NET are commonly implemented by using client script libraries that perform processing strictly on the client. You can also implement Ajax features by using server controls that support scripts sent from the server to the client.
You can also create custom client script for your ASP.NET applications. In that case, you can also use Ajax features to manage your custom script as static .js files (on disk) or as .js files embedded as resources in an assembly.
Ajax features include a model for release and debug modes. Release mode provides error checking and exception handling that is optimized for performance, with minimized script size. Debug mode provides more robust debugging features, such as type and argument checking. ASP.NET runs the debug versions when the application is in debug mode. This enables you to throw exceptions in debug scripts while minimizing the size of release code.
Script support for Ajax in ASP.NET is used to provide two important features:
Partial-page rendering, which updates regions of the page by using an asynchronous postback. For more information, see Partial-Page Rendering Overview.
The Microsoft Ajax architecture builds on the foundation of the ASP.NET 2.0 localization model. It provides additional support for localized .js files that are embedded in an assembly or that are provided on disk. ASP.NET can serve localized client scripts and resources automatically for specific languages and regions.
For more information, see the following topics:
• Localizing Resources for Component Libraries Overview
• Web Services
With Ajax functionality in an ASP.NET Web page, you can use client script to call both ASP.NET Web services (.asmx) and Windows Communication Foundation (WCF) services (.svc). The required script references are automatically added to the page, and they in turn automatically generate the Web service proxy classes that you use from client script to call the Web service.
You can also access ASP.NET Web services without using Microsoft Ajax server controls (for example, if you are using a different Web development environment). To do so, in the page, you can manually include references to the Microsoft Ajax Library, to script files, and to the Web service itself. At run time, ASP.NET generates the proxy classes that you can use to call the services. For more information, see ASP.NET Web Services in Ajax.
Application services in ASP.NET are built-in Web services that are based on ASP.NET forms authentication, roles, and user profiles. These services can be called by client script in an Ajax-enabled Web page, by a Windows client application, or by a WCF-compatible client. For information and examples, see. ASP.NET Web Services.
Ajax server controls consist of server and client code that integrate to produce rich client behavior. When you add an Ajax-enabled control to an ASP.NET Web page, the page automatically sends supporting client script to the browser for Ajax functionality. You can provide additional client code to customize the functionality of a control, but this is not required.
The following list describes the most frequently used Ajax server controls.
Manages script resources for client components, partial-page rendering, localization, globalization, and custom user scripts. The ScriptManager control is required in order to use the UpdatePanel, UpdateProgress, and Timer controls. However, the ScriptManager control is not required when creating a client-only solution.
Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback.
Provides status information about partial-page updates in UpdatePanel controls.
Performs postbacks at defined intervals. You can use the Timer control to post the whole page, or use it together with the UpdatePanel control to perform partial-page updates at a defined interval.
You can also create custom ASP.NET server controls that include Ajax client behaviors. Custom controls that enhance the capabilities of other ASP.NET Web controls are referred to as extender controls. For more information, see Adding Ajax Functionality to ASP.NET Controls and Microsoft Ajax Extender Controls Overview.
Ajax Control Toolkit
EXAMPLES OF USE OF AJAX
• Google Suggest
• A live version of the Feedback Example – See Ajax Contact Form.
Although AJAX allows us to build new and improved ways of interacting with a Web page, as developers we need to remember that the product is not about the technologies; it’s about the users and how they interact with the product. Without the users, the projects we build would have no purpose. With that principle in mind, we can assess what technologies to use and when to use them in order to create an application that’s beneficial to all who use it.
The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities.
Various websites on Ajax on j2ee and .net platforms
About the Author
V V Narendra Kumar
Alluri Institute of Management Sciences,