您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

AngularJS中的JSONP实例解析

2024/2/26 4:47:29发布24次查看
概念
      首先呢,json和jsonp是不一样的哦。json呢,是众多数据存储的其中一种格式,是数据书写方式的其中一种。好比是大中华众多诗体的一种(比如说是七言诗吧)。这种诗体规定了: 这种诗体要包含题目,每行诗句的字数(7个字) 等等的文本格式。而json所规定的文本格式是这样子的
(json格式示意图)
   而jsonp呢,它是一种特殊的通讯方式,使用它能够轻松绕过浏览器的同源安全限制,达到加载来自不同源的资源(脚本, 图片, 其他)的效果。比如说,您是一个王国的王子,你意外地喜欢上了附近一个小城镇里面的一位漂亮年轻的姑娘(资源),你想和她见面并进一步往下发展(获取资源)。但是呢,您的父亲国王先生(浏览器)可不同意,国王认为这个姑娘不是王室的女孩(非同源的资源),配不上王子,把王子困在城堡里面的同时,还往城堡外放好多士兵监察,禁止外人进入(浏览器的同源安全限制)。但是王子对爱非常坚持,他试过多种方式与这个姑娘联系,比如说让太监欧巴带封信给漂亮姑娘(put,get,post等等),但是呢,每当到达城门的时候,士兵就会发现这封信的地址是给小姑娘的,于是屡屡禁止了太监出去(获取外部资源时,put,get,post不奏效)。于是王子想到了一种特殊的通讯方式,就是飞鸽传书(jsonp),小鸽子呢能够飞跃城堡,从而避开士兵的监察(绕过浏览器的同源安全限制),来达到与姑娘通讯的效果(与跨域资源共享cors的通讯实现啦!o(∩_∩)o)。最终,经过九九八十一难之后,王子喜欢上了太监(∑(っ °д °;)っ 人生处处充满惊喜...)
具体的实现方法
    要达到这种通讯效果,王子(发送请求的方式)和姑娘(服务端)都要有所准备。
 王子在发送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中进行请求,响应成功之后会把该节点删除(删除节点这点具体angular版本不同可能会有所不同吧)
其中,callback会被替换成一个特地为此请求生成的自定义函数,即是由
$http.jsonp(https://api.github.com?callback=callback)...) 变成
<script src="https://api.github.com?callback=angular.callback._0"></script>
   因此当我们自己开发jsonp的后端服务时,要确保响应数据被包含在请求指定的回调函数中
  注意事项
   使用jsopn有潜在的安全隐患,因为jsonp允许后端服务调用应用的javascript,使站点变得脆弱的同时,还可能暴露用户隐私
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product