CMIS 1.1 browser binding: How to show the content of a folder, using only static HTML+JavaScript?

Using only a static HTML+JavaScript, how to show the content of a given folder of a given CMIS 1.1 endpoint/repository?

It could look like this:

<html>
    <head>
        <script>
          var endpoint = "http://cmis.alfresco.com/cmisbrowser";
          var repository = "bb212ecb-122d-47ea-b5c1-128affb9cd8f";
          var folder = "/";
        </script>
    </head>
    <body>

        <!-- Some magic JavaScript call to the CMIS 1.1 browser binding -->
        <!-- Some minimalist formatting of the JSONP reply -->

    </body>
</html>

Solution

Using JQuery for the query, and json2html for templating:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="json2html.js"></script>
        <script type="text/javascript" src="jquery.json2html.js"></script>
        <script>
            var endpoint = "http://cmis.alfresco.com/cmisbrowser";
            var repository = "bb212ecb-122d-47ea-b5c1-128affb9cd8f";
            var folder = "/";
        </script>
    </head>
    <body>
        <ul/>
        <script>
            $.getJSON(
            endpoint + "/" + repository + "/root?succinct=true&callback=?",

            function(data) {
                var transform = [{
                    "tag": "li",
                    "html": "${object.succinctProperties.cmis:name}"
                }];
                $("ul").json2html(data.objects, transform);
            });
        </script>
    </body>
</html>

Result: The list gets filled with one item per CMIS object, showing its name.

I just created an new open source project based on this idea: WebCMIS.