AJAX has been around for a while now, and an important feature of the AJAX implementation in the .NET space is the partial post back functionality of web pages. This functionality has made the online experience richer and smoother while decreasing bandwidth usage between the server and browser. How this technology works is equally fascinating, and I am making an attempt to demonstrate how it works by taking a look below the hood.
On the server side, we implement an HttpHandler to handle the request and pass back data in a valid XML form.
By doing so, we are preventing page refreshes and roundtrips of static data and content in the web pages.
Essential building blocks
- XMLHttpRequest API
How the code works
When the button on the ASPX page has been clicked, a client side HTTP request is made using the
XMLHttpRequest API. This request is handled by an HttpHandler on the web server. The HttpHandler receives the request, processes it, and sends back the response to the
XMLHttp object on the ASPX page. The
XMLHttp object in turn consumes the response and renders the appropriate UI changes without the browser having to do a full refresh of the page.
Using the code
This API makes the client side request to the handler without the need for a full postback by the ASPX page. The XML data is received by the
XMLHttp object and used to populate a
else if (window.ActiveXObject)
alert("Your browser does not support XMLHTTP.");
alert("Problem retrieving XML data:" + xmlhttp.statusText);
The HttpHandler code builds and sends a simple XML object called
note, with a single element called
body. You can modify and implement your own logic here to do more complex stuff.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler1 : IHttpHandler
public void ProcessRequest(HttpContext context)
context.Response.ContentType = "text/plain";
context.Response.Write("<body>Partial postbacks" +
" are awesome!</body>");
public bool IsReusable
Points of interest
Interestingly enough, much of the functionality we see above has been due to the browser support for
XMLHttpRequest. It is important to understand the various implementations of the
XMLHttp object by different browsers. Below is some history on the evolution of the
"Microsoft developers were the first to include the
XMLHttp object in their MSXML ActiveX control. Developers at the open source Mozilla project saw this invention, and ported their own
XMLHttp, not as an ActiveX control, but as a native browser object called
XMLHttpRequest. Konqueror, Opera, and Safari have since implemented similar functionality, but more along the lines of an identical
XMLHttpRequest. Some AJAX developers and run-time frameworks only support one implementation of
XMLHttp object as well. Internet Explorer 7 added native support for the
XMLHttpRequest object, but retains backward compatibility with the ActiveX implementation. To avoid excess conditionals, see the source code in the History and support section." courtesy Wikipedia.