代码编织梦想

一、写在前面
今天总结一下阿里前端的一道笔试题,实现jsonp,传入URL,callback和callbackName 三个参数。这里的URL是地址字符串,callback是回调函数,callbackName后端返回数据的名称
二、手写

  <script>

    function jsonp(url, callbackName, callback) {
      return new Promise((resolve, reject) => {
        try {
          let str = `${url}?callback=${callbackName}`
          let scriptEle = document.createElement('script')
          scriptEle.type = 'text/javascript'
          scriptEle.src = str
          scriptEle.addEventListener('load', callback)
          window[callbackName] = function (data) {
            resolve(data)
            document.body.removeChild(scriptEle)
          }
          document.body.appendChild(scriptEle)
        } catch (err) {
          reject(err)
        }
      })
    }


    jsonp('http://127.0.0.1:3000/home', 'fun1', () => {console.log('加载成功')}).then(res => {
      console.log(res)
    })

  </script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_47450807/article/details/124091555

论jsonp和用户体验的提高_文初阳的博客-爱代码爱编程

论jsonp和用户体验的提高   要说jsonp的来源,还是离不开用户体验以及程序员伟大的智慧。事情的开始是这样的…… 什么是数据库?   学过计算机的可能会脱口而出SQL Server, MySQL, Oracle等

原生javascript实现jsonp_周皮皮皮皮皮皮的博客-爱代码爱编程

/* 封装一个jsonp方法,可以使用如下方式调用: jsonp(url,[,data],[,callbackName]) */ jsonp('http://photo.sina.cn/aj/index', {page:1, cate:'recommend'},'jsoncallback

原生javascript实现ajax、jsonp_baby加油_的博客-爱代码爱编程

相信大部分前端开发者经常会用jquery的ajax方法与后台进行交互,但是有些时候,我们只需要用到ajax请求数据,而其他的功能几乎用不到,所以就需要知道原生js的ajax请求方法。 ajax简介 ajax描述了一种主要

jsonp原理及实现_zccst的博客-爱代码爱编程

作者:zccst 2015-04-30 更新 [b]跨域实现的两种方式[/b] 一、通过src="http://romateServer.com/api?callback=callbackHandler" 回调成功后,在浏览器端实现callbackHandler方法,返回值在callbackHandler参数中 批注:既然如此,所有src都可以实现跨域

jsonp 的原理和采用 promise api 的实现_weixin_33801856的博客-爱代码爱编程

我已经将这个项目重新命名为 pjsonp 并且在 npm 上发布啦,欢迎在你的项目中使用,并在 GitHub 提交 issue 和 pull request。 npm install pjsonp --save 复制代码 这篇文章通过实现一个生产环境中可用的,Promise API 封装的 jsonp 来讲解 jsonp 的原理。 由于浏

jsonp的历史方案和实现原理-爱代码爱编程

1. JSONP的实现原理 JSONP是通过动态创建script实现的。 请求方:frank.com 的前端程序员(浏览器)。 响应方:jack.com 的后端程序员(服务器)。 (1).请求方创建 script, src 指向响应方,同时传入一个查询参数 ?calbackName=yyy。 (2).响应方根据查询参数callbackName,构造

Ajax - 手写JSONP跨域实现及原理详解-爱代码爱编程

JSONP实现原理 jsonp,其实就是单纯为了实现跨域请求而创造的一个欺骗(trick)。 虽然,因为同源策略的影响,不能通过XMLHttpRequest请求不同域上的数据(Cross -origin reads)。但是,在页面上引入不同域上的js脚本文件却是可以的(Cross -origin embedding)。因此,在js文件载入完毕之后,触发

jsonp的原理与实现-爱代码爱编程

1.概述 动态创建script标签,因为script标签是没有同源策略限制,可以跨域的 jsonp是一种跨域通信的手段,它的原理其实很简单: 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服务器端向客户端通信。 由于使用script标签的src属性,因此只支持get