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

1

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:

      &lt;Script language=&quot;JavaScript&quot;&gt;    <br />        addPostLoadResource('PL1', 'HttpProxyServlet.java', false);<br />      &lt;/Script&gt;<br />&nbsp;

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:

    &lt;DIV class=&quot;left&quot;  style=&quot;font-family:serif;font-size:12px;height:300&quot;&gt;<br />      &lt;pre id=&quot;PL1&quot;&gt;<br />      &lt;/pre&gt;<br />    &lt;/DIV&gt;<br /><br />

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:

  &lt;body onload=&quot;goPostLoadResources();&quot;&gt;<br />&nbsp;

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

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

 

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

1 Comment