Web Applications with J2EE and .Net AJAX

Web Applications with J2EE and .Net AJAX

Author: V V Narendra Kumar

INTRODUCTION
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.

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.

DEFINING AJAX

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;
•    and JavaScript binding everything together.

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.

Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine—written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously—independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.Figure 2: The synchronous interaction pattern of a traditional web application (top) compared with the asynchronous pattern of an Ajax application (bottom).
Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server—such as simple data validation, editing data in memory, and even some navigation—the engine handles on its own. If the engine needs something from the server in order to respond—if it’s submitting data for processing, loading additional interface code, or retrieving new data—the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.
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.
This article is about the primary technique in use today for making Web 2.0 sites highly responsive: Asynchronous JavaScript and XML (Ajax).
 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 number of excellent articles that describe Ajax are available, for example, Asynchronous JavaScript Technology and XML (Ajax) With Java 2 Platform, Enterprise Edition. In brief, Ajax is a set of technologies that together allows a web site to be — or appear to be — highly responsive. Ajax enables this 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.
 AJAX TECHNOLOGIES

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.
•    JavaScript, a scripting language. One element of JavaScript technology that is key to Ajax is XMLHttpRequest, an object that is used to exchange data between the web client and web server.
•    Document Object Model (DOM), which provides a logical view of a web page as a tree structure.
•    XML, the format for sending data from the web server to the client. However, you can use other formats, such as HTML, JavaScript Object Notation (JSON), or plain text.
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

1.    A user generates an event on the client. This results in a JavaScript technology call.
2.    A JavaScript technology function creates and configures an XMLHttpRequest object on the client,    
and specifies a JavaScript technology callback function. The XMLHttpRequest object makes a call — an asynchronous HTTP request — to the web server.
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.

You can incorporate these technologies into a web application in a variety of ways. For example, you can write JavaScript technology code in an HTML page, or you can use a library such as one in the Dojo toolkit to provide part or all of the JavaScript technology functionality you need. In addition, you have server-related choices regarding Ajax.
 AJAX AND SERVER-SIDE JAVA TECHNOLOGIES

All the technologies included in Ajax are either client technologies such as JavaScript technology, or — like XML — are pertinent to the interchange of data between the client and server. The fact is that the request to the server that the XMLHttpRequest object makes is an HTTP request. To the server, handling an Ajax request is no different than handling an HTTP request from a conventional web application — any server technology can be used to handle the request, including server-side Java technologies in the Java EE Platform such as servlets, JSP technology, and JavaServer Faces technology. In fact, Java EE technologies fit very well with the Ajax methodology. JavaServer Faces technology and other Java EE technologies that include support for data validation, user identity management, and persistence, are particularly well-suited for Ajax.Java EE technologies fit very well with the Ajax methodology. For example, you can use a servlet to process a request, manage state for the client, access enterprise resources, and generate the XML for the response. Or you can create custom JavaServer Faces components to handle server-side processing as well as encapsulate the JavaScript technology and CSS for client-side processing. In fact, a library of Ajax-enabled custom JavaServer Faces a component is already available as part of the Java Blueprints Solutions Catalog.

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.

Components

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.

Browser Compatibility

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.

Networking

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.

Core Services

The Ajax client-script libraries in ASP.NET consist of JavaScript (.js) files that provide features for object-oriented development. The object-oriented features included in the Microsoft Ajax client-script libraries enable a high level of consistency and modularity in client scripting. The following core services are part of the client architecture:

Object-oriented extensions to JavaScript, such as classes, namespaces, event handling, inheritance, data types, and object serialization.

A base class library, which includes components such as string builders and extended error handling.

Support for JavaScript libraries that are either embedded in an assembly or are provided as standalone JavaScript (.js) files. Embedding JavaScript libraries in an assembly can make it easier to deploy applications and can help solve versioning issues.

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.

Globalization

The Ajax server and client architecture in ASP.NET provides a model for localizing and globalizing client script. This enables you to design applications that use a single code base to provide UI for many locales (languages and cultures). For example, the Ajax architecture enables JavaScript code to format Date or Number objects automatically according to culture settings of the user’s browser, without requiring a postback to the server. For more information, see Walkthrough: Globalizing a Date by Using Client Script.

 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.

Script Support

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:

The Microsoft Ajax Library, which is a type system and a set of JavaScript extensions that provide namespaces, inheritance, interfaces, enumerations, reflection, and additional features. For more information see Creating Custom Client Script by Using the Microsoft Ajax Library.

Partial-page rendering, which updates regions of the page by using an asynchronous postback. For more information, see Partial-Page Rendering Overview.

Localization

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

•    Walkthrough: Embedding Localized Resources for a JavaScript File

•    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

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.

Server Controls

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.

ScriptManager
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.

UpdatePanel
Enables you to refresh selected parts of the page, instead of refreshing the whole page by using a synchronous postback.

UpdateProgress
Provides status information about partial-page updates in UpdatePanel controls.

Timer
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

The Ajax Control Toolkit contains controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. These controls do not require knowledge of JavaScript or Ajax. They are designed using concepts that are familiar to ASP.NET Web Forms application developers. Using the Ajax Control Toolkit, you can build Ajax-enabled ASP.NET Web Forms applications and ASP.NET MVC Web applications by dragging the controls from the Visual Studio Toolbox onto a page. The Ajax Control Toolkit is an open-source project that is part of the CodePlex Foundation. For more information, see the Ajax Control Toolkit on the CodePlex Web site.

EXAMPLES OF USE OF AJAX

•    GMail
•    Google Suggest
•    Backpackit
•    A live version of the Feedback Example – See Ajax Contact Form.

CONCLUSION

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.

References:

Various websites on Ajax on j2ee and .net platforms

Article Source: http://www.articlesbase.com/software-articles/web-applications-with-j2ee-and-net-ajax-5953216.html

About the Author

V V Narendra Kumar

MS(Software Systems),M.Tech(IT),DIM,[PhD]

Assoc.Professor,Informatics

Alluri Institute of Management Sciences,

Warangal,A.P.,India