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.

clip_image002

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

2 Comments

Comments have been disabled for this content.