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简单实现可拖动的div
Oct 22 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP数据类型的总结分析
2013/06/13 PHP
关于svn冲突的解决方法
2013/06/21 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
C# .NET面试题
2015/11/28 面试题
幼儿园保育员辞职信
2014/01/12 职场文书
学校岗位设置方案
2014/01/16 职场文书
说明书格式及范文
2014/05/07 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL