Basic example of using ajax with JSONP

Question

Please could someone help me work out how to get started with JSONP   Code      document   ready function         var pm url    http   twitter com status       pm url      user timeline stephenfry json       pm url      count 10 amp 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 an alert  as far as I can work out from the documentation  isn t  but isn t producing any errors either    thanks

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt img  height  100px  float  left    lt  style gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt title gt An JSONP example  lt  title gt   lt  head gt   lt body gt   lt  -- DIV FOR SHOWING IMAGES -- gt   lt div id  images  gt   lt  div gt   lt  -- SCRIPT FOR GETTING IMAGES FROM FLICKER COM USING JSONP -- gt   lt script gt    getJSON  http   api flickr com services feeds photos public gne jsoncallback         format   json       RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV function data        each data items  function i item         lt img  gt    attr  src   item media m  appendTo   images              lt  script gt   lt  body gt   lt  html gt     The above code helps in getting images from the Flicker API  This uses the GET method for getting images using JSONP  It can be found in detail in here

User · Answer

There is even easier way how to work with JSONP using jQuery    getJSON  http   example com something json callback     function result        response data are now in the result variable    alert result         The   on the end of the URL tells jQuery that it is a JSONP request instead of JSON  jQuery registers and calls the callback function automatically   For more detail refer to the jQuery getJSON documentation

User · Answer

JSONP is really a simply trick to overcome XMLHttpRequest same domain policy   As you know one cannot send AJAX  XMLHttpRequest  request to a different domain    So - instead of using XMLHttpRequest we have to use script HTMLl tags  the ones you usually use to load JS files  in order for JS to get data from another domain  Sounds weird   Thing is - turns out script tags can be used in a fashion similar to XMLHttpRequest  Check this out   script   document createElement  script    script type    text javascript   script src    http   www someWebApiServer com some-data     You will end up with a script segment that looks like this after it loads the data    lt script gt     some string 1    some data    whatever data     lt  script gt    However this is a bit inconvenient  because we have to fetch this array from script tag  So JSONP creators decided that this will work better  and it is    script   document createElement  script    script type    text javascript   script src    http   www someWebApiServer com some-data callback my callback     Notice my callback function over there  So - when JSONP server receives your request and finds callback parameter - instead of returning plain JS array it ll return this   my callback    some string 1    some data    whatever data        See where the profit is  now we get automatic callback  my callback  that ll be triggered once we get the data     That s all there is to know about JSONP  it s a callback and script tags     NOTE  These are simple examples of JSONP usage   these are not production ready scripts   RAW JavaScript demonstration  simple Twitter feed using JSONP     lt html gt       lt head gt       lt  head gt       lt body gt           lt div id    twitterFeed  gt  lt  div gt           lt script gt          function myCallback dataWeGotViaJsonp               var text                   var len   dataWeGotViaJsonp length              for var i 0 i lt len i                     twitterEntry   dataWeGotViaJsonp i                   text      lt p gt  lt img src        twitterEntry user profile image url https      gt     twitterEntry  text       lt  p gt                             document getElementById  twitterFeed   innerHTML   text                     lt  script gt           lt script type  text javascript  src  http   twitter com status user timeline padraicb json count 10 amp callback myCallback  gt  lt  script gt       lt  body gt   lt  html gt     Basic jQuery example  simple Twitter feed using JSONP     lt html gt       lt head gt           lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 6 2 jquery min js  gt  lt  script gt           lt script gt                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 lt len i                                 twitterEntry   dataWeGotViaJsonp i                               text      lt p gt  lt img src        twitterEntry user profile image url https      gt     twitterEntry  text       lt  p gt                                                         twitterFeed   html text                                                                     lt  script gt       lt  head gt       lt body gt           lt div id    twitterFeed  gt  lt  div gt       lt  body gt   lt  html gt     JSONP stands for JSON with Padding   very poorly named technique as it really has nothing to do with what most people would think of as    padding

User · Answer

In response to the OP  there are two problems with your code  you need to set jsonp  callback   and adding in a callback function in a variable like you did does not seem to work   Update  when I wrote this the Twitter API was just open  but they changed it and it now requires authentication  I changed the second example to a working  2014Q1  example  but now using github   This does not work any more - as an exercise  see if you can replace it with the Github API       document   ready function         var pm url    http   twitter com status       pm url      user timeline stephenfry json       pm url      count 10 amp callback photos         ajax           url  pm url          dataType   jsonp           jsonpCallback   photos           jsonp   callback               function photos  data        alert data       console log data        although alert  ing an array like that does not really work well    The  Net  tab in Firebug will show you the JSON properly  Another handy trick is doing   alert JSON stringify data      You can also use the jQuery getJSON method  Here s a complete html example that gets a list of  gists  from github  This way it creates a randomly named callback function for you  that s the final  callback    in the url    lt  DOCTYPE html gt   lt html lang  en  gt       lt head gt           lt title gt JQuery  cross-domain  JSONP Twitter example lt  title gt           lt script type  text javascript src  http   ajax googleapis com ajax libs jquery 1 7 jquery min js  gt  lt  script gt           lt script gt                document  ready function                      getJSON  https   api github com gists callback     function response                         each response data  function i  gist                               gists   append   lt li gt     gist user login       lt a href      gist html url      gt                                   gist description          undescribed    gist description      lt  a gt   lt  li gt                                                                          lt  script gt       lt  head gt       lt body gt           lt ul id  gists  gt  lt  ul gt       lt  body gt   lt  html gt

[ajax] Basic example of using .ajax() with JSONP?

Examples related to ajax

Examples related to json

Examples related to jsonp