JsonML

Last updated
JSON Markup Language
Internet media type
application/jsonml+json (unofficial)
Type of format Markup language and Web template system
Extended from XML, JSON and JavaScript

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.

Contents

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.

Syntax

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"].

Example Transformation

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

JsonML encodedOriginal XML
["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 --><personcreated="2006-11-11T19:23"modified="2006-12-31T23:59"><firstName>Robert</firstName><lastName>Smith</lastName><addresstype="home"><street>12345SixthAve</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"}}

"Object Form" Misnomer

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]

Validation

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":"#"}}]}]}

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. 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 [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]

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">XML</span> Markup language by the W3C for encoding of data

Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. The World Wide Web Consortium's XML 1.0 Specification of 1998 and several other related specifications—all of them free open standards—define XML.

XSLT is a language originally designed for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text, or XSL Formatting Objects. These formats can be subsequently converted to formats such as PDF, PostScript, and PNG. Support for JSON and plain-text transformation was added in later updates to the XSLT 1.0 specification.

Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network.

XForms is an XML format used for collecting inputs from web forms. XForms was designed to be the next generation of HTML / XHTML forms, but is generic enough that it can also be used in a standalone manner or with presentation languages other than XHTML to describe a user interface and a set of common data manipulation tasks.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of name–value pairs and arrays. It is a commonly used data format with diverse uses in electronic data interchange, including that of web applications with servers.

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored.

ASP.NET AJAX, formerly called Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. It is released under the Microsoft Public License (Ms-PL).

Comet is a web application model in which a long-held HTTPS request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins. The Comet approach differs from the original model of the web, in which a browser requests a complete web page at a time.

<span class="mw-page-title-main">Web template system</span> System in web publishing

A web template system in web publishing allows web designers and developers to work with web templates to automatically generate custom web pages, such as the results from a search. This reuses static web page elements while defining dynamic elements based on web request parameters. Web templates support static content, providing basic structure and appearance. Developers can implement templates from content management systems, web application frameworks, and HTML editors.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

<span class="mw-page-title-main">Document Update Markup Language</span> XML specification

Document Update Markup Language (DUML) is an XML specification created by Brian Kardell to enable server-side logic DOM manipulation outside the context of conventional JavaScript functions.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

ZK is an open-source Ajax Web application framework, written in Java, that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

Mustache is a web template system. It is described as a logic-less system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and anonymous functions (lambdas). It is named "Mustache" because of heavy use of braces, { }, that resemble a sideways moustache. Mustache is used mainly for mobile and web applications.

This is a list of articles related to the JavaScript programming language.

References

  1. ↑ McKamey, Stephen M. (3 February 2007). "JsonML - Binding Behaviors to DOM Elements". Official website. JsonML.org. Archived from the original on 14 August 2010. Retrieved 7 January 2011.
  2. ↑ McKamey, Stephen M. (3 August 2008). "JsonML + Browser-Side Templating (JBST)". Official website. JsonML.org. Retrieved 7 January 2011.
  3. ↑ "Json : Message: Org.json.JSONML.java". Archived from the original on 2012-04-27. Retrieved 2009-02-12.
  4. ↑ "JsonML (JSON Markup Language)".
  5. ↑ "HTML Message". About AjaxPatterns.org. AjaxPatterns.org. Archived from the original on 1 July 2012. Retrieved 7 January 2011.
  6. ↑ "Welcome to JsonFx.NET". JsonFx.NET Official Website. Stephen M. McKamey. Retrieved 7 January 2011.
  7. ↑ "Browser-Side Templating". AjaxPatterns.org. Archived from the original on 7 July 2012. Retrieved 7 January 2011.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.