JSONP 的原理、理解 与 实例分析


Posted in Javascript onMay 16, 2020

本文实例讲述了JSONP 的原理、理解 与 实例。分享给大家供大家参考,具体如下:

1.什么是jsonp

1.1 同源策略 

浏览器同源策略的限制,XmlHttpRequest只允许请求当前源(相同域名、协议、端口)的资源。

-1)jsonp只支持get请求

-2)不受同源策略限制 ,兼容性好 不需要XMLHttpRequest(ActiveX)支持,通过js回调函数返回结果

-3)不能解决 不同域的两个页面之间js调用的问题

2. jsonp 原理

动态添加一个script标签,get链接上发送回调函数名称 传给服务器 服务器获取回调函数名称 返回这个函数名称的JS函数(拼装函数) json数据作为函数的实际参数传入 返回的数据是js函数  在前端调用回调函数( json数据传入) 执行回调函数

3.实例

先来说说 服务端应该返回的数据形式 如下所示 用的php  thinphp框架编写的 访问URL 是 

http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback callback后面的名字要传给服务器的 后端拼装成一个js回调函数 这样前台json数据就作为回调函数的参数传入 获取到数据了

public function testJsonP(){
    $jsonname =I('get.callback');//获取URL上的callback名称 也就是获取jsonpCallback

    $a = [name=>'张三',sex=>'男',msg=>'返回成功!'];// 一个数组数据
    $json = json_encode($a);// 转成json数据

    echo $jsonname.'('.$json.');';//正确的格式应该是这样 jsonpCallback({"name":"\u5f20\u4e09","sex":"\u7537","msg":"\u8fd4\u56de\u6210\u529f\uff01"}); 不要忘记分号; 这样返回的才是一个js函数 前台肯定有这个函数名字才行

}

tip:关联数组 上面例子 $a = array( "msg" => "返回成功!")

前台 访问URL http://localhost:63343/H5/jsonP.html 动态添加一个script标签 src里 调用回调函数 jsonpCallback() . ?callback=jsonpCallback名字随便起 后端获取的就是jsonpCallback这个名字而已 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<script type="text/javascript">

  function jsonpCallback(date){
    console.log(date);
    alert(date);
    alert(date.msg);
  }
  var script =document.createElement('script');
  script.src='http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback';
  document.body.insertBefore(script,document.body.firstChild);


</script>

</body>
</html>

 我们可以在浏览器里 这里我用的谷歌直接查看 数据是否访问正确 切换到Network标签下 可以看到生成的访问地址 点击然后

JSONP 的原理、理解 与 实例分析 

这下面的图 点击一下左侧链接   切换到Response就可以看到响应的数据了 跟前端写的函数名要一致 里面的json数据就是 那个函数的参数 传入 别忘记有分号;

JSONP 的原理、理解 与 实例分析

前端我们已经console.log 数据了 也可以查看 切换到Console标签下

JSONP 的原理、理解 与 实例分析

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript自启动函数的问题探讨
Oct 05 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
学习Vue组件实例
Apr 28 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
JavaScript随机数的组合问题案例分析
May 16 #Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 #Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 #Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 #Javascript
uni-app从安装到卸载的入门教程
May 15 #Javascript
Vue数据双向绑定原理实例解析
May 15 #Javascript
JavaScript鼠标悬停事件用法解析
May 15 #Javascript
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php中fsockopen用法实例
2015/01/05 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
pyshp创建shp点文件的方法
2018/12/31 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python Matplotlib模块的使用
2020/09/16 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
ORACLE第二个十问
2013/12/14 面试题
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
初中校园广播稿
2014/02/02 职场文书
财务科科长岗位职责
2014/03/10 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
节能环保标语
2014/06/12 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
总经理检讨书范文
2015/02/16 职场文书
文艺晚会开场白
2015/05/29 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书