What do I need to know to create my own AJAX functionality?

If you plan not to reuse and existing AJAX component here are some of the things you will need to know.
Plan to learn Dynamic HTML (DHTML), the technology that is the foundation for AJAX. DHTML enables browser-base realtime interaction between a user and a web page. DHTML is the combination of JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).
* JavaScript - JavaScript is a loosely typed object based scripting language supported by all major browsers and essential for AJAX interactions. JavaScript in a page is called when an event in a page occurs such as a page load, a mouse click, or a key press in a form element.
* DOM - An API for accessing and manipulating structured documents. In most cases DOM represent the structure of XML and HTML documents.
* CSS - Allows you to define the presentation of a page such as fonts, colors, sizes, and positioning. CSS allow for a clear separation of the presentation from the content and may be changed programmatically by JavaScript.
Understanding the basic request/response nature of HTTP is also important. Many subtle bugs can result if you ignore the differences between the GET and OIst methods when configuring an XMLHttpRequest and HTTP response codes when processing callbacks.
JavaScript is the client-side glue, in a sense. JavaScript is used to create the XMLHttpRequest Object and trigger the asynchronous call. JavaScript is used to parse the returned content.

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.
Moving Forward

Is the ASP.NET AJAX Control Toolkit(AjaxControlToolkit.dll) installed in the Global Assembly Cache?

No. You must copy the AjaxControlToolkit.dll assembly to the /Bin folder in your application.

Explain differences between the page execution lifecycle of an ASP.NET page and an ASP.NET AJAX page?

In an asynchronous model, all the server side events occur, as they do in a synchronous model. The Microsoft AJAX Library also raises client side events. However when the page is rendered, asynchronous postback renders only the contents of the update panel, where as in a synchronous postback, the entire page is recreated and sent back to the browser.

How can you to add JavaScript to a page when performing an asynchronous postback?

Use the ScriptManager class. This class contains several methods like the RegisterStartupScript(), RegisterClientScriptBlock(), RegisterClientScriptInclude(), RegisterArrayDeclaration(),RegisterClientScriptResource(), RegisterExpandoAttribute(), RegisterOnSubmitStatement() which helps to add javascript while performing an asynchronous postback.

Which request is better with AJAX, Get or Post?

AJAX requests should use an HTTP GET request while retrieving data where the data does not change for a given URL requested. An HTTP POST should be used when state is updated on the server. This is in line with HTTP idempotency recommendations and is highly recommended for a consistent web application architecture.

How to trigger a postback on an UpdatePanel from Javascript?

Call the __doPostBack function. ASP.NET runtime always creates a javascript function named __doPostBack(eventTarget, eventArgument) when the web page is rendered. A control ID may be passed here to specifically invoke updation of the UpdatePanel.

How to make sure that contents of an UpdatePanel update only when a partial postback takes place (and not on a full postback)?

Make use of ScriptManager.IsInAsyncPostBack property (returns a boolean value)

What are limitations of Ajax?

1) An Ajax Web Application tends to confused end users if the network bandwidth is slow, because there is no full postback running. However, this confusion may be eliminated by using an UpdateProgress control in tandem.

2) Distributed applications running Ajax will need a central mechanism for communicating with each other

How to control how long an Ajax request may last?

Use the ScriptManager's AsyncPostBackTimeout Property.

For example, if you want to debug a web page but you get an error that the page request has timed out, you may set

where the value specified is in seconds.

What are the modes of updation in an UpdatePanel? What are Triggers of an UpdatePanel?

An UpdatePanel has a property called UpdateMode. There are two possible values for this property: 1) Always 2) Conditional

If the UpdateMode property is set to "Always", the UpdatePanel control’s content is updated on each postback that starts from anywhere on the webpage. This also includes asynchronous postbacks from controls that are inside other UpdatePanel controls, and postbacks from controls which are not inside UpdatePanel controls.

If the UpdateMode property is set to Conditional, the UpdatePanel control’s content is updated when one of the following is true:

1 - When the postback is caused by a trigger for that UpdatePanel control.

2 - When you explicitly call the UpdatePanel control's Update() method.

3 - When the UpdatePanel control is nested inside another UpdatePanel control and the parent panel is updated.

When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.

Controls defined inside a node have the capability to update the contents of an UpdatePanel.


If the ChildrenAsTriggers property is set to false and the UpdateMode property is set to Always, an exception is thrown. The ChildrenAsTriggers property is intended to be used only when the UpdateMode property is set to Conditional.

What is an UpdatePanel Control?

An UpdatePanel control is a holder for server side controls that need to be partial postbacked in an ajax cycle. All controls residing inside the UpdatePanel will be partial postbacked.

What are type/key pairs in client script registration? Can there be 2 scripts with the same type/key pair name?

When a script is registered by the ScriptManager class, a type/key pair is created to uniquely identify the script.

For identification purposes, the type/key pair name is always unique for dentifying a script. Hence, there may be no duplication in type/key pair names.

Whats the difference between RegisterClientScriptBlock, RegisterClientScriptInclude and RegisterClientScriptResource?

For all three, a script element is rendered after the opening form tag. Following are the differences:
1 - RegisterClientScriptBlock - The script is specified as a string parameter.
2 - RegisterClientScriptInclude - The script content is specified by setting the src attribute to a URL that points to a script file.
3 - RegisterClientScriptResource - The script content is specified with a resource name in an assembly. The src attribute is automatically populated with a URL by a call to an HTTP handler that retrieves the named script from the assembly.

How to use multiple ScriptManager controls in a web page?

No. It is not possible to use multiple ScriptManager control in a web page. In fact, any such requirement never comes in because a single ScriptManager control is enough to handle the objects of a web page.

Can we override the EnablePartialRendering property of the ScriptManager class?

Yes. But this has to be done before the init event of the page (or during runtime after the page has already loaded). Otherwise an InvalidOperationException will be thrown.

What is the role of ScriptManager in Ajax?

ScriptManager class is the heart of ASP.NET Ajax. Before elaborating more on ScriptManager, note that ScriptManager is class and a control (both) in Ajax.

The ScriptManager class in ASP.NET manages Ajax Script Libraries, partial page rendering functionality and client proxy class generation for web applications and services. By saying client proxy class, this means an instance of the Ajax runtime is created on the browser.

This class is defined in the System.Web.Extensions.dll. You will find this DLL in your system's Global Assembly Cache at C:\Windows\Assembly (For XP)

The ScriptManager control (that we may drag on a web form) is actually an instance of the ScriptManager class that we put on a web page. The ScriptManager manages all the ASP.NET Ajax controls on a web page. Following tasks are taken care by the ScriptManager class:

1 - Managing all resources (all objects/controls) on a web page
2 - Managing partial page updates
3 - Download Ajax Script Library to the client (means to the browser). This needs to happen so that Ajax engine is accessible to the browsers javascript code.
4 - Interacting with UpdatePanel Control, UpdateProgress Control.
5 - Register script (using RegisterClientScriptBlock)
6 - Information whether Release OR Debug script is sent to the browser
7 - Providing access to Web service methods from the script by registering Web services with the ScriptManager control
8 - Providing access to ASP.NET authentication, role, and profile application services from client script after registering these services with the ScriptManager control
9 - Enable culture specific display of clientside script.
10 - Register server controls that implement IExtenderControl and IScriptControl interfaces.

ScriptManager class' EnablePartialRendering property is true by default.

How to create an AJAX website using Visual Studio?

Using Visual Studio Web Developer Express 2005 & versions above it, Ajax based applications may easily be created. Note that the Ajax Framework & Ajax Extensions should be installed (In case of VS 2005). If using Visual Studio 2008 Web Developer Express or above, Ajax comes along with it (so no need of a separate installation).

Steps: Start Visual Studio, Click on File -> New Website -> Under Visual Studio Installed templates -> Select ASP.NET Ajax-Enabled Site. Enter a location & select OK.

How to handle multiple or concurrent requests in Ajax?

For concurrent requests, declare separate XmlHttpRequest objects for each request. For example, for request to get data from an SQL table1, use something like this...

xmlHttpObject1.Onreadystatechange = functionfromTable1();

and to get data from another table (say table2) at the same time, use

xmlHttpObject2.Onreadystatechange = functionfromTable2();

Ofcourse, the XmlHttpObject needs to be opened & parameters passed too, like as shown below...

xmlHTTPObject1.open("GET","http://"localhost// " + "Website1/Default1.aspx" true);

Note that the last parameter "true" used above means that processing shall carry on without waiting for any response from the web server. If it is false, the function shall wait for a response.

What is Dojo?

Dojo is a third-party javascript toolkit for creating rich featured applications. Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.