0x01 前言
今天复习了一下有关jsonp相关的攻防知识，突然发现自己对于jsonp的理解只是在书本上的那种，对于其具体的实现还是一知半解的，因此写篇文章记录一下jsonp的实现过程，会附上具体代码滴～
0x02 JSONP的概念
那么什么是JSONP呢，在理解JSONP之前，我们需要知道的是什么是JSON，有过一些web基础的小伙伴一定都听说过这个单词了，JSON是如今用来传输文本的一种很流行的格式，其格式类似这样：
{
"id" : "1",
"name" : "pino"
}
而JSONP的话，用一张图片就比较形象的解释了
就是这样喽，多出来了一个单词和一对括号。那么JSONP用来做什么呢？通常来说，是用来跨域的，我们都知道，浏览器是存在一个叫做同源策略的东东，不同源的两个站点理论上是无法进行网络通信的，但是有的时候我们还是需要进行不同源的站点通信，那么就用到了JSONP来进行跨域通信啦。
0x03 JSONP跨域通信的实现
JSONP的跨域实现有很多种方式，这里我给大家展示的是两种类型的方式，javascript和jquery，而jquery又有三种方法。
服务端
尽管有很多种方式，但是这里服务端的代码是一成不变的，这里我在自己的公网服务器上创建了一个jsonp.php的文件
<?php
$arr = array('id'=>1, 'name'=>'pino','location'=>'china');
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>
并且修改自己电脑中的hosts文件，把公网ip对应一个域名，这里我起名为pino.my.com
3.1 前端——Javascript代码
<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<meta content="text/html; charset=urf-8" http-equiv="Content-Type">
<script type="text/javascript">
function jsonpCallback(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
}
</script>
<script src="http://pino.my.com/jsonp.php?callback=jsonpCallback"></script>
</head>
</html>
需要注意的是，function一定要定义在请求之前，否则会出现未定义的错误
这里我们访问http://localhost:8080/jsonp.html，这个网页中有一个跨域请求，请求pino.my.com的资源，通过callback的方式完成请求
script标签src访问
成功获取服务端资源！
前端——JQuery之getJSON方法
getJSON方法的用法如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://pino.my.com/jsonp.php",
dataType:"jsonp",
data:"",
jsonp:"callback",
success:function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
timeout:3000
});
});
</script>
</body>
</html>
getJSONP方法访问
访问后同样成功获取资源
前端——JQuery之ajax方法
代码
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery ajax</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://pino.my.com/jsonp.php",
dataType:"jsonp",
data:"",
jsonp:"callback",
success:function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
timeout:3000
});
});
</script>
</body>
</html>
这里的url是直接http://pino.my.com/jsonp.php，没有?callback，这是应为ajax方法的回调是直接放在success选项中了，因此需要在success选项中定义一个回调函数function
访问一下：
ajax方法访问
前端——JQuery之get方法
<!DOCTYPE html>
<html>
<head>
<title>jsonp with jquery get</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.get("http://pino.my.com/jsonp.php?callback=?",
function(result){
for(var i in result){
document.write(i+":"+result[i]+"<br />");
}
},
'jsonp'
);
});
</script>
</body>
</html>
get方法访问
get方法需要写的东西跟getJSNON很像，但是一定别忘记最后还有一个jsonp的选项，否则会出错的。
网友评论