jQuery AJAX URL Shortener JSON request not working

Question

I'm stuck - and it's pretty frustrating for something I thought was going to be simple :(

Jquery:

$.ajax({ 
 url: "http://ur.ly/new.json?href=http://www.yahoo.com"), 
 type: "GET",
 dataType: "jsonp",
 success: function(data){
 console.log(data);
}});

I've tried doing this, and FF gives me an "invalid label" error, Chrome gives another.

When I use "json" as the data type, I get a null return.

The frustrating thing is that the URL, when you try it on the browser, works fine. And the error from the "jsonp" variable for the returned data shows the data I want, but errors prevent me from getting to it.

I've tried swapping to XML or Script, changing the API's requirements accordingly, but nothing. I've tried other shortening sites but the same thing keeps happening.

Also tried porting the query part to data:, but it didn't work either.

HELP! :( And thanks for looking through. :)

Answer 1

jsonp is correct.

Any other type won't work for security reasons.

---

I tried your code an the result from ur.ly is a pure json string not a jsonp string:

{"code":"X5","href":"http://www.yahoo.com"}

You might write a small server side script to read those data.

Your javascript could then use json instead of jsonp.

Answer 2

This is because you are trying to make JSONP requests with your jQuery AJAX calls, but the ur.ly API doesn't currently support JSONP. Using plain JSON calls to a different domain won't ever work, due to Javascript's same origin policy.

You will either have to create a server-side proxy script that acts as a go-between for your JavaScript and the remote server (as Ghommey says above), or use a different URL shortening API that does support JSONP requests (e.g bit.ly).