学习jsonp

时间 2020-01-25

标签学习 jsonp 栏目 JSON 繁體版

原文原文链接

jsonp

之前学过，当时就挺懵的，还全忘了，此次就当复习了一遍jsonp，😭javascript

这里是解决客户端的跨域问题，服务端去解决跨域问题比这个简单只要加一个请求头就能够了html

const express = require('express')

const app = express()

app.get('/', (req, res, next) => {
  console.log(`收到客户端请求了：${req.url}`)
  var data = JSON.stringify({
    foo: 'bar',
    list: [1, 2, 3]
  })
  setTimeout(function () {
    res.end(`${req.query.callback}(${data})`)
  }, 1000)
})

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

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

<head>
  <meta charset="UTF-8">
  <title>jsonp - 示例</title>
</head>
<body>
  <script>


    // 异步请求跨域限制（ajax）
    // 不一样域名、不一样协议、不一样端口号
    
    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(111)
      }
    })

    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(222)
      }
    })

    jsonp({
      url: 'http://127.0.0.1:3000/',
      data: '',
      success: function (data) {
        console.log(333)
      }
    })

    function jsonp(option) {
      // 将用户经过对象命名空间传递进来的函数挂载到全局
      var callbackName = 'itcast_' + Math.random().toString().substr(2) + Math.random().toString().substr(2)
      !window.callbacks && (window.callbacks = {})
      window.callbacks[callbackName] = function (data) {
        option.success(data)
        // 这里才意味着能够删除 script 标签了
        // 这里能够直接使用 script ，缘由是下面的变量提高，并且等这里使用 script 的时候，下面的代码早就执行结束了
        document.body.removeChild(script)
      }
      // 1. 解决 url 问题
      // 2. 解决回调处理函数问题
      option.url = option.url + '?callback=callbacks.' + callbackName
      var script = document.createElement('script')
      script.src = option.url
      // 将 script 上到 DOM 中
      document.body.appendChild(script)
    }
    

  </script>
</body>

</html>