Program The rantings of a lunatic Scientist

New Concept Site

L2Program Web Dev

It hardly would have been worth making a RESTful API for the site if I wasn’t going to build multiple interfaces now would it…

Over the last couple of days I have put together a new or alternative front end for L2Program for the purpose of showing additional site designs in my portfolio. Due to how well my RESTful API project turned out I was able to quickly and easily hook up the API to the new front end simply by implementing a new php and javascript interface which added the appropriate HTML to the API data.

This was also an opportunity to improve the API by adding JSONP functionality. JSONP or “Javascript Object Notation – Padding” is a technique used to get around the CrossDomain Resource issue that plagues current AJAX requests. Effectively, AJAX can only occur within the current domain / subdomain. So from my subdomain http://new.l2program.co.uk/I was not even able to AJAX to my api on the main http://l2program.co.ukdomain.

If you think of JSON as being an array of data then JSONP is simply an array of data as the sole parameter of a function.

{colour:”red”,width:100} is JSON

my_callback({colour:”red”,width:100}) is JSONP

One thing you may notice about JSONP is that rather than being some string based object notation JSONP is Javascript! Which is brilliant because as anyone that has included JQuery from the api.google.com or any other CDN will know, Javascript files can be included Asynchronously from any domain! Internal or External!

So in my API I simply added a clause into all the unauthenticated GET methods saying, if a GET parameter ‘callback’ was sent along too, then compute the result as normal but pad it in parentheses and prepend the callback value.

Now in my JQuery I can make a Cross Domain GET request to my API on the main L2Program domain using code like this.