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 the 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 the jsonml.org website.

Syntax

There are two forms of JsonML, array form and object form. Conversion from XML to JsonML is fully reversible. XML Namespaces are handled by prepending the element name with the namespace prefix, e.g., <myns:myElement/> becomes ["myns:myElement"].

JsonML array form

The array form is the original form, and allows any XML document to be represented uniquely as a JSON string. JsonML array form 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>

JsonML object form

The object form assumes that there are no XML attributes named tagName or childNodes. JsonML Object Form uses:

• JSON arrays to represent child node lists;
• JSON objects to represent XML elements and their attributes.

The JsonML object form representation of the above coding is:

{"tagName": "person", 
 "created": "2006-11-11T19:23",
 "modified": "2006-12-31T23:59",
 "childNodes": [
    {"tagName": "firstName", "childNodes" : ["Robert"]},
    {"tagName": "lastName", "childNodes" : ["Smith"]},
    {"tagName": "address", "type":"home", "childNodes" : [
        {"tagName": "street", "childNodes" : ["12345 Sixth Ave"]},
        {"tagName": "city", "childNodes" : ["Anytown"]},
        {"tagName": "state", "childNodes" : ["CA"]},
        {"tagName": "postalCode", "childNodes" : ["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:

{"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"
}}

Comparison to similar technologies

XML/XSLT

XML and XSLT (Extensible Stylesheet Language Transformations) can also produce client-side templating, and both allow caching of the template separate from the data. Many programmers however find the syntax of JBST is easier to manage due to its familiarity. JBST uses JavaScript natively in the template, rather than requiring mixing of different types of control language.

InnerHTML

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.

HTML message pattern/Browser-side templating

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

References

External links

• 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