$.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)
}   

 $.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
}

var jsonpID = +new Date()

var _callbackName = options.jsonpCallback,
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
// 对.then或者.catch形式调用的支持，本文暂时不涉及这方面的解析
if (deferred) deferred.promise(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)

clearTimeout(abortTimeout)
$(script).off().remove()
if (e.type == 'error' || !responseData) {
  ajaxError(null, errorType || 'error', xhr, options, deferred)
} else {
  ajaxSuccess(responseData[0], xhr, options, deferred)
}
window[callbackName] = originalCallback
if (responseData && $.isFunction(originalCallback))
  originalCallback(responseData[0])
originalCallback = responseData = undefined

// 清楚超时定时器
clearTimeout(abortTimeout)
// 从网页中移除创建的script元素以及将挂在它上面的所有事件都移除
$(script).off().remove()

if (e.type == 'error' || !responseData) {
  ajaxError(null, errorType || 'error', xhr, options, deferred)
} else {
  ajaxSuccess(responseData[0], xhr, options, deferred)
}

// 重写全局上的callbackName
window[callbackName] = function () {
  responseData = arguments
}

// type: "timeout", "error", "abort", "parsererror"
function ajaxError(error, type, xhr, settings, deferred) {
  var context = settings.context
  // 执行用户传进去的error函数，注意这里的context决定了error函数中的this执行
  settings.error.call(context, xhr, type, error)
  if (deferred) deferred.rejectWith(context, [xhr, type, error])
  // 触发全局的钩子ajaxError
  triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error || type])
  // 调用ajaxComplete函数
  ajaxComplete(type, xhr, settings)
}

$(document).on('ajaxError', function (e) {
  console.log('ajaxError')
  console.log(e)
})

// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
function ajaxComplete(status, xhr, settings) {
  var context = settings.context
  // 调用传进来的complete函数
  settings.complete.call(context, xhr, status)
  // 触发全局的ajaxComplete钩子
  triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings])
  // 请求结束
  ajaxStop(settings)
}

function ajaxStop(settings) {
  if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop')
}

$(document).on('ajaxComplete ajaxStop', function (e) {
  console.log('ajaxComplete')
  console.log(e)
})

function ajaxSuccess(data, xhr, settings, deferred) {
  var context = settings.context, status = 'success'
  // 调用传进来的成功的回调函数
  settings.success.call(context, data, status, xhr)
  if (deferred) deferred.resolveWith(context, [data, status, xhr])
  // 触发全局的ajaxSuccess
  triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data])
  // 执行请求完成的回调，成功和失败都执行了该回调
  ajaxComplete(status, xhr, settings)
}

// 重写全局上的callbackName
window[callbackName] = function () {
  responseData = arguments
}


// 将originalCallback重新赋值回去
window[callbackName] = originalCallback
// 并且判断originalCallback是不是个函数，如果是函数，便执行
if (responseData && $.isFunction(originalCallback))
  originalCallback(responseData[0])

window[callbackName] = originalCallback

Zepto1497193562723({xxx: 'yyy'})

$(script).triggerHandler('error', errorType || 'abort')

$('button').on('click', () => {
  $.ajax({
    type: 'get',
    url: '/showData',
    data: {
      name: 'qianlongo',
      sex: 'boy'
    },
    dataType: "jsonp",
    success: function (res) {
      console.log('success')
      console.log(res)
      $('<pre>').text(JSON.stringify(res)).appendTo('body')
    },
    error: function (res) {
      console.log('error')
      console.log(res)
    }
  })
})

var koa = require('koa');
var route = require('koa-route');
var path = require('path');
var parse = require('co-body');
var render = require('./app/lib/render.js');
var app = koa();

app.use(route.get('/showJsonpPage', showJsonpPage))
app.use(route.get('/showData', showData))

function * showJsonpPage () {
  var sHtml = yield render('jsonp')
  this.body = sHtml
}

function * showData (next) {
  let {callback, name, sex, randomNum} = this.query
  
  this.type = 'text/javascript'
  let callbackData = {
    status: 0,
    message: 'ok',
    data: {
      name,
      sex,
      randomNum
    }
  }

  this.body = `${callback}(${JSON.stringify(callbackData)})`
  console.log(this.query)
}

app.listen(3000);
console.log('listening port 3000');