同源策略与跨域资源共享

1.同源策略

同源策略,就是限制JS只能访问与所在页面同一个域（相同协议、域名、端口）的内容。浏览器的整个安全体系均建立在此之上。

支持同源策略的浏览器其实并不会阻止跨域请求的发送和响应的接收，它仅仅是阻止程序不能访问返回的数据而已。

2.跨域资源共享

两种方法：Jsonp和CORS

Jsonp

实际上，Web页面上调用通过<script>标签引用库的时候是不受跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>。jsonp就是利用这个原理动态加载<script>来实现跨域资源加载。

javascript代码：

jQuery所谓的JSONP模式，其实是动态创建了一个<script>标签，标签的src属性指向一个URL（http://localhost:81/ajax-cors-jsonp/test-service/add.php?x5callback=jQuery18203749695811420679_1439276096319&a=15&b=10&_=1439276101932），这个URL里面除了包含我们的a和b两个参数，还包含一个x5callback参数，参数的值就是那个随机的函数名。这个script标签动态插入到当前页面后，自然就会将我们返回的内容当做JS加载到当前页面

相当于页面加载了jQuery18203749695811420679_1439276096319({“sum”: 25})这个函数，再往后jQuery通过一系列的逻辑代码最终把返回值给到了我们的success回调函数中。

CORS

CORS（Cross-Origin Resource Sharing）方案是W3C在2014年正式推出的跨域访问方案，是真正的官方解决方案。这个方案的实现非常简单，只需要使用自定义的HTTP头部允许跨域访问，以及允许哪些域访问即可。通过设置Access-Control-Allow-Origin来进行。

如：Access-Control-Allow-Origin: http://blog.csdn.net或者Access-Control-Allow-Origin : *

过程：

浏览器通过XHR发送一个跨域请求给浏览器；

浏览器返回一个响应头部（包含Access-Control-Allow-Origin字段，允许浏览器访问跨域的返回数据），浏览器缓存；

浏览器再发送一次HTTP请求。

总结

JSONP是以动态创建script标签为基础的一种编程技巧，来实现跨域获取JSON数据。

但是，要注意由于JSONP是以script标签的src属性加载的，因此参数会收到URL长度的限制，只能适用于传入参数内容不多的场景。

CORS方案实现简单，同时支持GET和POST请求，但是不支持IE9及以下浏览器。目前市面上所有的手机浏览器是全部支持CORS的，如果是为手机提供跨域服务CORS就够了。

3.Web Sockets

Web Sockets的目标是在一个单独的持久的连接上提供双全工、双向通信。也就是说，创建了一个Web Sockets之后，浏览器会马上尝试创建连接，连接成功后就可以发送和接收数据。

与http协议不同的是，1）Web Sockets更高级的支持实时更新数据，相比于通过ajax的request与response服务器被动的传递数据，Web Sockets在建立连接之后服务器有数据更新就会发送数据给服务器触发message事件；2）与HTTP的请求与响应携带的数据量相比，Web Sockets更节约流量。当然Web Sockets也是一个协议，是http连接之后服务器升级的协议，所以与服务器端通信时都要先通过HTTP连接。

var socket = new WebSocket("ws://www.example.com/server.php");socket.send();//通过message事件接收数据socket.onmessage = function(event){     var data = event.data;};//连接成功时触发open事件socket.onopen = function(){     ....};//连接错误时触发error，连接关闭时触发close事件socket.close();

注意：如果不需要双向通信，只需要读取服务器数据，那ajax和jsonp或者CORS就可以实现。

web sockets非常适合实时数据的更新。