{"id":1096,"date":"2014-11-11T15:00:27","date_gmt":"2014-11-11T13:00:27","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1096"},"modified":"2014-11-07T01:09:04","modified_gmt":"2014-11-06T23:09:04","slug":"getting-started-with-json-p","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/getting-started-with-json-p\/","title":{"rendered":"Getting started with JSON-P"},"content":{"rendered":"

I have during my college days used XMLHttpRequest object and its equivalent in Microsoft world to make Ajax calls and those Ajax calls were to the URL within the same domain. But with the advent of Webservices and whole lot of mashups being developed, Ajax calls are not restricted to same domain but the cut acorss different domains. When this cutting across domain boundaries happens making Ajax calls using XMLHttpRequest fails due to security enforcements implemened by the browsers. That\u2019s when the idea of JSON-P i.e JSON with Padding came up.<\/p>\n

In this post I will quote from different sources about JSONP and then go ahead and implement example which invokes Stackoverflow API to retrieve the unanswered questions tagged \u2018jsonp\u2019<\/p>\n

    \n
  1. What is JSONP?<\/a><\/li>\n
  2. Simple example for JSONP<\/a><\/li>\n
  3. Accessing Stackoverflow API using JSONP<\/a><\/li>\n<\/ol>\n

    <\/a>What is JSONP?<\/h2>\n

    I am not going to restate its definition, instead quote its definition from different sources as given below:<\/p>\n

    From Head First HTML5:<\/strong><\/h3>\n

    \u00a0JSONP is a way to retrieve JSON objects by using the script<\/code> tag. It\u2019s also a way of retrieving data (again, in the form of JSON objects) that avoids the same-origin security issues we saw with XMLHttpRequest. JSONP is JSON data wrapped in JavaScript; typically, a function call.<\/p><\/blockquote>\n

    From http:\/\/json-p.org\/<\/strong><\/h3>\n

    One such mechanism which can request content cross-domain is the script<\/code> tag. In December 2005, Bob Ippolito formally proposed JSONP (later dubbed JSON-P, or JSON-with-padding) as a way to leverage this property of script<\/code> tags to be able to request data in the JSON format across domains. JSON-P works by making a script<\/code> element (either in HTML markup or inserted into the DOM via JavaScript), which requests to a remote data service location. The response (the loaded \u201cJavaScript\u201d content) is the name of a function pre-defined on the requesting web page, with the parameter being passed to it being the JSON data being requested. When the script executes, the function is called and passed the JSON data, allowing the requesting page to receive and process the data.<\/p><\/blockquote>\n

    From Wikipedia: http:\/\/en.wikipedia.org\/wiki\/JSONP<\/strong><\/h3>\n

    JSONP or \u201cJSON with padding\u201d is a communication technique used in JavaScript programs which run in Web browsers. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy.<\/p><\/blockquote>\n

    Summarising, JSONP is a communication technique to retrieve data from some URL and then leveraging the script<\/code> tag to establish the communication and JavaScript to update the HTML.
    \n<\/em>
    \nThere have been a lot of concerns about how secure using JSONP is, but I dont want to get into those discussions as that is not the main motive of this post.<\/p>\n

    Now going forward, let me show JSONP in action using a simple example.<\/p>\n

    <\/a>Simple example for JSONP<\/h2>\n

    For the simple example I will make use of some resources from chapter on JSONP in Head First HTML5 book. I am going to make a JSONP call to a Javascript resource which in turns invokes the callback function declared in my Javascript source.<\/p>\n

    Lets look at the HTML source:<\/p>\n

    <html>\r\n  <head>\r\n    <title><\/title>\r\n    <meta charset='UTF-8'>\r\n    <script src='simple.js'><\/script>\r\n  <\/head>\r\n  <body>\r\n    <h1>JSONP Simple Demo<\/h1>\r\n    <!-- we will update the data here -->\r\n    <div id='jsonp'><\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
    The interesting thing happens in the JavaScript code.<\/p>\n
    \/\/simple.js\r\nwindow.onload = function(){\r\n  \/\/Get the head element.\r\n  var head = document.getElementsByTagName('head')[0];\r\n\r\n  \/\/url for the javascript resource for JSONP call.\r\n  var url = 'http:\/\/wickedlysmart.com\/hfhtml5\/chapter6\/dog3.js';\r\n\r\n  \/\/Appending the script tag to the head element.\r\n  \/\/This triggers a JSONP call to get the data.\r\n  var scriptTag = document.createElement('script');\r\n  scriptTag.setAttribute('src',url);\r\n  head.appendChild(scriptTag);\r\n}\r\n\r\n\/\/Method invoked by JSONP\r\nfunction animalSays(animal){\r\n  var div = document.getElementById('jsonp');\r\n  div.innerHTML = animal.type +' says '+ animal.sound;\r\n}<\/pre>\n
    The \u201chttp:\/\/wickedlysmart.com\/hfhtml5\/chapter6\/dog3.js\u201d contains:<\/p>\n
    var animal = { 'type': 'dog', 'sound': 'woof' };\r\nanimalSays(animal);<\/pre>\n
    The above javascript code:
    \n1. creates a JSON object
    \n2. invokes the callback by pasing the JSON object.<\/p>\n
    Now the question is, where is the animalSays<\/code> method declared? If you have carefully looked at simple.js you can see that the method animalSays<\/code> has been declared. When the javascript in above URL is requested using JSONP technique by dynamically adding the script<\/code>, the javascript is executed in the browser which contains the definition of the animalSays<\/code> method.<\/p>\n
    The animalSays<\/code> method retrieves the JSON object and then populates the HTML with the data in the JSON object.<\/p>\n
    Lets look at a more better example.<\/p>\n
    <\/a>Accessing Stackoverflow API using JSONP<\/h2>\n
    Details of the Stackoverflow API for unanswered questions can be found here<\/a>. The URL for accessing unanswered questions tagged \u2018jsonp\u2019 is: https:\/\/api.stackexchange.com\/2.1\/questions\/unanswered?order=desc&sort=activity&tagged=jsonp&site=stackoverflow<\/p>\n
    The above URL returns some JSON data, but how does it help in making use of JSONP? One can append another parameter to the above URL called \u201ccallback\u201d which will take the name of the Javascript method which will be invoked once the URL is loaded by the script<\/code> tag.<\/p>\n
    Lets take a look at the HTML code:<\/p>\n
    \/\/sflow.html\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title><\/title>\r\n    <meta http-equiv='Content-Type' content='text\/html; charset=UTF-8'>\r\n    <script src='sflow.js'><\/script>\r\n  <\/head>\r\n  <body>\r\n    <div>Unanswered questions tagged 'jsonp'<\/div>\r\n    <!-- placeholder for updating the questions -->\r\n    <div id='questions'>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
    The Javascript code has 2 parts:<\/p>\n