开发者

How do I create a JSONP from an external JSON feed?

I have two domains: www.domain1.com and www.domain2.com

I have a plain JSON feed on domain1.

I want to pull the JSON feed from domain1 and put it on a module on domain2.

From what I've read, the way to go about it is by using JSONP but how do you go about doing that? Is there a way to do it with just JQuery/javascript? Or would I have to use server-side code (I'm using Coldfusion). Also could I just use .getJSON and not .ajax (I'm a beginner so I've never used .ajax yet)

EDIT Okay I'm still getting confused. Just adding callback at the end of the url broke it. How could I make it so that instead of a remote path for a feed I a开发者_C百科m pulling an absolute path where this code is on www.domain2.com but the feed is on www.domain1.com?

var feed ="/event/json.tag/tag/sports/";

$.getJSON(feed,function(data) {

   $.each(data.items, function(i,obj) {

       do something here...
   }        

}


JSONP is just a callback function wrapped around a JSON object. General convention is to have an endpoint that returns JSON, unless a callback parameter is defined on the request, and returns JSONP in that case.

i.e. http://www.domain1.com/api/getStuff might return:

{'foo': 'bar', 'fizz': 'buzz'}

then http://www.domain1.com/api/getStuff?cb=cb123 should return:

cb123({'foo': 'bar', 'fizz': 'buzz'});

I don't know ColdFusion, but I assume this example is good: http://www.coldfusionjedi.com/index.cfm/2009/3/11/Writing-a-JSONP-service-in-ColdFusion

There's no client-only solution unless somebody else already built JSONP support into the server you're working with...


Reading the jQuery Documentation $.ajax and $.getJSON will be a good start, anyway there are a lot of good tutorials about jsonp, this one for example is a great tutorial:

$.getJSON("http://api.oscar.aol.com/presence/get?k=key&f=json&t=aimuser&c=?",
   function(result){
      if (result.response.data.users[0].state == 'online') {
       $("#status").css("background-image", "url('online.jpg')");
      }
   }
);

As mention in the website:

The f parameter tells the service what format to return the results in--JSON in our case. The c parameter specifies the JSON callback to use--this is important!

And in the jQuery documentation:

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead.

So keep in mind sending a callback and handling the data afterwords will be easy.

EDIT: another good example.

EDIT2:
When not specifying the callback value, jQuery will assign it for you (from the $.getJSON page) the flickr URL will become:

http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=jsonp1294786450519&tags=cat&tagmode=any&format=json

And the response:

jsonp1294786450519({
        "title": "Recent Uploads tagged cat",
        "link": "http://www.flickr.com/photos/tags/cat/",
        "description": "",
        "modified": "2011-01-11T22:47:12Z",
        "generator": "http://www.flickr.com/",
        "items": [
       { .... rest of json

So you need to wrap your json with the callback sent from domain1


You could retrieve the JSON 'feed' from domain1 and pass that data as a parameter to your own Javascript function (on domain2) when your request is completed (onComplete / onSuccess).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜