美文网首页
手写jsonp

手写jsonp

作者: A_dfa4 | 来源:发表于2020-09-23 19:02 被阅读0次

标签的src属性不受浏览器跨域的限制

  • 要点
    1. 创建script标签
    2. 前端一个全局函数
    3. 服务端返回前端全局函数的调用
jsonp (url, cb) {
   /*声明一个唯一的回调函数并挂载到全局上
    *创建一个script标签地址 指向 请求服务器 将回调函数名作参数带到服务器
    *服务器拿到回调名称 并返回前端 该回调的调用 把返回结果当作参数传入 
    */
   let uniqueName = `jsonpCallback${new Date().getTime}`
   document.body.removeChild(script)
   delete window[uniqueName]

   window[uniqueName] = (res) = > {
    const script = doxument.createElement('script')
    script.src = `url${url.indexOf('?') > -1 ? '&': '?'}callback=${uniqueName}`   
    cb && cb(res)
  }
}

// 调用
jsonp(url, (res) => {
  console.log(res)
})

// 服务器端
1. 获取参数, 拿到回调函数名称
2. 返回参数名的前端回调的调用 并 把要返回的参数作为实参调用

/*弊端 - 只支持get请求,并且不安全*/

相关文章

  • 手写jsonp

    标签的src属性不受浏览器跨域的限制 要点创建script标签前端一个全局函数服务端返回前端全局函数的调用

  • 面试题

    1、手写jsonp的实现http://kb.cnblogs.com/page/139725/ 2、手写链表倒数第K...

  • 手写Ajax(JSONP)

    参考:原生 JavaScript 实现 AJAX、JSONP XMLHttpRequest的使用 参考:XMLHt...

  • 搜狗面试

    原型链上手写事件,手写原生js实现ajax事件,jsonp实现原理,阻止事件IE冒泡代码,事件捕获、处理,冒泡代码...

  • 手写jsonp实现原理

    一、原理 元素不受同源策略的影响,可以进行AJAX传输。当script元素访问时,返回由回调函数进行包裹的json...

  • 浏览器跨域问题,教你手写实现jsonp跨域

    跨域概述为什么会有跨域跨域解决办法:1、jsonp;2、后台代理手写实现jsonp跨域(包括服务器端代码) 跨域问...

  • 前端面试知识点(7)——前端进阶2

    1、手写jsonp的实现 基础:script标签可以跨域获取脚本 进阶:动态生成script标签,并拼接url填...

  • 手写一个jsonp实现

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法...

  • JSONP、JQuery发送AJAX、JSONP请求

    1.JSONP 2.JQuery发送AJAX、JSONP请求 1.JSONP JSONP利用JavaScript...

  • JS-18day

    1、jsonp公开接口 2、jQuery-jsonp 3、jsonp

网友评论

      本文标题:手写jsonp

      本文链接:https://www.haomeiwen.com/subject/onjoyktx.html