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 相关文章推荐
jquery 插件学习(六)
Aug 06 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
javascript中expression的用法整理
May 13 Javascript
js实现图片无缝滚动
Dec 23 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
php命令行写shell实例详解
2018/07/19 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
js模块加载方式浅析
2017/08/12 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python unittest框架操作实例解析
2020/04/13 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
依法行政工作汇报材料
2014/10/28 职场文书
物业保安辞职信
2015/05/12 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
python在package下继续嵌套一个package
2022/04/14 Python