JSONP简单入门介绍

一、什么是JSONP？

JSON with padding 是一种数据交换的技巧，用于解决主流浏览器的跨域数据访问的问题！

二、生产的背景

由于同源策略，一般来说位于A服务器的网页是无法与其他服务器上的资源沟通的
而html中的`<script>`是一个特例，JSONP就是利用`<script>`这个标签实例动态地
从其他服务器获取资源（一般来说是一些文本内容）。

三、使用

客户端JS代码首先定义一个回调函数，该回调函数接收将要被处理的数据参数，参数个数不定。
客户端HTML代码嵌入一段<script>引用，src指向服务器程序的URL，并在URL在给定一个参数，它的值就是上面1定义的function名
服务器端代码（如PHP）接收到请求，解析参数取得客户端中定义的回调函数名，并将取得的回调函数名当作函数名称与数据合并输出一段 JS调用函数的代码

四、Talk is cheap, Show me the code!

服务器端程序代码 jsonp.php （在B机器）

<?php
$func = $_GET['callback']; //这里获取客户JS定义的回调函数名称
$data = 'This is the jsonp data on crossdomain request';
echo "$func('{$data}')"; //这是一段JS代码

客户端HTML代码：jsonptest.html（在A机器上）

<!DOCTYPE html>
<html>
<head><title>Json test</title>
</head>
<body>
<h1 id="padding-content"></h1>
<a  href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
function callbackfunc(data){$("#padding-content").text("callback:"+data);
}
</script>
<script type="text/javascript" src="http://www.B.com/jsonp.php?callback=callbackfunc"></script>
</html>

打开浏览器A服务器上的jsonptest.html 可能看到结果

callback:This is the jsonp data on crossdomain request

Ajax跨域请求：

还是用刚才的服务器端程序，我们修改一下客户HTML中的JS代码，发起一个请求

<!DOCTYPE html>
<html>
<head><title>Json test</title><script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<h1 id="padding-content"></h1>
<a  href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
$(".button").click(function(){$.ajax({url:"http://www.B.com/jsonp.php",dataType:"jsonp",type:"get",jsonpCallback:"testJsonpCallBackFunc",error:function(err, errstr){$("#padding-content").text(errstr);},success:function(resp){$("#padding-content").text(resp);}});});
</script>
</html>

点击页面的json data，成功在页面打印以下内容，表示跨域调用成功

callback:This is the jsonp data on crossdomain request

JSONP简单入门介绍相关推荐

eve模拟器华为镜像_EVE-NG简单入门介绍
此篇文章简单的介绍下模拟器EVE-NG的使用,具体包括Dynamips设备导入与运行,IOL设备的导入与运行,QEMU设备的导入与运行,客户端软件的安装,物理网络与虚拟网络的结合等. 一．导入镜像 D ...
linux 运行eve,EVE-NG简单入门介绍
此篇文章简单的介绍下模拟器EVE-NG的使用,具体包括Dynamips设备导入与运行,IOL设备的导入与运行,QEMU设备的导入与运行,客户端软件的安装,物理网络与虚拟网络的结合等. 导入镜像 Dyn ...
EVE-NG简单入门介绍
此篇文章简单的介绍下模拟器 EVE-NG 的使用,具体包括 Dynamips 设备导入与运行, IOL 设备的导入与运行, QEMU 设备的导入与运行,客户端软件的安装,物理网络与虚拟网络的结合等. ...
Python环境搭建以及简单入门介绍
Python简介 Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. 现在,全世界差不多有600多种编程 ...
shiro简单入门介绍
shiro是apache的一个java安全框架可以完成认证,授权,加密,会话管理,基于web继承,缓存等功能简介: 从外部来看: shiro架构 Subject:主体,代表了当前"用户 ...
duilib环境配置以及简单入门介绍
内容全部为转载: VS2013的编译,https://www.cnblogs.com/Alberl/p/3342030.html duilib框架介绍,以及VS2013配置,创建工程,调试代码部分: ...
DirectX12 简单入门（一）
在很久以前写过关于DirectX9的一些应用,直到现在DirectX12已经普及了.写完几个DirectX12测试代码之后,写一篇DirectX12简单入门介绍一下基本概念,以及环境搭建和编程过程. ...
网站设计之Flash简单动画入门介绍（一）字体闪烁及渐显
在制作网站过程中,增加些动画效果是非常美妙的一件事.由于最近在当Flash和PS课程的助教,也辅导学生完成PS.Flash.HTML等操作,所以这篇文章主要是对Flash动画的入门介绍,希望对你有所帮 ...
分布式锁简单入门以及三种实现方式介绍(滴滴)
很多小伙伴在学习Java的时候,总是感觉Java多线程在实际的业务中很少使用,以至于不会花太多的时间去学习,技术债不断累积!等到了一定程度的时候对于与Java多线程相关的东西就很难理解,今天需要探讨的 ...

JSONP简单入门介绍

一、什么是JSONP？

二、生产的背景

三、使用

四、Talk is cheap, Show me the code!

服务器端程序代码 jsonp.php （在B机器）

客户端HTML代码：jsonptest.html（在A机器上）

打开浏览器A服务器上的jsonptest.html 可能看到结果

Ajax跨域请求：

还是用刚才的服务器端程序，我们修改一下客户HTML中的JS代码，发起一个请求

点击页面的json data，成功在页面打印以下内容，表示跨域调用成功

JSONP简单入门介绍相关推荐

最新文章

热门文章