jsonp 的原理及应用

1. 什么是jsonp

jsonp全称json with padding,填充式的json,jsonp是为跨域而生的

2. 那么有哪些标签可以跨域呢

<img src=""> //图片
<link href=""> //css
<script src=""> //程序

我们可以使用script来帮助我们跨域

2.1 写一个服务端

server.js

//服务端
//引入支持接受请求,返回响应的模块http
const http=require("http");
//创建服务端程序实例
http.createServer(
//每当有客户端发来请求时
//自动调用一下回调函数
	(req,res)=>{
	    var weather = "北京 晴 18-20";
	    res.writeHead(200,{
			"Content-Type":"text/plain;charset=utf-8"
		});
	    //res.write(weather);
	    res.write(`alert("${weather}")`);
	    res.end();
	}
).listen(80);

测试一下
在这里插入图片描述

2.2 写一个客户端

注意客户端不要用服务端的ip,可以在本地写一个,或者另找一台服务器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP</title>
</head>
<body>
<div id="divCustomers"></div>
<script src="http://47.xxx.xxx.xx/">
</body>
</html>

2.3 测试

在这里插入图片描述
访问一下客户端,可以看到他发起的请求,并且也成功弹窗了
在这里插入图片描述

2.4 小总结

可以看到,在这个例子中,要返回的实际数据【天气】,被填充到一条合法的js语句中【alert(天气)】,然后被客户端js引擎执行。钻一下牛角尖,现在是data with padding,因为我们还没用到json。
仔细一点,我们会发现,目前的服务端是死的【只能alert】,当我们有多个客户端而带来不同的需求后【你要alert,他要document.write。。。】,目前的服务端代码应付不了

3. 改进【方案二】

所以,我们可以让服务端就产生数据,而不用写什么乱七八糟的js,我们在客户端写自己的函数,那么怎么写呢?
在这里插入图片描述
可以看到,在服务端,我就把alert换成了show,而在客户端,我们可以自定义show函数的内容,每次客户端去请求,求回来的是一段show("内容") 的脚本,然后这个脚本被执行,调用我们自己定义好的show函数,实现了一个服务端,多种客户端的需求

4. 改进【方案三,故事的主人公】

怎么还要改进?因为方案二依旧在服务端写死了show函数,我们做个小小的改进,在客户端传个参数进去,在服务端对参数进行解析后,和数据拼接在一起
在这里插入图片描述

在这里插入图片描述

5. 我要看jsonp

之前的几个例子还没用到json,其实这个不过是一个数据格式而已,原理上都是一样的
server.js

//服务端
//引入支持接受请求,返回响应的模块http
const http=require("http");
const url=require("url");
//创建服务端程序实例
http.createServer(
//每当有客户端发来请求时
//自动调用一下回调函数
	(req,res)=>{
		var mycallback = url.parse(req.url,true).query.mycallback;
	    var weather = {
			"location":"Beijing",
			"weather":"sun",
            "temprature":"18-20"
		};
		weather = JSON.stringify(weather);
	    res.writeHead(200,{
			"Content-Type":"application/json;charset=utf-8"
		});
	    res.write(`${mycallback}(${weather})`);
	    res.end();
	}
).listen(80);

test.html

<!DOCTYPE html>
<!-- 客户端-->
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP</title>
</head>
<body>
<div id="divCustomers"></div>
<script>
	function show(weather){
		alert(weather.location);
    }
</script>
<script src="http://47.116.97.185/?mycallback=show">
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

6. jquery 使用jsonp

jquery 简化了我们的使用方式,让本来无法跨域的ajax也可以跨域了
在这里插入图片描述

7. jsonp在红蓝对抗中的使用场景 蜜罐、钓鱼页面

我们可以去各大社交网站上找一些jsonp的接口 目前我的办法是点点点,然后network里看一下有没有jsonp的东西 如下图,我在优酷里找了一些 但这个接口限制了ip 我用自己的服务器请求不到
在这里插入图片描述
总之 如果够细心 可以找到这些社交网站上的一些接口,并为你所用,从而实现一访问就被抓到一些社交id的功能。

  • 13
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值