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
again.

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
Sys.Net.XMLHttpExecutor.

   1: function showHelp()

   2: {

   3:     var request =
new Sys.Net.WebRequest();

   4:     request.set_httpVerb(
"GET");

   5:     request.set_url(
'help.aspx');

   6:     request.add_completed(
function( executor )

   7:     {

   8:
if (executor.get_responseAvailable())

   9:         {

  10:             var helpDiv = get(
'HelpDiv');

  11:             var helpLink = get(
'HelpLink');

  12:

  13:             var helpLinkBounds =
Sys.UI.DomElement.getBounds(helpLink);

  14:

  15:             helpDiv.style.top =
(helpLinkBounds.y + helpLinkBounds.height) +
"px";

  16:

  17:             var content =
executor.get_responseData();

  18:             helpDiv.innerHTML =
content;

  19:             helpDiv.style.display =

"block";

  20:         }

  21:     });

  22:

  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
directive 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.

   1:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Help.aspx.cs" Inherits="Help" %>

   2:
<%@ OutputCache Location="ServerAndClient"
Duration="604800" VaryByParam="none" %>

   3:
<
div
class
="helpContent"
>

   4:
<
div
id
="lipsum"
>

   5:
<
p
>

   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.