利用JSON和AJAX实现

Web数据的自动保存与恢复

 

徐连荣  张景生  郭峰

(聊城大学 教育传播技术学院，山东 聊城 252059)

 

    摘  要  无刷新地自动保存与恢复页面数据在一些Web应用情景中是必需的功能。通过对不同类型的表单采用不同的保存与恢复策略，提出并实现了一种JSP环境下利用JSON和AJAX技术实现网页中表单的自动保存与恢复的方法。

    关键词  JSON；AJAX；JSON.simple；表单自动保存；表单恢复

 

    由于网络连接是一种非持续连接，传统的Web页面设计中，一般是在表单内设置一个动作为“Submit”的按钮，通过点击这个按钮提交表单内容。但是在一些应用场合下，这种方法有一定的局限，例如在线考试系统中，不能要求考生不断地点击“暂存”按钮，这样分散考生的注意力，不能把精力放到答题上；另外，在线撰写内容较长的BLOG时，最好能每隔一段时间保存一下用户录入的内容，这样就会避免因为意外关闭页面或计算机死机而造成的录入文字丢失。对于这些情景下的应用，最好能实现一种用户表单的实时保存与恢复技术，一旦用户界面出现问题，可以及时从服务器端保存的“草稿”中将数据恢复出来，提高用户体验，本文结合了AJAX技术及JSON数据结构实现了这种表单的无刷新自动保存与恢复技术。

1  JSON及AJAX技术简介1.1  JSON

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于阅读和编写。同时也易于机器的解析和生成。它基于JavaScript Programming Language，Standard ECMA-262 3rd Edition – December 1999的一个子集，可以被JavaScript直接支持。JSON的格式独立于语言，通常采用类C语言家族（包括C，C++，C#，Java，JavaScript，Perl，Python等）的习惯进行表示。这些特性使JSON成为理想的数据交换语言。

              

图1  JSON格式定义

    JSON格式定义非常简单，就是通过一组键值对来定义一个对象，可以和JAVA中的Map类很好地对应，简化了JSON在JAVA环境下的处理。在JavaScript中，可以直接将这种格式的数据赋值给一个变量，然后通过键名取值。一个典型的JSON结构如图1如示。

1.2  AJAX

    AJAX(Asynchronous JavaScript and XML)其实是多种技术的综合，包括JavaScript、XHTML、CSS、DOM、XML和XSTL、XMLHttpRequest。其中使用XHTML和CSS进行标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换和处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。

    传统的Web应用采用同步交互过程，即用户首先向HTTP服务器发送一个交互请求，服务器执行完这些请求后，将结果进行HTML包装后返回客户端。这是一种不连贯的用户体验，服务器在处理用户请求时，用户处于等待状态，直到服务器处理完后才看到结果页面。这种交互方式下，如果服务器需要进行大数据量处理时，用户等待时间长，严重影响了用户体验。

图2  典型AJAX交互过程

    与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待的缺点。用户浏览器在执行任务时即装载了用JavaScript语言编写的AJAX引擎。AJAX引擎负责处理用户界面与服务器之间的交互，允许用户与应用软件间的交互以异步方式进行，不影响用户与服务器的交流，实现了用户页面不刷新即可向服务器提交数据和获取服务器数据的方法。

2  实现原理

    在客户端界面通过JavaScript把指定Form内所有非空表单数据收集起来，然后使用AJAX把这些数据异步发送到服务器端，服务器取得这些数据的键(表单名称)与值(表单内容)后，通过JSON.simple把这些键—值对封装为JSON对象，然后把对应的JSON对象保存到数据库，即完成了保单的自动保存工作。恢复表单时，服务器端接收到用户的恢复请求后，只需要把JSON对象从数据库中提取出来，执行输出方法，异步发送到客户端，然后客户端解析接收JSON对象，重新解析为键与值对应的形式，通过JavaScript操作DOM还原表单的内容。

3  技术细节

    使用表单向服务器端提交数据时，根据功能的不同，表单项有不同的形式，一些表单类型可以接收一些字符串的值，例如Text Field、Hidden Field、Textarea，一些表单可以有“选中”与“未选中”两种状态，例如Checkbox、Radio Button，还有一些表单以下拉列表的形式出现，例如List/Menu、Jump Menu。恢复表单时，主要是针对以上几种类型的表单进行恢复，由于各种表单可接受的数值类型不同，所以要对不同类型的表单采用不同的恢复策略，为了简化代码编写，可以采用匈牙利类型标记法，在表单名称前加一固定前缀表示此表单的类型，可以采用如表１所标示前缀。

表1  表单类型标示法

类型

文本字段

隐藏域

文本区域

复选框

前缀

txt_

hdf_

ta_

cb_

类型

单选按钮

列表/菜单

跳转菜单

文件域

前缀

rb_

menu_

jmp_

file_

3.1  客户端获取所有表单数据

    在客户端可以通过Form的GET或POST方法把数据发送到服务器，使用GET方法时把表单内容放到URL后面，作为查询字符串随HTTP请求发送到服务器，该方式传送数据量较小，最多传输长度为256Byte。使用POST方法时，把表单数据放入到HTTP请求的HTTP主体中随HTTP请求一起发送到服务器，该方式安全性较高，并且能传送较多的数据，最多可传输2MB的数据。在像在线考试系统、BLOG这些应用情景下，待传输的数据一般都会多于256Byte，所以需要选用POST方法向服务器提交数据。

    保存表单时，考虑到一个页面内表单可能过多，为了减少传输的数据量，可以只传送非空表单，即用户已输入数据或选中的表单，可以使用下面的JavaScript函数来取得指定Form中非空表单名称与表单值，进而把这些键与值关系组装为待POST的内容。

    formToRequestString(form_obj)函数说明：

        功能：把指定Form中的表单名称与其值组装为“username=Tom&age=20”的形式

        参数：form_obj     Form对象名称

        用法：formToRequestString(document.form1)

        下载地址：

3.2  服务器端组装JSON对象