关于跨域$.ajax调用jsonp接口的用法——两个属性jsonp的作用-调整等号左侧的参数名称-用于配合后台获取回调函数名称 & jsonpCallback的作用-调整回调函数的名称

于 2020-12-21 00:25:13 发布
阅读量799 收藏 1
点赞数
分类专栏： 工具 jQuery 文章标签： ajax nodejs jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/111465582
版权

关于跨域$.ajax调用jsonp接口的用法——两个属性:jsonp的作用-调整等号左侧的参数名称-用于配合后台获取回调函数名称 & jsonpCallback的作用-调整回调函数的名称

操作流程-制作跨域

demo文件目录如下：

在这里插入图片描述

在BootCDN官网：https://www.bootcdn.cn/点击jquery，进入https://www.bootcdn.cn/jquery/

复制

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

在publice/01.html中进行引入

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>Promise</div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    /*
    jsonp的原理
  */
    $.ajax({
      url: 'http://localhost:3000/data',
      dataType: 'jsonp',
      success: (res) => {
        console.log(res)
      }
    })
  </script>
</body>

</html>

index.js文件如下：

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  res.json(info)
})

app.listen(3000, () => {
  console.log('running...')
})

在文件夹myapi里打开命令行窗口，进行启动

node index.js

直接打开页面01.html

在这里插入图片描述

可知，请求的是localhost,http协议格式

打开的网址是file协议，存在跨域

在这里插入图片描述

跨域测试-端口号不同

为方便测试，采用域名方式，进行跨域测试

index.js文件同层级新建文件server.js,端口号3000改为3001

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  res.json(info)
})

app.listen(3001, () => {
  console.log('running...')
})

此时，进行操作，在myapi文件夹里启动两次后台

node index.js

和

node server.js

页面本身是3000的端口

都是http协议，不存在跨域

在这里插入图片描述

在01.html中进行修改，刷新页面

 url: 'http://localhost:3001/data',

显示

在这里插入图片描述

跨域，也能请求到数据

在这里插入图片描述

跨域时，后台服务器有数据。前端请求不到，会报错

在这里插入图片描述

后台接口数据格式，改为json格式

在server.js中

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  // res.json(info)
  let cbName = req.query.cb
  res.send(cbName + '({uname:"lisi"})')
})

app.listen(3001, () => {
  console.log('running...')
})

修改js文件，需要重新启动服务器

在myapi中,打开命令行

node server.js

打开01.html可以查看控制台数据

在这里插入图片描述

jsonp请求的地址返回的结果（接口数据）是什么？函数调用

在这里插入图片描述

解读-函数调用、jsonp、jsonpCallback

jQuery34106418822045754662_1571285589343——函数名

后面加括号，是函数调用——函数名+括号，括号里面是实参

http://localhost:3001/data?

callback=jQuery34106418822045754662_1571285589343

&_=1571285589344

data后，第一个参数，是定义回调函数的名字

第二个参数，参数名是下划线，值是时间戳，就是当前时间对应的毫秒数；作用是：防止缓存

即：每次请求的地址不一样，不会存在缓存

涉及跨域相关的是第一个参数-callback，右侧的值是随机生成的

第一个参数的callback名字是可以进行修改的，jsonp属性，可以进行修改

在server.js中

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  // res.json(info)
  // JSONP服务器端处理流程：获取客户端传递过来的回调函数的名称
  let cbName = req.query.cb
  // jQuery34102881906949019737_1571286187637({"username":"lisi","age":12})
  res.send(cbName + '({uname:"lisi"})')
})

app.listen(3001, () => {
  console.log('running...')
})

如果想拿到数据{uname:"lisi"}，必须传参数cb

在01.html中进行配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>Promise</div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    /*
    jsonp的原理
  */
    $.ajax({
      url: 'http://localhost:3000/data',
        //配置参数名：cb
      jsonp: 'cb',
      dataType: 'jsonp',
      success: (res) => {
        console.log(res)
      }
    })
  </script>
</body>

</html>

验证，参数配置成功

在这里插入图片描述

拿到的结果是一样的，配置参数名不改值

在这里插入图片描述

jQuery34102881906949019737_1571286187637回调函数名，也可以进行修改-jsonpCallback属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>Promise</div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    /*
    jsonp的原理
  */
    $.ajax({
      url: 'http://localhost:3000/data',
        //配置参数名：cb
        // jsonp的作用：调整等号左侧的参数名称，用于配合后台获取回调函数名称
+      jsonp: 'cb',
       //配置回调函数名：hello
        // jsonpCallback的作用：调整回调函数的名称
+       jsonpCallback: 'hello',
      dataType: 'jsonp',
      success: (res) => {
        console.log(res)
      }
    })
  </script>
</body>

</html>

配置回调函数名称

在这里插入图片描述

验证

在这里插入图片描述

1、jsonp的作用：调整等号左侧的参数名称，用于配合后台获取回调函数名称

2、 jsonpCallback的作用：调整回调函数的名称

没有配置 jsonpCallback时，显示-默认生成的名称

在这里插入图片描述

百度demo

百度官网主页搜索输入时，也是jQuery形式，用的jsonp解决跨域

在这里插入图片描述

复制过来，进行解读-函数调用

jQuery110202683425172569138_1608477947219(
{"q":"ja","p":false,"g":[{"type":"sug","sa":"s_1","q":"japonensisJAVA"},{"type":"sug","sa":"s_2","q":"japonensis18一22"},{"type":"sug","sa":"s_3","q":"java"},{"type":"sug","sa":"s_4","q":"java是什么"},{"type":"sug","sa":"s_5","q":"jacket"},{"type":"sug","sa":"s_6","q":"晶澳"},{"type":"sug","sa":"s_7","q":"jackeylove"},{"type":"sug","sa":"s_8","q":"jam是啥意思"},{"type":"sug","sa":"s_9","q":"january"},{"type":"sug","sa":"s_10","q":"jan是几月"}],"slid":"4634918677554883297","queryid":"0x789fafa7b6ae1"}
)

验证返回的url地址

在这里插入图片描述

复制过来，进行解读

https://www.baidu.com/sugrec?pre=1&p=3
&ie=utf-8
&json=1
&prod=pc
&from=pc_web
&wd=ja
&req=2
&csor=2
&pwd=j
&cb=jQuery110202683425172569138_1608477947219
&_=1608477947221

其中就有关键参数 cb 和 _

$.ajax中关于跨域jsonp接口调用的相关两个属性的含义 用法
服务端（js文件）：

JSONP服务器端处理流程：获取客户端传递过来的回调函数的名称cbName

得到名称之后，最终返回的是函数调用，进行拼接字符串

res.send(cbName + '({uname:"lisi"})')

等同于

res.send(cbName + '('+ JSON.stringify(info) +')')

验证info对象，把对象转为字符串，作为实参，传递给回调函数；

在这里插入图片描述

在前端console就可以拿到这个值

在这里插入图片描述

自此，前后端对接成功

jsonp接口注意：服务端返回到客户端的是函数调用

客户端（html文件）：

两个参数：jsonp 和 jsonpCallback

   // jsonp的作用：调整等号左侧的参数名称，用于配合后台获取回调函数名称
   jsonp: 'cb',
   // jsonpCallback的作用：调整回调函数的名称
  jsonpCallback: 'hello',
附：最终完整代码

1、publice/01.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div>Promise</div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    /*
    jsonp的原理

    jsonp请求的地址返回的结果是什么？函数调用
    jQuery34106418822045754662_1571285589343({uname:"lisi"})

    http://localhost:3001/data?
    callback=jQuery34106418822045754662_1571285589343
    &_=1571285589344

    1571285589344,该时间戳作用，防止缓存
  */
    $.ajax({
      url: 'http://localhost:3001/data',
      // jsonp的作用：调整等号左侧的参数名称，用于配合后台获取回调函数名称
      jsonp: 'cb',
      // jsonpCallback的作用：调整回调函数的名称
      // jsonpCallback: 'hello',
      dataType: 'jsonp',
      success: (res) => {
        console.log(res)
      }
    })
  </script>
</body>

</html>

2、index.js

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  res.json(info)
})

app.listen(3000, () => {
  console.log('running...')
})

3、server.js

const express = require('express');
const app = express();

// 启动静态资源服务
app.use(express.static('public'))

app.get('/data', (req, res) => {
  let info = {
    username: 'lisi',
    age: 12
  }
  // res.send('Hello World')
  // res.json(info)
  // JSONP服务器端处理流程：获取客户端传递过来的回调函数的名称
  let cbName = req.query.cb
  // jQuery34102881906949019737_1571286187637({"username":"lisi","age":12})
  res.send(cbName + '('+ JSON.stringify(info) +')')
})

app.listen(3001, () => {
  console.log('running...')
})
viceen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值