Using JSONP from BLADE

If you're thinking of implementing a JSON consumption application, you will want to use the JSONP export option of BLADE. JSONP is the cross domain safe version of JSON. It stands for JSON with Padding. Accessing JSON across domains without implementing JSONP will not work and you will get errors.

Getting A BLADE Access URL From Flow

Start by logging into your Flow and accessing the BLADE module. From there generate a JSONP URL with the content type that you plan to work with. You can use the test button to see if you have any content of that type available. BLADE will send an empty JSON array if there is no content available for the chosen content type.

For this example we generated the URL http://bldemos.com/tweetout/TweetOut.ashx?topic=bannisterlake&format=jsonp&callback=?

Implementing the JSONP Fetch

In your client application, implement the following JQuery code:

<script>
    /* Loading JSON objects using JSONP */
    function grabJSONP() {
        $.ajax("http://bldemos.com/tweetout/TweetOut.ashx?topic=bannisterlake&format=jsonp",
            {
                success: function (feed) { console.log('success'); outputJSON(feed); },
                dataType: 'jsonp',
                jsonpCallback: 'myCallBackName'
            }
            );
    }
    function outputJSON(feedIn) {
        $.each(feedIn, function (i) { document.write(feedIn[i].Text + '<br />'); });
    }
</script>
<input type="button" value="Click To Load JSON >" onclick="grabJSONP()" />

When the button is clicked, the AJAX request to the bldemos.com BLADE URL is processed. If you do not provide a callback name, JQuery will automatically assign one. If you are not using a client fetch method that automatically assigns a callback, BLADE will automatically assign "callback" as the callback name.

The success parameter of the JQuery AJAX call takes a function and returns the results. You can handle the results of the fetch in any manner you choose within the success function you have created. For more information on the JQuery AJAX API, see http://api.jquery.com/jQuery.ajax/

In our exmple, on success, the function writes to the console log, and then sends the "feed" JSON array results to an output function. Our outputJSON function loops through the array results and outputs the "text" property of the tweet. To see what properties a JSON array has, use the TEST button in BLADE or put your JSONP fetch url into a JSON validator like http://jsonlint.com/