前端跨域的几种办法原理详细

参考链接:

https://blog.csdn.net/wuliyun88/article/details/50522336

https://www.sojson.com/blog/121.html

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

JSON和JSONP

JSONP  是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON  数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP   JSON  的区别: JSON  是一种传输格式,而 JSONP  呢是一种数据的获取方式。其实他们没什么相关性,有的人说带callback 的 JSON  传输就是 JSONP  ,下面我会证明这是错误的说法。 JSONP  可以跨域,记住这一点就可以了。下面开始 Demo  演示。

跨越

<script> 标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。

所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。

非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>

通过调用此脚本,服务端会生成一段这样的代码给我们的页面:

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});
调用这段script,相当于服务器返回这一段代码给我们的页面,因此,会alert出对应的数据。
阅读更多
个人分类: js
上一篇WebSocket 教程
下一篇深拷贝和浅拷贝的理解
想对作者说点什么? 我来说一句

前端面试题

2015年07月03日 10KB 下载

js跨域问题

2014年07月10日 648KB 下载

没有更多推荐了,返回首页

关闭
关闭