easyXDM Azure Demo

Forked version of David Zientara's example of how to use easyXDM to call regular ajax/cors services from an Azure BLOB storage container: http://jsfiddle.net/zientara/GXM4E/ Added instrumentation and a Get Head button which outputs the response headers to the console.

by austegard

HTML

<script src="http://easyxdm.net/current/easyXDM.debug.js"></script>
<div>
    <h1>Demo</h1>
    <p>
    This example shows how to use easyXDM to call regular ajax/cors services from an Azure BLOB storage container.
    </p>
    <p>
    <button id="btnGetHtml">Get HTML Fragment From Azure</button>
    <button id="btnGetThumbnails">Get Thumbnails in JSON From Azure</button>
    <button id="btnGetHead">Get Head -&gt; console</button>
    </p>

    <p id="testAction"></p>
    <div id="htmlfrag"></div>
    <div id="thumbnails"></div>
</div>

<div id="easyxdmdebug">
    <h1>easyXDM Debug Trace</h1>
    <h2>
        <script type="text/javascript">
            document.write("Origin Domain: " + location.host);
        </script>
    </h2>
    <!-- easyXDM.Debug.trace(msg) will output its messages to any element with the id "log" -->
    <div id="log" class="debugtrace">
    </div>

    <!-- container for easyXDM.Debug.tace from remote site -->
    <div id="embedded" class="debugtrace">
    </div>
</div>

CSS

body   
{
    background: #fff;
    font-size: 1em;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color:#000;
}

h1, h2, p { margin: 10px; }
h1 { font-size:1.5em; color:Navy;}
h2 { font-size:1em; }


div.thumbnail 
{
    float: left;
    border: thin silver solid;
    margin: 0.25em;
    padding: 0.25em;
    margin-left:10px;    
}

div.thumbnail p 
{
    text-align: center;
}

#testAction {
    color:Navy;
    min-height:2em;
    height:auto !important;
    height:2em;
}

#thumbnails
{
    margin-left:10px; 
    min-height:200px;
    height:auto !important;
    height:200px;
}

#htmlfrag {
    border: thin silver solid;
    margin: 0.25em;
    padding: 0.25em;
    margin-left:10px; 
    min-height:50px;
    height:auto !important;
    height:50px;
}

.debugtrace 
{
    margin-left:10px;
    height:175px;
    font-size:.875em; 
    border:1px dotted black;
    overflow:auto
}

#easyxdmdebug { clear:both; }

#embedded iframe {
    width: 100%;
    height: 100%;
}

.imported {
    background:Green;
    color:#fff;
}

JavaScript

//original version: http://jsfiddle.net/zientara/GXM4E/

var EASYXDMAZUREDEMO = {};
EASYXDMAZUREDEMO.remoteUri = "https://aisdevstorage.blob.core.windows.net/easyxdmdemo/";
EASYXDMAZUREDEMO.remoteEasyXDM = EASYXDMAZUREDEMO.remoteUri + "easyXDM/";
EASYXDMAZUREDEMO.remoteData = EASYXDMAZUREDEMO.remoteUri + "content/thumbnails.json.txt";
EASYXDMAZUREDEMO.remoteHtml = EASYXDMAZUREDEMO.remoteUri + "content/htmlfragment.txt";

// 
// Create the remote connection
var xhr = new easyXDM.Rpc({
    local: "easyXDM/name.html",
    swf: EASYXDMAZUREDEMO.remoteEasyXDM + "easyxdm.swf",

        // the "-debug" version creates the debug frame.  Use cors/index.html to eliminate remote tracing
    remote: EASYXDMAZUREDEMO.remoteEasyXDM + "cors/index-debug.html",

    remoteHelper: EASYXDMAZUREDEMO.remoteEasyXDM + "name.html",

        // For debug tracing: Register the DOMElement that the generated IFrame should be inserted into
    container: "embedded",
    props: {
        style: {
            border: "2px dotted red",
            height: "150px"
        }
    }
}, {
    remote: {
        request: {}
    }
});
            
// Get thumbnail data from Azure BLOB storage using the easyXDM CORS interface.
function getThumbnails(){
    document.getElementById("testAction").innerHTML = "Getting " + EASYXDMAZUREDEMO.remoteData;

    // method: can also be "POST".
    // Headers and arguments can also be passed like so:
    //    headers: {
    //        "x-auth-token": "abcde"
    //    },
    //    data: {
    //       param1: "a",
    //        param2: "b"
    //    }
    console && console.time & console.time("getThumbnails");    
        xhr.request({
            url: EASYXDMAZUREDEMO.remoteData,
            method: "GET"

        }, function (rpcdata) {
    console && console.timeEnd & console.timeEnd("getThumbnails");    
            // parse JSON from result data
            var json = easyXDM.getJSONObject().parse(rpcdata.data);

            var thumbnailsDiv =...