思路
-
根据抓包软件fiddler或者chrome分析网上已有的草稿箱功能是怎样一个实现的模式;以简书编辑为例,便是在0.5S左右会自动保存一次,通过抓包可以看到在编辑的时候如图所示
可以得知每次编辑之后简书都会向服务器对应的url发送数据;需要注意的是发送的方式为put而不是post。
因此不难得出,在实现类似自动保存功能的时候,需要向服务器put方式发送数据,并且在检测到鼠标没有输入之后的0.5S左右自动想服务器put一次数据。
了解put及post的区别
简单地说:通常用于向服务器发送请求,如果URI不存在,则要求服务器根据请求创建资源,如果存在,服务器就接受请求内容,并修改URI资源的原始版本。
-----PUT请求那些封装在Request-URI的实体。如果Request-URI引用一个已存在的资源,则该封装实体应该作为原始服务器上的修改版本。如果Request-URI不是指向一个已存在的资源,并且该URI可被请求的用户代码定义为新资源,则原始服务器可用此URI创建新的资源。如果新的资源被创建,这个原始服务器就必须通过201(Created)响应通知用户代理。如果已有资源被修改,则发送200或者204响应,表示成功完成了该请求。如果Request-URI既没有创建也没有修改资源,则应给予适当的错误响应来反映问题本质。实体的接受者不能忽略任何不理解或没有实现的Content-*(如Content-Range)头部,并且必须返回501响应。
如果请求经过缓存,并且Request-URI标识出一个或多个当前缓存的实体,则那些实体视为过期了。该方法的响应不会被缓存。
POST请求的URI表示处理该封闭实体的资源,该资源可能是个数据接收过程、某种协议的网关、或者接收注解的独立实体。然而,PUT请求中的URI表示请求中封闭的实体-用户代理知道URI的目标,并且服务器无法将请求应用到其他资源。如果服务器希望该请求应用到另一个URI,就必须发送一个301响应;用户代理可通过自己的判断来决定是否转发该请求。
大致流程图思路分析(根据抓包)
根据点击新建文章之后,开始
根据图可知道,当点击新建文章之后post一段已经写好的数据,并会给出响应包括服务器给这篇新建的文章一个id号
根据1图返回状态码201表示创建成功;
接下来每次编辑的时候都向该id的文章进行put,服务器进行更新数据并且返回状态码200OK
流程图
1.点击新建文章之后像服务器发送一个字段,字段如图所示:
服务器进行新建一个文章数据字段,如果新建成功则返回一个id作为响应传回以及201状态码。
2.前端监听键盘输入事件,当键盘0.5S左右没有点击的时候便向服务器put数据,其中put形式如图所示
服务器需要更新将传过来的数据在文章数据库的id进行更新。更新成功传回一个状态码。