前端与后台交互之jsonp

作者原文

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跨域和CORS跨域的区别


下一篇:javascript-jQuery UI令牌