版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、首先要明确jsonp的原理：
jsonp的原理是利用了前端页面中可以送请求的标签属性，如a标签的href属性、img的src属性、iframe中的src属性、script中的src属性等等，使用可以发送请求的属性向后端发送数据请求。除此之外，能够在前后端交互的还有：fetch、ajax、websocket、axios等。
2、使用jsonp的有点是什么？
主要是使用jsonp是不受域的限制的，也就是说不需要像ajax请求数据一样需要解决跨域问题。
3、这样的话，使用jsonp又有什么不好的地方呢？
1、使用jsonp的话，需要向后端调节配合，需要后端发送什么样的数据类型。
2、使用jsonp的话，只能解决以get方式发送的请求，无法解决以post方式发送的请求
4、下面是代码示例
- html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jsonp发送网络请求，原理解析</title>
<!-- jsonp是利用了script中的src属性来向后端发送网络请求的，并且获取数据的 -->
<!-- 做法第一步：当我们需要需求的时候，即当点击发送网络请求时，在html文档中会创建一个script标签 -->
</head>
<body>
<p class="inp">
<input type="button" value="点我发送请求" id="clickMe">
</p>
</body>
</html>
- js部分的,利用script中的src属性来发送get请求 和 请求参数
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.js"></script>
<script>
//1、首先我事先定义好一个函数，主要是用来处理执行返回过来的
// fn({"error_code":0,"reason":"数据返回成功","result":[]})
//因为看返回来的数据，在js语境中，我们都知道这是一个函数执行的形式，如果没有定义它的话
// 就会出现fn is not defined的语法错误
function fn(data){
//最后我们就可以获取数据了
console.log(data.result);
}
$("#clickMe").click(function(){
//2、为了能够获取到后端返回的数据，需要我们指定一个容器放好，并且需要把容器名称作为键值对的形式传到后台去
var url = 'http://localhost:3000/users?callback=fn';
//创建节点
var script = document.createElement('script');
//添加url地址
script.src = url;
//追加到body的后面
$("body").append(script);
});
</script>
- 下面是后端部分代码，需要用到nodejs处理方式。
-user路由
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
//3、我这里接收好前台发给我的callback容器性对应的参数
var fn = req.query.callback;
console.log(fn);
//定义好响应数据格式，以json格式
var callback = {
error_code:0,
reason:'数据返回成功',
//result里面存放的一般都是从数据库中获取的数据，现在我用假数据来模拟
result:[
{
id:1,
username:'knity',
title:'程序中一个迷途小书童',
hobby:'就喜欢粘着你',
age:18,
info:'幸福大概就是你喜欢粘着的那个人'
},
]
}
//4、响应数据，因为是字符串的拼接，所以这里需要用JSON.strigify()将json数据字符串化，再执行返回数据
res.send(fn+"("+JSON.stringify(callback)+")");
});
module.exports = router;
- 下面是app.js部分
var express = require('express');
var path = require('path');
//引入外置路由
var usersRouter = require('./routes/users');
var app = express();
//注册路由
app.use('/users', usersRouter);
//设置监听端口号
var port = 3000;
app.listen(port,()=>{
console.log('this server is running at '+port)
})
//暴露
module.exports = app;