1. JSONP
@nat
20140221

2. JSONP

JSONP or "JSON with padding" is a communication technique used in
JavaScript programs running in web browsers to request data from a server in
a different domain, something prohibited by typical web browsers because of
the same origin policy.
- WIKI, http://en.wikipedia.org/wiki/JSONP

3. Cross Domain’s Problem

Same-origin policy for javascript

Two pages have the same origin if the protocol, port (if one is specified), and host
are the same for both pages.

4. Is the Same-origin
With http://www.example.com/dir/page.html

httpː//www.example.com/dir/page .html
2

httpː//www.example.com/dir
2/other.html

httpː// sername:password@www.example.com/dir2/other.html
u

httpː//www.example.com:
81/dir/other.html

https://www.example.com/dir/other.html

http://en.example.com/dir/other.html

http://example.com/dir/other.html

http://v2.www.example.com/dir/other.html

httpː//www.example.com:
80/dir/other.html

5. Cross Domain

HTML tags:

<img />

<iframe></iframe>

<script></script>

6. Demo

http://www.flickr.com/services/feeds/docs/photos_public/

native javascript



http://jsbin.com/gabezawo/1/edit
http://jsbin.com/volelagi/2/edit
jQuery

http://jsbin.com/mipifobo/1/edit

http://jsbin.com/pemokubi/2/edit

7. References

https://developer.mozilla.org/zhTW/docs/JavaScript/Same_origin_policy_for_JavaScript

http://zh.wikipedia.org/wiki/JSON

http://www.flickr.com/services/feeds/docs/photos_public/

https://api.jquery.com/jQuery.ajax/