Introduction to AJAX and Microsoft ASP.NET AJAX Framework

Web applications lack the rich user interface provided by Desktop applications. They tend to be less responsive compared to Desktop products. Web applications employ inherit request/response cycle to build pages which in turn creates less natural and not so dynamic/responsive pages.

It was always been a challenge for web developer to built slick, rich and dynamic web applications. We can feel lag... But it's no more now. Try Google Maps. Use the cursor to zoom in/out. Don't you feel the difference? Do you think it does post back for each request? Observe, everything happens instantly with out a page refresh. Wondered! AJAX does it all.

• AJAX, an acronym for Asynchronous JavaScript And XML is a group of technologies like Java Script, XML, CSS, DOM, HTML and DHTML.

• AJAX attempts to bridge the gap between the functionality and interactivity of a desktop application and the always-updated Web application.

• You can build dynamic user interfaces and fancier controls like you'd find on a desktop application through AJAX implementation.

Basic technologies involved in Ajax applications

• HTML is used to build Web forms and identify fields and controls for use in the rest of your application.

• JavaScript code is the core element running AJAX applications and it coordinates communication with server applications.

• DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML.

• DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.

Power of AJAX

• With AJAX, when a user clicks a button, you can use JavaScript and DHTML to immediately update the UI, and spawn an asynchronous request to the server to fetch results.

• When the response is generated, you can then use JavaScript and CSS to update your UI accordingly without refreshing the entire page. While this is happening, the form on the users screen doesn't flash, blink, disappear, or stall.

• The power of AJAX lies in its ability to communicate with the server asynchronously, using XMLHttpRequest object with out requiring a browser refresh.

• Ajax essentially puts JavaScript technology and the XMLHttpRequest object between your Web form and the server.

Everything happens behind the scene a mini request/response cycle with out knowledge of the user.

Finally, Jesse James Garrett who coined term AJAX defined AJAX as follows:

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

• Asynchronous server communication using XMLHttpRequest

• JavaScript binding everything together

Advantages of AJAX based applications

• Improved application performance by reducing amount of data downloaded from the server

• Rich, responsive and Slick UI with no page flickers

• Eliminates frequent page refresh which usually happens in a typical request/response model(Everything is updated on fly)

• Easy to implement as there are variety of AJAX implementations available around

• AJAX mechanism works behind the scene nothing much required from user perspective

• Works with all browsers

Several frameworks have emerged since then to support AJAX Web development. In this article, we will examine Microsoft's ASP.NET AJAX 1.0 RC for demonstration purposes

Benefits of Microsoft ASP.NET AJAX

ASP.NET AJAX integrates client script libraries with the ASP.NET 2.0 development framework. This new Web development technology extends ASP.NET, offering the interactive user interface benefits of AJAX with a programming model that is more familiar to ASP.NET developers, making it very easy to add AJAX to your applications quickly and with minimal effort.

ASP.NET AJAX 1.0 RC can be downloaded from ajax.asp.net when installed; it adds an additional Web Site template for C# and Visual Basic.NET to Microsoft Visual Web Developer. When you create a new Web site project in Visual Web Developer, you will see a dialog like the one shown below. The Web.config will be updated accordingly to be able to use AJAX-based ASP.NET features.

You are also expected to download the ASP.NET AJAX Control Toolkit which offers developers a rich variety of client-side controls with eye-catching control behavior without having to go through the trouble of writing and testing extensive JavaScript code.

We will demonstrate the power of ASP.NET AJAX using AJAX Control Toolkit to add partial-update support to a web page using two Microsoft ASP.NET 2.0 Extensions Server Controls: the ScriptManager Control and the UpdatePanel Control. These controls will allow only partial-update support to a web page. To run this example, you should have Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition and latest edition of ASP.NET AJAX installed and configured

Create a New page and add UpdatePanel Control and ScriptManager Control to the page. Click inside UpdatePanel Control and add Calendar Control inside the UpdatePanel Control. Add another Calendar Control outside UpdatePanel Control. Run the page in browser using CRTL+F5.

• Navigate to the previous or next month in the calendar that is inside the UpdatePanel control. The displayed month changes without refreshing the whole page.

• Navigate to the previous or next month in the calendar that is outside the UpdatePanel control. The whole page is refreshed.

Literally, you can use any control to UpdatePanel Control if you want to AJAXize the Control. Make sure, ScriptManager Control is added to page.

Conclusion

AJAX isn't just a hyped technology; instead, it's a concrete framework that can provide you with alternative and clean solutions for your everyday problems when building Web applications. AJAX is about more than creating neat and cool applications; it can truly lead to improved customer satisfaction and a competitive advantage.

Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |