AJAX on a ShoestringAJAX on a Shoestring
Creating an XRL powered AJAX site on a shoestring
Home > Books > Tutorials and Training Guides > XRL By Example > AJAX on a Shoestring

Rate this page:
Really useful
Satisfactory
Not helpful
Confusing
Incorrect
Unsure
Extra comments:


AJAX on a shoestring

In the following section we will use XRL to build a componentized bare-bones AJAX application. You can try the application here...

http://localhost:8080/workbench/xrldemo/part5/index.

Each of the coloured boxes is an XHTML fragment which is dynamically loaded into the page when a button is pressed. This very simple example shows all the features needed to build more elaborate AJAX-style applications. So let's examine the structure...

Template Framework

Here are the links which provide the framework for the application. The main structure is identical to the previous examples. Also present are some links to static resources - including a set of coloured box widgets, an AJAX javascript fragment and the buttons...

<links basepath="ffcpl:/workbench/xrldemo/">
  <link>
    <name>index5</name>
    <ext>/part5/index</ext>
    <int>active:xrl+template@xrl:part5-template+content@xrl:part5-content</int>
    <args>links</args>
  </link>
  <link>
    <name>part5-template</name>
    <int>ffcpl:/xrldemo/part5/template.xml</int>
  </link>
  <link>
    <name>part5-content</name>
    <int>ffcpl:/xrldemo/part5/content.xml</int>
  </link>
  <!--***************** WIDGETS *****************-->
  <link>
    <name>red-box</name>
    <ext>/widgets/red-box</ext>
    <int>ffcpl:/xrldemo/widgets/red-box.xml</int>
  </link>
  <link>
    <name>green-box</name>
    <ext>/widgets/green-box</ext>
    <int>ffcpl:/xrldemo/widgets/green-box.xml</int>
  </link>
  <link>
    <name>blue-box</name>
    <ext>/widgets/blue-box</ext>
    <int>ffcpl:/xrldemo/widgets/blue-box.xml</int>
  </link>
  <link>
    <name>buttons</name>
    <int>ffcpl:/xrldemo/widgets/buttons.xml</int>
  </link>
  <link>
    <name>ajax-script</name>
    <int>ffcpl:/xrldemo/widgets/ajax-script.xml</int>
  </link>
</links>

Here is the template. Note that this has two includes . The first is an include for the AJAX javascript. The second is for the xrl:content.

<html xmlns:xrl="http://1060.org/xrl">
  <body>
    <h1>Part5 Template</h1>
    <xrl:include href="xrl:ajax-script" />
    <xrl:include href="xrl:content" />
  </body>
</html>

The main content resource provides an inner-framework for the application. The xrl:buttons resource is included. A named div block contains a default red-box include xrl:red-box.

<div xmlns:xrl="http://1060.org/xrl" style="background-color: silver; padding:10px;">
  <div>Part 5 Content</div>
  <div>
    <xrl:include href="xrl:buttons" />
  </div>
  <div id="box">
    <xrl:include href="xrl:red-box" />
  </div>
</div>

The buttons resource is simply a table of buttons...

<div xmlns:xrl="http://1060.org/xrl">
  <table>
    <tr>
      <td>
        <button name="red" onclick="javascript:loadResource('[[xrl:red-box]]', 'box')" type="button" value="red" xrl:resolve="onclick">RED</button>
      </td>
      <td>
        <button name="green" onclick="javascript:loadResource('[[xrl:green-box]]', 'box')" type="button" value="green" xrl:resolve="onclick">GREEN</button>
      </td>
      <td>
        <button name="blue" onclick="javascript:loadResource('[[xrl:blue-box]]', 'box')" type="button" value="blue" xrl:resolve="onclick">BLUE</button>
      </td>
    </tr>
  </table>
</div>

However, note that each button has an xrl:resolve attribute which is used to indicate to the XRL runtime that it should dynamically parse the onclick attribute and perform URI substitutions for the links enclosed in double square brackes. So for example the reference [[xrl:red-box]] in...

onclick="javascript:loadResource('[[xrl:red-box]]', 'box')"

You will see if you examine the XHTML source in your browser, that this attribute is parsed and transformed to

onclick="javascript:loadResource('/workbench/xrldemo/widgets/red-box', 'box')"

Link substitution is a capability of XRL that provides flexible decoupling between the client-side URL address space and the implementing server-side URI address space of the mapper and XRL application.

AJAX at work

The simple client-side AJAX javascript which is dynamically pulled into the template is shown here...

<script language="javascript" type="text/javascript">
  <!-- var con1=newConnection(); function newConnection() { var xml; if (window.XMLHttpRequest) { xml = new XMLHttpRequest(); } else if (window.ActiveXObject) { xml = new ActiveXObject("Microsoft.XMLHTTP"); } return xml; } function loadFragmentImpl(http, fragment_url, element_id) { var element = document.getElementById(element_id); http.open("GET", fragment_url); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { element.innerHTML = http.responseText; } } http.send(null); } function loadResource(href, target) { loadFragmentImpl(con1, href, target); } --></script>

When any button is pressed, the onclick attribute causes the loadResource() method to be called. This initiates an HTTP request for the coloured box widget referenced in the href argument of the method.

We saw above, that in each case an href value was dynamically substituted into the button widget during the XRL recursion and, due to its external link URI, each widget is accessible as a resource through the mapper. For example here is the redbox fragment.

Once the Javascript HTTP request for the widget has been returned it is placed into the container div block with id='box' and the browser automatically reflows the rendered XHTML to show this.

© 2003-2007, 1060 Research Limited. 1060 registered trademark, NetKernel trademark of 1060 Research Limited.