AjaX with a Capital X!
We all know that Ajax stands for Asynchronous JavaScript and XML. While XML is frequently used as the format for data exchange, JavaScript has actually received most of the attention. Ajax developers have constantly come up with more and more ingenious uses of JavaScript to make web interfaces more interactive, rich and responsive.
However, JavaScript has its drawbacks such as cross-browser incompatibilities and a scripting syntax not well suited for large implementations.
Additional XML technologies including XPath and XSLT are a great alternative and can be used efficiently not only for data exchange but also for managing Ajax-style interactivity.
Several use cases with working code samples will be used throughout this presentation to demonstrate how to employ XML technologies to manage Ajax execution. The presentation will also discuss the advantages and disadvantages of this declarative approach compared to the procedural JavaScript model.
In this talk we will present several code samples, to have a more hands-on experience. The code samples will use a combination of XML, XSLT, XPath, SOAP and BXML. BXML is an XML language which is interpreted and rendered in any standard web browser by the Backbase Presentation Client (BPC).
The use cases of this presentation will include:
1) Extending XHTML with additional tags and attributes
XHTML is a proven technology used by millions of developers to markup traditional web interfaces. By extending the vocabulary with more advanced UI controls and interaction models, existing knowledge can be leveraged and working code can be reused.
<div b:resize=”all” style=” …; background:#CF0;”>Resize me</div>
2) Data bindings using XSLT
Ajax data bindings are frequently done using JavaScript processing or some sort of dot notation. The data itself usually being in XML format, XSLT is a powerful alternative. Using XSLT, the data is transformed from an XML data format into an XML presentation format. Throughout the process we stay within the XML technology stack and create extendable, future-proof data bindings.
<s:task b:action="load" b:url="stylesheet.xml" b:destination="." />
<s:task b:action="load" b:url="catalog.xml" b:destination="." />
<s:task b:action="transform" b:stylesheet="$products"
b:datasource="$catalog"
b:destination="id('main-content')"
b:mode="aslastchild" />
Where “stylesheet.xml” contains:
<?xml version="1.0" ?>
<s:stylesheet b:name="products" xmlns:s="http://www.backbase.com/s"
xmlns:b="http://www.backbase.com/b"
xmlns="http://www.w3.org/1999/xhtml">
<s:template b:match="/">
<b:deck style="height: 400px;">
<s:apply-templates b:select="categories/category"/>
</b:deck>
</s:template>
<s:template b:match="category">
<…>
And “catalog.xml” contains:
<?xml version="1.0" ?>
<s:xml b:name="catalog" xmlns:s="http://www.backbase.com/s"
xmlns:b="http://www.backbase.com/b">
<categories>
<category>
<id>DOGS</id>
<name>Dogs</name>
<products>
<product>
<id>dog1-bulldog</id>
<name>Bulldog</name>
3) Manipulating Web Services Results using XPath
Web Services are popular because their results are delivered as loosely coupled XML documents. Using XPath we can easily process the results and let the end user interact with it.
<s:variable b:name="data"/>
<s:task b:action="load" b:url="data.xml" b:destination="$data"/>
<s:task b:action="alert" b:value="{$data}"/>
<s:task b:action="string2xml" b:variable="$data"/>
<s:task b:action="set" b:target="$data/ResultSet/Result/Name/text()"
b:value="Madonna"/>
<s:task b:action="remove"
b:target="$data/ResultSet/Result/PopularSongs"/>
<s:task b:action="xml2string" b:variable="$data"/>
<s:task b:action="alert" b:value="{$data}"/>




