jsonready onload 与_漫谈JSONP以及<img>的onLoad和onEr

利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析

一个简单的jsonp例子

const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=handleResponse'

const scriptElement = document.createElement('script');

scriptElement.src = url;

document.body.appendChild(scriptElement)

JSONP的核心在于下面几点：

创建一个script标签，设置src为要调用的api并且看情况携带一些数据或者指定回调；

将标签添加到html文档中；

浏览器会自动根据src请求数据，并将response理解为Javascript执行。

这里假象了一下如果后端是nodejs的话大概会怎么做：

const callback = req.query.callback;

const data = ... //

const response = `${callback}(${JSON.stringify(data)})`

关键点在于：

后端的返回数据一定是可执行的JavaScript代码！！

后端的返回数据一定是可执行的JavaScript代码！！

后端的返回数据一定是可执行的JavaScript代码！！

所以刚刚我在response那里实际上拼接了一个函数调用。

那么回到浏览器这边，浏览器拿到CALLBACK_NAME(''some data")

那么就开始执行这个函数了。那么同时就要求前端要实现约定的回调函数，并暴露到全局环境

如果换做img标签来做这些事情

同理解析等元素，同样没有对域做安全限制。所以理论上只要能发出跨域的网络请求，都能用来实现跨域。

而大家总会使用script标签来做跨域无非是因为script标签能发出请求，并且能放一些代码放在回应里面，达到回调的效果。

所以理论上来说，如果考虑回调，需要使用script，使用jsonp技术。那么如果只是单纯地想跨域发一个request，那么选择script或者img等元素也无关紧要了。

img其实也能做一些事情

img元素能添加onError onLoad 属性，用于监听加载失败或者加载成功。

这意味着img实现请求成功或者失败的回调是OK的，但是接收不到server端的数据。