Introducing Asynchronous Java Script and XML (Ajax) in ASP.NET

One of the most important challenges web application developers face is the requirement for a fast and responsive user interface. AJAX was primary designed and developed with the intent of providing a fast and responsive user interface to address these challenges. According to Enrich Peterson, “AJAX-enabled pages provide a slick, responsive user experience, making web-based applications function more like desktop-based ones”.

This article guides the reader through this new technology, its features, benefits and applicability in web application development. This is the first in the series of articles on Ajax (and more specifically ASP.NET AJAX). Although Ajax is independent of the technology with which it is implemented (you can implement Ajax enabled web applications using Java, Microsoft .NET or many other programming models), I will discuss implementation of Ajax in ASP.NET, how we can consume Web Services using AJAX, etc, in this series.

Why AJAX?

The primary advantages of using Ajax in web application development are as follows.

Ø Reduction of unnecessary web server hits, i.e., the round trips are minimized

Ø Rich, responsive user interface

Ø Real-time web page updates

Ø Language neutrality

Ø Faster web page renderings

Ø Less consumption of server’s resources (memory and processor load is reduced)

In the Ajax enabled web applications, requests are sent to the server only for the data that is needed. The entire web page is not submitted at one go.

Ajax makes use of XML, XSLT, XMLHttpRequest, JavaScript, HTML, and DHTML.

How does AJAX work?

Let us start by defining what AJAX is. AJAX, an acronym for Asynchronous JavaScript and XML, is a cross-platform technology that can be used to make your web pages fast, rich and responsive.

The key to the success of AJAX lies in the way it works. “Asynchronous” as it is called, implies that in the earlier days, the web applications used to be synchronous. This reminds me of the term “serial multi-tasking”, the type of multi-tasking the DOS Operating System used to support. A synchronous nature of execution implies that until and unless a request is complete in all respects, another cannot start. In other words, the requests have to be executed one after the other.

The AJAX engine runs within the context of the web browser using JavaScript and DOM technologies. In AJAX, the JavaScript that is loaded at the time when the web page loads is responsible for handling the basic tasks of data validation, changes to the data, etc; while the data transfer that happens from the user interface to the database and vice-versa, continues to happen in the background, i.e., it is independent of the other operation that we just mentioned about. This is what is known as “Asynchronous” mode of execution.

In an Ajax enabled web application, the runtime loads the Ajax engine instead of loading a webpage at the beginning. This engine is responsible for both rendering the data for the user interface and also communicating with the web server for transporting data back and forth. “The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server.”

Ajax is a mainly a mix of Javascript,Html, CSS, XML, DOM and the XMLHttpRequest Object. Ajax helps us to avoid reloading the web page as and when a specific portion of the web page changes due to user inter actions. Using Ajax, you can dynamically retrieve data from the application running in the context of the web server whenever a user interaction happens using the XMLHTTPRequest object. But, what is this XMLHTTPRequest object? Today’s browsers contain the XMLHttpRequest object that can be used to create a GET or POST request asynchronously. It also helps us to register a callback method that is invoked when the resposne for that request returns to the client side browser. This response can in turn be either in plain text or in XML format. In the former case, we can simply display the response in the web browser; in the later, you require parsing the XML prior to displaying in the browser. Note that the XMLHttpRequest Object is one of the major components of the Ajax framework and facilitates asynchronous processing and also supports events.

AJAX and ASP.NET

Microsoft introduced support for AJAX in ASP.NET in the form of a separate add-on called ASP.NET 2.0 AJAX Extensions, an extension of ASP.NET that is totally integrated with the server-based services and helps you to design and implement Ajax enabled web applications using ASP.NET technology. It actually is comprised of a set of technologies that enable AJAX support in the ASP.NET environment. According to MSDN, “ASP.NET AJAX is a set of technologies to add AJAX (Asynchronous JavaScript and XML) support to ASP.NET. It consists of a client-side script framework, server controls, and more”. “Although AJAX is essentially a client-side technique, most of its real-world deployments call for server-side processing.”

The ASP.NET 2.0 framework incorporates the client script libraries of the ASP.NET Ajax framework. Note that ASP.NET AJAX is an extension of the ASP.NET server-based development framework. You can use ASP.NET AJAX to build web applications with rich user interface and improved response times. “The framework includes two distinct yet not mutually exclusive API’s: client and server, which enable the developers to accomplish AJAX functionalities using direct client-side programming, traditional server-side programming, or any combination of both”.

Available ASP.NET Ajax Frameworks

These are several of Ajax frameworks for ASP.NET that you can choose from. The following are some of the best Ajax frameworks.

Ajax.NET Professional

ASP.NET AJAX from Microsoft

Ajax.NET

MajicAjax.NET

The ASP.NET AJAX Control Toolkit

The ASP.NET AJAX Control Toolkit from Microsoft is a community project that comprises of a SDK and code samples. According to Microsoft, “The ASP.NET AJAX Control Toolkit provides a set of sample controls and extenders that makes it a snap to spice up your web site with rich functionality”.

You can download the Ajax Control Toolkit from the following link:

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx

Suggested Readings

http://www.ajaxtoday.com/ArticleDetail/tabid/62/ArticleID/45/Default.aspx

http://www.developerfusion.co.uk/show/4704/

http://aspnet.4guysfromrolla.com/articles/062106-1.aspx

http://www.codeproject.com/Ajax/IntroAjaxASPNET.asp

AJAX Downloads and Resources

You can download AJAX from the following link. This is the official link for ASP.NET AJAX resources. http://ajax.asp.net/downloads/

Conclusion

Asynchronous JavaScript and XML, or AJAX is a technology that can be used to send and receive data (usually in XML format) from a server-side application using

Javascript. AJAX has introduced radical changes in how web applications are developed these days. You can use ASP.NET AJAX to enrich the user interface of your web applications seamlessly and ensure that the user interface is fast and responsive with less resource overheads involved for rendering of data from the web server to the web clients. The forthcoming articles in this series of articles on Ajax would discuss more and more on Ajax and how we can build and implement Ajax in ASP.NET applications. So, stay tuned!

Sorry, comments are closed for this post.