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刷新站IP和PV
Sep 05 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
JS实现一个简单的日历
Feb 22 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
深入理解node.js http模块
2018/01/24 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2014年体育工作总结
2014/11/24 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL
Python面试不修改数组找出重复的数字
2022/05/20 Python