同源策略

两个页面拥有相同的协议(Protocol)、端口(Port)、和主机(host)那么这两个页 面就是属于同一个源(Origin)。

跨域资源访问

不满足同源策略的资源访问，叫跨域资源访问
W3C 定义了CORS。
现代浏览器已经实现了对 CORS 的支持。

CORS标准原理(Cross-Origin Resource Sharing)

1.浏览器捕获到a.b.com应用往x.y.com的服务器发起的请求

2.浏览器检查请求情况确定是否需要先做一次预请求来验证x.y.com的服务器是否允许发

当前请求过去，如果需要发预请求则浏览器发起一个OPTIONS的请求到x.y.com的服务

器验证继续第3步，否则直接发送请求到x.y.com服务器继续第5步

3.服务器根据浏览器发过来的header信息，然后根据服务器端对资源的配置返回资源的实

际控制权限配置

4.浏览器验证预请求返回的信息，判断是否可以将请求发送到x.y.com的服务器，如果不行

则异常退出，否则继续第5步

5.浏览器发送实际请求至x.y.com服务器

6.服务器返回请求数据及资源控制配置信息至浏览器

7.浏览器验证资源控制信息是否允许当前实际请求的取到数据，如果不允许则异常退出，否 则继续第8步

8.浏览器返回x.y.com返回的数据至a.b.com的应用

其他跨域技术

Frame 代理

JSONP
Comet
Web Sockets

Frame代理

此模式主要参照CORS规范原理，通过在目标服务器放置一个代理文件，然后通过该代理文 件来与服务器端进行数据交互，返回数据通过消息通讯返回给上层应用来实现跨域的数据交 互。

此方式也支持通过代理文件配置资源可访问的来源。

1.当a.b.com的应用要往x.y.com的服务器取数据时，首先会用iframe载入预先放 置在x.y.com服务器上的代理文件

2.服务器端返回做了配置的代理文件

3.代理文件载入完成后a.b.com的应用将要发送的请求指令通过消息通信方式传递给代

理文件

4.代理文件验证a.b.com是否在预先配置的白名单中，如果不在则异常返回，否则直接

发送请求至x.y.com服务器

5.服务器返回数据至代理文件

6.代理文件通过消息通讯机制将请求结果返回给a.b.com的应用

优点

参照CORS标准
支持各种请求方法GET POST PUT DELETE

缺点

需要在目标服务器放置代理文件

JSONP

JSON with Padding(填充式 JSON): 利用<script>可以跨域，请求一段 JavaScript 代码，然后执行 JavaScript 代码来实现跨域。

Ajax请求GET方法的封装

Ajax请求POST方法的封装

post函数是对Ajax的POST请求的封装，语法如下:

post(url, options, callback)

没有返回值，参数说明如下

url:请求资源的url，String类型
options:请求的查询参数，Object类型
callback:回调函数，接收XMLHttpRequest对象的responseText属性作为参数，Function类型

使用示例如下:

post('/addUser', {name: 'jerry', age: 1}, function(data) { //处理返回数据});

results matching ""

    No results matching ""