The AJAX is in the Microsoft world probably a resurrection of the old technology, which become more important in the last year. Shortly, it provides the simple mechanism for invoking of server operations without of need recreate the page.
The creation of the page is known as rendering and it is very expensive operation. In general the ASP.NET paradigm defined great idea of server controls. However, continually sending of event to the server requires full rendering of the page.
Unfortunately, such design was not always accepted by some customers, because of many practical reasons.
In this post I would like to show how the AJAX exactly works from the point of view of the network traffic.
Assume there is a page NETAjaxPage.aspx, which implements required ICallbackEventHandler interface.
I you ever implemented one AJAX-page, did you ever ask yourself how does this work? Even more, the application developed in Visual Studio 2005, deployed (published) on IIS6.0, does not work?!
The AJAX-based page “calls-back” (includes) the JAVA-script code which, implements the AJAX functionality in the dynamically (on-the-fly) created file with extension AXD.
This is the file extension which is by default not permitted by IIS6.0.
(more about AXD JAVA-script code: http://developers.de/blogs/damir_dobric/archive/2006/03/02/4.aspx)
To understand what exactly happen, I scanned the network traffic and found out following story.
When the browser requests the page NETAjaxPage.aspx the Request I is sent to server. Note that this is the request sent when the page is already shown in the browser and F5 is pressed. Immediately after the page has been received from the server, the browser sends the second (hidden) requests to the server (Request II). This HTTP request is of GET-type and it just downloads the JAVA-script code implementing the client’s AJAX functionality.
When you scan the network traffic following two requests are sent from the browser:
http://localhost:2150/TestWebSite/NETAjaxPage.aspx
http://localhost:2150/TestWebSite/WebResource.axd?d=Bw8kGu8s1KgSmi65PdGFBQ2&t=632716224140354816
Request I
http://localhost:2150/TestWebSite/NETAjaxPage.aspx
POST /TestWebSite/NETAjaxPage.aspx HTTP/1.1
Accept: */*
Referer: http://localhost:2150/TestWebSite/NETAjaxPage.aspx
Accept-Language: en-us,de;q=0.8,de-li;q=0.5,de-at;q=0.3
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: localhost:2150
Content-Length: 302
Proxy-Connection: Keep-Alive
Pragma: no-cache
Cookie: aco5secmanlgn=; .COOKIEAO50=2881816F65C58EF277B6BA01BE3E0797D0C3B9C907F1B252637AFC33C6153E3A4FDCD44C358B06AAB9648B8293F0FF63801733DB4945C055C2463063599D58E2A30282FDFDED172AAC21A416F9279BE9; ASP.NET_SessionId=oeoz1vj2xyjq2tulewsbsnex
__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=%2FwEPDwUINDE4MzgwMTJkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBQxSYWRpb0J1dHRvbjEFDFJhZGlvQnV0dG9uMVxr4xeV7CgqcG7Bj6dTF7UuFb%2Bl&Button2=Button&TextBox1=&__EVENTVALIDATION=%2FwEWBQK9tfbfA2YCu6uxhggC7NGy6wYCzPT7pg%2B9sqUVKS%2BILWhcmKSTlJyrJlUBLg%3D%3D
Request II
http://localhost:2150/TestWebSite/WebResource.axd?d=Bw8kGu8s1KgSmi65PdGFBQ2&t=632716224140354816
GET /TestWebSite/WebResource.axd?d=Bw8kGu8s1KgSmi65PdGFBQ2&t=632716224140354816 HTTP/1.1
Accept: */*
Referer: http://localhost:2150/TestWebSite/NETAjaxPage.aspx
Accept-Language: en-us,de;q=0.8,de-li;q=0.5,de-at;q=0.3
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: localhost:2150
Proxy-Connection: Keep-Alive
Cookie: aco5secmanlgn=; .COOKIEAO50=2881816F65C58EF277B6BA01BE3E0797D0C3B9C907F1B252637AFC33C6153E3A4FDCD44C358B06AAB9648B8293F0FF63801733DB4945C055C2463063599D58E2A30282FDFDED172AAC21A416F9279BE9; ASP.NET_SessionId=oeoz1vj2xyjq2tulewsbsnex
Invoke of AJAX
By invoking of some AJAX request following HTTP request is sent to the server:
POST /TestWebSite/NETAjaxPage.aspx HTTP/1.1
Accept: */*
Accept-Language: en-us,de;q=0.8,de-li;q=0.5,de-at;q=0.3
Referer: http://localhost:2150/TestWebSite/NETAjaxPage.aspx
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: localhost:2150
Content-Length: 341
Proxy-Connection: Keep-Alive
Pragma: no-cache
Cookie: aco5secmanlgn=; .COOKIEAO50=2881816F65C58EF277B6BA01BE3E0797D0C3B9C907F1B252637AFC33C6153E3A4FDCD44C358B06AAB9648B8293F0FF63801733DB4945C055C2463063599D58E2A30282FDFDED172AAC21A416F9279BE9; ASP.NET_SessionId=oeoz1vj2xyjq2tulewsbsnex
__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=%2FwEPDwUINDE4MzgwMTJkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBQxSYWRpb0J1dHRvbjEFDFJhZGlvQnV0dG9uMVxr4xeV7CgqcG7Bj6dTF7UuFb%2Bl&TextBox1=&__CALLBACKID=__Page&__CALLBACKPARAM=input%20parameter&__EVENTVALIDATION=%2FwEWBQK9tfbfA2YCu6uxhggC7NGy6wYCzPT7pg%2B9sqUVKS%2BILWhcmKSTlJyrJlUBLg%3D%3D
Comparing of this request with the Request I, it can be noticed that this request has two more encoded “variables”: _CALLBACKID and __CALLBACKPARAM.
The first one contains the name of the invoking page and the second one contains the input parameter for the remote function to be executed in the context of this AJAX-call.
This means that the AJAX framework by request sends even more data as in usual case.
This amount of data is in many scenarios (e.g. static function) overhead. However this allows the ASP.NET framework to re-create the complete page before the AJAX-function on the server is invoked.
Personally, I think that the AJAX should be able to invoke some kind of static functions on the server, which do not require whole page. This would increase the performance of AJAX definitely.
On the other side the AJAX is very fast by sending of the response to the browser. Following example shows what information is retrieved to the browser after execting of the AJAX invoked function.
68|/wEWBQK9tfbfA2YCu6uxhggC7NGy6wYCzPT7pg+9sqUVKS+ILWhcmKSTlJyrJlUBLg==Output Parameter
Conclusion
By invoking of the page implementing the AJAX functionality, the browser sends two requests to the server when the page is downloaded.
During invocation of remote functions by using of AJAX the request contains all required page data used to recreate the page on the server side. Please note that the page at the server is created as the object representing the page. However the page is not rendered.
Exactly this behavior saves the time and network traffic.
Damir Dobric
Posted
Mar 08 2006, 06:27 AM
by
Damir Dobric