AjaxPatterns
Acknowlegement, Custom, PlainText, Semantic, String
Devi's working on an auto-completion form field. Every few seconds, the server needs to respond with a list of suggestions. Devi codes the server-side to output the suggestions as a comma-separated list, as it's convenient to output on the server, and easy to parse in the browser.
Ajax apps require messages to be transmitted back and forth.
Both browser and the server must be able to access the message. That usually means the format must be easily accessed in Javascript as well as whichever server-side language is used.
Pass simple messages between server and browser in plain-text format. This is a broad pattern, because "plain-text" is an ambiguous term. The emphasis here is on keeping things simple - XML or JSON are often more appropriate for complex data structures, but can also add unnecessary complexity.
Despite the name, XMLHttpRequest is perfectly capable of working with plain-text responses. As discussed in “XMLHttpRequest Call” and “XML Message”, the browser script can decide how to interpret the response in XMLHttpRequest by switching between the responseText and responseXML properties.
Plain-text formats include:
Sometimes, all that's required is a simple response code, such as a numeric ID or a text message such as "OK" or "Failed". Note that, in this case, an appropriate HTTP Response Code codes may be more standards-based and in line with “RESTful Service” conventions.
For example, a user's name.
For example, a comma-separated list of search results.
For example, a list of strings, where each string is a comma-separated list of object attributes.
While browser support for XML is reasonably good, especially with third-party libraries, it's also quite easy to manipulate arbitrary text formats. Javascript provides a standard string manipulation library, including the particularly helpful regular expression and groupings facilities.
The case for plain-text is particularly compelling in the following situations:
The simpler the message, the more compelling the argument for plain-text messages. Once the string starts to get more complex, there's a better argument for relying on XML support from the browser and third-party libraries.
XML is often a better choice when it's not just the web app that's using the service. That's partly for reasons of convention - XML is simply a standard transfer format on the internet. But there's also a more technical reason: using DTDs or XML Schemas, you can specify the format in an unambiguous manner that can be enforced whenever a document is encountered.
XML may be a standard, but that's only useful if people know the standard. The better developers are with XML technologies in both the browser and the server, the more compelling the argument for XML.
Brett Stimmerman's Lace Chat is an Ajax chat app (Figure 1.22, “Lace Chat”). When the page is initially shown, all user messages are downloaded as a single, long, string. Within the string, each user message is captured as a set of attributes, separated by pipe characters:
1135646360:749||||date-1135646204||*Monday, 26 December
2005||||hour-17||*17:00||||1135646204||Posted about 3 minutes ago at
17:16||Aj Two||Yeah you can *SO* chat in real time||||1135646212||Posted
about 2 minutes, 52 seconds ago at 17:16||*Lace||
AJ One
has joined the conversation||||1135646212||
In Magnetic Poetry, you drag tiles around a workspace. When the browser receives an updated position, the message looks like a structured command statement:
Update magnetic_poetry set top_value=291, left_value=119 WHERE id=81
HousingMaps is a mashup between Google Maps and Craigslist, a community-oriented classified advertising website. The Housing Maps portion is downloaded with an “XMLHttpRequest Call” which retrieves the 15 or so results matching a query. Each result represents a single home and is broken into a sequence of attributes, one line at a time, and prefixed with an identifier:
PA:34.0917
PN:-118.28
IC:p
DS:One Bath With Small Loft Duplex Near Sunset Junction
AD:Hyperion Ave &&& Sunset Blvd</line><line>Los Angeles</line><line>CA
...
I4:a.im.craigslist.org/rR/iv/X1dT18TzV07cfjuQzouhKQ5EETuK.jpg
LC:1071999
PA:34.0763
PN:-118.294
IC:p
DS:1930&'s Restored Spanish Beauty- 1St Month Free
AD:Berendo &&& Beverly</line><line>Los Angeles</line><line>CA
...
I4:a.im.craigslist.org/n0/Xm/SS3hSoIWLOsc8wOjaiLGQK5HFbzl.jpg
LC:1072004
...
The response in Lace Chat is a list of attributes, separated by pipe characters. Each complete record is separated by "||||" and each attribute within a record is separated by a smaller string, "||". The handling code first splits the string into an array of records, then splits out the attributes within each record:
// Records are separated by four pipes ||||
var results = this.httpGetObj.responseText.split('||||');
...
for (var i = 1; i < results.length; i++) {
var first;
// Fields are separated by two pipes ||
var fields = results[i].split('||');
...
var timeStr = fields[1];
var textStr = fields[3];
...
p.setAttribute('id', 'msg_' + fields[0]);
...
}
As discussed in the solution above, an “XML Message” may be a better alternative for more complex data.