原来你是这样的jsonp(原理与具体实现细节)

原创 我的小苹果 随笔 Zepto源码分析 373阅读 2018-03-02 00:10:15 举报

前言

原文地址

仓库地址

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

我们早已习惯,早已熟练了jQ或者zepto的ajax调用方式。但是有可能还不太它内部具体是如何实现一个jsonp的,从请求的发出,到指定的成功(success)或失败(error)回调函数的执行。

  1. 这中间前端需要做什么?
  2. 后端又需要做些什么来支持?
  3. 超时场景又该如何处理?
  4. 整个生命周期会有多个钩子可以被触发,而我们可以监听哪些钩子来得知请求的状况?

让我们从zepto.js的源码出发,一步步揭开它的面纱。

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

絮叨一下jsonp的基本原理

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

基本思想是啥呢

  1. 客户端利用script标签可以跨域请求资源的性质,向网页中动态插入script标签,来向服务端请求数据。
  2. 服务端会解析请求的url,至少拿到一个回调函数(比如callback=myCallback)参数,之后将数据放入其中返回给客户端。
  3. 当然jsonp不同于平常的ajax请求,它仅仅支持get类型的方式

如何使用

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

使用

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

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

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

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

先看一下完整的代码

因为zepto中完成jsonp请求的处理基本都在$.ajaxJSONP完成,我们直接从该函数出发开始分析。先整体看看这个函数,有一个大概的印象,已经加了大部分注释。或者可以点击这里查看

参数的基本处理

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

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

传了jsonpCallback时的url

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

没有传jsonpCallback时的url

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

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

_后面跟的时间戳不一样

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

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

上参数处理代码

对于回调函数名的处理其实挺简单的,根据你是否在参数中传了jsonpCallback,传了是个函数就用函数的返回值,不是函数就直接用。
否则的话,就生成类似Zepto1497193562723的函数名。

继续看

好啦,看到这里我们主要要关注的是

  1. originalCallback = window[callbackName]
  2. abort函数

对于1为什么要把全局的callbackName函数先保存一份呢?这里涉及到一个问题。

请求回来的时候到底是不是直接执行的你传入的jsonpCallback函数?

解决这个问题请看

zepto中把全局的callbackName函数给重写掉了,,导致后端返回数据时执行该函数,就干了一件事,就是把数据赋值给了responseData这个变量。

那说好的真正的callbackName函数呢? 如果我传了jsonpCallback,我是会在里面做一些业务逻辑的啊,你都把我给重写了,我的逻辑怎么办?先留个疑问在这里

对于关注点2abort函数,这个函数的功能,就是手动触发添加在创建好的script元素身上的error事件的回调函数。后面的超时处理timeout以及请求出错都是利用的该函数。

超时处理

在看监听script元素on error事件回调逻辑前,我们直接看最后一点东西

代理做了简单的注释,这里除了将script元素插入网页还定义了一个超时处理函数,判断条件是传入的参数timeout是否大于0,所以当你传小于0或者负数啥的进去,是不会当做超时处理的。超时后其实就是触发了script元素的error事件,并传了参数timeout

真正的回调逻辑处理

接下来就是本文的重点了,zepto通过监听script元素的load事件来监听请求是否完成,以及给script添加了error事件,方便请求出错和超时处理。而用户需要的成功和失败的处理也是在这里面完成

script元素真正的事件处理程序代码也不多,开头有这两句话

起什么作用呢?

第一句自然是针对超时处理,如果请求在指定超时时间之前完成,自然是要把他清除一下,不然指定的时间到了,超时的回调还是会执行,这是不对的。

第二句话,把创建的script元素从网页中给删除掉,绑定的事件('load error')也全部移除,干嘛要把事件都给移除呢?你想想,一个请求已经发出去了,我们还能让他半途停止吗?该是不能吧,但是我们能够阻止请求回来之后要做的事情呀!而这个回调不就是请求回来之后要做的事情么。

请求成功或失败的处理

那么再接下来,就是请求的成功或失败的处理了。失败的条件就是触发了error事件(不管是超时还是解析错误,又或者状态码不在HTTP 2xx),甚至如果后端没有正确给到数据responseData也是错误。

再回顾一下responseData是怎么来的

ajaxErro函数究竟做了些啥事呢?

ajaxError

可以看到他调用了我们穿进去的error函数,并且触发了全局的ajaxError钩子,所以我们其实可以在document上监听一个钩子

这个时候便可以拿到请求出错的信息了

ajaxComplete

ajaxStop

同理我们可以监听ajaxCompleteajaxStop钩子

处理完失败的情况那么接下来就是成功的处理了,主要调用了ajaxSuccess函数

ajaxSuccess

原来我们平时传入的success函数是在这里被执行的。但是有一个疑问啊!,我们知道我们是可以不传入success函数的,当我们指定jsonpCallback的时,请求成功同样会走jsonpCallback函数,但是好像ajaxSuccess没有执行这个函数,具体在处理的呢?

继续往下看

为了彻底搞清楚zepto把我们指定的回调函数重写的原因,我再次加了重写的代码在这里。可以看出,重写的目的,就是为了拿到后端返回的数据,而拿到数据之后便方便我们在其他地方灵活的处理了,当然指定的回调函数还是要重新赋值回去(这也是开头要保留一份该函数的本质原因),如果是个函数,就将数据,塞进去执行。

分析到这里我相信你已经几乎明白了jsonp实现的基本原理,文章顶部说的几个问题,我们也在这个过程中解答了。

  1. 这中间前端需要做什么?
  2. 后端又需要做些什么来支持?(接下来以例子说明)
  3. 超时场景又该如何处理?
  4. 整个生命周期会有多个钩子可以被触发,而我们可以监听哪些钩子来得知请求的状况?

砰砰砰!!!,亲们还记得开头的时候留了这两个问题吗?

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

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

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

问题1:为什么会报错呢?

对于没有指定jsonpCallback

此时我们给后端的回调函数名是类似Zepto1497193562723

超时的时候同样会走load error的回调,当这句话执行的时候,Zepto1497193562723被设置成了undefined,当然后端返回数据的时候去执行

自然就报错了。

问题2呢? 其实同样还是上面那句话,只不过此时我们指定了jsonpCallback,超时的时候虽然取消了script元素的的load error事件,意味着在超时之后请求即便回来了,也不会走到对应的回调函数中去。但是别忘记,超时我们手动触发了script元素的error事件

原本被重写的callback函数也会被重新赋值回去,此刻,即便script元素的load error回调不会被执行,但我们指定的jsonpCallback还是会被执行的。这也就解了问题2.

用koa做服务端,zepto发jsonp请求

最后我们再用koa,模拟服务端的api,用zepto来请求他。

如果你对源码感兴趣可以点击这里查看koa-todo-list

找到根目录的testJsonp.js文件即是服务端主要代码

前端代码

html

js

服务端主要代码

运行截图

结尾

希望把jsonp的实现原理说清楚了,欢迎大家拍砖。

如果对你有一点点帮助,点击这里,加一个小星星好不好呀

如果对你有一点点帮助,点击这里,加一个小星星好不好呀

如果对你有一点点帮助,点击这里,加一个小星星好不好呀

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复