Monday, February 12, 2018

JSONP in Express.js

JSONP stands for padded json response.Express.js can provide jsonp response on similar line to json.Jsonp is used to bypass cross-site scripting restriction buts CORS is way forward.
Yet lets explore JSONP.

First we will create api that will provide jsonp response.

inside our express route add

router.get('/data/jsonp', function (req, res) {
  res.jsonp({ user: 'tobi' });

assuming express.js running on 3000 port,Hit http://localhost:3000/data/jsonp?callback=cb

Expected Output:
    /**/ typeof cb === 'function' && cb({"user":"tobi"});

Lets create an HTML page that consume this jsonp API.Purpose of writing javascript on 'onload' is to let body get loaded before adding script tag via 'appendChild'.


            <script type="text/javascript">
                window.onload = function () {

                    var id = Math.round(Math.random() * 10000);
                    var cbMethodName = 'cb_' + id;
                    var scriptId = 'sc_' + id;

                    window[cbMethodName] = function (data) {
                        document.getElementById('user').innerHTML = data.user;

                    var s = document.createElement('script');
           = scriptId;
                    s.src = 'http://localhost:3000/data/jsonp?callback=' + cbMethodName;
                    s.type = 'text/javascript';

                    try {
                    } catch (e) {

            <h1>JSONP demo</h1>
                        <span id="user"></span>


Here in our html page we are giving method name & scriptid a random name to avoid browser caching.

     Basically our html page have a javascript method that  represent data into our html.
invocation of this javascript function triggered by jsonp api call.whatever value of query parameter 'callback' passed in javascript function in
    'http://localhost:3000/data/jsonp?callback=' + cbMethodName;

function of same name invoked from jsonp api call.That call will populate our span with provided user value.

No comments:

Post a Comment