Tobi Waves

taught by Alex Russell

What is AJAX?

An acronym for Asynchronous JavaScripts AND XML

Ever wondered how Google does their cool new apps like (maps.google.co ...) or how something like (shared.snapgrid.com ...) works? There is no real standard yet but a keyword: AJAX. Wikipedia has an evolving page about it: (en.wikipedia.org ...)

The key to AJAX applications is that everything happens on the same page. No page reloading is required.

The browser turns from a dumb page renderer into a protocol client.

Where to use AJAX

AJAX is for interactive applications, for static documents, the current xhtml pages are perfect: Accessible, fast, ... only use AJAX when you can make the users lives better and not worse.

One of the big challenges is cross-browser compatibility. While MSDN and Mozilla provide good references for their browsers, they obviously do not talk all that much about compatibility problems. There is a good resource for such information on (www.quirksmode.org ...)

Getting XMLHttpRequest working

In order to be able to make http requests from within a JavaScript you need a XMLHttpRequest object. While it is readily available in modern browsers, it is not so trivial in IE. The most popular way of doing this today is to use conditional compilation in IE.

/@cc_on @/
/@if (@_jscript_version gt= 5)
... code ...
@end @/

Here is a tutorial (www.webpasties.com ...)

More Code Snippets on (www.fiftyfoureleven.com ...)

innerHTML vs DOM

The fastest and most simple way for altering webpages on the fly is to use the innerHTML propperty of a node. The problem is, that setting innerHTML will replace the node completely and with it all it's properties. So a new node will have to have its properties re-attached, even if it has the same ID as the old node.

If you use DOM for manipulating content, your code on the browser side will have to do more, since that data from the server arrives in XML and not pre-generated HTML as you would with innerHTML. The advantage is that you can do much more fine grain manipulations of the content.

DOM vs innerHTML benchmark (www.quirksmode.org ...)

Send JavaScript from the server?

The fastest way of communicating with the server is to send data encoded as JavaScript from the server and using eval() on the client. The advantage of this is that we do not have to parse the data actively on the client side, but we can use the browsers JavaScript parser to interpret the data. The client side can then access the data structures in JavaScript directly to generate the relevant HTML/XML code. This is especially efficient if you are dealing with large tabular data structures.

There is a standardized subset of JavaScript called JSON (JavaScript Object Notation) for this lightweight data exchange method. More about this on (www.crockford.com ...)

REST API

Communication between an Ajax-style UI and your Server should happen via the REST (Representational State Transfer) API of your Web application. (en.wikipedia.org ...) and (www.xfront.com ...)

Debugging JavaScript

The most simple way is to open the JavaScript console of your browser to see any errors the JavaScript engine generates. For automated testing you may want to use a JavaScript implementation that can be started from the command line like Mozillas Rhino (www.mozilla.org ...) project. There are also several Mozilla extensions that help:

LiveHTTPHeaders (livehttpheaders.mozdev.org ...) shows the HTTP headers exchanges between Mozilla and the server.

Venkman a graphical JS debugger (www.hacksrus.com ...)

Ethereal is also helpful as you can see what really happens on the wire. If you do not have the necessary permissions to sniff data off the wire, you may want to redirect your browser through a proxy where you can dump the data that traverses it.

Links

Examples (dojotoolkit.org ...)

Simple AJAX Toolkit (www.modernmethod.com ...)

About using Ajax on Rails the Ruby web toolkit (www.onlamp.com ...)

Ruby on Rails (www.rubyonrails.org ...)

An evolving browser UI toolkit with pluggable widgets that separate HTML from JavaScript Code (dojotoolkit.org ...)

CPAN for Java Script (www.openjsan.org ...)

Wiki with AJAX Framework overview (www.ajaxpatterns.org ...)

Nice widget and screen effects library for ajax applications (openrico.org ...)

taught by Evan Lenz

XSLT is a language for processing XML documents. XSLT itself is written in XML. The output generated by an XSLT 'program' can be anything, but normally it is used for generating (X)HTML documents which can then be displayed by a browser.

XSLT uses the XPATH language for addressing 'nodes' in an XML document.

XPATH Expressions

An XPath expression is made up from several steps separated by /.

step/step/step

A step consists of three elements: The axis to identify a set of nodes relative to the current-context node. The node test to filter out relevant nodes from the set of nodes selected by the axis and finally any number of optional predicates to further filter which nodes get selected.

axis::node-test[predicate][predicate]

XPath expressions can return 4 types of data:

node-set which is a number of zero or more nodes without duplicates

number a floating point number

string a unicode string

boolean true or false

XPath knows seven different types of nodes:

Root - the toplevel node of a document is called "/"

Element - 'tags'

PI - Processing instructions lt?xml ...?gt

Comment - Comment tags

Text - Character data, including white space!

Attribute - lttag attrib="xxx"gt

Namespace - lt?xml-stylesheet ...?gt

When selecting XPath nodes, you can use different 14(!) axis. By default, you use the child:: axis. Default means, that you don't even have to mention it. So an expression like section is actually child::section. The other common axis is attribute:: it also has an abbreviation, called @ so instead of writing attribute::section you can write @section

The other 12 axis are: descendant-or-self:: which can be abbreviated as // and parent:: aka .. and self:: aka . the remaining axis do not have abbreviations: ancestor:: following-sibling:: preceding-sibling:: following:: preceding:: namespace:: descendant:: ancestor-or-self::

XPath example

XPATH looks at an XML document as if it was a filesystem. Like when navigating a filesystem, there is a context node where from where XPATH looks at the document.

ltarticlegt
ltheadinggtHellolt/headindgt
ltparagtParagraph ltemphgt1lt/emphgtlt/paragt
ltparagtParagraph 2lt/paragt
lt/articlegt

If the first para node is the current context node the expressions would return the following:

* - emph
emph - emph
.. - para
../* - heading,para,para
../para[2] - the second paragraph
/article/* - heading,para,para

The XSLT Processing Model

The most important command in xslt is xsl:apply-templates. A lot of people do not use this function properly since they write only one big template, instead of writing many small ones for different purposes.

If you use multiple templates, xslt will invoke a conflict resolution protocol when several templates match for a particular element.

Selection happens by priority:

-0.5  match=""
-0.25 match="xyz:" 
 0    match="name"
  .5  match="nameA/nameB" 

You can override the priority of a template by setting the priority attribute explicitly.

Whenever XSLT processing is stared, the processor executes the template-rule for /. If you do not supply a template-rule the processor will use its built-in template rules (there is one for each of the seven node types).