AngularJS中JSONP原理与实现详解

JSON与JSONP的概念区别

概念

首先需要明确，JSON与JSONP存在本质区别。JSON是一种数据存储格式，定义了数据的书写规范，类似于诗歌体裁中七言诗对题目和字数的规定。JSON所规定的文本格式如下所示：

(Json格式示意图)

JSONP则是一种特殊的通信机制，旨在轻松绕过浏览器的同源安全策略，从而加载来自不同源的资源（如脚本、图片等）。为了便于理解，可以将其比喻为：假设一位王子（客户端）爱上了邻镇的一位姑娘（外部资源），希望与她建立联系。然而，国王（浏览器）出于安全考虑，禁止王子与非王室成员接触，并派遣士兵封锁城门，这象征着浏览器的同源策略限制。王子尝试通过太监送信（PUT、GET、POST等常规HTTP方法）联系姑娘，但信件在城门口被士兵拦截，因为地址指向外部。最终，王子采用飞鸽传书（JSONP）的方式，让鸽子飞越城墙避开士兵监控，成功与姑娘通信。这与跨域资源共享（CORS）的实现目标类似，尽管过程曲折，但实现了跨域交互。

JSONP的具体实现方法

具体的实现方法

要实现这种通信效果，发送方（客户端）与接收方（服务端）均需进行相应配置。

客户端发起JSONP请求时，首先需要具备“飞鸽”机制（即使用JSONP技术），并在请求地址中附加callback参数，相当于将信件绑在鸽子身上。

$http.jsonp("https://api.github.com?callback=CALLBACK").success(function(data){//...})

服务端接收到请求后，需将响应内容封装在callback参数指定的JavaScript函数中，并返回该调用语句，以此完成数据回传。

包装数据的方法

res.send(【callback函数】+ '('+ JSON.stringify(result) + ')');

其他细节

在使用JSONP时，AngularJS会自动生成一个<script>标签并将其插入DOM以发起请求。请求成功后，AngularJS会将该节点从DOM中移除（注：节点移除的具体行为可能因AngularJS版本不同而有所差异）。

在此过程中，URL中的CALLBACK占位符会被替换为AngularJS为该请求动态生成的唯一回调函数名。

$http.jsonp("https://api.github.com?callback=CALLBACK")...) 变成

<script src="https://api.github.com?callback=angular.callback._0"></script>

变为实际执行的脚本标签：

JSONP的安全注意事项

因此，在开发JSONP后端服务时，必须确保返回的数据被包裹在客户端指定的回调函数调用中。

注意事项

使用JSONP存在潜在的安全风险。由于JSONP允许服务端直接调用客户端的JavaScript函数，这可能导致站点安全性降低，并存在暴露用户隐私的隐患。

文章参考

《AngularJS权威教程》