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/jquery@3.4.1/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;

前端与后台交互之jsonp

1、首先要明确jsonp的原理：

2、使用jsonp的有点是什么？

主要是使用jsonp是不受域的限制的，也就是说不需要像ajax请求数据一样需要解决跨域问题。

3、这样的话，使用jsonp又有什么不好的地方呢？

1、使用jsonp的话，需要向后端调节配合，需要后端发送什么样的数据类型。

2、使用jsonp的话，只能解决以get方式发送的请求，无法解决以post方式发送的请求

4、下面是代码示例

好了，大概整个过程就是这样滴啦。幸福大概就是你喜欢粘着的那个人。。。

相关文章