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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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
php 阴历-农历-转换类代码
2012/01/16 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
详解Python的单元测试
2015/04/28 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
生产管理的三大手法
2013/11/11 职场文书
安全生产演讲稿
2014/05/09 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
大学生学年个人总结
2015/02/15 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript