JSONP接口

最新推荐文章于 2024-09-20 10:26:14 发布

¡Venceremo

最新推荐文章于 2024-09-20 10:26:14 发布

阅读量785

点赞数

分类专栏： Node.js 文章标签： servlet java ajax

本文链接：https://blog.csdn.net/weixin_47295886/article/details/126714369

版权

Node.js 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

概念：浏览器通过<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.body
    res.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.body
    res.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',//规定发送请求的 URL
						data:{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>