基于JSONP原理解析(推荐)

前言

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

跨域的方法不需要多言，随便一搜，就有很多，但最常用不外乎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://www.a.com/getSomething?callback=jsonp0

那么服务端就会返回如下内容：

jsonp0({code:200,data:{}})

很明显，由于这是在动态加载的Script标签中包含的内容，那么这就是一段自执行代码，这段代码只有一个函数被调用———jsonp0。

当然，有执行，则必须先创建，否则就会报错。创建这一步，就需要在调用前执行。

具体实现如下：

function jsonp (url, successCallback, errorCallback, completeCallback) {

 // 声明对象，需要将函数声明至全局作用域
 window.jsonp0 = function (data) {
  successCallback(data);
  if (completeCallback) completeCallback();
 }
 // 创建script标签，并将url后加上callback参数
 var 
  script = document.createElement('script')
  , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
 ;
 script.src = url;
 document.head.parentNode.insertBefore(script, document.head);
 // 等到script加载完毕以后，就会自己执行
}