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标签下 可以看到生成的访问地址 点击然后
这下面的图 点击一下左侧链接 切换到Response就可以看到响应的数据了 跟前端写的函数名要一致 里面的json数据就是 那个函数的参数 传入 别忘记有分号;
前端我们已经console.log 数据了 也可以查看 切换到Console标签下
JSONP 理解 和 实例 讲解的更多相关文章
- S3C2440上RTC时钟驱动开发实例讲解(转载)
嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...
- 实例讲解MySQL联合查询
好了终于贴完了MySQL联合查询的内容了,加上上一篇一共2篇,都是我转载的,实例讲解MySQL联合查询.那下面就具体讲讲简单的JOIN的用法了.首先我们假设有2个表A和B,他们的表结构和字段分别为: ...
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- TCP入门与实例讲解
内容简介 TCP是TCP/IP协议栈的核心组成之一,对开发者来说,学习.掌握TCP非常重要. 本文主要内容包括:什么是TCP,为什么要学习TCP,TCP协议格式,通过实例讲解TCP的生命周期(建立连接 ...
- SQL Server 之 事务与隔离级别实例讲解
SQL Server 之 事务与隔离级别实例讲解 SQL Server 实现了6个隔离级别来防止并发情况下,类似企图并发的访问或修改同一数据时问题的发生.本文将带你体验全部6个隔离级别.正如你接下来将 ...
- Python多线程、多进程和协程的实例讲解
线程.进程和协程是什么 线程.进程和协程的详细概念解释和原理剖析不是本文的重点,本文重点讲述在Python中怎样实际使用这三种东西 参考: 进程.线程.协程之概念理解 进程(Process)是计算机中 ...
- ContentProvider数据库共享之——实例讲解
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/harvic880925/article/details/44591631 前言:现在这段时间没这 ...
- MySQL Group By 实例讲解（二）
mysql group by使用方法实例讲解 MySQL中GROUP BY语句用于对某个或某些字段查询分组,并返回这个字段重复记录的第一条,也就是每个小组(无排序)里面的第一条. 本文章通过实例向大家 ...
- 基于pythonselect.select模块通信的实例讲解
基于python select.select模块通信的实例讲解 要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值. select()方法接收并监控3个通信列表, 第一 ...
随机推荐
- Android 通过Uri获取Bitmap对象
(转自:http://blog.sina.com.cn/s/blog_5de73d0b0100zfm8.html) private Bitmap getBitmapFromUri(Uri uri) { ...
- Source Insight常用功能设置
熟悉工具的使用能在一定程度上提高工作效率,但工具永远只是工具,大家要把重点放在内功的修炼上. 符号导航 符号(变量.宏定义.结构定义.枚举.函数等等)在SI 中的检索非常方便.Ctrl+鼠标左键或Ct ...
- Tomcat关闭日志catalina.out
catalina.out文件会越来越大,对系统的稳定造成了一定的影响.conf/logging.properties 一般在部署Tomcat后,运行久了,catalina.out文件会越来越大,对系统 ...
- makefile之VPATH和vpath的使用
来自阅读陈皓的<跟我一起写makefile> VPATH变量 在一些大的工程中,有大量的源文件,我们通常的做法是把这许多的源文件分类,并存放在不同的目录中.所以,当 make 需要去找寻文 ...
- 洛谷P1373 小a和uim之大逃离[背包DP]
题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...
- ActiveX控件之ActiveXObject is not defined
ActiveX控件方便用户在网页中插入各种效果,但是并不是所有浏览器都支持该控件. ActiveX是微软独有的,只有基于IE内核的浏览器才能使用. 当出现如上错误,可以将通过该控件创建的对象定义为本地 ...
- caffe的python接口学习（5）：生成deploy文件
如果要把训练好的模型拿来测试新的图片,那必须得要一个deploy.prototxt文件,这个文件实际上和test.prototxt文件差不多,只是头尾不相同而也.deploy文件没有第一层数据输入层, ...
- Matlab
Q:workspace没有显示变量的值 A:这是因为子程序里的变量是局部变量,他们的作用域就是子函数内部,会在流程控制回到主调函数前被系统自动释放掉,所以,一旦子程序运行完,你是不可能再查看子程序里的 ...
- Java使用代理服务器
HTTP协议是基于TCP协议的,TCP协议在Java中的体现就是套接字.在了解HTTP协议的基础上,完全可以通过TCP来实现一套HTTP库,这个库可以发起网络请求和接受网络请求.只要能用URLConn ...
- Matlab2015基本语句语法04
1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...