json - Basic example of using .ajax() with JSONP? -
please me work out how started jsonp?
code:
$('document').ready(function() { var pm_url = 'http://twitter.com/status'; pm_url += '/user_timeline/stephenfry.json'; pm_url += '?count=10&callback=photos'; var photos = function (data) { alert(data); }; $.ajax({ url: pm_url, datatype: 'jsonp', jsonpcallback: 'photos', jsonp: false, }); }); fiddle: http://jsfiddle.net/r7ept/6/
should produce alert, far can work out documentation: isn't (but isn't producing errors either).
thanks.
jsonp trick overcome xmlhttprequest same domain policy. (as know 1 cannot send ajax (xmlhttprequest) request different domain.)
so - instead of using xmlhttprequest have use script htmll tags, ones use load js files, in order js data domain. sounds weird?
thing - turns out script tags can used in fashion similar xmlhttprequest! check out:
script = document.createelement("script"); script.type = "text/javascript"; script.src = "http://www.somewebapiserver.com/some-data"; you end script segment looks after loads data:
<script> {['some string 1', 'some data', 'whatever data']} </script> however bit inconvenient, because have fetch array script tag. jsonp creators decided work better (and is):
script = document.createelement("script"); script.type = "text/javascript"; script.src = "http://www.somewebapiserver.com/some-data?callback=my_callback"; notice my_callback function on there? - when jsonp server receives request , finds callback parameter - instead of returning plain js array it'll return this:
my_callback({['some string 1', 'some data', 'whatever data']}); see profit is: automatic callback (my_callback) that'll triggered once data. that's there know jsonp: it's callback , script tags.
note:
these simple examples of jsonp usage, these not production ready scripts.
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>
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>
jsonp stands json padding. (very poorly named technique has nothing people think of “padding”.)
Comments
Post a Comment