什么是同源策略？
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器
执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
JSON与JSONP
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)
理解跨域（本地模拟跨域情形）
新建文件夹项目A与项目B
用HBuilder在chrome浏览器中打开A/sample.html，得到下面路径：
http://127.0.0.1:8020/A/sample.html
用WebStorm2016.3.1在chrome浏览器中打开B/samp.html，得到下面路径：
http://localhost:63342/B/sample.html?_ijt=f9l1pulrqoemklhrfr39lbdn7s
现在/A/sample.html访问B中的test.js，显然是跨域了。
把http://localhost:63342/B/test.js直接引入/A/sample.html里面：
再次刷新http://127.0.0.1:8020/A/sample.html时，WebStorm图标会显示黄色提示你打开：
选择Copy authorization URL to clipboard复制新生成的webstorm小型服务器下的test.js地址，复制粘贴到路径：
这样，再次刷新http://127.0.0.1:8020/A/sample.html的时候，test.js里面的内容就可以访问了！
创建一个真正的前后端交互情景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>testA</title> </head> <body> <script> function addScriptTag(src) { var ele = document.createElement('script'); ele.type = 'text/javascript'; ele.src = src; document.body.append(ele); } window.onload = function () { addScriptTag("http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=result"); }; function result(data) { alert('data: ' + data); console.log(data); } </script> </body> </html>
这个callback需要后端去定义！
可供测试的JSONP服务(以下信息来自使用 JSONP 实现跨域通信)：
Geonames API：邮编的位置信息：
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr JSONP API：载入最新猫的图片：
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：
http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?