每个运用程序的开拓都是为理解决某个领域的问题。而每个领域都有自己的一套约束数据的规则和规范。运用程序将这些约束运用于数据时,约束也就成了验证。所有运用程序都须要验证用户输入的数据。
目前,运用程序一样平常都利用 if-else 语句组合来验证数据。这些语句包含了开拓职员硬编码或通过做事器端代码置入的验证数据。常日,开拓职员会利用做事器端代码来避免可能导致 JavaServer Page(JSP)的细微数据变动。
您可以利用 JavaScript Object Notation(JSON)来分组和缓存元数据,并利用 JavaScript 函数来访问元数据以验证用户输入。
JavaScript 中有分散的元数据时,您无法掌握做事器将评估多少数据以及有多少数据通报到客户机。所有做事器端代码片段都将被评估并发送到做事器上。但是,利用 JSON 缓存数据时,您可以完备掌握向客户机发送的元数据量,由于做事器端代码将天生 JSON 形式的元数据。这有助于仅将元数据发送至与看到或输入数据的用户相对应的客户机上。
您还可以利用 JSON 来缓存用户输入的数据。程序缓存数据后,将擦除数据字段而不是刷新屏幕,这与 Ajax 类似。通过这种方法,用户可以为同一属性输入另一组数据。
让我们一起来探究一下如何利用 JSON 来缓存元数据。
JSON 概览
利用 JSON(即 JavaScript Object Notation),将以一种特定的字符串形式来表示 JavaScript 工具。如果将具有这样一种形式的字符串赋给任意一个 JavaScript 变量,该变量随后将引用一个通过指定给该变量的字符串构建的工具。
例如,假定有一个 policy 工具,它拥有以下属性:
操持名称描述持续韶光您可以利用以下这种 JSON 形式的字符串来表示该 policy 工具:
{\"大众Plane\"大众:{\"大众Full Life Cover\"大众}, \公众Description\"大众:{\公众The best life insurance plan\公众}, \公众Term\公众:{\"大众20 years\公众}}
如果将此字符串赋给任意一个 JavaScript 变量,则该变量将接管以这种工具为单位的数据。要访问数据,请供应须要访问的属性所在的路径。对付本例,将以上字符串赋给一个名为 policy 的变量:
var policy = {\"大众Plane\公众:{\"大众Full Life Cover\"大众}, \"大众Description\"大众:{\公众The best life insurance plan\"大众}, \公众Term\公众:{\"大众20 years\公众}}
将此字符串粘贴到 HTML 页面的标题部分中,然后编写以下警报:
alert(policy.Plan)
如果在任何支持 JavaScript 的浏览器中查看此页面,您都会看到显示策略操持的警报。
示例
为了演示 JSON 的性能,我们来看一个有 vehicle 工具列表的 person 工具和一个可以拥有一台或多台车辆的 person 工具。每台车辆都有以下属性:
品牌注册码CC浏览器 UI 应该许可用户添加多台具有精良运用性能的车辆(常日为固有哀求)。每个属性都有一些与之关联的限定或验证规则。您须要指定以下规则:
品牌名称品牌名称决不能包含数字。品牌名称最多可包含两个单词,中间可加一个空格。注册码注册码必须全都是数字。CCCC 必须全都是数字。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(cc < vehicleValidationsMetadata.CC.minCC || cc > vehicleValidationsMetadata.CC.maxCC) { alert(vehicleValidationsMetadata.CC.RangeMessage);}
现在,问题是谁来准备 JSON 元数据工具?嗯,只有做事器能做这项事情。做事器必须天生这个 JSON 工具,并将其供应给客户机(浏览器)。一些 Java API 可以帮助您准备此类(事实上是任意一类)JSON 工具。请参阅 参考资料 来查看那些 API。
天生 JSON 元数据工具的范例方法为:
为实体及其验证准备一个层级 Java 工具。对这些实体及其验证调用 toString()。这些实体及其验证最有可能把一个 JSON 形式的字符串供应给您。将该字符串另存到一个要求范围内。在 JSP 中,获取该字符串,并将其指派到 JavaScript 变量值的大括号内。终极的车辆元数据工具看上去就会像 清单 3 一样。
清单 3. 验证元数据 JSON 工具
var vehicleValidationsMetadata = { \"大众BrandName\公众:{ \公众CanContainDigits\"大众:{false}, \"大众MaxWords\公众:{2}, \"大众FormatMessage\公众:{\"大众Brand Name cannot contain digits.\"大众}, \"大众WordLimitMessage\"大众:{\"大众Brand Name cannot contain more than two words\公众} },<br> \公众RegistrationNumber\"大众:{ \公众CanContainAlphabets\公众:{false}, \公众CanContainDigits\"大众:{\公众true\"大众}, \公众FormatMessage\"大众:{\公众Registration Number can contain only digits.\"大众} }, \"大众CC\"大众:{ \"大众minCC\公众:{50}, \"大众maxCC\"大众:{5000}, \公众FormatMessage\公众: {\"大众CC can only be numeric\"大众}, \"大众RangeMessage\公众:{\公众CC can be within range of 50 and 5000\公众} } }
做事器必须天生全体字符串,第一行和末了一行除外,由于当前的用户措辞环境可能哀求利用这些(并且只有做事器端代码能完成这项事情)。在这里,须要把稳的一点是此元数据工具仅用于验证车辆。更空想的情形是将 vehicle 元数据工具封装到 person 元数据工具中。那样,您就不须要再创建另一个 JavaScript 变量,而只需将该元数据工具包含到 person 元数据工具中。
在将此元数据工具准备好后,您可以利用该工具中的元数据和来验证数据输入和显示。现在,验证车辆输入信息的 JavaScript 函数看上去就会跟 清单 4 一样。
清单 4. 车辆数据验证函数
function validateVehicleData() { var brandName = //get brand name from form field var registrationNumber = //get Registration Number from form field. var CC = //get CC from form field var brandNameTokens = brandName.split(' '); if(brandNameTokens.length > vehicleValidationsMetadata.BrandName.MaxWords) { alert(vehicleValidationMessages.BrandName.WordLimitMessage); } . . . if((!vehicleValidationsMetadata.RegistrationNumber.CanContainAlphabets) && isNaN(parseInt(registrationNumber))) { alert(vehicleValidationMessages.RegistrationNumber.FormatMessage); } var ccNum = parseInt(CC); if(ccNum < vehicleValidationMessages.CC.minCC || ccNum > vehicleValidationMessages.CC.maxCC) { alert(vehicleValidationMessages.CC.RangeMessage); }}
这段代码看上去是不是好多了?它没有在 JavaScript 中混入做事器代码。如果做事器端变动存储元数据的方法,则无需再重写客户机脚本。这会使 JSP 编程职员的日子更轻松些。
扩展客户端数据缓存
某些 Web 运用程序哀求用户为同一个属性或工具输入多个数据。例如,person-vehicle 哀求职员为其拥有的每台车辆都输入数据。如果此人拥有多台车辆,运用程序必须许可输入多台车辆的数据。我将把此类工具作为一个 多组属性 来引用。如果多组属性包含任何可以保存多个数据实例的属性,我将称之为 多值属性。
现在,多组属性和多值属性面临的问题是必须将数据输入到相同的输入字段中。那意味着在输入第二台车辆的数据之前,必须先保存已输入的第一台车辆的数据。您可以通过两种方法来办理此问题:
将第一台车辆的数据发送到做事器上并清空输入字段,以许可用户输入下一台车辆的数据。将数据缓存到客户机上并清空输入字段,以许可用户输入下一台车辆的数据。第一种方法存在的问题是每输入一台车辆的数据就须要访问一次做事器。这不太好;如果在输入车辆数据后都必须等待做事器相应,用户会以为很失落望。换种方法,第二种方法的相应韶光险些为零。用户可以快速输入所有车辆数据而无需等待。但这里须要考虑的是如何将数据存储到客户端上。这里有更多方法可将数据存储到客户机上:
在用户单击以添加下一台车辆的数据时将数据以某种形式缓存到隐蔽的表字段中。将数据缓存到一个 JavaScript 工具中。如果要将数据存储到隐蔽字段中,您会为用户每次输入新的车辆数据都要处理很多隐蔽字段或处理隐蔽字段数据而感到烦恼。这就像有字符串操作就须要频繁处理字符串一样。
但是第二种缓存数据的方法供应了一种面向工具的方法来缓存。当用户输入新车辆数据时,您将在数组工具中创建一个新元素。不须要任何笨拙的字符串操作。当用户输完所有车辆数据后,您只需构建一个源于该工具的 JSON 字符串,并通过存储到某个隐蔽字段中的办法将该字符串发送至做事器。这种方法要比第一种方法好得多。
JSON、数据缓存和 Ajax 功能
当利用 JSON 将数据缓存到客户端时,系统将在用户每次单击 Add Vehicle 按钮时更新数据缓存工具。用于完成此项任务的 JavaScript 函数看起来可能跟 清单 5 一样。
清单 5. 用于将车辆数据添加到 JavaScript 工具中以进行客户端缓存的函数
function addVehicleData() { var brand = //get vehicle brand;<br> var regNo = //get registration number; var cc = //get cc; vehicleData[vehicleData.length] = new Object(); vehicleData[vehicleData.length].brandName = new Object(); vehicleData[vehicleData.length].brandName = brand; //same way update other two properties }
在这里,vehicleData 是用于在用户装入页面时进行初始化的 JavaScript 变量。它被初始化为一个新的数组工具,该数组工具为空或者含有用户先前输入的车辆的车辆元素。
当此函数将数据保存到 JavaScript 工具中后,程序可以调用另一个函数来清空输入字段以许可用户输入新数据。
在此类运用程序中,哀求用户输入涌现次数最少或涌现次数最多的多组或多值属性。您可以将这些限定置入 JSON 元数据工具中。在这种情形下,先前的元数据工具将变为 清单 6 中所示的代码。
清单 6. 带有涌现次数限定的 JSON 元数据工具
var vehicleValidationsMetadata = { \"大众MIN_OCC\"大众:{0}, \"大众MAX_OCC\公众:{10}, \"大众MAX_OCC_MSG\公众:{\"大众....\"大众}, \"大众MIN_OCC_MSG\公众:{\公众.....}, //Everything else is the same }
然后,addVehicleData() 函数将先验证数据的涌现次数,然后在仅当总涌现次数未超出许可的限定时再将数据添加到 JavaScript 工具中。清单 7 显示了检讨方法。
清单 7. JSON 元数据工具限定检讨
function addVehicleData() { if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) { alert(vehicleValidationsMetadata.MAX_OCC_MSG); }<br> //Everything else is the same}
当用户提交一个页面时调用的函数实际上用于验证最少的涌现次数。这种方法的最大好处是屏幕不须要刷新以输入新车辆数据。供应此类静态屏幕曾经是 Ajax 技能的紧张目标,而您现在用 JSON 也能完成此目标。这是关于更新 JSON 数据工具和通过 JavaScript 处理 HTML DOM 树的全部内容。用户相应韶光是最小值,由于所有操作仅在客户端上实行。您可以利用 JSON 来为运用程序供应 Ajax 功能。
当用户单击 Save 按钮时,程序将调用另一个 JavaScript 函数,该函数将把此 JSON 工具 字符串化 并将其存储到程序提交到做事器上的隐蔽表字段中。JSON.js(请参阅 参考资料)有一个 JSON.stringify()函数,该函数将获取 JavaScript 工具作为输入并返回字符串输出。
做事器端必须能够理解 JSON 形式的字符串并天生一个做事器端工具,以处理和保存数据。Web 站点 http://www.json.org/java/index.html 供应了一个 Java API,该 API 用于处理基于 Java 的运用程序的大部分需求。
结束语
您在本文中看到了 JSON 的强大用场。归结如下:
JSON 供应了一种精良的面向工具的方法,以便将元数据缓存到客户机上。JSON 帮助分离了验证数据和逻辑。JSON 帮助为 Web 运用程序供应了 Ajax 的实质。