HTML and CSS Reference
In-Depth Information
{
" name": " Dave",
"occupation": " General Manager"
}
With JSONP, this data become inaccessible, due to the method used to create
the request.
With an Ajax request, you send the request and create a callback method as an
event listener. With JSONP, you actually embed the request as a
<script />
in
the web page. As part of the script source, you will append a callback method.
The resulting HTML looks like the following code snippet.
<script src="
http://myservice.com/staff/101/?callback=showProfile"
async="async"></script>
This will load the script, the web service will wrap the result in the method, and
the response will look like the following.
showProfile({
"name": "Dave",
"occupation": " General Manager"
});
The
showProfile
function will then be executed with the data as its parameter.
Creating a JSONP request can be a laborious task, and one which
jsonp.js
can
handle for you.
Begin by creating a new JavaScript file called
jsonp.js
within
js/app/utility/
.
Add the following code.
var app = app || {};
app.utility = app.utility || {};
app.utility.jsonp = function(url, callbackmethod){
/**
* Create a new _src variable to append the callback param to the url
*/
var _src = url + '&callback=' + callbackmethod;
/**
* Create the script element
*/
var _script = document.createElement('script');
/**
* Set the source of the script element to be the same as the one specified
above
