概念：浏览器通过<script>标签的src属性，请求服务器上的数据，同时服务器返回一个函数的调用。这种请求数据的方式叫JSONP
特点：JSONP不属于真正的的Ajax请求，因为它没有使用XMLHttpRequest这个对象
JSONP仅支持GET请求，不支持POST、PUT、DELETE等请求
创建JSONP接口的注意事项
如果项目中已经配置了CORS跨域资源共享，为防止冲突，必须在配置CORS中间件之前声明JSONP的接口，否则JSONP接口会被处理成开启了CORS的接口
app.get('/api/jsonp',(req,res)=>{//定义JSONP的接口函数})
//解决接口跨域问题
const cors=require('cors')
app.use(cors())JSONP接口实现的步骤
- 获取客户端发送过来的回调函数的名字（通过script标签）req.query.callback获取客户端的函数名字
- 得到通过JSONP形式发送给客户端的数据，定义发送给客户端的数据（发送的对象）
- 根据前两步得到的数据，拼接出一个函数调用的字符串JSON.stringify，转成json格式字符串
- 把上一步得到的字符串，响应给客户端的<script>标签进行解析
app.get('/api/jsonp',(req,res)=>{//定义JSONP的接口函数//1、得到函数的名称const funcName=req.query.callback//2、定义发送给客户端的数据const data ={name:'zs',age:56}//3、拼接出函数的调用 转成json格式字符串const scriptStr=`${funcName}(${JSON.stringify(data)})`//4、把拼接的字符串相应给客户端res.send(scriptStr)})在网页中使用jquery发起JSONP请求
调用$.ajax()函数，提供的JSONP配置选项，从而发起 JSONP请求，
路由api模块
//导入express
const express=require('express')
//创建路由对象
const Router=express.Router()
//定义get接口
Router.get('/get',(req,res)=>{//通过req.query获取客户端通过查询字符串获取发送到服务器的数据const query=req.query //get请求使用req.query post请求使用req.bodyres.send(//服务器的响应{status:0,//0表示处理成功 1表示处理失败msg:'GET 请求成功！',//状态的描述data:query //响应给客户端的数据})
})
//定义post接口
Router.post('/post',(req,res)=>{//通过req.query获取客户端通过查询字符串获取发送到服务器的数据const body=req.body //get请求使用req.query post请求使用req.bodyres.send(//服务器的响应{status:0,//0表示处理成功 1表示处理失败msg:'POST 请求成功！',//状态的描述data:body //响应给客户端的数据})
})
//定义delete接口
Router.delete('/delete',(req,res)=>{res.send(//服务器的响应{status:0,//0表示处理成功 1表示处理失败msg:'DELETE 请求成功！',//状态的描述})
})
//向外导出路由
module.exports=Router//之前={对象 对象里面是属性 可以做一个省略}express接口模块
const express=require('express')
//创建服务器
const app=express()
//配置解析表单数据的中间件app.use(express.urlencoded({extended:false}))app.get('/api/jsonp',(req,res)=>{//定义JSONP的接口函数//1、得到函数的名称const funcName=req.query.callback//2、定义发送给客户端的数据const data ={name:'zs',age:56}//3、拼接出函数的调用 转成json格式字符串const scriptStr=`${funcName}(${JSON.stringify(data)})`//4、把拼接的字符串相应给客户端res.send(scriptStr)})
//解决接口跨域问题
const cors=require('cors')
app.use(cors())
//导入路由模块
const router=require('./api路由模块')
//把路由模块注册到app上 ——app.use作用注册全局中间件
app.use('/api',router)//请求到达服务器 需要进行中间件的处理--挨个进行路由的匹配_统一前缀app.listen(80,()=>{console.log('express服务器启动成功 127.0.0.1')
})<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
</head>
<body><button id="get">GET</button><button id="post">POST</button><button id="delete">DELETE</button><button id="jsonp">JSONP</button><script>$(document).ready(function(){//1.测试GET接口$('#get').on('click',function(){$.ajax({type:'GET',//规定请求的类型（GET 或 POST）。url:'http://127.0.0.1/api/get',//规定发送请求的 URLdata:{name:'zs',age:20},//规定要发送到服务器的数据。success:function(res){console.log(res)},})})//2.测试POST接口$('#post').on('click',function(){$.ajax({type:'POST',url:'http://127.0.0.1/api/post',data:{name:'白居易',age:80},success:function(res){console.log(res)},})})//为删除按钮绑定点击事件处理函数$('#delete').on('click',function(){$.ajax({type:'DELETE',//在服务器端提供此接口的函数url:'http://127.0.0.1/api/delete',success:function(res){console.log(res)//服务器响应的数据},})})//为JSONP按钮点击事件处理函数$('#jsonp').on('click',function(){$.ajax({type:'GET',//在服务器端提供此接口的函数url:'http://127.0.0.1/api/jsonp',dataType:'jsonp',//指定请求的类型 jsonp的特殊格式success:function(res){console.log(res)//服务器响应的数据},})})})</script>
</body>
</html>
