简易版手写JSONP-CFANZ编程社区

简易版手写JSONP
<!DOCTYPE html>
<html lang="en">

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

<body>

</body>
<script>
  function JSONP({
    url,
    params,
    callbackKey,
    callback
  }) {
    const callbackName = 'callbackFunction';

    // 在参数里制定 callback 的名字
    params = params || {}
    params[callbackKey] = callbackName
    // 预留 callback
    window[callbackName] = callback
    // 拼接参数字符串
    const paramKeys = Object.keys(params)
    const paramString = paramKeys
      .map(key => `${key}=${params[key]}`)
      .join('&')
    // 插入 DOM 元素
    const script = document.createElement('script')
    script.setAttribute('src', `${url}?${paramString}`)
    console.log(script.src)
    document.body.appendChild(script)
  }

  JSONP({
    url: 'https://www.runoob.com/try/ajax/jsonp.php',
    params: {
      id: '2'
    },
    callbackKey: 'jsoncallback',
    callback(result) {
      console.log(result)
    }
  })
</script>

</html>
0 条评论