Ajax-based Post Loading of resources in HTML pages – for reuse of resources and fast user feedback

This article discusses a generic method for Post Loading Resources
in HTML pages. What do I mean by that? Just as your browser will fire
additional requests, to potentially multiple web-servers when needed,
to fetch images specified in your HTML page by the IMG tag or
JavaScript and CSS resources that are imported in the HTML page, I
would like to be able to have the browser fire additonal requests for
downloading additional HTML content. Loading the HTML page should be as
quick as can be. Pages that require large sets of data for populating
select items or trees should ideally load that data after the page is
available to the user in the browser (after the onLoad event has
fired).

This article describes how to implement this post-load
of resources – after the onLoad is fired on the body element and
therefore after the page has become available for user interaction –
using AJAX technologies. A next installment in a series of four will go into the actual implementation: HTML Post Loading Resources Framework (AJAX Based) – Part 2 – Loading and pasting simple contents. Part 3 is – HTML Post Loading and Processing Resources using AJAX – Part 3: multiple, dependent resources and custom processing and Part 4 HTML
Post Loading and Processing Resources using AJAX – Part 4: defining a
refresh interval, client side XSLT transformations and RSS processing

Note:
one way of achieving something similar would be through the use of
FRAMESET or IFRAME. For various reasons, these solutions may be
undesirable or inappropriate.

Why would you want post-load loading of resources

The main reasons I came up with for post-loading resources are these:

• enhanced
  user feedback – even if the page is quite voluminous when loaded in its
  entirety, we can achieve fast user feedback if we can defer loading
  large chunks of content until after the page initially displays; such
  chunks may include the data to populate trees and select-items and also
  pieces of content that are not displayed on the first page (i.e. that
  require scrolling down by the end user)
• compose
  an HTML page in
  the client from resources on multiple servers – for example paste the
  results from an external RSS feed or the response from some WebService
  in your HTML page (of course you can do this server side, but what if
  the HTML page is essentially static) – however, AJAX requests cannot be
  made to another domain than the domain from which the main HTML
  document was loaded, so this usually will not fly! Solutions to this
  particular problem are available; the most robust one probably the use
  of a server side proxy. See the article Proxy Servlet for AJAX requests to multiple, remote servers for instructions and source code for such a proxy to handle remote requests for a JavaScript client
• resuse resources across
  HTML documents: if you want to include the same piece of content in
  multiple (static?) HTML documents this is one way to go
• add
  dynamic and/or slow loading pieces of content:if the HTML document is
  static and it contains a few dynamic items, the latter can be
  post-loaded. Event if the HTML document is dynamic, it may consist of a
  majority of fast produced content and a small portion of slow loading –
  perhaps expensive to generate – content; in that case, post loading the
  small, slow – un-essential – portions will give a much improved user
  experience (in fact, this is what we do in our weblog, where the
  statistics showing the total number of post reads over time as well as
  the total number of post reads today are post loaded after the home
  page of the AMIS Technology Weblog has been loaded (see article Enhancing PHP-based WordPress Weblog with AJAX driven enrichments on how we did that).

What is the idea or design of Post Loading Resources?

After
loading the base HTML document – just before the user can start
interacting with the page – the onLoad event is fired on the BODY
element. This event triggers a call to a postLoadResources function.
This function will fire AJAX style requests to get hold of additional
resources. These resources can be:

• data sets with values for trees or selection lists
• additional JavaScript
• large sections of text, for example code fragments
• remote content such as RSS Feed, WebService results, scraped HTML content

There are several things that can be done with the results from these AJAX requests:

• it can be pasted in its entirety into the innerHtml property of an indicated target element – probably a DIV or a TD;
• it can be stored in the value attribute of a Form element, such as a TEXTAREA
• it can be used to programmatically populate SELECT options
• it
  can be used to populate JavaScript memory-structures (Arrays) that are
  used for validation, code insight like type in support, dynamic tree
  expanding etc.
• it can be used to populate/construct a SVG (Scalable Vector Graphics) object
• it can be subjected to a client side XSLT transformation (see the post Introducing AJAXSLT – library for client side, JavaScript, XSLT transformations (good for RIA and AJAX)); the resulting XML document can be used as described in this list of options, including subsequent transformations

Over
a number of articles, I will demonstrate most of these approaches for
handling post-loaded content. Before that, I will discuss a simple
‘framework’ for organizing the post-load operations. This framework –
and the term is really way overboard – takes care of things like
handling multiple, simultaneous requests, dealing with dependencies
between the requests – for example loading XML data, loading an XSLT
document and only doing the transformation when both are in -, and
organizing repeated (auto-refresh) load tasks.

Requesting a post-load to take place is as simple as including the following JavaScript statement in our HTML page:

      <Script language="JavaScript">    
        addPostLoadResource('PL1', 'HttpProxyServlet.java', false);
      </Script>

This
call instructs our post-load-framework to load a resource – a local
file called HttpProxyServlet.java – and paste its contents into the
(PRE-element PL1:

    <DIV class="left"  style="font-family:serif;font-size:12px;height:300">
      <pre id="PL1">
      </pre>
    </DIV>

To start processing this – and other post-load-requests – after the
page has loaded, the onLoad trigger of the BODY element has been set up:

  <body onload="goPostLoadResources();">

Apart
from loading a generic JavaScript library, this all that is required to
load a simple, local resource. In the next installment we will see how
this generic JS library operates and how we can do more fancy stuff
with post-loaded content.

The result of what we will see in
these articles will look like the following HTML page. It is not pretty
– CSS is our next topic presumably. But it demonstrates my case:
content is loaded in at least a dozen separate requests, from the local
server as well as various remote sources; this content is dealt with in
a variety of different ways.

Resources

The next installments in this series are

• HTML Post Loading Resources Framework (AJAX Based) – Part 2 – Loading and pasting simple content
• HTML Post Loading and Processing Resources using AJAX – Part 3: multiple, dependent resources and custom processing
• HTML
  Post Loading and Processing Resources using AJAX – Part 4: defining a
  refresh interval, client side XSLT transformations and RSS processing
  

Google-ajaxslt – open source project for client side XSLT transformation

Signed Scripts http://www.mozilla.org/projects/security/components/signed-scripts.html

Ajax in Action, by Dave Crane, Eric Pascarello and Darren James; Manning Publications ; 2005

http://blog.monstuff.com/archives/000262.html XMLHttpRequest – Security Bypass

http://ajax.phpmagazine.net/2005/11/ajax_rss_reader_step_by_step_t.html AJAX magazine – RSS Feed Reader step-by-step
// http://developer.mozilla.org/en/docs/AJAX:Getting_Started
// http://ajax.phpmagazine.net/2005/11/ajax_rss_reader_step_by_step_t.html

Dynamically adding a CSS (stylesheet) using JavaScript – excellent article on how to programmtically add a stylesheet to the current HTML document!

http://www-128.ibm.com/developerworks/webservices/library/ws-wsajax/ Call SOAP Web services with Ajax, Part 1: Build the Web services client, by James Snell (IBM), October 2005