欢迎来到福编程网,本站提供各种互联网专业知识!

用 JSON 处理缓存

发布时间:2007-04-27 作者: 来源:转载
数据验证是每个企业Web应用程序中最富于挑战性、日新月异的部分。通常验证元数据会使JavaScript模块中混入服务器端代码。在本文中,您将了解如何在服务器代码的帮助下将元数据缓存在客户端的优秀方法,服务器代码将提供JSON(JavaScriptObjectNotation)形式
数据验证是每个企业Web应用程序中最富于挑战性、日新月异的部分。通常验证元数据会使JavaScript模块中混入服务器端代码。在本文中,您将了解如何在服务器代码的帮助下将元数据缓存在客户端的优秀方法,服务器代码将提供JSON(JavaScriptObjectNotation)形式的字符串化元数据。这种方法还允许以类似Ajax的方式来处理多值和多组属性。
每个应用程序的开发都是为了解决某个领域的问题。而每个领域都有自己的一套约束数据的规则和规范。应用程序将这些约束应用于数据时,约束也就成了验证。所有应用程序都需要验证用户输入的数据。

目前,应用程序一般都使用if-else语句组合来验证数据。这些语句包含了开发人员硬编码或通过服务器端代码置入的验证数据。通常,开发人员会使用服务器端代码来避免可能导致JavaServerPage(JSP)的细微数据更改。

您可以使用JavaScriptObjectNotation(JSON)来分组和缓存元数据,并使用JavaScript函数来访问元数据以验证用户输入。

JavaScript中有分散的元数据时,您无法控制服务器将评估多少数据以及有多少数据传递到客户机。所有服务器端代码片段都将被评估并发送到服务器上。但是,使用JSON缓存数据时,您可以完全控制向客户机发送的元数据量,因为服务器端代码将生成JSON形式的元数据。这有助于仅将元数据发送至与看到或输入数据的用户相对应的客户机上。

您还可以使用JSON来缓存用户输入的数据。程序缓存数据后,将擦除数据字段而不是刷新屏幕,这与Ajax类似。通过这种方法,用户可以为同一属性输入另一组数据。

让我们一起来探究一下如何使用JSON来缓存元数据。

JSON概览

使用JSON(即JavaScriptObjectNotation),将以一种特定的字符串形式来表示JavaScript对象。如果将具有这样一种形式的字符串赋给任意一个JavaScript变量,该变量随后将引用一个通过指定给该变量的字符串构建的对象。

例如,假定有一个policy对象,它拥有以下属性:

计划名称
描述
持续时间
您可以使用以下这种JSON形式的字符串来表示该policy对象:

{"Plane":{"FullLifeCover"},"Description":{"Thebestlifeinsuranceplan"},"Term":{"20years"}}

如果将此字符串赋给任意一个JavaScript变量,则该变量将接受以这种对象为单位的数据。要访问数据,请提供需要访问的属性所在的路径。对于本例,将以上字符串赋给一个名为policy的变量:

varpolicy={"Plane":{"FullLifeCover"},"Description":{"Thebestlifeinsuranceplan"},"Term":{"20years"}}

将此字符串粘贴到HTML页面的标题部分中,然后编写以下警报:

alert(policy.Plan)

如果在任何支持JavaScript的浏览器中查看此页面,您都会看到显示策略计划的警报。

示例

为了演示JSON的性能,我们来看一个有vehicle对象列表的person对象和一个可以拥有一台或多台车辆的person对象。每台车辆都有以下属性:

品牌
注册码
CC
浏览器UI应当允许用户添加多台具有优秀应用性能的车辆(通常为固有要求)。每个属性都有一些与之关联的限制或验证规则。您需要指定以下规则:

品牌名称
品牌名称决不能包含数字。
品牌名称最多可包含两个单词,中间可加一个空格。
注册码
注册码必须全都是数字。
CC
CC必须全都是数字。
CC的最小值为50,最大值为5000。
将有三个与车辆属性相对应的输入字段,用户可在其中输入信息。接下来,您将看到如何将验证消息分组到JSON组中以及如何访问这些验证消息。

传统方法

现在,当用户输入的车辆数据为40CC时,程序必须显示一条消息,说明输入的数据不在有效的CC范围内。您可以用清单1中的代码简单地显示这条消息:


清单1.传统代码

if(cc<<%=minCC%>||cc><%=maxCC%>){
alert(<%=ResourceList.vehicleCCRangeMsg>);
}


ResourceList是一个服务器端类,该类中含有关于车辆的国际化消息(如vehicleCCRangeMsg)。这种方法解决问题时略显混乱:


在这种方法中,您将把服务器端代码添加到所有客户端验证函数中,以检查条件并显示消息。
如果更改了元数据和消息(例如服务器端类或变量)的组织方法,您将会为更改使用这些元数据和消息的客户机脚本验证函数感到十分头痛。

JSON能帮助您做什么?

如果只需在条件语句和警报中引用一个JavaScript变量而不是服务器端代码,您感觉怎么样?不需要把服务器端代码包含在JavaScript中,而保存的服务器端元数据和消息中的更改也不会影响客户端脚本。这种方法太棒了,是不是?好的,那就是使用基于JSON缓存元数据时要做的。

您将使用一个JavaScript对象把我们的验证数据和消息分组到一个层级中。然后就像访问层级的JavaScript对象一样访问这些消息。就是这样,您已经做到了!

当此JSON元数据对象就绪后,先前的JavaScript代码片段将类似于清单2。


清单2.带有JSON元数据缓存对象的警报

if(cccc>vehicleValidationsMetadata.CC.maxCC){
alert(vehicleValidationsMetadata.CC.RangeMessage);
}


现在,问题是谁来准备JSON元数据对象?嗯,只有服务器能做这项工作。服务器必须生成这个JSON对象,并将其提供给客户机(浏览器)。一些JavaAPI可以帮助您准备此类(事实上是任意一类)JSON对象。请参阅参考资料来查看那些API。

生成JSON元数据对象的典型方法为:

为实体及其验证消息准备一个层级Java对象。
对这些实体及其验证消息调用toString()。这些实体及其验证消息最有可能把一个JSON形式的字符串提供给您。
将该字符串另存到一个请求范围内。
在JSP中,获取该字符串,并将其指派到JavaScript变量值的大括号内。

最终的车辆元数据对象看上去就会像清单3一样。


清单3.验证元数据JSON对象

varvehicleValidationsMetadata={
"BrandName":{
"CanContainDigits":{false},
"MaxWords":{2},
"FormatMessage":{"BrandNamecannotcontaindigits."},
"WordLimitMessage":{"BrandNamecannotcontainmorethantwowords"}
},"RegistrationNumber":{
"CanContainAlphabets":{false},
"CanContainDigits":{"true"},
"FormatMessage":{"RegistrationNumbercancontainonlydigits."}
},
"CC":{
"minCC":{50},
"maxCC":{5000},
"FormatMessage":
{"CCcanonlybenumeric"},
"RangeMessage":{"CCcanbewithinrangeof50and5000"}
}
}


服务器必须生成整个字符串,第一行和最后一行除外,因为当前的用户语言环境可能要求使用这些消息(并且只有服务器端代码能完成这项工作)。在这里,需要注意的一点是此元数据对象仅用于验证车辆。更理想的情况是将vehicle元数据对象封装到person元数据对象中。那样,您就不需要再创建另一个JavaScript变量,而只需将该元数据对象包含到person元数据对象中。

在将此元数据对象准备好后,您可以使用该对象中的元数据和消息来验证数据输入和显示消息。现在,验证车辆输入信息的JavaScript函数看上去就会跟清单4一样。


清单4.车辆数据验证函数

functionvalidateVehicleData(){
varbrandName=//getbrandnamefromformfield
varregistrationNumber=//getRegistrationNumberfromformfield.
varCC=//getCCfromformfield
varbrandNameTokens=brandName.split('');
if(brandNameTokens.length>vehicleValidationsMetadata.BrandName.MaxWords){
alert(vehicleValidationMessages.BrandName.WordLimitMessage);
}
.
.
.
if((!vehicleValidationsMetadata.RegistrationNumber.CanContainAlphabets)&&
isNaN(parseInt(registrationNumber))){
alert(vehicleValidationMessages.RegistrationNumber.FormatMessage);
}
varccNum=parseInt(CC);
if(ccNumccNum>vehicleValidationMessages.CC.maxCC){
alert(vehicleValidationMessages.CC.RangeMessage);
}
}


这段代码看上去是不是好多了?它没有在JavaScript中混入服务器代码。如果服务器端更改存储元数据的方法,则无需再重写客户机脚本。这会使JSP编程人员的日子更轻松些。

扩展客户端数据缓存

某些Web应用程序要求用户为同一个属性或对象输入多个数据。例如,person-vehicle要求人员为其拥有的每台车辆都输入数据。如果此人拥有多台车辆,应用程序必须允许输入多台车辆的数据。我将把此类对象作为一个多组属性来引用。如果多组属性包含任何可以保存多个数据实例的属性,我将称之为多值属性。

现在,多组属性和多值属性面临的问题是必须将数据输入到相同的输入字段中。那意味着在输入第二台车辆的数据之前,必须先保存已输入的第一台车辆的数据。您可以通过两种方法来解决此问题:

将第一台车辆的数据发送到服务器上并清空输入字段,以允许用户输入下一台车辆的数据。
将数据缓存到客户机上并清空输入字段,以允许用户输入下一台车辆的数据。
第一种方法存在的问题是每输入一台车辆的数据就需要访问一次服务器。这不太好;如果在输入车辆数据后都必须等待服务器响应,用户会觉得很失望。换种方法,第二种方法的响应时间几乎为零。用户可以快速输入所有车辆数据而无需等待。但这里需要考虑的是如何将数据存储到客户端上。这里有更多方法可将数据存储到客户机上:

在用户单击以添加下一台车辆的数据时将数据以某种形式缓存到隐藏的表字段中。
将数据缓存到一个JavaScript对象中。
如果要将数据存储到隐藏字段中,您会为用户每次输入新的车辆数据都要处理很多隐藏字段或处理隐藏字段数据而感到烦恼。这就像有字符串操作就需要频繁处理字符串一样。

但是第二种缓存数据的方法提供了一种面向对象的方法来缓存。当用户输入新车辆数据时,您将在数组对象中创建一个新元素。不需要任何笨拙的字符串操作。当用户输完所有车辆数据后,您只需构建一个源于该对象的JSON字符串,并通过存储到某个隐藏字段中的方式将该字符串发送至服务器。这种方法要比第一种方法好得多。

JSON、数据缓存和Ajax功能

当使用JSON将数据缓存到客户端时,系统将在用户每次单击AddVehicle按钮时更新数据缓存对象。用于完成此项任务的JavaScript函数看起来可能跟清单5一样。


清单5.用于将车辆数据添加到JavaScript对象中以进行客户端缓存的函数

functionaddVehicleData(){
varbrand=//getvehiclebrand;varregNo=//getregistrationnumber;
varcc=//getcc;

vehicleData[vehicleData.length]=newObject();
vehicleData[vehicleData.length].brandName=newObject();
vehicleData[vehicleData.length].brandName=brand;
//samewayupdateothertwoproperties
}


在这里,vehicleData是用于在用户装入页面时进行初始化的JavaScript变量。它被初始化为一个新的数组对象,该数组对象为空或者含有用户先前输入的车辆的车辆元素。

当此函数将数据保存到JavaScript对象中后,程序可以调用另一个函数来清空输入字段以允许用户输入新数据。

在此类应用程序中,要求用户输入出现次数最少或出现次数最多的多组或多值属性。您可以将这些限制置入JSON元数据对象中。在这种情况下,先前的元数据对象将变为清单6中所示的代码。


清单6.带有出现次数限制的JSON元数据对象

varvehicleValidationsMetadata={
"MIN_OCC":{0},
"MAX_OCC":{10},
"MAX_OCC_MSG":{"...."},
"MIN_OCC_MSG":{".....},
//Everythingelseisthesame
}


然后,addVehicleData()函数将先验证数据的出现次数,然后在仅当总出现次数未超出允许的限制时再将数据添加到JavaScript对象中。清单7显示了检查方法。


清单7.JSON元数据对象限制检查

functionaddVehicleData(){
if(vehicleData.length==vehicleValidationsMetadata.MAX_OCC-1){
alert(vehicleValidationsMetadata.MAX_OCC_MSG);
}//Everythingelseisthesame
}


当用户提交一个页面时调用的函数实际上用于验证最少的出现次数。这种方法的最大好处是屏幕不需要刷新以输入新车辆数据。提供此类静态屏幕曾经是Ajax技术的主要目标,而您现在用JSON也能完成此目标。这是关于更新JSON数据对象和通过JavaScript处理HTMLDOM树的全部内容。用户响应时间是最小值,因为所有操作仅在客户端上执行。您可以使用JSON来为应用程序提供Ajax功能。

当用户单击Save按钮时,程序将调用另一个JavaScript函数,该函数将把此JSON对象字符串化并将其存储到程序提交到服务器上的隐藏表字段中。JSON.js(请参阅参考资料)有一个JSON.stringify()函数,该函数将获取JavaScript对象作为输入并返回字符串输出。

服务器端必须能够理解JSON形式的字符串并生成一个服务器端对象,以处理和保存数据。Web站点http://www.json.org/java/i...提供了一个JavaAPI,该API用于处理基于Java的应用程序的大部分需求。

结束语

您在本文中看到了JSON的强大用途。归结如下:

JSON提供了一种优秀的面向对象的方法,以便将元数据缓存到客户机上。
JSON帮助分离了验证数据和逻辑。
JSON帮助为Web应用程序提供了Ajax的本质。

相关推荐