JSONP scenarios

Article
03/30/2015

You can use JavaScript Objection Notation with padding (JSONP) in client-side JavaScript webpage code to interact directly with the Live SDK Representational State Transfer (REST) API.

Using JSONP is especially helpful when you want to retrieve simple services info for an individual user, without writing all of the code to call the Live SDK JavaScript API. For example, with as little as a single line of code, you can make a request for a user's full name, info about one of the user's contacts, or one of the user's photos.

There are two main usage patterns for using JSONP: you can call JSONP as a web page loads, and you can call it in response to a user action on a web page.

Calling JSONP as a webpage loads

In this usage pattern, JSONP is called while the containing web page initially loads from beginning to end, as shown in the following code example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <textarea id="response" style="width:100%" cols="0" rows="20"></textarea>
                
        <script src="JSONP.js"></script>
        <script src="json2.js"></script>

        <script>
            function onResponse(response) {
                var jsonAsString = JSON.stringify(response);
                                
                document.getElementById("response").value = jsonAsString;
            }
        </script>
        
        <script src="">
        </script>

        <script>
            var scripts = document.getElementsByTagName("script");
            scripts[3].src = REST_API_URL;
        </script>
    </body>
</html>

The following occurs in the preceding code sample:

While the web page loads, when the JavaScript interpreter reaches the last script element, the interpreter takes the URL string from the script in the JSONP.js file and inserts it into the empty src attribute of the fourth script element.
When the web page finishes loading, the JavaScript interpreter invokes the fourth script element, which calls the Live SDK REST API. The REST API delivers the results of the call as a JavaScript Object Notation (JSON)-formatted string to the onResponse function. (This function is specified in the src attribute's callback URL parameter.)
The onResponse function uses the JSON.stringify function to convert the JSON-formatted data into a string, which is displayed in the textarea control on the webpage.

The preceding code sample relies on two additional JavaScript scripts: JSONP.js and json2.js. The JSONP.jsJavaScript file contains the following code.

var ENDPOINT_REST_API = "https://apis.live.net/",
    ENDPOINT_REST_API_VERSION = "v5.0/",
    REST_PATH_ME = "me/",
    REST_PATH_CONTACTS = "contacts", 
    ACCESS_TOKEN_PARAM = "?access_token=",
    JSONP_CALLBACK_PARAM = "&callback=",
    JSONP_CALLBACK_FUNCTION = "onResponse";

var ACCESS_TOKEN = "EwBQAq1DBAAUlbRWyAJjK5w968Ru3Cyt/6GvwXwAAXNW6nTKzZqgl86qQPkmd1Yo4n+RZvmkdocatHGf3ZVvW2ZnrDFYg2cpMsbYEtA8pIQmdmCmx1WceM331ELb/uj+6Ckckq8A+xmzdOOiUiwhnO45ep8ty1n0vVURSHh4x9jKv7nQjGH+QJIV6AezLV+lIYYoyI+rqUzNYB+d8GGxuBSU/mgM/N8hYZMq8t95+OPl5TUmtJL+ptaACnFle/ne+fCjfacq3phbWdwvy7YSM69LEAaWAktP84vqNFN9Apyd1br6ifcWE3v1P2n3l4gHO6xXl+40fHICp7uioVZFysDV+eGP3qMPpTsZ7FDC1G3UmSMEI3Z5MdD5Pn4Q5r4DZgAACHsFxmD0xGYUIAGOfYQ7Ft4UFC9HgsHJlhImWVZz9ZZvF4xMDlfkHCuMRV9/5qn6JzA9/3UR0Of+724+vcsik/LNJSLeFTNzCKUTML+WVUitO2sXYDjzsz5E8T4xjIKMo0lAzfuCJ0bjTI1jWWuipyBaYNhz7wtl+eSID5iAi2xoloPLHyyfgTkk1dJRk2DwR239GZLwKbK+rWpER5u1cGHBRpIFMDJZIvPUz7AIeDaVQXf81jUAfZT1MdwsjwGdbnjni4csoQdpQNzjE0WC3HyEFM4jPSev/5eEfyaz8iM2O+RFXKA326gnPUYjvw8O3o1yqYyzGT5tbypNvDg1R9rIt7or479OGf1VV7yhOEE8CUb+RBtVoROsWEIBtxptrSlGmg7Nii9RahAAAA==";

var REST_API_URL = ENDPOINT_REST_API + ENDPOINT_REST_API_VERSION +
        REST_PATH_ME + REST_PATH_CONTACTS + 
        ACCESS_TOKEN_PARAM + ACCESS_TOKEN +
        JSONP_CALLBACK_PARAM + JSONP_CALLBACK_FUNCTION;

The preceding script contains variables that can help you debug and isolate run-time errors caused by any changes to hard-coded URLs upon which the Live SDK REST API relies.

The json2.js script converts JSON-formatted strings and objects. Although similar functionality is supplied by default with several web browsers, this script is referenced locally to achieve compatibility with a wider range of web browsers. You can get this script by visiting a website, such as Introducing JSON.

Note

To adapt the preceding code example for your own use, replace the value of the ACCESS_TOKEN with an access token that represents your requested scope for the user.

Calling JSONP in response to a user action in a webpage

In this usage pattern, JSONP is called only when the user performs an action in the containing webpage, as shown in the following code example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <button id="callApi" onclick="onCallApiClicked()">Call API</button>
        <textarea id="response" style="width:100%" cols="0" rows="20"></textarea>
                
        <script src="JSONP.js"></script>
        <script src="json2.js"></script>

        <script>
            function onCallApiClicked() {
                var script = document.createElement("script");                
                script.type = "text/javascript";
                script.language = "javascript";
                script.src = REST_API_URL;
                document.body.appendChild(script);
            }
                        
            function onResponse(response) {
                var jsonAsString = JSON.stringify(response);                                
                document.getElementById("response").value = jsonAsString;
            }            
        </script>        
    </body>
</html>

This example differs from the example in the preceding section in the following ways:

None of the script elements initially contains any calls to the Live SDK REST API, so nothing happens after the webpage finishes loading.
When the user clicks the Call API button, the onCallApiClicked function creates a new script element at the end of the webpage. The function takes the URL string from the JSONP.js script and inserts it into the element's src attribute.
After the function calls the document.body.appendChild function, the JavaScript interpreter invokes the new element, which then calls the Live SDK REST API.
The code continues to run as in the preceding section.

Each time the user clicks the Call API button, a new script element is created. As each new element is appended to the end of the webpage, the new element calls the Live SDK REST API.

JSONP scenarios

Calling JSONP as a webpage loads

Calling JSONP in response to a user action in a webpage

Additional resources