javascript - Same Origin Policy - AJAX & using Public APIs

Question

I know if on my own webpage, if my user is on : http://www.example.com/form.php

and I make an ajax request from that page to : http://example.com/responder.php

It will fail because of the Same origin policy (subdomain is different).

What I am trying to understand is, how is it that AJAX requests can pull data from API's like flickr when the request and server are obviously different.

---

Edit :

eg: Why does this code work?

$.getJSON('http://api.flickr.com/services/rest/?&;method=flickr...'

(Referred this Community Wiki) Is it using Cross Origin Resource Sharing?

Thanks!

Answer 1

There are few known methods to work around the Same Origin Policy. One popular technique is to use "Script Tag Injection" such as in JSONP. Since the <script> tag is not constrained by the Same Origin Policy, a script on a third-party domain can provide executable code that interacts with a provided callback function. You may want to check out the "Tips and Tricks" section in the following article for further reading on the topic:

• Howto Dynamically Insert Javascript And CSS (hunlock.com)

You may also be interested in checking out the following Stack Overflow post for further reading on other techniques to work around the Same Origin Policy:

• Ways to circumvent the same-origin policy

---

UPDATE: Further the updated question:

Quoting from the jQuery documentation on $.getJSON():

If the URL includes the string "callback=?" in the URL, the request is treated as JSONP instead.