[手写系列]手写一个JSONP

最新推荐文章于 2024-03-04 10:13:55 发布

龟霸也是高达

最新推荐文章于 2024-03-04 10:13:55 发布

阅读量235

点赞数 2

分类专栏： JavaScript 基础 html 文章标签： js web 网络

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/110161760

版权

JavaScript 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

基础

28 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

写一个JSONP

好久没写了,现在觉得还挺简单的…
原理就是服务器返回告诉浏览器运行预先设置好的函数啊,一个是你让浏览器执行函数,一个是你告诉服务器再告诉浏览器执行函数,没啥区别.

思路

因为浏览器不能跨域,但是不禁止script标签加载不同源的网站,script标签随便加载.那么就可以用script发送不同源的ajax请求

测试

先用node写一个服务器,端口8888监听请求

写了肯定没人看,还是截图直观,一看就懂
在这里插入图片描述

terminal node执行,测试成功开启

好了现在随便找个能写script的页面测试下

在这里插入图片描述

上面的写法只是展示我理解的jsonp的原理

真正项目中这么写太麻烦了,也不美观,所以直接封装成一个函数,就方便很多了

这么写

封装就有点抽象了,思路:

设置一个函数,形参是url(你的请求)和get请求的值比如天气api的地址什么的
因为是网络请求,最好是异步,这样直接用promise就好
要在全局设置一个函数,函数怎么执行写promise的resolve方法里
生成src,添加到script标签里发送请求,再把script标签删掉

function jsonp(url) {
  return new Promise((resolve, reject) => {
    window._fn = data => resolve(data)
    let script = document.createElement('script')
    script.src = url + '?callback=_fn'
    script.onerror = () => reject('加载失败')
    document.head.appendChild(script)
    document.head.removeChild(script)
  })
}

点击按钮成功发送请求得到数据