AngularJS中的JSONP实例分析

概念

首先，Json和JSONP是不同的。Json是众多数据存储格式之一，也是数据写入方式之一。它就像是大中华区众多诗风之一(比如七言诗)。这种风格的诗歌规定：的风格应该包括标题、每行字数(7个字)等等。Json指定的文本格式是这样的

(Json格式图)

至于JSONP，则是一种特殊的通信方式，可以轻松绕过浏览器的同源安全限制，达到从不同来源加载资源(脚本、图片等)的效果。比如你是一个王国的王子，不小心爱上了附近小镇的一个年轻漂亮的女孩(资源)。你想认识她，进一步发展(获得资源)。然而，你的父亲金老师(浏览器)不同意。国王认为这个女孩不是皇室女孩(非同源资源)，配不上王子。当王子被困在城堡内时，许多士兵被安置在城堡外进行监视，禁止外人进入(浏览器的同源安全限制)。但是，王子非常坚持爱情，他尝试通过多种方式联系女孩，比如让太监欧巴带一封信给漂亮的女孩(PUT、GET、POST等)。).然而，每当他到了城门，士兵们就会发现信的地址是给小女孩的，于是他多次禁止太监外出(PUT、GET、POST在获取外部资源时都不起作用)。于是王子想到了一种特殊的交流方式，那就是飞鸽传书(JSONP)。小鸽子可以飞跃城堡，从而避开士兵的监督(绕过浏览器的同源安全限制)，达到与女生交流的效果(跨域资源共享CORS交流！O(_)O).终于，在八十一难之后，太子爱上了太监()；)的生活充满了惊喜.)

具体实现方法

要达到这种沟通效果，王子(发送请求的方式)和女孩(服务器)都要做好准备。

当王子发送一个JSONP请求时，他首先需要一只鸽子(使用Jsonp)，然后他需要一个绑在鸽子上的字母(地址栏中的回调参数)

$ http . jsonp(' https://API . github.com？回调=CALLBACK’)。成功(函数(数据){//.})

女生收到小鸽子带来的信时，也要把内容写在小鸽子的信上回复(通过回调参数，把响应内容包装成JavaScript参数，通过请求对应的回调函数调用)

包装数据的方法

RES . send([回调函数]' ('JSON。string fy(result)')')；

其他细节

使用JSONP时，AngularJS会生成一个脚本标签，并将其插入DOM中进行请求。响应成功后，该节点将被删除(删除该节点的具体角度版本可能不同)

其中，回调将被专门为此请求生成的自定义函数替换，该函数由

$ http . jsonp(' https://API . github.com？回调=回调').)变成

script src=' http :https://API . github.com？回调=angular . callback . _ 0 '/脚本

因此，当我们自己开发JSONP的后端服务时，应该确保响应数据包含在请求指定的回调函数中

需要注意的事项

使用JSOPN存在潜在的安全风险，因为JSONP允许后端服务调用应用程序的JavaScript，这使得网站易受攻击，还可能暴露用户隐私

文章参考

《AngularJS权威教程》

以上就是本文的全部内容。希望对大家有帮助，支持我们！