API Serving JSONP

disclaimer: I am not a client-side developer, and I don't write javascript. However I am committed to supplying useful APIs of all kinds, and JSONP falls into this category

Early in the development of the new Joind.In API, someone else started consuming the service to populate the javascript widgets they were making*. Since these scripts are intended to be used on many external pages, and they retrieve data from the joind.in API, cross-domain issues were a problem.

The API was already set up to serve JSON by default (actually your choices are JSON or HTML at the moment, someone will probably want XML at some point though), but we needed to be able to return content that didn't fall foul of the cross-domain issues. A common workaround is to return javascript that can simply be executed by the calling code. We therefore added the ability to wrap the resulting data in a specified function call and use that as the response.

To do this, we simply added support so that a standard JSON request:

http://api.joind.in/v2/events/677

[{"name":"PHP North West 2011","start_date":"2011-10-07T01:00:00+01:00","end_date":"2011-10-10T00:59:59+01:00","description":"Come to Manchester and join in this year's fabulous PHPNW conference.  Building on the success of previous years, we have a bigger schedule, a bigger venue, more great content and hopefully more fun than ever!  With speakers from across the PHP sphere and its allied technologies, there is something for everyone at this event, and always someone to talk tech to if you want to.\n\nNew this year: tutorial day on Friday 7th October!","href":"http:\/\/conference.phpnw.org.uk","attendee_count":134,"icon":"90x90.jpg","uri":"http:\/\/api.joind.in\/v2\/events\/677","verbose_uri":"http:\/\/api.joind.in\/v2\/events\/677?verbose=yes","comments_uri":"http:\/\/api.joind.in\/v2\/events\/677\/comments","talks_uri":"http:\/\/api.joind.in\/v2\/events\/677\/talks","website_uri":"http:\/\/joind.in\/event\/view\/677"}]

Could have a "callback" parameter added to it, which we'd wrap around the response:

http://api.joind.in/v2/events/677?callback=render

render([{"name":"PHP North West 2011","start_date":"2011-10-07T01:00:00+01:00","end_date":"2011-10-10T00:59:59+01:00","description":"Come to Manchester and join in this year's fabulous PHPNW conference.  Building on the success of previous years, we have a bigger schedule, a bigger venue, more great content and hopefully more fun than ever!  With speakers from across the PHP sphere and its allied technologies, there is something for everyone at this event, and always someone to talk tech to if you want to.\n\nNew this year: tutorial day on Friday 7th October!","href":"http:\/\/conference.phpnw.org.uk","attendee_count":134,"icon":"90x90.jpg","uri":"http:\/\/api.joind.in\/v2\/events\/677","verbose_uri":"http:\/\/api.joind.in\/v2\/events\/677?verbose=yes","comments_uri":"http:\/\/api.joind.in\/v2\/events\/677\/comments","talks_uri":"http:\/\/api.joind.in\/v2\/events\/677\/talks","website_uri":"http:\/\/joind.in\/event\/view\/677"}]);

With this relatively simple (once it was explained to me!) addition, we're able to power the widgets very easily from the API, and I hope this will make it super-easy for people to consume the data in various other applications as they wish. Are you working with something similar? I'd love to hear about it.

* Actually it, was Kevin who was working on the widgets, and he was doing that so that I could have them when this site was relaunched! You can see them in action on my resources page :)

3 thoughts on “API Serving JSONP

  1. Ah, good to know! I saw jsonp mentioned in the press release but then didn't see any examples in the documentation. I think supporting it will really help lots of different users be able to use your data on their sites

  2. Pingback: Building a RESTful PHP Server: Output Handlers | LornaJane

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>