Labels

Friday, September 21, 2007

How AJAX Postback differs from Regular Postback

To see what makes the rendering stage different for an AJAX postback, take a close lookbelow:

§ A partial rendering request is often referred to as an AJAX postback.

§ An AJAX postback is like a classic ASP.NET postback, except that it is carried out by a piece of script code defined in the client-side ASP.NET AJAX library.

§ Although dressed like a pure AJAX remote call, an AJAX postback, once on the server, the request goes through the same typical lifecycle of postback requests and raises such events as Init, Load, and PreRender.

§ Difference is only in the algorithm it uses to render the final markup. The different algorithm is key to the improved performance and absence of page flickering. However, the application model remains the same as in ASP.NET.

§ Basically the modified rendering process / algorithm for an AJAX postback loops through all updatable panels in the page that are involved with the postback and accumulates the markup of each.

§ All markup chunks, along with hidden fields and any error information, are packed into a response stream and passed to the client.

Now let's dissect a typical partial rendering call in the context of a sample page.

Whenever a page is requested, system detects that an whether its an AJAX postback is occurring. The ScriptManager control checks an HTTP header in the request to determine whether the request is an AJAX postback. The HTTP header is set before triggering the AJAX request by the MicrosoftAjaxWebForms.js file.

Once identified that it's a AJAX PostBack below code fires from the System.Web.Extensions assembly:

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

if (IsInAsyncPostBack)

PageRequestManager.OnPreRender();

}

The OnPreRender method on the PageRequestManager class does the following:

internal void OnPreRender()

{

_owner.SetRenderMethodDelegate(

new RenderMethod(this.RenderPageCallback));

}

In the preceding code snippet, the method is invoked on the current page and ends up overriding the whole rendering process for the current request.

The actual code responsible for the markup of an AJAX postback is therefore defined in the RenderPageCallback method—an internal method in the PageRequestManager class.

This modified rendering process for an AJAX postback loops through all updatable panels in the page that are involved with the postback and accumulates the markup of each as shown below. All markup chunks, along with hidden fields and any error information, are packed into a response stream and passed to the client.

Whenever the script manager detects one or more UpdatePanel controls in the page, it emits the block of script as in the following

<script type="text/javascript">

Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls( ['tUpdatePanel1','tUpdatePanel2'], [], [], 90);

</script>

Hence this way only the piece of code contained in various update panels is updated and not the complete page.

Thanks & Regards,

Arun Manglick || Tech Lead

No comments:

Post a Comment