On-demand UI loading on AJAX websites

AJAX websites are all about loading as many features as possible
into the browser without having any postback. If you look at the
Start Pages like Pageflakes, it’s only one single
page that gives you all the features of the whole application with
zero postback. A quick and dirty approach for doing this is to
deliver every possible html snippets inside hidden divs during page
load and then make those divs visible when needed. But this makes
first time loading way too long and browser gives sluggish
performance as too much stuff is on the DOM. So, a better approach
is to load html snippet and necessary javascript on-demand. In my
dropthings project, I have
shown an example how this is done.


When you click on the “help” link, it loads the content of the
help dynamically. This html is not delivered as part of the
default.aspx that renders the first page. Thus the giant
html and graphics related to the help section has no effect on site
load performance. It is only loaded when user clicks the “help”
link. Moreover, it gets cached on the browser and thus loads only
once. When user clicks the “help” link again, it’s served directly
from the browser cache, instead of fetching from the origin server

The principle is making an XMLHTTP call to an .aspx page,
get the response html, put that response html inside a container
DIV, make that DIV visible.

AJAX framework has a Sys.Net.WebRequest class which you
can use to make regular HTTP calls. You can define http method,
URI, headers and the body of the call. It’s kind of a low
level function for making direct calls via XMLHTTP. Once you
construct a web request, you can execute it using

   1: function showHelp()
   2: {
   3:     var request =
new Sys.Net.WebRequest();
   4:     request.set_httpVerb(
   5:     request.set_url(
   6:     request.add_completed(
function( executor )
   7:     {
if (executor.get_responseAvailable())
   9:         {
  10:             var helpDiv = get(
  11:             var helpLink = get(
  13:             var helpLinkBounds =
  15:             helpDiv.style.top =
(helpLinkBounds.y + helpLinkBounds.height) +
  17:             var content =
  18:             helpDiv.innerHTML =
  19:             helpDiv.style.display =

  20:         }
  21:     });
  23:     var executor =
new Sys.Net.XMLHttpExecutor();
  24:     request.set_executor(executor);

  25:     executor.executeRequest();
  26: }

The example shows how the help section is loaded by hitting
help.aspx and injecting its response inside the
HelpDiv. The response can be cached by the output cache
set on help.aspx. So, next time when user
clicks on the link, the UI pops up immediately. The
help.aspx file has no block, only the
content that is set inside the DIV.

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Help.aspx.cs" Inherits="Help" %>
<%@ OutputCache Location="ServerAndClient"
Duration="604800" VaryByParam="none" %>
   6: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis lorem
   7: eros, volutpat sit amet, venenatis
vitae, condimentum at, dolor. Nunc
   8: porttitor eleifend tellus. Praesent
vitae neque ut mi rutrum cursus.

Using this approach, you can break the UI into smaller
.aspx files. Although these .aspx files cannot have
JavaScript or stylesheet blocks, but they can contain large amount
of html that you need to show on the UI on-demand. Thus you can
keep initial download to absolute minimum just for loading the
basic stuffs. When user explores new features on the site, load
those areas incrementally.

10 cool web development related articles in 2007

Here’s a list of 10 cool ASP.NET, AJAX and web development
related articles and blog posts that I have written this year that
you might want to take a look:

disasters for production website and their solutions

Talks about 13 production disasters that can happen to any website
any time and bring down your business.

Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and
.NET 3.0

This block buster article shows how ASP.NET AJAX, Linq to XML, Linq
to SQL and Workflow Foundation can be used to create a Google IG
like start page in just 7 nights. Learn how to put together such
hot technologies into one project and make a production site out of

Serve extensionless URL from ASP.NET without using ISAPI module or
IIS 6 Wildcard mapping

Currently there are only two ways to service extentionless URL like
www.pageflakes.com/omar that
hits something besides the default document – use a custom ISAPI
module or use IIS 6 wildcard mapping. Both has performance and
scalability problems because both intercepts each and every hit.
Learn how you can solve it by using a custom 404 handler.

Request format is unrecognized for URL unexpectedly ending in

Since ASP.NET AJAX 1.0 release, Microsoft prevented JSON hijacking
by adding a special content type header. But this caused us some

Cleanup inactive anonymous users from ASP.NET Membership

When you store anonymous user profile using ASP.NET Membership
provider and Anonymous Identification provider, you soon end up
with lots of idle anonymous user data where those users never come
back. We (Pageflakes) went through a lot of difficulty keeping our
database size down as we allow anonymous users to do almost
everything that a registered user can do. This introduces
scalability challenge. See how we solved this problem.

Prevent Denial of Service (DOS) attacks in your web

Web applications can be brought down to its knees by hitting the
site repeatedly or by calling expensive webservices randomly.
Anyone can write a simple loop that hits a webserver very
frequently from a high bandwidth connectivity and bring your
production server down. See how to prevent such application level
DOS attacks.

ASP.NET Ajax Extender for multi-column widget drag &

It’s an ASP.NET AJAX extender that allows Pageflakes style drag
& drop functionality between columns and rows.

ASP.NET Ajax in-depth performance analysis

While building an open source start page using ASP.NET AJAX, I have
done a lot of performance analysis on AJAX framework in order to
improve first time load and perceived speed of javascript rich
pages. Check out my analysis.

Think you know how to write UPDATE statement? Think again.

Learn how to optimize common UPDATE statements

Make a surveillance application which captures desktop and then
emails you as attachment

Some time back I needed to capture a certain computers desktop in
order to find out what that user is doing every day. So, I made a
.NET 2.0 Winforms Application which stays on system tray (optional)
and capture the desktop in given time interval (say every 60 secs)
and emailed the captured images to me as message attachment (say
every 30 mins).

Today I received MVP award for the 3rd time on Visual C#. Thanks
to Microsoft for the award and setting up my new blog. I will continue
both my MVPS Blog and this
blog from now on.