moke's blog

vuePress-theme-reco moke    2017 - 2020
moke's blog

Choose mode

  • dark
  • auto
  • light
分类
  • 算法
  • 博客
  • HTTP
  • 数据结构
  • 前端
  • 文档
  • JS 基础
  • Node
标签
博客
前端
  • 知识体系
  • 前端资料
  • JavaScript 专题
  • JavaScript 基础
  • JavaScript 进阶
算法
  • 算法专题
  • 数据结构
TimeLine
GitHub (opens new window)
author-avatar

moke

56

Article

17

Tag

分类
  • 算法
  • 博客
  • HTTP
  • 数据结构
  • 前端
  • 文档
  • JS 基础
  • Node
标签
博客
前端
  • 知识体系
  • 前端资料
  • JavaScript 专题
  • JavaScript 基础
  • JavaScript 进阶
算法
  • 算法专题
  • 数据结构
TimeLine
GitHub (opens new window)
  • JavaScript 专题
  • 手动实现 call、apply、bind
  • 手动实现 JSONP
  • 手动实现 Promise
  • EventEmitter
  • 防抖与节流
  • 深浅拷贝
  • Instanceof
  • New
  • 继承相关
  • 前端路由
  • Curry
  • 工具函数

手动实现 JSONP

vuePress-theme-reco moke    2017 - 2020

手动实现 JSONP

moke 2019-05-06 23:41:17 JavaScript

JSONP 又称为 json padding,即响应的数据为 json 的包装

# 思路

  1. 将传入的 data 数据转化为 url 字符串形式
  2. 处理 url 中的回调函数
  3. 创建一个 script 标签并插入到页面中
  4. 挂载回调函数

# 实现

;(function(window, document) {
  const jsonp = function(url, data, callback) {
    // 1. 将传入的data数据转化为url字符串形式
    // {id:1,name:'jack'} => id=1&name=jack
    let dataString = url.indexOf('?') == -1 ? '?' : '&'

    for (const key in data) {
      dataString += `${key}=${data[key]}&`
    }

    // 2. 处理url中的回调函数
    // cbFuncName回调函数的名字 :my_json_cb_名字的前缀 + 随机数(把小数点去掉)
    const cbFuncName = `my_json_cb_${Math.random()
      .toString()
      .replace('.', '')}`

    dataString += `callback=${cbFuncName}`

    // 3. 创建一个script标签并插入到页面中
    const scriptEle = document.createElement('script')

    scriptEle.src = `${url}${dataString}`

    // 4. 挂载回调函数
    window[cbFuncName] = function(data) {
      callback(data)
      // 处理完回调函数的数据之后,删除jsonp的script标签
      document.body.removeChild(scriptEle)
    }

    document.body.appendChild(scriptEle)
  }

  window.$jsonp = jsonp
})(window, document)
在 GitHub 上编辑此页 (opens new window)
最后更新时间: 12/10/2019, 2:00:35 PM