思路
-
根據(jù)抓包軟件fiddler或者chrome分析網(wǎng)上已有的草稿箱功能是怎樣一個(gè)實(shí)現(xiàn)的模式滑绒;以簡書編輯為例,便是在0.5S左右會(huì)自動(dòng)保存一次骚勘,通過抓包可以看到在編輯的時(shí)候如圖所示
image.png
可以得知每次編輯之后簡書都會(huì)向服務(wù)器對(duì)應(yīng)的url發(fā)送數(shù)據(jù)铐伴;需要注意的是發(fā)送的方式為put而不是post。
因此不難得出俏讹,在實(shí)現(xiàn)類似自動(dòng)保存功能的時(shí)候当宴,需要向服務(wù)器put方式發(fā)送數(shù)據(jù),并且在檢測(cè)到鼠標(biāo)沒有輸入之后的0.5S左右自動(dòng)想服務(wù)器put一次數(shù)據(jù)泽疆。
了解put及post的區(qū)別
簡單地說:通常用于向服務(wù)器發(fā)送請(qǐng)求即供,如果URI不存在,則要求服務(wù)器根據(jù)請(qǐng)求創(chuàng)建資源于微,如果存在逗嫡,服務(wù)器就接受請(qǐng)求內(nèi)容,并修改URI資源的原始版本株依。
-----PUT請(qǐng)求那些封裝在Request-URI的實(shí)體驱证。如果Request-URI引用一個(gè)已存在的資源,則該封裝實(shí)體應(yīng)該作為原始服務(wù)器上的修改版本恋腕。如果Request-URI不是指向一個(gè)已存在的資源抹锄,并且該URI可被請(qǐng)求的用戶代碼定義為新資源,則原始服務(wù)器可用此URI創(chuàng)建新的資源荠藤。如果新的資源被創(chuàng)建伙单,這個(gè)原始服務(wù)器就必須通過201(Created)響應(yīng)通知用戶代理。如果已有資源被修改哈肖,則發(fā)送200或者204響應(yīng)吻育,表示成功完成了該請(qǐng)求。如果Request-URI既沒有創(chuàng)建也沒有修改資源淤井,則應(yīng)給予適當(dāng)?shù)腻e(cuò)誤響應(yīng)來反映問題本質(zhì)布疼。實(shí)體的接受者不能忽略任何不理解或沒有實(shí)現(xiàn)的Content-*(如Content-Range)頭部,并且必須返回501響應(yīng)币狠。
如果請(qǐng)求經(jīng)過緩存游两,并且Request-URI標(biāo)識(shí)出一個(gè)或多個(gè)當(dāng)前緩存的實(shí)體,則那些實(shí)體視為過期了漩绵。該方法的響應(yīng)不會(huì)被緩存贱案。
POST請(qǐng)求的URI表示處理該封閉實(shí)體的資源,該資源可能是個(gè)數(shù)據(jù)接收過程止吐、某種協(xié)議的網(wǎng)關(guān)宝踪、或者接收注解的獨(dú)立實(shí)體。然而祟印,PUT請(qǐng)求中的URI表示請(qǐng)求中封閉的實(shí)體-用戶代理知道URI的目標(biāo)肴沫,并且服務(wù)器無法將請(qǐng)求應(yīng)用到其他資源。如果服務(wù)器希望該請(qǐng)求應(yīng)用到另一個(gè)URI蕴忆,就必須發(fā)送一個(gè)301響應(yīng)颤芬;用戶代理可通過自己的判斷來決定是否轉(zhuǎn)發(fā)該請(qǐng)求。
大致流程圖思路分析(根據(jù)抓包)
根據(jù)點(diǎn)擊新建文章之后套鹅,開始
根據(jù)圖可知道站蝠,當(dāng)點(diǎn)擊新建文章之后post一段已經(jīng)寫好的數(shù)據(jù),并會(huì)給出響應(yīng)包括服務(wù)器給這篇新建的文章一個(gè)id號(hào)
根據(jù)1圖返回狀態(tài)碼201表示創(chuàng)建成功卓鹿;
接下來每次編輯的時(shí)候都向該id的文章進(jìn)行put菱魔,服務(wù)器進(jìn)行更新數(shù)據(jù)并且返回狀態(tài)碼200OK
流程圖
1.點(diǎn)擊新建文章之后像服務(wù)器發(fā)送一個(gè)字段,字段如圖所示:
服務(wù)器進(jìn)行新建一個(gè)文章數(shù)據(jù)字段吟孙,如果新建成功則返回一個(gè)id作為響應(yīng)傳回以及201狀態(tài)碼澜倦。
2.前端監(jiān)聽鍵盤輸入事件聚蝶,當(dāng)鍵盤0.5S左右沒有點(diǎn)擊的時(shí)候便向服務(wù)器put數(shù)據(jù),其中put形式如圖所示
服務(wù)器需要更新將傳過來的數(shù)據(jù)在文章數(shù)據(jù)庫的id進(jìn)行更新藻治。更新成功傳回一個(gè)狀態(tài)碼碘勉。