论文部分内容阅读
摘 要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应用程序植入自动保存功能提供参考。
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
关键词 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应用程序植入自动保存功能提供参考。
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