原来你是这样的jsonp(原理与具体实现细节)
前言原文地址 仓库地址
让我们从zepto.js的源码出发,一步步揭开它的面纱。
(该篇文章重点是想说jsonp实现过程,如果你想了解跨域相关的更多的知识,可以谷歌,度娘一把) 絮叨一下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请求配置就是这样了,大家都很熟悉了。但是不知道大家有没有发现.
不急等我们一步步分析完就会知道这个答案了。 先看一下完整的代码
$.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],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 } 参数的基本处理
我们先来看看针对上面的例子我们发送请求的url最终会变成什么样子,而参数处理正是为了得到这条url 传了jsonpCallback时的url
没有传jsonpCallback时的url
相信你已经看出来这两条url有什么不同之处了。 _后面跟的时间戳不一样 callback后面跟的回调函数名字不一样 也就是说如果你指定了成功的回调函数就用你的,没指定他自己生成一个。 上参数处理代码 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,后面带的参数是回调函数接收的参数 abort = function (errorType) { $(script).triggerHandler('error',errorType || 'abort') },abortTimeout // 对.then或者.catch形式调用的支持,本文暂时不涉及这方面的解析 if (deferred) deferred.promise(xhr) 好啦,看到这里我们主要要关注的是
对于1为什么要把全局的 请求回来的时候到底是不是直接执行的你传入的jsonpCallback函数? 解决这个问题请看 // 重写全局上的callbackName window[callbackName] = function () { responseData = arguments } zepto中把全局的 那说好的真正的 对于关注点2 超时处理
// 将回调函数名追加到?后面 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,deferred) } else { ajaxSuccess(responseData[0],deferred) } window[callbackName] = originalCallback if (responseData && $.isFunction(originalCallback)) originalCallback(responseData[0]) originalCallback = responseData = undefined
// 清楚超时定时器 clearTimeout(abortTimeout) // 从网页中移除创建的script元素以及将挂在它上面的所有事件都移除 $(script).off().remove() 起什么作用呢? 第一句自然是针对超时处理,如果请求在指定超时时间之前完成,自然是要把他清除一下,不然指定的时间到了,超时的回调还是会执行,这是不对的。 第二句话,把创建的script元素从网页中给删除掉,绑定的事件('load error')也全部移除,干嘛要把事件都给移除呢?你想想,一个请求已经发出去了,我们还能让他半途停止吗?该是不能吧,但是我们能够阻止请求回来之后要做的事情呀!而这个回调不就是请求回来之后要做的事情么。 请求成功或失败的处理 if (e.type == 'error' || !responseData) { ajaxError(null,deferred) } 那么再接下来,就是请求的成功或失败的处理了。失败的条件就是触发了 再回顾一下responseData是怎么来的 // 重写全局上的callbackName window[callbackName] = function () { responseData = arguments } ajaxErro函数究竟做了些啥事呢?
// type: "timeout","error","abort","parsererror" function ajaxError(error,type,settings,deferred) { var context = settings.context // 执行用户传进去的error函数,注意这里的context决定了error函数中的this执行 settings.error.call(context,error) if (deferred) deferred.rejectWith(context,[xhr,error]) // 触发全局的钩子ajaxError triggerGlobal(settings,context,'ajaxError',error || type]) // 调用ajaxComplete函数 ajaxComplete(type,settings) } 可以看到他调用了我们穿进去的 $(document).on('ajaxError',function (e) { console.log('ajaxError') console.log(e) }) 这个时候便可以拿到请求出错的信息了
// status: "success","notmodified","timeout","parsererror" function ajaxComplete(status,settings) { var context = settings.context // 调用传进来的complete函数 settings.complete.call(context,status) // 触发全局的ajaxComplete钩子 triggerGlobal(settings,'ajaxComplete',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,deferred) { var context = settings.context,status = 'success' // 调用传进来的成功的回调函数 settings.success.call(context,data,status,xhr) if (deferred) deferred.resolveWith(context,[data,xhr]) // 触发全局的ajaxSuccess triggerGlobal(settings,'ajaxSuccess',data]) // 执行请求完成的回调,成功和失败都执行了该回调 ajaxComplete(status,settings) } 原来我们平时传入的 继续往下看 // 重写全局上的callbackName window[callbackName] = function () { responseData = arguments } // 将originalCallback重新赋值回去 window[callbackName] = originalCallback // 并且判断originalCallback是不是个函数,如果是函数,便执行 if (responseData && $.isFunction(originalCallback)) originalCallback(responseData[0]) 为了彻底搞清楚zepto把我们指定的回调函数重写的原因,我再次加了重写的代码在这里。可以看出,重写的目的,就是为了拿到后端返回的数据,而拿到数据之后便方便我们在其他地方灵活的处理了,当然指定的回调函数还是要重新赋值回去(这也是开头要保留一份该函数的本质原因),如果是个函数,就将数据,塞进去执行。 分析到这里我相信你已经几乎明白了jsonp实现的基本原理,文章顶部说的几个问题,我们也在这个过程中解答了。
砰砰砰!!!,亲们还记得开头的时候留了这两个问题吗? 在zepto中一个常见的jsonp请求配置就是这样了,大家都很熟悉了。但是不知道大家有没有发现.
问题1:为什么会报错呢? 对于没有指定 此时我们给后端的回调函数名是类似 window[callbackName] = originalCallback 超时的时候同样会走 Zepto1497193562723({xxx: 'yyy'}) 自然就报错了。 问题2呢? 其实同样还是上面那句话,只不过此时我们指定了 $(script).triggerHandler('error',errorType || 'abort') 原本被重写的callback函数也会被重新赋值回去,此刻,即便 用koa做服务端,zepto发jsonp请求
如果你对源码感兴趣可以点击这里查看koa-todo-list 找到根目录的
<button>请求后端jsonp数据</button>
$('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,randomNum } } this.body = `${callback}(${JSON.stringify(callbackData)})` console.log(this.query) } app.listen(3000); console.log('listening port 3000'); 运行截图
结尾
如果对你有一点点帮助,点击这里,加一个小星星好不好呀 如果对你有一点点帮助,点击这里,加一个小星星好不好呀 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |