ajax跨域访问的两种方式

来源:互联网 发布:淘宝关键词权重怎么刷 编辑:程序博客网 时间:2024/06/07 12:10

讲跨域访问之前,先要了解一个概念:同源策略

同源策略 指的是,当一台电脑去访问一个服务器的时候,

它们两的主机地址(ip)、协议名、端口都一致时,叫同源策略;

反之只要有其中一个不相同就是不同源;

这时候的访问就叫跨域访问;

浏览器处于安全考虑,不允许两个不同源之间的页面交互数据;


关于解决跨域访问的两种方式:

第一种: 让后台哥们在接口那边加 一句如下代码:

header('Access-Control-Allow-origin: *');

这是W3c推出的跨域请求的标准;
该规范地址:http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/) 

它的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。

该规范要求浏览器对请求进行“预先验”,这里不做详细介绍;


第二种: 使用jsonp跨域请求:


jsonp是jquery帮我们封装好的一种跨域请求;

书写格式:

注意红线的地方:只要在jQuery里的ajax请求里加上 dataType : jsonp就可以了;


JSONP 这种跨域方案 是广大 聪明的程序员想出来的 非官方 跨域方案
    虽然不同源的页面不能直接发送请求
但是 拥有 src属性的 dom元素 是可以 去跨域获取数据的


JSONP就是利用 script标签的 src属性 可以跨域访问数据来实现的 发送的请求是 GET请求

再请求结束后再把该script标签删掉;




   
    服务器那边收到请求后会在doSomething后面拼加上“()” ,然后把要返回的数据通过参数的形式传给我们;

我们点到收到返回的数据形式大概是这样doSomething({ "name" : xxx, "age" : 00 });

然后我们的浏览器会帮我们解析调用这个方法并接收了传过来的数据;

jsonp跨域请求的原理大概是这样,只不过在jquery中帮我们封装的更好;













0 0
原创粉丝点击