前言

我工作以来接触的第一个项目就是前后端分离的，前端静态文件有自己独立域名，通过接口来获取数据进行渲染等操作。

跨域的方法不需要多言，随便一搜，就有很多，但最常用不外乎jsonp和CORS。jsonp着重于前端，也算是前端Hack技巧，CORS重于后端，服务端需要配置的地方会较多。

这篇解析一下jsonp的实现原理。

基本原理

基本原理很容易说明白，在html页面中有一些标签是不受跨域限制的，比如img，script，link等。如果把我们需要的数据，放在一个js文件里面，这时，我们就能突破浏览器同源的限制。

创建script标签

《高性能JavaScript》中提到了动态脚本元素，作者写道：

1、文件在该元素被添加到页面时开始下载。这种技术的重点在于：无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

2、使用动态脚本节点下载文件时，返回的代码通常会立刻执行（除了Firefox和Oprea，它们会等待此前所有动态脚本节点执行完毕。）当脚本自执行时，这种机制运行正常。

引用1保证了JSONP请求的时候不会阻塞主线程，引用2保证了JSONP代码在加载完成后，立刻自执行时不会出错。

callback

服务端在接收到GET请求之后，通常要判断是否有callback参数，如果有，则需要在返回的数据外面加上一个方法名和括号。例如，发起如下请求：

http://pleteCallback, timeout) { // 略去上面写过的代码 var timeout = timeout || 10000 , timer ; if (timeout) { timer = setTimeout(function () { if (errorCallback) { errorCallback(new Error('timeout')); } clean(); }, timeout) } function clean () { script.parentNode.removeChild(script); window[jsId] = function(){}; if (timer) clearTimeout(timer); }}

这样，基本上就完成了jsonp的全部功能，剩下的可能需要做一些兼容的修改，才算是一个完整的jsonp方法。

REFER

《高性能JavaScript》

npm上的一个jsonp实现，JSONP

以上这篇基于JSONP原理解析(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。