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获取select的value和text值的简单实例
Feb 26 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue使用自定义icon图标的方法
May 14 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
js判断两个数组相等的5种方法
May 06 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判断linux下程序问题实例
2015/07/09 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript的Cookies
2008/01/16 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python计算无向图节点度的实例代码
2019/11/22 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Django REST 异常处理详解
2020/07/15 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
优秀企业获奖感言
2014/02/01 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
融资合作协议书范本
2014/10/17 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
PHP实现rar解压读取扩展包小结
2021/06/03 PHP