一文看懂JSONP原理和应用
作者:云中的鱼 发布时间:2024-04-23 09:10:47
什么是JSONP
首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。
那么JSONP是什么呢?
首先抛出浏览器同源策略这个概念,为了保证用户访问的安全,现代浏览器使用了同源策略,即不允许访问非同源的页面,详细的概念大家可以自行百度。这里大家只要知道,在ajax中,不允许请求非同源的URL就可以了,比如www.a.com下的一个页面,其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
JSONP就是用来解决跨域请求问题的,那么具体是怎么实现的呢?
JSONP原理
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
JSONP具体实现
1.ajax中如果进行跨域请求会如何
前端代码在域www.practice.com下面,使用ajax发送了一个跨域的get请求
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www.practice-zhao.com/student.php?id=1",
type: "json",
success : function(data) {
jsonhandle(data);
}
});
});
</script>
</body>
</html>
后端PHP代码放在域www.practice-zhao.com下,简单的输出一段json格式的数据
jsonhandle({
"age" : 15,
"name": "John",
当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报以下错误
提示了不同源的URL禁止访问
2.使用JSONP,将前端代码中的ajax请求去掉
添加了一个script标签,标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>
这里调用了跨域的remote.js脚本,remote.js代码如下:
jsonhandle({
"age" : 15,
"name": "John",
})
也就是这段远程的js代码执行了上面定义的函数,弹出了提示框
3.将前端代码再进行修改
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>
这里动态的添加了一个script标签,src指向跨域的一个php脚本,并且将上面的js函数名作为callback参数传入,那么我们看下PHP代码怎么写的:
<?php
$data = array(
'age' => 20,
'name' => '张三',
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;
PHP代码返回了一段JS语句,即
jsonhandle({
"age" : 15,
"name": "张三",
})
此时访问页面时,动态添加了一个script标签,src指向PHP脚本,执行返回的JS代码,成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为传入参数的函数执行代码。
4.最后jQuery提供了方便使用JSONP的方式
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www.practice-zhao.com/student.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
</script>
</body>
</html>
来源:https://blog.csdn.net/u011897301/article/details/52679486
猜你喜欢
- 图片外框特征参数: ①dashed:虚线②dotted:点虚线③solid:实线④double:双线⑤groove:沟
- 在Linux、Windows、Mac OS的命令行窗口或Shell窗口,执行python命令,启动Python交互式解释器。交互式解释器会等
- 看到Django和layim实现websocketde资料很少,自己就琢磨了下,顺便搭建出来了。自己要去找闲心大神授权呀。先来看图这是初次搭
- 本文代码将一些简单常用的SQL语句,拆分、封装成链式函数与终结函数,链式操作没有先后之分,实现傻瓜式mysql数据库操作。 同时学习下静态成
- 知识点: 函数 replicate 以下代码是实现如下功能: 代码如下:declare @sql varchar(200), --需填充的字
- 什么叫模板继承呢在我的理解就是:在前端页面中肯定有很多页面中有很多相同的地方,比如页面顶部的导航栏,底部的页脚等部分,这时候如果每一个页面都
- 阅读上一篇:垂直栅格与渐进式行距(上) 新问题来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了
- 注释标注解释,目的是帮助读者理解的文本也就是说,注释首先是文本,其二是说明,其三是思路,其四是例子注释有两种形式1. # ... 单行注释用
- 1、引言小 * 丝:鱼哥,最近有点不像话了。小鱼:嗯?? 啥个意思嘛~小 * 丝:一周了,没分享小知识了。小鱼:就因为这个??小 * 丝:那是,我这么爱
- Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid、Canvas、Rectangle、TextBloc
- 思维导图 点击图片,可查看大图。介绍 情况:如果你的表结构设计不良或你的索引设计不佳,那么请你优化你的表结构设计和给予合适的索引,
- 1、利用php gd库的函数绘制3D扇形统计图<?phpheader("content-type","t
- 什么是GBFF文件GenBank纯文本文件格式(GenBank flatfile, 简称GBFF)GBFF是GenBank数据库的基本信息单
- 算法11、分小数和整数:如果小数点个数为1,则可能是小数。如小数点个数为0,则可能是整数。小数点个数非0也非1,那么就不是数字。2、如果是小
- 神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框
- 1、引言小 * 丝:鱼哥,这个周末过得咋样小鱼:酸爽~ ~小 * 丝:额~~ 我能想到的,是这样吗?小鱼:有多远你走多远。小 * 丝:唉,鱼哥,你别说,
- 从XML中读取数据到内存的实例: public clsSi
- 1.python安装包下载路径:https://www.python.org/downloads/2我下载安装包路径:https://www
- 这个可能是容易被忽略的问题,首选我们要清楚:MySQL中,AND的执行优先级高于OR。也就是说,在没有小括号()的限制下,总是优先执行AND
- 整个数据获取的信息是通过房源平台获取的,通过下载网页元素并进行数据提取分析完成整个过程导入相关的网页下载、数据解析、数据处理库from fa