Example 1 - Transforming an XML document using XSLT

The example demonstrates how to do a transformation of an XML document using an XSLT style sheet and Javascript / AJAX in the browser.

Files required for the transformation:-
XML File - products.xml
XSLT File - layout.xsl

Both the XML and XSLT could be generated dynamically using server side code but must be valid for the transformation to take place.

Code:-

$xload({

    xml     :    "xload/products.xml",
    xsl     :    "xload/layout.xsl",
    element :    "divTransform1"

})

Result:-

Example 2 - XSLT Parameter submission

It is possible to submit parameters for the XML and / or XSLT web requests. These parameters can be used by server side code to transform the returned documents. Parameters can also be passed to an XSLT style sheet. This should not be confused with submitting parameters on the web requests.

This example looks at passing parameters to the XSLT style sheet at the point of transformation in the browser.

Files required for the transformation:-
XML File - products.xml
XSLT File - layout_with_params.xsl

Both the XML and XSLT could be generated dynamically using server side code but must be valid for the transformation to take place.

Code:-

function example2(sortBy)
{
    $xload({

        xml        :        "xload/products.xml",
        xsl        :        "xload/layout_with_params.xsl",
        xsltparam  :        {SortBy : sortBy},
        element    :        "divTransform2"

    });
}

//call
example2("name");    //load and sort by the "name" value.

Result:-

Click on the table headings to change the sort order.

Example 3 - Music Search

This example shows the benefits of combining several technologies together into something resembling a real world application.

The server side resource "musicseach.aspx" takes in a query string parameter "s" and returns and XML document of the items found that match the search string. This example does not cover the server side interactions with the data base.

Here is an example of the XML returned: musicsearch_example.xml

The XSLT stylesheet "musicsearch.xsl"is used in the function $xload to transform the returned XML data into a HTML table which is displayed on the page as the contents of the element "divTransform3".

Code:-

function example3(searchString)
{
  $xload({

   xml          :    $upa("musicsearch.aspx","s",searchString),  
   xsl          :    "xload/musicsearch.xsl",
   element      :    "divTransform3",
   loadImageId  :    "imgLoader"

  });
}

<input type="text" id="txtSearch" value=""/>
<input type="button" value="Search" onClick="example3($g('txtSearch').value);" />
<img id="imgLoader" src="../res/img/ajax_loader_ball.gif" style="display:none" />