To request data from a different domain we use json with padding
or jsonp(json with padding)
we use Response to come in a callback function
Refer to following urls
http://itfeast.blogspot.in/2012/07/cross-domain-request-using-jquery.html
http://en.wikipedia.org/wiki/JSONP
http://api.jquery.com/jQuery.ajax/
or jsonp(json with padding)
we use Response to come in a callback function
Refer to following urls
http://itfeast.blogspot.in/2012/07/cross-domain-request-using-jquery.html
http://en.wikipedia.org/wiki/JSONP
http://api.jquery.com/jQuery.ajax/
script = document.createElement(”script”);
script.type = “text/javascript”;
script.src = “http://www.someWebApiServer.com/some-data”;
We get data like this
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Due to inconvenience in fetching data from script tag jsonp was introduced as follows
script = document.createElement(”script”);
script.type = “text/javascript”;
script.src = “http://www.someWebApiServer.com/some-data?callback=my_callback”;
Now since we have passed a parameter to return jsonp data we will always get sth like
my_callback({['some string 1', 'some data', 'whatever data']});
in the script tags
Let's take an simple example of using the twitter feed.
RAW javascript demonstration (simple twitter feed using jsonp)
<html>
<head>
</head>
<body>
<div id = 'twitterFeed'></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
document.getElementById('twitterFeed').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
</body>
</html>
And
Basic jQuery example (simple twitter feed using jsonp)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
$('#twitterFeed').html(text);
}
});
})
</script>
</head>
<body>
<div id = 'twitterFeed'></div>
</body>
</html>
$.getJSON("http://example.com/something.json?callback=?", function(result){
ReplyDelete//response data are now in the result variable
alert(result);
});