基於ext-core的ajax自動保存功能

基於ext-core的ajax自動保存功能摘要：當系統資源緊張的時候，瀏覽器就會出現卡死的現象，好不容易寫的博客還沒發卻不得不強制殺掉瀏覽器的進程，面對這種情況就需要加入自動保存功能，下面我就來介紹一下基於ext-core的ajax自動保存功能。

　　如果我們有寫博客的習慣，我們會發現好多的博客系統都提供了自動保存的功能。這有什麼好處呢？還是先看看我們經常出現的問題吧。
　　老闆在寫郵件，突然有事走開了。半小時後回來，繼續寫郵件，發送的時候直接跳轉到登陸頁面，郵件沒有發送成功。老闆暴跳如雷，好不容易洋洋灑灑寫的郵件突然沒了。然後老闆把開發人員××叫到辦公室，辦公室的氣氛一下緊張起來。這就是session失效帶來的問題。
　　我們不得不犧牲服務器的資源將session的失效時間調長一些，或者字節不過期。但是我們能控制程序，卻控制不了瀏覽器。當系統資源緊張的時候，瀏覽器就會出現卡死的現象，好不容易寫的博客還沒發卻不得不強制殺掉瀏覽器的進程，那種心痛的感覺，我也體會過啊。
　　面對這種情況怎麼辦？對了，讓系統幫您自動保存草稿，即使我們遇到這樣的情況，我們還能恢復到最新編輯的狀態。最近，百洋軟件研究實驗室的博客發佈功能也加入了自動保存的功能，下面就開發的重點簡要介紹一下。
　　1、定時自動保存，我們需要定時器。
　　2、自動保存表單不能跳頁，不能刷新當前頁，我們需要使用AJAX方式實現。
　　3、非form提交會出現很多的問題，特別有在線編輯器加入的表單中，經常會遇到編碼，違禁字符，中文亂碼等問題。所以儘可能使用form提交，以便更好的和struts2結合。
　　明確了這些後，我們開始逐步的實現。首先做一個autoSave.js來獲取表單的內容，並提交到後臺處理。纔開始我們沿用百洋軟件研究實驗室前臺使用的AJAX框架mootools,但是mootools使用ajax提交表單的能力太差了（個人感覺，可能一知半解）。不用表單提交，結果真的出現我上面說的一些問題。由於該網站後臺採用extjs開發，我對extjs比較熟悉，而且extjs的表單ajax提交功能是非常強大的，於是想通過extjs來解決。由於是網站前臺，所以採用extjs的精簡版—ext-core。（如果開發網站的時候ext-core發佈了的話，該網站也　　不會採用mootools，以後將慢慢想ext-core改版）

以下是autoSave.js的代碼及註釋
//設置定時器，時間間隔爲一分鐘，執行autoSave方法

下圖爲新增博文的表單：

現在開始說明一下extjs提交表單的問題。當提交表單時，後臺一直沒有執行自動保存的方法而是執行的發佈的方法，這讓我感到非常奇怪。於是我將【發佈】和【保存到草稿箱】的submit按鈕刪掉後，程序才執行自動保存的方法。於是我懷疑，提交表單後程序執行保存表單方法不是調用ext-core中定義的URL路徑，而是調用的表單中第一個submit按鈕定義的方法，這也許和struts2的表單寫法有關係。我然後在【發佈】前加上一個定義爲自動保存方法的按鈕，這次開始執行自動保存方法，這證明我上面的猜測是正確的了，但是具體原因不詳。所以這就出現了上面的代碼：
提交前讓兩個按鈕失效：

Ext.getDom('btn_publish').disabled=true;
Ext.getDom('btn_draft').disabled=true;
提交後恢復兩個按鈕：
Ext.getDom('btn_publish').disabled=false;
Ext.getDom('btn_draft').disabled=false;

後臺自動保存的方法就不用介紹了，和struts2的保存完全一樣。該實現注意的兩個重點：
1、建議使用表單提交，避免編碼問題和亂碼問題。
2、Extjs提交struts2表單會執行第一個submit按鈕對應的action，提交時候要將按鈕暫時性失效。
 

基於ext-core的ajax自動保存功能就介紹到這裏了，這個功能非常重要，如果你想看看具體的效果，趕緊註冊一個賬號開始使用吧。註冊地址：
http://www.po-soft.com/login.po

轉載註明:本文轉自"百洋軟件研究實驗室""yongtree"的博客