Plain-Text Message

Time your website with WebWait - from the creator of AjaxPatterns.org

From Ajax Patterns

Archived Version
There's an archived version of this pattern available, taken from the Ajax Pattern book draft, showing roughly how it appeared before the page became publicly editable.

Evidence: 2/3

Tags: Acknowlegement Custom PlaintText String

1 In A Blink
2 Technical Story
3 Problem
4 Forces
5 Solution
6 Decisions
7 Real-World Examples
8 Code Examples
- 8.1 Lace Chat
9 Alternatives
- 9.1 XML Message
10 Related Patterns
- 10.1 Semantic Response
11 Want to Know More?

Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book

[edit]

In A Blink

Diagam Server talks (balloon).

Browser: "Tell me about the account balance."
Server: "Cr3000000|Db1000000|Bal2000000."

[edit]

Technical Story

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.

[edit]

Problem

How can you transfer data between server and browser?

[edit]

Forces

Many Ajaxian applications use semantic messages.
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.

[edit]

Solution

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 its name, XMLHttpRequest is perfectly capable of working with plain-text responses. As discussed in XML Message, the browser script decides how to interpret the response from XMLHttpRequest Calls.The server can output an arbitrary (non-XML) string, and the browser, by using the XMLHttpRequest's responseText field, can access that string and use it at will.

Plain-text formats include:

Response Code: 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.
A simple text string: For example, a user's name.
A list: For example, a comma-separated list of search results.
A custom data format: 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:

Simpler messages: 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.
External clients: XML is often a better choice when it's not just the web application 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.
Skill base: 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.

[edit]

Decisions

[edit]

Real-World Examples

[edit]

Lace Chat

Brett Stimmerman's Lace Chat (http://www.socket7.net/lace/) is an Ajaxian chat application. 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:

 1124754334||Posted about 1 minute, 16 seconds ago at 16:45||Guest 4986||a test message||||1124754410||Posted about  ago at 16:46||Ajax Tester||Hi Everybody

[edit]

Magnetic Poetry

In Magnetic Poetry, you drag tiles around a workspace. When the browser receives an updated position, the message looks is a structured command statement.

 Update magnetic_poetry set top_value=291, left_value=119 WHERE id=81

[edit]

HousingMaps

HousingMaps is a mashup between Google Maps and craigslist, a community-oriented classifieds 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
...

[edit]

Code Examples

[edit]

Lace Chat

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 by splits all the records out, and then treats splitting 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]);
   ...
 }

[edit]