7
JSONP @nat 20140221

What s jsonp_nat_20140221

Embed Size (px)

Citation preview

Page 1: What s jsonp_nat_20140221

JSONP@nat

20140221

Page 2: What s jsonp_nat_20140221

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

Page 3: What s jsonp_nat_20140221

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.

Page 4: What s jsonp_nat_20140221

Is the Same-originWith http://www.example.com/dir/page.html

httpː//www.example.com/dir/page2.html

httpː//www.example.com/dir2/other.html

httpː//username:[email protected]/dir2/other.html

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

Page 5: What s jsonp_nat_20140221

Cross Domain

HTML tags:

<img />

<iframe></iframe>

<script></script>

Page 6: What s jsonp_nat_20140221

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

Page 7: What s jsonp_nat_20140221

References

https://developer.mozilla.org/zh-TW/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/