Since AJAX has been all the rage for the last year or two, other patterns are easier than the original method of sending out fully specified XML responses. There is a common method to send back JSON as the data. This method can be a pain because you have to hand-code the HTML that you want as a big JavaScript string. This HTML-JavaScript fusion is difficult to read and debug.

An alternative is to use a pseudo-AJAX + pseudo-JSON approach whereby you write HTML you want in a server-side template. The result is you use XmlHttpRequest to call your server; your server in turn sends back a a chunk of HTML that has been converted into a javascript string within a JSON object.

Let's break it down: you can tell a server to convert native language objects into JSON objects (PHP, Python, etc). Thus, you can also tell it to turn your HTML code -- essentially a huge string -- into a huge javascript string. You use XmlHttpRequest instead of the browser, and the server sends back a JSON containing a JavaScript string that is your HTML block instead of normal HTML page.

Common AJAX via JSON method

At a recent startup I was at, we used JSON objects to hold the raw data. A simple Google search for "ajax json" gives a handful good references. AJAXPatterns.org and Developer.com have solid tutorials on how the whole thing works. But there is a major weakness in this fusion JSON AJAX approach: it's a pain in the ass to generate and debug the HTML!

Let's look at an example. First let's say we perform an action and we receive back a JSON object that gives us the raw data. An advantage of this strict JSON-based AJAX is that you can re-use the same JSON response in a variety of formats.

This JSON is an array that has 2 basic links, stored as dictionary entries.

[
 {'website':'InfoEntropy','url':'http://www.infoentropy.com'},
 {'website':'HappyBoredom','url':'http://www.happyboredom.com'}
]

To display one of these links we would need to specify our HTML in via javascript.

str = '<a href="' + obj['url'] + '">' + obj['website'] + '</a>'

However, note that using the '+' operators to create your strings causes some performance problems. At work our senior developers figured out that you should build out the code in an array, then join the strings. This is even harder to debug. You don't have to break it up into so many statements, but this is to make the point that it's tough to follow what the code will look like.

var str = new Array();
str.push('<a href="');
str.push(obj['url']);
str.push('">');
str.push(obj['website']);
str.push('</a>');

var realstring = str.join('');

Yet another possibility is use string.replace() to put my variables in there. I think this works --

var str = '<a href="**MYURL**">**MYLINK**</a>';
str.replace('**MYURL**',obj['url']);
str.replace('**MYLINK**',obj['website']);

Holy shit! As you can see both methods are messy and given the plethora of single quotes (') and double quotes (") good luck debugging this link. Essentially, I had to escape all of my quotes and other characters by hand. This is crazy. If you're using a good text editor it might be a little easier but, wow, this takes some time to debug. There must be a way to escape this crap! Enter the Mischievous method.

The Mischievous Pseudo-AJAX or Pseudo-JSON method.

An alternative semi-AJAX pattern that we've adopted at work is less flexible on the client side but a lot less difficult to develop. I'll call it the Mischievous method named after our Sr. Developer's website since he found or created this pattern for us at work. Essentially the Mischievous method involves making an XMLHttpRequest to a "page" on your server but the "page" is a big JSON javascript string that is not human-readable. However, the javascript-HTML string chunk returned can be injected into your page using your typical DOM innerHTML call. This method puts the burden of breaking your HTML into a JavaScript string on the server.

The process look something like this

[ 1. webpage ] ====> [ 2. response address ] ========>||
  /\                                                  ||
  ||                                                  ||
  ||==================================================\/
       [ 3. HTML translated into a js string ]

In (1) it's the standard XmlHttpRequest method. (2) would be something like http://localhost/ajaxresponse

(3) is a template-based page.

• We use cheetah templates at work, but this could be any data-driven template like PHPTemplate, Smarty Templates, ColdFusion, JSP, ASP, and so forth. This HTML is easier to read than a javascripty thing.
• You have to figure out how to make the template send back a response header to be Content-Type="text/javascript". I don't know how to do that really.
• you need to figure out how to get the template stuff to convert into a big javascript string

Using CherryPy and Python we do it something like this --

    cherrypy.response.headers['Content-Type'] = 'text/javascript'
    data = the HTML block you want to convert to javascript
    return json.dumps({'data': data }) 

The CherryPy template would look like this -- regular HTML code

 <a href="$url">$website1</a>

The response JSON object returned would look like this in theory -- but you're not supposed to see it because it should get pumped into your browser via the AJAX and the pushed out to the visible window and look just like a normal HTML block.

 {'data':'<a href="http://www.infoentropy.com">InfoEntropy</a>'}

To write this out to an HTML block you might do something like this

var b = JSON object response from XmlHttpRequest (object example is above)

document.write(b['data']) //writes out the link! 

or

document.getElementById('myhtml').innerHTML = b; //our link gets written to id='myhtml' 

When you get back the JavaScript string it should be the HTML snippet. Then you can do an innerHTML with the string to the response into wherever you want it to go. The HTML should be easy to write into the page and you should be able to easily read your HTML because it's in server-side templates.