基于ＡＪＡＸ框架的自動保存機制的實現

摘 要AJAX用于實現瀏覽器與Web服務器之間的異步交互，AJAX框架通過封裝AJAX的基礎接口來簡化開發過程。基于AJAX框架實現對Web表單的自動保存，可提高Web應用程序的健壯性和人性化。

關鍵詞 AJAX；XAJAX；框架；自動保存

中圖分類號：TP312 文獻標識碼：A 文章編號：1671-489X（2008）06－0072-03

Implementation of Autosaving Function based on AJAX Framework//Qiu Ming，Jiang Hongxing，Wang Xinghui

Abstract AJAX can used to implement asynchronous interactivity between browser and web server.AJAX Framework facilitates AJAX programming by encapsulating the bottom interface of AJAX. Autosaving function that implemented by AJAX frameworks in web forms makes web applications robuster and more humanized.

Key words AJAX；XAJAX；framework；autosaving

1 引言

自動保存是指在用戶編輯文檔的過程中，應用程序在后臺定時、自動地備份文檔，以防止某些意外情況造成文檔內容的丟失。常用的桌面編輯軟件，例如Microsoft Word、Excel、WPS、3DMax，都具備自動保存的功能。一旦出現意外斷電、操作系統或應用程序停止響應等情況，即使編輯的內容來不及手工保存，也可以利用自動保存的備份文件來恢復內容，減少用戶的損失。

Web應用程序利用Web表單來獲取用戶提交到服務器的內容。用戶在瀏覽器軟件中填寫Web表單時，經常碰到瀏覽器意外關閉或者表單提交失敗的情況，導致表單內容丟失。尤其是在BBS、Blog和Email這些應用中，輸入的文字量比較大，花費時間長，表單內容丟失的可能性更大，容易給用戶制造挫折感。因此，對健壯性和人性化要求高的Web應用程序，有必要支持自動保存。Google的Gmail郵箱就提供自動保存功能。本文著重研究自動保存的機制，以源碼的形式闡述基于AJAX框架實現自動保存的方法，為各種Web應用程序植入自動保存功能提供參考。

2 自動保存的機制

如圖1所示，用戶在Web表單中輸入的數據，在手工提交到服務器之前稱為草稿。自動保存客戶端負責定時獲取當前的草稿，完成檢驗后把草稿提交到服務器端。自動保存服務器端負責響應客戶端的保存請求，將草稿保存到數據庫中。自動保存的整個過程都是在后臺完成的，它在用戶填寫Web表單的過程中，并不顯示提交并刷新頁面，與用戶操作是互不干擾的、可同時發生的異步操作，可以利用AJAX來實現。

3 AJAX框架和XAJAX

3.1 AJAX框架AJAX（Asynchronous JavaScript and XML）是一種綜合運用JavaScript、HTML、CSS、DOM、XML、XMLHttpRequest等技術，實現客戶端瀏覽器與服務器端異步通信的Web開發方法。AJAX不是一種新技術，但是與傳統的B/S交互模式相比，AJAX的主要優勢有[1]：減輕服務器的負擔；無刷新更新頁面，改善用戶體驗；分離數據與界面等。

AJAX在各種Web應用中的工作原理都是相同的，基本上可以概括為2個環節：1）在客戶端利用JavaScript創建XMLHttpRequest對象實例向服務器發送請求信息，并指定回調函數；2）服務器完成數據處理并成功返回信息后，客戶端的回調函數做出響應，在回調函數中利用DOM處理返回的XML文檔信息或文本信息，并更新Web頁面內容。

框架（Framework）是整個或部分系統的可重用設計，表現為一組抽象中間件及中間件實例間交互的方法，是可被應用開發者定制的應用骨架[2]。基于框架的軟件開發是面向特定領域的重用基礎，不僅能夠實現代碼重用，而且可以有效實現系統分析和系統設計的重用[3]。利用已有的應用框架，有助于提高軟件生產效率和質量，開發出結構良好、可維護性強的應用系統。

AJAX框架是在抽象服務器與客戶端之間通信細節的基礎上，利用框架技術封裝了AJAX的基礎接口，為AJAX開發提供簡易、可重用的開發骨架。利用第三方提供的AJAX框架，開發人員可以集中精力開發業務邏輯。ajaxpatterns.org收集了200多個各種工作類型的AJAX框架。根據實現機制的不同，把AJAX框架分為瀏覽器端JavaScript框架和服務器端混合框架兩大類[4]。

3.2 XAJAX[5] XAJAX是一個基于PHP語言的AJAX服務器端開源框架，支持UTF-8字符集和Smarty模板。XAJAX設計巧妙，簡單易用，它使得服務器端響應和反饋客戶端可以統一地用PHP語言來實現。在XAJAX中注冊過的服務器端的PHP函數，可以方便地被客戶端的JavaScript調用。在調用過程中所需要的XMLHttp異步請求由XAJAX負責創建。

一般的AJAX框架需要開發人員用JavaScript編寫回調函數，以便處理一個異步請求（即XMLHttp請求）返回的數據，并且更新Web頁面的內容。XAJAX框架簡化了這個繁瑣的過程，它的最大特色在于xajaxResponse類。xajaxResponse類允許開發人員利用PHP語言來反饋xajaxResponse XML指令，XML指令傳遞到客戶端后由XAJAX的指令分析器負責解析，并且按指令要求去控制Web頁面的內容和狀態。圖2說明了XAJAX的工作過程。

xajaxResponse類包含許多把指令反饋到客戶端的指令函數。例如XAJAX 0.2版本中的addAssign($sTargetId，$sAttribute，$sData)，可以將名稱為$sTargetId的HTML元素的$sAttribute屬性賦值為$sData。如果執行以下PHP代碼：

$objResponse->addAssign(\"divResult\"，\"innerHTML\"，\"刪除操作成功!\");

執行的結果是通知客戶端在頁面的DIV標簽（divResult）中顯示\"刪除操作成功!\"字樣，相當于在客戶端執行Javascript腳本：

document.getElementById(“divResult”).innerHTML = \"刪除操作成功!\";

4 自動保存功能的具體實現

基于以上對XAJAX的介紹，下面介紹如何在Blog中實現定時自動保存。撰寫Blog的頁面一般包括“保存并發布”、“保存為草稿”和“放棄保存”3個按鈕。手工保存（用戶點擊“保存并發布”和“保存為草稿”按鈕）與自動保存的大部分代碼相同，可以將手工保存與自動保存一同利用XAJAX來實現。下面依次陳述客戶端和服務器端的代碼邏輯。

4.1 自動保存客戶端在用戶填寫表單的過程中，定時判斷是否輸入了合法的、必要的內容(例如Blog的標題和Tag)。如果是，則開始執行自動保存的提交過程。下面是自動保存客戶端 (autosave.js文件)中的主要的代碼片斷。

var intv=\"\";

var INTV_MS=120000;//自動保存時間間隔(120秒)

enableAutoSave(true);

function enableAutoSave(isEnable){ /* True表示開啟自動保存的定時器；反之關閉。*/

if(isEnable){ if(INTV_MS>0 intv==\"\") intv= window.setInterval(\"autoSave()\"，INTV_MS); }

else{if(intv!=\"\"){ window.clearInterval(intv);intv= \"\";}}

return isEnable;

}

function autoSave(){

if(!checkData()) return 1; //檢測數據。如果沒有合法的必要數據，跳出。

enableAutoSave(1);//關閉自動保存定時器

showSaveStatus(\"正在自動保存...\");//在頁面中提示正在自動保存

xajax_dosave(xajax.getFormValues ('frm_main')， 0 ， gid(\"txt_editing_bid\").value);

}

上述代碼中，enableAutoSave函數用于開啟或關閉定時自動保存，瀏覽器定時執行autoSave函數，其中的關鍵語句是：

xajax_dosave(xajax.getFormValues ('frm_main')， act， gid(\"txt_editing_bid\").value)

xajax.getFormValues可以獲取frm_main表單中的所有數據（即用戶輸入的草稿），并且以數組返回。xajax_dosave函數由XAJAX自動生成，作用是創建自動保存的XMLHttp請求，將草稿提交到服務器端，它的3個參數與下面介紹服務器端的dosave函數相一致。

4.2 自動保存服務器端為方便管理，我們在數據庫中把自動保存的草稿與手工保存的Blog保存在同一張基本表中。假設用戶正在修改的Blog的編號為editing_bid（editing_bid為空表示是新的Blog），第一次自動保存editing_bid時，將新增一行記錄用來存放editing_bid的草稿（假設該草稿的編號為draft_bid）。需要說明的是，我們必須存儲editing_bid和draft_bid之間的關聯關系。只有這樣，后面第N次自動保存editing_bid時，只需修改draft_bid即可。

有多種方案可以存儲editing_bid和draft_bid之間的關聯關系，簡單易行的是采用Session。下面的save_draft_bid函數用于保存兩者的關聯關系，get_draft_bid函數用于提取editing_bid對應的draft_bid。

function save_draft_bid($editing_bid，$draft_bid){ $_SESSION[‘DRAFT’. $editing_bid] = $draft_bid; }

function get_draft_bid($editing_bid){

return isset($_SESSION[‘DRAFT’. $editing_bid]) ? intval($_SESSION[‘DRAFT’. $editing_bid]): '';

}

自動保存服務器端的核心是autosave.server.php文件中的dosave函數，它實現了自動保存和手工保存的業務邏輯，有3個參數：$frm數組保存客戶端提交來的表單數據，$action用于標識動作的類型（1表示“保存為草稿”，2表示“保存并發布”，其他表示“自動保存”），$editing_bid表示正在編輯的Blog編號。

function dosave($frm，$action，$editing_bid){

global $CUR_UID; //當前登錄用戶的Id

$action = intval($action);

if(empty($CUR_UID)){//一旦檢測到連接超時，調用客戶端的dologin()來彈出登錄對話框

$resp = new xajaxResponse();

$resp->addScript(\"dologin();\");

return $resp;

}

if( empty($frm) || !check_data($frm)) return new xajaxResponse();//檢測數據，失敗則跳出

$draft_bid = get_draft_bid($editing_bid);

$resp = new xajaxResponse();

if($action==1 || $action==2){ //1-保存為草稿; 2-保存并發布

$frm['publish_status'] = $action==1? 1: 0;//Blog的發布狀態：1草稿；0正式稿

if(!empty($editing_bid) exist_blog($editing_bid)){ //編輯中

$f=update_blog($editing_bid， $frm);

delete_blog($draft_bid);

save_draft_bid($editing_bid， ''); //清空draft_bid，表示draft_bid已經不可用

}else{

if(!empty($draft_bid) exist_blog($draft_bid)){

$f=update_blog($draft_bid， $frm);

save_draft_bid($editing_bid， '');

}else{ $f = insert_blog($CUR_UID， $frm); }

}

$f ? $resp->addRedirect(\"blog_list.php\")/* 保存成功后跳轉*/

: $resp->addScript(\"dosave_info('保存失敗!');\");

}else{ //自動保存

$frm['publish_status'] = 1;

if(!empty($draft_bid) exist_blog($draft_bid)){ $f = update_blog($draft_bid， $frm); }

else{ $draft_bid = insert_blog($CUR_UID， $frm);

if($draft_bid) save_draft_bid($editing_bid， $draft_bid); }

}

return $resp;

}

dosave函數中的update_blog($editing_bid， $frm)用于修改編號為$editing_bid的記錄。delete_blog()和exist_blog()分別用于刪除Blog記錄、判斷Blog記錄是否存在。

5 結束語

自動保存可以提高用戶在輸入Web表單過程中的可靠性，降低操作系統、瀏覽器軟件、網絡故障等因素造成用戶丟失內容的情況。本文論述了基于AJAX技術實現自動保存的具體方案，展示了關鍵部分的代碼邏輯，為其他應用開展AJAX開發以及自動保存功能的開發提供了參考。XAJAX框架具有跨瀏覽器特性，經測試，本文實現的自動保存功能可以兼容IE、Maxthon、Netscape和Firefox等主流瀏覽器。

參考文獻：

[1]王星，潘郁.基于AJAX技術的Web模型在網站開發中的應用研究[J].微計算機信息，2006(9-3):206-241

[2]郭妍旭，張波.框架技術在軟件開發中的研究與實踐[J].遼寧工學院學報，2006(12):379-382

[3]王成耀，姚琳.基于可重用框架的軟件開發模式及其應用[J].計算機應用研究，2003(1):49-51

[4]AJAX Frameworks[EB/OL].http://ajaxpatterns.org/Frameworks

[5]XAJAX官方網站[EB/OL].http://www.xajaxproject.org/