[聚合文章] 原来你是这样的jsonp(原理与具体实现)

jsonp(JSON with padding)你一定不会陌生，前端向后端拿数据的方式之一，也是处理跨域请求的得利助手。

我们早已习惯，早已熟练了jQ或者zepto的ajax调用方式。但是有可能还不太它内部具体是如何实现一个jsonp的，从请求的发出，到指定的成功(success)或失败(error)回调函数的执行。这中间前端需要做什么？后端又需要做些什么来支持？超时场景又该如何处理？整个生命周期会有多个钩子可以被触发，而我们可以监听哪些钩子来得知请求的状况。让我们从zepto.js的源码出发，一步步揭开它的面纱。

(该篇文章重点是想说jsonp实现过程，如果你想了解跨域相关的更多的知识，可以谷歌，度娘一把)

絮叨一下jsonp的基本原理

jsonp是服务器与客户端跨源通信的常用方法之一，具有简单易用，浏览器兼容性好等特点。

基本思想是啥呢

1. 客户端利用 script 标签可以跨域请求资源的性质，向网页中动态插入 script 标签，来向服务端请求数据。

2. 服务端会解析请求的 url ,至少拿到一个回调函数(比如 callback=myCallback )参数,之后将数据放入其中返回给客户端。

3. 当然jsonp不同于平常的 ajax 请求,它仅仅支持get类型的方式

如何使用

这里简单的介绍一下zepto.js是如果使用jsonp形式请求数据的，然后从使用的角度出发一步步分析源码实现。

使用

$.ajax({
  url: 'http://www.abc.com/api/xxx', // 请求的地址
  type: 'get', // 当然参数可以省略
  data: { // 传给服务端的数据，被加载url?的后面
    name: 'qianlongo',
    sex: 'boy'
  },
  dataType: 'jsonp', // 预期服务器返回的数据类型
  jsonpCallback: 'globalCallback', // 全局JSONP回调函数的 字符串（或返回的一个函数）名
  timeout: 100, // 以毫秒为单位的请求超时时间, 0 表示不超时。
  success: function(data){ // 请求成功之后调用
    console.log('successCallback')
    console.log(data)
  },
  error: function(err){ // 请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)
    console.log('errorCallback')
    console.log(err)
  },
  complete: function(data){ // 请求完成时调用，无论请求失败或成功。
    console.log('compelete')
    console.log(data)
  }
})

function globalCallback(data){
  console.log('globalCallback')
  console.log(data)
}

在zepto中一个常见的jsonp请求配置就是这样了，大家都很熟悉了。但是不知道大家有没有发现.

1. 如果设置了 timeout 超时了，并且没有设置 jsonpCallback 字段，那么控制台几乎都会出现一处报错，如下图

1. 同样还是发生在 timeout ,此时如果请求超时了，并且设置了 jsonpCallback 字段(注意这个时候是设置了)，但是如果请求在超时之后完成了，你的 jsonpCallback 还是会被执行。照理说这个函数应该是请求在超时时间内完成才会被执行啊！为毛这个时候超时了，还是会被执行啊！！！

不急等我们一步步分析完就会知道这个答案了。

先看一下完整的代码

因为zepto中完成jsonp请求的处理基本都在 $.ajaxJSONP 完成，我们直接从该函数出发开始分析。 先整体看看这个函数

 $.ajaxJSONP = function(options, deferred){
  // 直接调ajaxJSONP没有传入type，去走$.ajax
  if (!('type' in options)) return $.ajax(options)
  // 获取callback函数名，此时未指定为undefined
  var _callbackName = options.jsonpCallback,
    // jsonpCallback可以是一个函数或者一个字符串
    // 是函数时，执行该函数拿到其返回值作为callback函数
    // 为字符串时直接赋值
    // 没有传入jsonpCallback，那么使用类似'Zepto3726472347'作为函数名
    callbackName = ($.isFunction(_callbackName) ?
      _callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
    // 创建一个script标签用来发送请求
    script = document.createElement('script'),
    // 先读取全局的callbackName函数，因为后面会对该函数重写，所以需要先保存一份
    originalCallback = window[callbackName],
    responseData,
    // 中止请求，触发script元素上的error事件, 后面带的参数是回调函数接收的参数
    abort = function(errorType){
      $(script).triggerHandler('error', errorType || 'abort')
    },
    xhr = { abort: abort }, abortTimeout

  if (deferred) deferred.promise(xhr)
  // 给script元素添加load和error事件
  $(script).on('load error', function(e, errorType){
    // 清除超时定时器
    clearTimeout(abortTimeout)
    // 移除添加的元素(注意这里还off了，不然超时这种情况，请求回来了，还是会走回调)
    $(script).off().remove()
    // 请求出错或后端没有给callback中塞入数据，将触发error
    if (e.type == 'error' || !responseData) {
      ajaxError(null, errorType || 'error', xhr, options, deferred)
    } else {
      // 请求成功，调用成功回调，请塞入数据responseData[0]
      ajaxSuccess(responseData[0], xhr, options, deferred)
    }
    // 将originalCallback重新赋值回去
    window[callbackName] = originalCallback
    // 并且判断originalCallback是不是个函数，如果是函数，便执行
    if (responseData && $.isFunction(originalCallback))
      originalCallback(responseData[0])
    // 清空闭包，释放空间
    originalCallback = responseData = undefined
  })

  if (ajaxBeforeSend(xhr, options) === false) {
    abort('abort')
    return xhr
  }
  // 重写全局上的callbackName
  window[callbackName] = function(){
    responseData = arguments
  }
  // 将重写后的回调函数名追加到?后面
  script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
  // 添加script元素
  document.head.appendChild(script)
  // 超时处理函数
  if (options.timeout > 0) abortTimeout = setTimeout(function(){
    abort('timeout')
  }, options.timeout)

  return xhr
}

参数的基本处理

在执行原理的第一步时，zepto会先处理一下我们传入的参数。

我们先来看看针对上面的例子我们发送请求的url最终会变成什么样子，而参数处理正式为了得到这条url

传了globalCallback时的url

http://www.abc.com/api/xxx?name=qianlongo&sex=boy&_=1497193375213&callback=globalCallback

没有传globalCallback时的url

http://www.abc.com/api/xxx?name=qianlongo&sex=boy&_=1497193562726&callback=Zepto1497193562723

相信你已经看出来这两条url有什么不同之处了。

_后面跟的时间戳不一样

callback后面跟的回调函数名字不一样

也就是说如果你指定了成功的回调函数就用你的，没指定他自己生成一个。

上参数处理代码

var jsonpID = +new Date()

var _callbackName = options.jsonpCallback,
callbackName = ($.isFunction(_callbackName) ?
  _callbackName() : _callbackName) || ('Zepto' + (jsonpID++))

对于回调函数名的处理其实挺简单的，根据你是否在参数中传了 jsonpCallback ，传了是个函数就用函数的返回值，不是函数就直接用。

否则的话，就生成类似 Zepto1497193562723 的函数名。

继续看

// 创建一个script标签用来发送请求 
script = document.createElement('script'),
// 先读取全局的callbackName函数，因为后面会对该函数重写，所以需要先保存一份
originalCallback = window[callbackName],
// 请求完成后拿到的数据
responseData,
// 中止请求，触发script元素上的error事件, 后面带的参数是回调函数接收的参数
abort = function(errorType){
  $(script).triggerHandler('error', errorType || 'abort')
},
xhr = { abort: abort }, abortTimeout
// 对.then或者.catch形式调用的支持，本文暂时不涉及这方面的解析
if (deferred) deferred.promise(xhr)

好啦，前面几句代码着重处理