Share via

Introduction to Asp.net Ajax and Ajax Control Toolkit

  • Article

Background

 

There are many technologies used to develop applications.  The greatest challenge is often to make an application quick, reliable, user friendly and responsive.
 

This article is part of a series aimed at both beginners and experienced developers.  By the end of this year you will see all the Ajax and Ajax Control Toolkit Examples in one series.

Let us begin the journey.

Introduction

In traditional web sites there are often issues related to performance due to high traffic on the server.  When the user any part of information on a web page, the entire page is posted to the server, rebuilt and sent back again to the client.

Problems in traditional web Applications

  1. Many round trips to the server.
  2. Slow rendering of large webpages.
  3. Increased the consumption of server resources.
  4. Slow response times.
  5. Static rendering of data.
  6. Data is only updated in the page when the user clicks on the browser refresh button.

The above are some of the basic traditional web application problems which Ajax can address. Let us start by looking at the basics.

What is Ajax ?

Ajax stands for Asynchronous JavaScript and XML; in other words Ajax uses a combination of various technologies such as a JavaScript, CSS, XHTML, and DOM together.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the entire page.

We can also define Ajax is a combination of client side technologies that provides asynchronous communication between the user interface and the web server so that partial page rendering occurs instead of complete page.

Ajax is platform-independent; in other words AJAX is a cross-platform technology that can be used on any Operating System since it is based on XML or JSON & JavaScript. It also supports open source implementation of other technology. It requests data which is then rendered on the client as part of the page using javascript rather than formatted on the server and returned as an entire;ly new page to the client

We use AJAX for developing faster better and more interactive web applications. AJAX uses a HTTP request between web server & browser.

Using Ajax technologies we can observe in Google Maps, Gmail, YouTube, and Facebook tabs.

The following diagram showing how Ajax works:

http://www.c-sharpcorner.com/UploadFile/0c1bb2/introduction-to-ajax-and-ajax-control-toolkit-part-1/Images/AjaxWorking.png

In the above diagram it's clear how Ajax works, that first depending on the client requests the browser creates the XMLHttpRequest and sends it to the server and there after that the server processes the HttpRequest given by the browser, processes it and then sends the response back to the user and at the end the browser processes the response given by the server using JavaScript and update the requested content of the particular page instead of the entire page contents.

AJAX is Based on Internet Standards

AJAX uses a combination of a XMLHttpRequest object to exchange data asynchronously with a server, JavaScript and DOM to interact with the information and CSS is used to style the data and XML is often used as the format for transferring data.

Let's review the basic technologies used.

1. XHTML and CSS

XHTML (or HTML) is used for providing the markup tags, as in any typical web site. In addition, CSS is used for styling. XHTML is a stricter and more standardized form of HTML, which follows the rules of XML such as the requirement for well-formatted and valid against a schema or DTD.

2. Document Object Model (DOM)

The Document Object Model is a platform and language independent standard object model for representing HTML or XML.

3. XML

XML is typically used as the format for transferring data between the server and the client. Using XML we can represent any applicable data object structure we might wish to represent.

4. XMLHttpRequest (XHR) and JavaScript

The XMLHttpRequest is the core of the Ajax model; without it the model would not exist. The XMLHttpRequest JavaScript object is the enabling technology which is used to exchange data asynchronously with the web server. In short, XMLHttpRequest lets us use JavaScript to make a request to the server and process the response without blocking the user. Naturally, as we are using this JavaScript object, the providing technology is JavaScript and hence some knowledge of JavaScript is required to get Ajax applications to function. 

Note:

  • In Ajax Client and Server Communication done with help of HttpRequest.
  • AJAX applications are browser and platform independent.
  • JSON offers a lighter weight approach and is therefore often used instead of xml.

Let us now discuss the relation between Ajax and ASP.Net Framework.

Ajax and ASP.Net Framework

ASP.NET AJAX has integrated client scripting libraries with ASP.NET since ASP.NET 2.0. This 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.

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 a XMLHttpRequest object without requiring a browser refresh. 
  • Ajax essentially puts JavaScript technology and the XMLHttpRequest object between your Web form and the server.

Everything happens behind the scenes with a minimum request and response cycle without the knowledge of the user.

Advantages of AJAX based application

  • Improved application performance by reducing the 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
  • Avoids the round trips to the server
  • Rendering of webpage faster
  • Decreases the consumption of server resources
  • Response time of application is very faster
  • Rendering of data is dynamic

So let us start with the basic concepts of Ajax Extension which comes with the ASP.Net Framework.

Using Ajax Extension

The following are the most commonly used Ajax controls in an ASP.Net Application which comes with the ASP.Net Framework and available under the Ajax Extension tab of ASP.Net Toolbox present at the left hand side of Microsoft Visual Studio framework.

These controls are:

  1. ScriptManager
  2. UpDatePanel
  3. Timer
  4. UpdateProgress
  5. ScriptManagerProxy
  6. Pointer

  1. Using ScriptManager

    When we use any Ajax control then there is a requirement to use the ScriptManager to handle the Scripting on the client side; without the ScriptManager Ajax controls are not run. So it's a requirement to use the ScriptManager.
     

  2. Using UpDatePanel

    Update panel is one of the most commonly used Ajax controls which is responsible for updating the particular requested content of the page instead of the entire page which is not requested. The ASP.Net controls are put under the update panel to make the benefit of this control. The ASP.Net controls which are kept under the update panel will be updated when the user clicks on a particular ASP.Net Control which are used in an application.
    You can use multiple update panels on a single web page.
     

  3. Using Timer

    The Timer is also one of the important controls; by using it we can update the particular content of the page automatically without clicking the browser refresh button. The Timer control is used along with the Update Panel so the Contents put under the update panel are automatically updated according the timing set under the timer_click event.
     

  4. Using Update Progress

    This control is used to notify the user to wait until the requests are processed on the server. Update progress control is used when the user clicks on any tab or control of an application. At that time the progress bar is shown which is the interval between the times taken by the server to process the client request.
     

  5. Using ScriptManagerProxy

    When you need to reference a service from your content page and yet the ScriptManager resides on the Master Page use a ScriptManagerProxy. The ScriptManagerProxy works by detecting the main ScriptManager on your page at runtime and hooking itself to that ScriptManager, making sure that any references given to it are also given to the real ScriptManager.
     

  6. Using Pointer

    This Ajax Control used to specify the style of the mouse pointer such as arrow, thumb, and progress bar and much more. The above is the basic introduction about the Ajax Extension controls which are available by default in a Microsoft Visual Studio Framework.

Summary

In this first part of article I have explained the basics of Ajax. In my next article of the series, Using Ajax Extension :Part-2, I will explain how to use Ajax Extension controls in an ASP.Net C# web application.

See Also

ASP.Net Portal