web服务器15 jsonp格式接口

概念：浏览器端通过<script>标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据

的方式叫做SONP。
特点：
①JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。
②JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求。

如果项目中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明SONP的接口。否则
JSONP接口会被处理成开启了CORS的接口。示例代码如下：

实现JSONP接▣的步骤
    1获取客户端发送过来的回调函数的名字
    2得到要通过JSONP形式发送给客户端的数据
    3根据前两步得到的数据，拼接出一个函数调用的字符串
    4把上一步拼接得到的字符串，响应给客户端的<script>标签进行解析执行

　　

const express = require('express')
const app = express()
const rou = require('./api')
const cors = require('cors')
app.get('/api/jsonp', (req, res) => {
    // TODO:定义jsonp接口的具体实现过程
    // 1得到函数的名称
    const funcName = req.query.callback
    // 2，定义要发送到客户端的对象
    const data = {
        name: 'zs',
        age: 23
    }
    // 3，拼接出一个函数的调用 把data转成json的格式
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    // 4,把拼接的字符串响应给客户端
    res.send(scriptStr)
})
// 解决跨域问题
app.use(cors())
// 配置解析application/json格式
app.use(express.json())
// 配置解析application/x-www-form-urlencoded格式
app.use(express.urlencoded({ extended: false }))

app.use('/api', rou)

app.listen(8080, () => {
    console.log('express serve running at http://127.0.0.1')
})

　　

<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>node接口测试</title>
    <meta name="vierport" content="width=device-width,initial-scale=1.0" />
</head>
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<body>
    <button id="jsonGet">json</button>
    <script>
        $(function(){
            $('#jsonGet').on('click',function(){
                $.ajax({
                    method:'GET',
                    url:'http://127.0.0.1:8080/api/jsonp',
                    dataType:'jsonp',
                    success:function(res){
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>
</html>

　　

posted @ 2022-11-03 14:19  文采呱呱  阅读(103)  评论(0)    收藏  举报