创建 JSONP 接口

本文介绍了JSONP的实现原理,通过创建一个Node.js服务器端JSONP接口,并在网页中使用jQuery发起JSONP请求进行数据获取。在实现过程中,需要注意避免与CORS跨域设置冲突,以及正确拼接并返回函数调用字符串。
摘要由CSDN通过智能技术生成

1.JSONP的实现原理。

浏览器通过<script>标签的src属性,请求服务器的数据,同时,服务器返回一个函数的调用。

特点:

  • JSONP 不属于真正的 Ajax 请求,因为它没有使用 XMLHttpRequest 这个对象
  • JSONP 仅支持 GET 请求,不支持 POSTPUTDELETE 等请求

 2.创建JSONP接口。

注意事项:

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

1.准备工作:

  • 创建一个app.js文件   一个api文件夹 ,api文件夹下创建一个apiRouter.js文件,创建一个index.html文件
  • 运行npm i express ,安装express模块   
  • 运行npm i cprs 命令,安装 mysql 模块

2.实现步骤分析:

  • 获取客户端发送过来的回调函数的名字
  • 得到要通过 JSONP 形式发送给客户端的数据
  • 根据前两步得到的数据,拼接出一个函数调用的字符串
  • 把上一步拼接得到的字符串,响应给客户端的 <script>
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值