I am struggling with a design pattern problem which seems to me quite a
common case in AJAX community: how to pass data from server to client,
and how to handle the passed data.
I've already read many things on the web and I am aware that a good
answer may be "it depends", every method having its own pros and cons.
In our webapp, we are looking for a way to do things in which we can
pass minimum amount of data through the wire, and still not having to
fill our client code library with tons of "document.createElement"
In a pure Ajax-app world (which is where we would like to take our
webapp) the content refreshing tasks are not just a business of
changing just some textual values in a static never-changing frame: you
have to redraw entire parts of your UI quite often.
But redrawing an UI element means that - at least in our environment -
you actually have to redraw a "static" context (which may be a quite
complex mixture of html tables and divs), and then filling it with
sensitive data from the server (for example, in a mail application, if
you click to open a message, you have to draw the message container
window with toolbars, buttons, etc, and fill it with the message text
fetched from the server).
Within this situation, I think that XML parsing is the worse solution:
you pass a quite verbose document on the wire, still having to both
parse XML dom and create the HTML one on the client.
Passing HTML snippets may solve the overhead of creating the UI with
of data from the server.
Passing JSON may be the right choice, but you still have to create
locally the whole UI frame around the passed data (as in the xml case).
In a perfect world, this is what I would like to have: lightweight JSON
objects passing data from server to client; of course these objects
that point the server-provided data would be "inserted" in a kind of
html template loaded on the client (which represents the broader UI).
This "template" would be a static, normal html file on disk (so to be
easy to test and change even for a traditional web-designer during
development), but this "template" would be exposed through DOM on the
client, so that you just have to take your server data and simply add
it as a child node to the "template".
And the great thing would be that this "template" would be imported
from a real html snippet, and not created on the fly on the client with
one hundred "document.createElement" statements, making life easier for
the developer (and the browser, too).
Thanks for any idea/suggestion on this topic...
I guess XML & XSLT is what you are looking for.You can design a
template with XSLT and use it over and over again and feed it with XML
It is supported by IE, Firefox and Opera 9.x (I tested it) . And it's
correctly it was about 8 times faster than my JSON examples). For a
crossbrowser compatibility I would suggest using sarissa (I haven't
tested it yet, but will do in a day or two) .
The only problem I encountered using xml&xslt is that IE (6.0) couldn't
deal with the XML data if I used compression on the serverside
(text/xml mime). I guess it's a bug