學習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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。