[手写系列]手写一个JSONP

写一个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)
  })
}

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