Jsonp实现原理-使用jQuery也可以访问的node.js接口_jquery里面调用node.js的接口-CSDN博客

本文链接：https://blog.csdn.net/weixin_43256428/article/details/97296132

Jsonp实现原理

前端html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jsonp</title>
</head>
<body>
  <script>
       function test(oo) {
      console.log(oo);
    }
  </script>
  <script src="http://localhost:8899/kf?callback=test"></script>  // callback 前端传过去的一个参数带着一个函数
</body>
</html>

后端node.js

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

app.use((req, res, next) => {
req._callback = req.query.callback // 用中间件传递回调函数名称,否则jQ测试时拿不到名称
next()
})
app.get(’/kf’, (req, res) => {
let obj = {
name: ‘jack’,
age: 16,
gender: ‘男’
}
obj = JSON.stringify(obj)
let ttest = req._callback
res.send(${ttest}(${obj}))
})
app.listen(8899, () => {
console.log(‘8899 success’);
})

控制台打印结果
在这里插入图片描述

跨域问题

浏览器使用 ajax时，如果请求了的接口地址和当前打开的页面地址不同源称之为跨域

script标签请求不是跨域,发get请求携带参数callback=test, test是我们前端定义的一个函数名
let ttest = req.query.callback // callback 前端传过来的一个参数带着一个函数
res.send( ${ttest}($ {obj}))
返回的结果相当于调用test(),所以控制台输出了那个对象.实现数据传递.

jquery使用dataType:'jsonp’一句话来完成跨域

原理也是一样的, 自动的会创建一个script标签,向接口发送请求,获取到接口的数据

使用jsonp来解决跨域,前提是后端接口要支持jsonp

jsonp其实和ajax没有关系的.

简单的封装

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jsonp</title>
</head>

<body>
  <button id="btn1">点击按钮测试</button>
  <script>
    // function test(data) {
    //   // 打印后台来的数据  ,data是形参,就是拿到的数据,可以随意处理啦
    //   console.log(data)
    //   // 删除动态添加的script标签,此处的id应该随机生成
    //   document.getElementById('temp').parentNode.removeChild(document.getElementById('temp'))
    // }
    // document.getElementById('btn1').onclick = function () {
    //   // 封装函数
    //   let url = 'http://localhost:8899/kf'
    //   let scUrl = 'http://localhost:8899/kf' + '?callback=test'
    //   let script = document.createElement('script')
    //   /* 设置script的src属性 */
    //   script.src = scUrl
    //   script.id = "temp"
    //   /* 动态添加一个script标签 */
    //   document.body.appendChild(script)
    // }


    document.getElementById('btn1').onclick = function () {
      my$ajax('http://localhost:8899/kf')
    }

    /* 定义个一个随机ID */
    let temp = Date.now()
    /* 声明一个接收后台数据的处理函数 */
    function tempFnName(data) {
      // 打印后台来的数据  ,data是形参,就是拿到的数据,可以随意处理啦
      console.log(data)
      // 删除动态添加的script标签,此处的id应该随机生成
      document.getElementById(temp).parentNode.removeChild(document.getElementById(temp))
    }
    function my$ajax(url) {
      // 拼接一个带有回调函数名为 temp的请求地址
      let scSrc = url + '?callback=tempFnName'
      let scriptObj = document.createElement('script')
      /* 设置script的src属性 */
      scriptObj.src = scSrc
      scriptObj.id = temp
      /* 动态添加一个script标签 */
      document.body.appendChild(scriptObj)
    }

  </script>
</body>

</html>