JavaScript 跨域解决方案：JSONP 原理与实现详解

跨域概念与JSONP原理

一、部分概念解析

①传统Ajax：交互数据格式为自定义字符串或XML描述；

跨域：通过服务器端代理方式解决。

②当前最优方案：采用JSON格式传输数据，利用JSONP实现跨域。

③JSON：一种数据交换格式，基于纯文本且被原生JS支持。

格式包含两种数据类型描述符：大括号{ }与方括号[ ]，以及逗号、冒号、双引号等分隔符与定义符。

④JSONP：一种非官方的跨域数据交互协议。

1、Web页面调用js文件时可跨域；扩展而言，凡具备src属性的标签均拥有跨域能力。

2、跨域服务器动态生成数据并存入js文件（通常以json为后缀），供客户端调用。

3、为便于客户端使用数据，形成名为JSONP的非正式传输协议。该协议核心在于允许用户向服务器传递callback参数，服务器返回数据时将此callback参数作为函数名包裹JSON数据，使客户端可自定义函数自动处理返回数据。

JSONP 代码实现示例

二、JSONP具体实现

实例1——客户端单方面接收数据：

①客户端——在客户端创建名为callFunc的函数对象，用于接收服务器js数据并进行处理。\njs数据核心在于：调用callFunc函数时附带参数，该参数即data对象的值。

<script type="text/javascript">
var callFunc = function(data){
alert('远程js文件传来的数据：' + data.result);//data为服务器端的JSON数据对象。
    };
</script>
<script type="text/javascript" src="http://其他域的js文件.com/remote.js"></script>

②服务器端——直接调用客户端js中的函数，并传入数据。

callFunc({"result":"value1"});

实例2——客户端向服务器传送指定函数名，服务器端接收该函数名并调用对应函数，将数据以参数形式传入。

<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
// 动态添加链接服务器js文件的script。
// 在url地址中传递了一个code参数匹配JSON数据中的某个key，callback参数则告诉服务器：本地回调函数名为callFuncName。
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=callFuncName";
var script = document.createElement('script');
script.setAttribute('src', url);
// 将script元素在网页加载时插入head头部
document.getElementsByTagName('head')[0].appendChild(script);
</script>

总结：实现代码并不复杂，但在处理Ajax跨域、frameset/iframe跨域等场景下效率颇高。