Interesting way of making JSONP AJAX calls from your JavaScript without using any Framework or Library
On my latest pet project, SlideShare Presentation Stack, I wanted to make an AJAX call to fetch data from another domain. However due to same-origin policy, I can’t make a simple AJAX call, I need to use JSONP. JQuery and bunch of other libraries provide a very convenient way of making JSONP calls. However to minimize the dependency of my javascript library, I did not want to use any javascript framework or library. Also I wanted the code to be supported by all browsers that supported javascript.
One option was to use XMLHttpRequest. But I wanted to explore if there was any other option, just then I discovered this totally interesting way of making JSONP AJAX call. Code below:
<script type="text/javascript"> simpleAJAXLib = { init: function () { this.fetchViaJSONP('your_url_goes_here'); }, fetchViaJSONP: function (url) { url += '?format=jsonp&jsonp_callback=simpleAJAXLib.handleResponse'; document.getElementsByTagName('body')[0].appendChild(this.jsTag(url)); }, jsTag: function (url) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', url); return script; }, handleResponse: function (results) { // do the necessary stuff; for example document.getElementById('demo').innerHTML = "Result = " + (results.error ? "Internal Server Error!" : results.response); } }; </script> |
Trigger the AJAX call asynchronously by adding the following snippet where ever required:
<script type="text/javascript"> simpleAJAXLib.init(); </script> |
How does this actually work?
Its simple:
- Construct the AJAX URL (any URL that support JSONP) and then append the callback function name to it. (For ex: http://myajaxcall.com?callback=simpleAJAXLib.handleResponse.) Also don’t forget to mention JSONP as your format.
- Create a new javascript html tag and add this URL as the src of the javascript tag
- Append this new javascript tag to the body. This will cause the browser to invoke the URL
- On the server side: In addition to returning the data in the expected formart, wrap the data as a paramater to the actual backback function and return it with a javascript header. The browser would eval this returned javascript and hence your callback function would be invoked. See server side code example below:
$data = array("response"=>"your_data"); header('Content-Type: text/javascript'); echo $_GET['jsonp_callback'] ."(".json_encode($data).")"; |
P.S: Via this exercise, I actually understood how JSONP works.
If you want to call an API, which does not support JSONP, you might be interested in reading my other blog post on Fetching Cross Domain XML in JavaScript, which uses Yahoo Query Language (YQL) as a proxy to work around the same-origin-policy for xml documents.
