代码改变世界

jsonp的使用

2019-12-26 22:22  lfl976  阅读(213)  评论(0)    收藏  举报

看见高德地图使用异步加载方式是jsonp。来试一试jsonp

1.用express启动一个服务

// server.js 
// node server.js 启动服务
const express = require('express')

const app = express()

app.listen(7879, () => console.log('app is listen on port 7879'))

app.get('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', '*') // 跨域
    res.send('init')
})

 2.fetch请求接口

这时不设置res.set('Access-Control-Allow-Origin', '*') ，浏览器会提示跨域错误

设置之后打印 ‘init’

// jsonp.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    fetch('http://localhost:7879/')
    .then(res =>{
        return res.text()
    })
    .then(res => {
        console.log(res)  // 打印init
    })
    </script>
</body>
</html>

3.用<script src="http://localhost:7879"></script>脚本方式请求

请求后浏览器提示

 

 

 

返回的init直接运行了。

在请求脚本之前定义一个init的变量就不会报错了，如果返回 init() 呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
　　 <script>
　　//  script是从上到下顺序执行的，所以变量定义在前面
　　　　var init = 1
　　</script>
    <script src="http://localhost:7879"></script>
</head>
<body>
  // <script>
　//　　init
　//　</script>
</body>
</html>

4.返回init()时

const express = require('express')

const app = express()

app.listen(7879, () => console.log('app is listen on port 7879'))

app.get('/', (req, res) => {
    // res.set('Access-Control-Allow-Origin', '*')
    res.send('init()')
})

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function init() {
            console.log('init执行')
        }
    </script>
    <script src="http://localhost:7879"></script> // img，script请求都没有跨域的问题
</head>
<body>
    
</body>
</html>

打开html页面，浏览器打印了：

 

后台返回init()，直接执行了。

我们也可以在返回init()时添加参数，比如init('params')，这样前端可以拿到数据。

也可以把需要调用的函数名传递给后台。

 

总结：jsonp没有跨域限制，可以得到后台数据（通过传参）。