JsonML

JsonML, the JSON Markup Language is a lightweight markup language used to map between XML (Extensible Markup Language) and JSON (JavaScript Object Notation). It converts an XML document or fragment into a JSON data structure for ease of use within JavaScript environments such as a web browser, allowing manipulation of XML data without the overhead of an XML parser.

JsonML has greatest applicability in Ajax (Asynchronous JavaScript and XML) web applications. It is used to transport XHTML (eXtensible HyperText Markup Language) down to the client where it can be deterministically reconstructed into DOM (Document Object Model) elements. Progressive enhancement strategy can be employed during construction to bind dynamic behaviors to otherwise static elements.^[1]

JsonML can also be used as underlying structure for creating intricate client-side templates called JBST (JsonML+Browser-Side Templates).^[2] Syntactically JBST looks like JSP (JavaServer Pages) or ASP.NET (Active Server Pages .NET) user controls. Interactive examples are available on jsonml.org website.

Conversion from XML to JsonML is partially reversible. XML Namespaces are handled by prepending the element name with the namespace prefix, e.g., <myns:myElement/> becomes ["myns:myElement"].

JsonML allows any XML document to be represented uniquely as a JSON string. The syntax uses:

• JSON arrays to represent XML elements;
• JSON objects to represent attributes;
• JSON strings to represent text nodes.

["person",
  {"created":"2006-11-11T19:23",
   "modified":"2006-12-31T23:59"},
  ["firstName", "Robert"],
  ["lastName", "Smith"],
  ["address", {"type":"home"},
    ["street", "12345 Sixth Ave"],
    ["city", "Anytown"],
    ["state", "CA"],
    ["postalCode", "98765-4321"]
  ]
]

<!-- XML representation of a person record -->
<person created="2006-11-11T19:23" modified="2006-12-31T23:59">
    <firstName>Robert</firstName>
    <lastName>Smith</lastName>
    <address type="home">
        <street>12345 Sixth Ave</street>
        <city>Anytown</city>
        <state>CA</state>
        <postalCode>98765-4321</postalCode>
    </address>
</person>

A “regular” JSON transformation produces a more compact representation, but loses some of the document structural information, in that it does not define whether a key-value pair is an attribute or a node:

{"person": {
    "address": {
        "city": "Anytown",
        "postalCode": "98765-4321",
        "state": "CA",
        "street": "12345 Sixth Ave",
        "type": "home"
    },
    "created": "2006-11-11T19:23",
    "firstName": "Robert",
    "lastName": "Smith",
    "modified": "2006-12-31T23:59"
}}

In a JSON user group thread, Douglas Crockford incorrectly used the term "JsonML" to describe two variants: the "array form" and "object form".^[3] This was a misuse of the term JsonML which has always stood to mean what Crockford referred to as the "array form".^[4]

JsonML can be validated with the following JSON schema:

{
  "type": "array",
  "minItems": 1,
  "maxItems": 3,
  "items": [
    {"type": "string"},
    {"oneOf": [
      {"type": "object"},
      {"type": "string"},
      {"type": "array", "items":{"$ref": "#"}}
    ]},
    {"oneOf": [
      {"type": "string"},
      {"type": "array", "items":{"$ref": "#"}}
    ]}
  ]
}

XML and XSLT (Extensible Stylesheet Language Transformations) can also produce client-side templating, and both allow caching of the template separate from the data. JBST uses JavaScript natively in the template, rather than requiring mixing of different types of control language.

While seemingly used to perform similar tasks, JsonML and innerHTML are quite different. InnerHTML requires all the markup in an exact form, meaning that either the server is rendering the markup, or the programmer is performing expensive string concatenations in JavaScript.

JsonML uses client-side templating through JBST, which means that HTML is converted into a JavaScript template at build time. At run time, the data is supplied and DOM elements are the result. The resulting DOM elements can be inserted or replace an existing element, which innerHTML cannot easily do without creating excess DOM elements. Rebinding only requires requesting additional data, which is smaller than fully expanded markup. As a result, large performance gains are often made, since the markup is requested or cached separately from the data.

For simplicity, innerHTML has been the preferred method for the HTML-Message pattern^[5] style of Ajax. However, tools like JsonFx^[6] aim to simplify JsonML and JBST implementation while still providing a full browser-side templating Ajax pattern.^[7]

• JsonML.org
• IBM developerWorks Article
• Java JSONML implementation - written by Douglas Crockford
• JsonFx.NET - C#/.NET JBST Framework
• C++ JDX XPath 2.0 for XML, JSON and JsonML