最原生的jsonp请求

废话不多直接上代码，关键点都在注释中。

1、前端的html代码

注意观看sctipt标签路径的样子

//前端代码




    
    



    
    
    

2、后端我是用express写了一个简单的接口

//后端express代码
var express = require("express")
var app = express()

// app.all('*', function (req, res, next) {
//     //设置跨域
//     res.header("Access-Control-Allow-Origin", "*");
//     next();//不能省略
// })
app.get('/api', function (req, res) {
    var data={
        name: "王八",
        age: 100
    }
    //返回的类型必须设置为javascript
    res.type('text/javascript')
    //前端路由中的参数获取，req.query。
    console.log("query",req.query);
    //这里的callback是前端定义的，req.query.callback是前端的函数名
    //这里相当于将返回的数据放到函数的参数中，包裹成一个正常的函数，然后返回给前台
    //这里的数据必须转化为字符串，否则传入一个对象浏览器无法解析
    res.send(req.query.callback+'(' +JSON.stringify(data)+')')
})
app.listen(3000)
console.log("listen the port 3000");

记住最重要的一点，jsonp请求返回给前端的是一个可执行的js函数。

这是最最简单的jsonp请求，其实jquery已经封装好了一套ajax的jsonp方法，需要的伙伴可以查看官方文档。

如需查看原生的jsop封装，请查看我另一篇文章https://blog.csdn.net/weixin_38888773/article/details/81974348