ERNI Technology Post No. 30 - Ajax

Practical Application of AJAX Web Technologies

With the expansion of the internet in the 1990's, web pages and web servers began appearing on enterprise intranets as well. This meant that a lot of business functionality was being implemented through the use of web technologies. However, user interaction through traditional web forms is clumsy and tedious due to the stateless nature of HTTP. Information entered by the user needs to be submitted to the web server, validated and - in the event that any problems are encountered - the form is once again presented to the user with error messages included. This user experience differs greatly from the quick responses experienced through a classic desktop application.

The more responsive web experience

Rich Internet Applications (RIA) - asynchronously loading the web page content - became possible with the introduction of Java and ActiveX applets, Flash and other plug-ins. This enables client-side code to load and present data after loading of the page. These solutions do however necessitate the installation of an add-on to the browser, as well as presenting security concerns. In 1999, Microsoft created the XMLHTTP ActiveX control which was incorporated into Internet Explorer 5. The control later evolved into a native XMLHttpRequest object which is accessible by scripting that allows background HTTP requests to the server. This tool is now supported by all major modern web-browsers - such as Mozilla Firefox, Opera, Apple Safari and Google Chrome - as well as the latest versions of Internet Explorer. Other possibilities include, for example, the usage of the iframe HTML element also introduced by Microsoft.

AJAX - A group of technologies

AJAX, an acronym for Asynchronous JavaScript and XML, is not a programming language, nor a single technology. It is a set of pre-existing technologies used together to implement a fast, responsive web application. It was first referred to by the term "AJAX" by Jesse James Garrett in 2005. Since 2006, it has been standardized by the World Wide Web Consortium (W3C). The following technologies are considered to be the part of AJAX:

  • (X)HTML and Cascading Style Sheets (CSS) for the presentation

  • The Document Object Model (DOM) for the dynamic manipulation with the contents of a page and interaction

  • The XMLHttpRequest object for background, asynchronous communication with the server

  • XML and JSON (JavaScript Object Notation) for the interchange of data

  • XSL transformation for the display of XML data

  • JavaScript to compile the above technologies and bring them to life

Practical Usage

AJAX is heavily supported by both proprietary and open-source frameworks and libraries so there is a lot to choose from in order to make development easier instead of using the low level AJAX components directly. JavaScript libraries such as jQuery and Prototype provide separation from different non-standard DOM and XMLHttpRequest implementations among different web browsers (especially on different versions of Microsoft's Internet Explorer which are still in use on the internet). Prototype JavaScript framework features the Ajax class and its Ajax.Request, Ajax.Updater classes, as well as other descendant classes for the initiation and processing of AJAX requests and responses. jQuery - a similar, yet richer framework (with upcoming support in Visual Studio 2010 by Microsoft) - features a palette of Ajax requests (including jQuery.ajax(), jQuery.get(), jQuery.post, jQuery.getJSON()) - as well as various events to be handled after a particular result of every AJAX request and tools for serialization to either a string or a JSON data structure. Where the back-end provides a method of XML output (web services, et al) a Browser-side XSLT pattern can be used. Although modern browsers provide support for XML parsing via DOM, the direct usage is lengthy and JavaScript is not very well-suited for programmatic construction of HTML structures from XML. Therefore, a faster and easier way to implement XML data processing is a transformation using an XSL stylesheet via the XSLTProcessor JavaScript class. The XSL stylesheet can be a part of the HTML document, a static file or a dynamically generated file loaded via the XMLHttpRequest call. The ASP.NET environment (.NET Framework, version 3.5 and up) features out-of-the-box support for a partial page update without a postback - using UpdatePanel controls. The UpdatePanel can contain controls that trigger the updates and any other ASP.NET controls that are refreshed with the new contents. The prerequisite for the usage of these controls is placing a ScriptManager control in the page. Multiple UpdatePanel controls can be placed on the page to update sections of the page independently. After the triggering event (input field change, click of a submit button, etc.) an asynchronous postback is issued, server logic is accessed and new contents of the controls are rendered on the page. Simultaneously, the ViewState of the page is updated. Thus, in case of a new postback, everything on the page retains its state.

ASP.NET Example

For example, let's have a page that will compute the area of a circle from a radius provided by the user.

ASP.NET Example

The triggering event for an update of the panel is the user's click on the button contained in the UpdatePanel's ContentTemplate element.

Getting more control

In the example above, the development of an application is very comfortable as almost everything is done by the ASP.NET subsystem - but the developer is bound by the means of the framework implementation and can control the actions on the page to a lesser degree. However, this is not the only way to achieve partial page updates with ASP.NET. One of the other approaches is the use of the jQuery library (with upcoming support in Visual Studio 2010 by Microsoft) and a custom HTTP handler, as follows: On an XHTML page, we can use jQuery to get events from the interaction on the page done by the user, post some data to the server and then manipulate the contents of the page to present the response from the server. In the following example the user experience is more responsive because the user does not have to click any Update button. The data is sent to the server immediately after the typing of each character. In this case, the bandwidth needed for the page update is lower, because there is no need to transfer the large amount of ViewState data.

The .NET framework includes native support for JSON serialization starting with version 3.5 SP1 (located in the assembly System.ServiceModel.Web; it has been moved to the System.Runtime.Serialization assembly in .NET 4). As you can see in the code above, you can comfortably serialize a custom Reply class and put it into the HTTP handler response. The standardized MIME type (RFC 4627) is used as a content type for the response - in order to be automatically recognized and parsed by the jQuery library and passed to the JavaScript callback.

Replacing the back-end with PHP

Drawbacks and Mistakes

The power of AJAX also introduces potential dangers to design and development. The most prominent difficulties that AJAX denotes are:

  • Pages dynamically created with AJAX do not interact well with browsing history and bookmarking - while the contents of the page is heavily changed, the URL is not. There are some workarounds possible, for example changing the anchor portion of the URL by passing parameters as a string after the "#" character.

  • Clients without the support of JavaScript or XMLHttpRequest, or with their functionality disabled, won't be able to access AJAX-enabled pages.

  • Security issues exist, such as sending data in clear text. The traffic between the client and the server must be handled the same way as in traditional web-based applications in order to eliminate vulnerabilities.

  • UI design and usability issues exist , such as inventing new UI conventions, not giving visual feedback for the user interactions, handling network drop-outs or longer loading times, etc.

Summing Up

Although AJAX user interfaces are harder to develop, the benefits for the users are obvious - the UI provides much faster responses and provides a desktop-like experience on the web. As with every complex technology, AJAX needs serious prototyping before deciding to apply this model to a web-based application. Nevertheless, the result of AJAX from a user perspective is worth the effort, especially for a business environment.

posted on 10.07.2012
Categories: 
Tags: 
by: Branislav Pavelka