數(shù)據(jù)驗(yàn)證是每個(gè)企業(yè) Web 應(yīng)用程序中最富于挑戰(zhàn)性、日新月異的部分。通常驗(yàn)證元數(shù)據(jù)會(huì)使 JavaScript 模塊中混入服務(wù)器端代碼。在本文中，您將了解如何在服務(wù)器代碼的幫助下將元數(shù)據(jù)緩存在客戶端的優(yōu)秀方法，服務(wù)器代碼將提供 JSON（JavaScript Object Notation）形式的字符串化元數(shù)據(jù)。這種方法還允許以類似 Ajax 的方式來處理多值和多組屬性。
每個(gè)應(yīng)用程序的開發(fā)都是為了解決某個(gè)領(lǐng)域的問題。而每個(gè)領(lǐng)域都有自己的一套約束數(shù)據(jù)的規(guī)則和規(guī)范。應(yīng)用程序?qū)⑦@些約束應(yīng)用于數(shù)據(jù)時(shí)，約束也就成了驗(yàn)證。所有應(yīng)用程序都需要驗(yàn)證用戶輸入的數(shù)據(jù)。

目前，應(yīng)用程序一般都使用 if-else 語句組合來驗(yàn)證數(shù)據(jù)。這些語句包含了開發(fā)人員硬編碼或通過服務(wù)器端代碼置入的驗(yàn)證數(shù)據(jù)。通常，開發(fā)人員會(huì)使用服務(wù)器端代碼來避免可能導(dǎo)致 JavaServer Page（JSP）的細(xì)微數(shù)據(jù)更改。

您可以使用 JavaScript Object Notation（JSON）來分組和緩存元數(shù)據(jù)，并使用 JavaScript 函數(shù)來訪問元數(shù)據(jù)以驗(yàn)證用戶輸入。

JavaScript 中有分散的元數(shù)據(jù)時(shí)，您無法控制服務(wù)器將評估多少數(shù)據(jù)以及有多少數(shù)據(jù)傳遞到客戶機(jī)。所有服務(wù)器端代碼片段都將被評估并發(fā)送到服務(wù)器上。但是，使用 JSON 緩存數(shù)據(jù)時(shí)，您可以完全控制向客戶機(jī)發(fā)送的元數(shù)據(jù)量，因?yàn)榉?wù)器端代碼將生成 JSON 形式的元數(shù)據(jù)。這有助于僅將元數(shù)據(jù)發(fā)送至與看到或輸入數(shù)據(jù)的用戶相對應(yīng)的客戶機(jī)上。

您還可以使用 JSON 來緩存用戶輸入的數(shù)據(jù)。程序緩存數(shù)據(jù)后，將擦除數(shù)據(jù)字段而不是刷新屏幕，這與 Ajax 類似。通過這種方法，用戶可以為同一屬性輸入另一組數(shù)據(jù)。

讓我們一起來探究一下如何使用 JSON 來緩存元數(shù)據(jù)。

JSON 概覽

使用 JSON（即 JavaScript Object Notation），將以一種特定的字符串形式來表示 JavaScript 對象。如果將具有這樣一種形式的字符串賦給任意一個(gè) JavaScript 變量，該變量隨后將引用一個(gè)通過指定給該變量的字符串構(gòu)建的對象。

例如，假定有一個(gè) policy 對象，它擁有以下屬性：

計(jì)劃名稱 
描述 
持續(xù)時(shí)間 
您可以使用以下這種 JSON 形式的字符串來表示該 policy 對象：

{"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan"}, "Term":{"20 years"}} 

如果將此字符串賦給任意一個(gè) JavaScript 變量，則該變量將接受以這種對象為單位的數(shù)據(jù)。要訪問數(shù)據(jù)，請?zhí)峁┬枰L問的屬性所在的路徑。對于本例，將以上字符串賦給一個(gè)名為 policy 的變量：

var policy = {"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan"}, "Term":{"20 years"}} 

將此字符串粘貼到 HTML 頁面的標(biāo)題部分中，然后編寫以下警報(bào)：

alert(policy.Plan) 

如果在任何支持 JavaScript 的瀏覽器中查看此頁面，您都會(huì)看到顯示策略計(jì)劃的警報(bào)。

示例

為了演示 JSON 的性能，我們來看一個(gè)有 vehicle 對象列表的 person 對象和一個(gè)可以擁有一臺或多臺車輛的 person 對象。每臺車輛都有以下屬性：

品牌 
注冊碼 
CC 
瀏覽器 UI 應(yīng)當(dāng)允許用戶添加多臺具有優(yōu)秀應(yīng)用性能的車輛（通常為固有要求）。每個(gè)屬性都有一些與之關(guān)聯(lián)的限制或驗(yàn)證規(guī)則。您需要指定以下規(guī)則：

品牌名稱 
品牌名稱決不能包含數(shù)字。 
品牌名稱最多可包含兩個(gè)單詞，中間可加一個(gè)空格。 
注冊碼 
注冊碼必須全都是數(shù)字。 
CC 
CC 必須全都是數(shù)字。 
CC 的最小值為 50，最大值為 5000。 
將有三個(gè)與車輛屬性相對應(yīng)的輸入字段，用戶可在其中輸入信息。接下來，您將看到如何將驗(yàn)證消息分組到 JSON 組中以及如何訪問這些驗(yàn)證消息。

傳統(tǒng)方法

現(xiàn)在，當(dāng)用戶輸入的車輛數(shù)據(jù)為 40CC 時(shí)，程序必須顯示一條消息，說明輸入的數(shù)據(jù)不在有效的 CC 范圍內(nèi)。您可以用 清單 1 中的代碼簡單地顯示這條消息：


清單 1. 傳統(tǒng)代碼

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


ResourceList 是一個(gè)服務(wù)器端類，該類中含有關(guān)于車輛的國際化消息（如 vehicleCCRangeMsg）。這種方法解決問題時(shí)略顯混亂：


在這種方法中，您將把服務(wù)器端代碼添加到所有客戶端驗(yàn)證函數(shù)中，以檢查條件并顯示消息。 
如果更改了元數(shù)據(jù)和消息（例如服務(wù)器端類或變量）的組織方法，您將會(huì)為更改使用這些元數(shù)據(jù)和消息的客戶機(jī)腳本驗(yàn)證函數(shù)感到十分頭痛。 

JSON 能幫助您做什么？

如果只需在條件語句和警報(bào)中引用一個(gè) JavaScript 變量而不是服務(wù)器端代碼，您感覺怎么樣？不需要把服務(wù)器端代碼包含在 JavaScript 中，而保存的服務(wù)器端元數(shù)據(jù)和消息中的更改也不會(huì)影響客戶端腳本。這種方法太棒了，是不是？好的，那就是使用基于 JSON 緩存元數(shù)據(jù)時(shí)要做的。

您將使用一個(gè) JavaScript 對象把我們的驗(yàn)證數(shù)據(jù)和消息分組到一個(gè)層級中。然后就像訪問層級的 JavaScript 對象一樣訪問這些消息。就是這樣，您已經(jīng)做到了！

當(dāng)此 JSON 元數(shù)據(jù)對象就緒后，先前的 JavaScript 代碼片段將類似于 清單 2。


清單 2. 帶有 JSON 元數(shù)據(jù)緩存對象的警報(bào)

if(cc < vehicleValidationsMetadata.CC.minCC || 
                    cc > vehicleValidationsMetadata.CC.maxCC) {
    alert(vehicleValidationsMetadata.CC.RangeMessage);
    } 


現(xiàn)在，問題是誰來準(zhǔn)備 JSON 元數(shù)據(jù)對象？嗯，只有服務(wù)器能做這項(xiàng)工作。服務(wù)器必須生成這個(gè) JSON 對象，并將其提供給客戶機(jī)（瀏覽器）。一些 Java API 可以幫助您準(zhǔn)備此類（事實(shí)上是任意一類）JSON 對象。請參閱 參考資料 來查看那些 API。

生成 JSON 元數(shù)據(jù)對象的典型方法為： 

為實(shí)體及其驗(yàn)證消息準(zhǔn)備一個(gè)層級 Java 對象。 
對這些實(shí)體及其驗(yàn)證消息調(diào)用 toString()。這些實(shí)體及其驗(yàn)證消息最有可能把一個(gè) JSON 形式的字符串提供給您。 
將該字符串另存到一個(gè)請求范圍內(nèi)。 
在 JSP 中，獲取該字符串，并將其指派到 JavaScript 變量值的大括號內(nèi)。 

最終的車輛元數(shù)據(jù)對象看上去就會(huì)像 清單 3 一樣。


清單 3. 驗(yàn)證元數(shù)據(jù) JSON 對象

var vehicleValidationsMetadata = {
    "BrandName":{
                  "CanContainDigits":{false},
              "MaxWords":{2},
            "FormatMessage":{"Brand Name cannot contain digits."}, 
          "WordLimitMessage":{"Brand Name cannot contain more than two words"}
        }, "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"}
    }
} 


服務(wù)器必須生成整個(gè)字符串，第一行和最后一行除外，因?yàn)楫?dāng)前的用戶語言環(huán)境可能要求使用這些消息（并且只有服務(wù)器端代碼能完成這項(xiàng)工作）。在這里，需要注意的一點(diǎn)是此元數(shù)據(jù)對象僅用于驗(yàn)證車輛。更理想的情況是將 vehicle 元數(shù)據(jù)對象封裝到 person 元數(shù)據(jù)對象中。那樣，您就不需要再創(chuàng)建另一個(gè) JavaScript 變量，而只需將該元數(shù)據(jù)對象包含到 person 元數(shù)據(jù)對象中。

在將此元數(shù)據(jù)對象準(zhǔn)備好后，您可以使用該對象中的元數(shù)據(jù)和消息來驗(yàn)證數(shù)據(jù)輸入和顯示消息。現(xiàn)在，驗(yàn)證車輛輸入信息的 JavaScript 函數(shù)看上去就會(huì)跟 清單 4 一樣。


清單 4. 車輛數(shù)據(jù)驗(yàn)證函數(shù)

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 中混入服務(wù)器代碼。如果服務(wù)器端更改存儲元數(shù)據(jù)的方法，則無需再重寫客戶機(jī)腳本。這會(huì)使 JSP 編程人員的日子更輕松些。

擴(kuò)展客戶端數(shù)據(jù)緩存

某些 Web 應(yīng)用程序要求用戶為同一個(gè)屬性或?qū)ο筝斎攵鄠€(gè)數(shù)據(jù)。例如，person-vehicle 要求人員為其擁有的每臺車輛都輸入數(shù)據(jù)。如果此人擁有多臺車輛，應(yīng)用程序必須允許輸入多臺車輛的數(shù)據(jù)。我將把此類對象作為一個(gè) 多組屬性 來引用。如果多組屬性包含任何可以保存多個(gè)數(shù)據(jù)實(shí)例的屬性，我將稱之為 多值屬性。

現(xiàn)在，多組屬性和多值屬性面臨的問題是必須將數(shù)據(jù)輸入到相同的輸入字段中。那意味著在輸入第二臺車輛的數(shù)據(jù)之前，必須先保存已輸入的第一臺車輛的數(shù)據(jù)。您可以通過兩種方法來解決此問題：

將第一臺車輛的數(shù)據(jù)發(fā)送到服務(wù)器上并清空輸入字段，以允許用戶輸入下一臺車輛的數(shù)據(jù)。 
將數(shù)據(jù)緩存到客戶機(jī)上并清空輸入字段，以允許用戶輸入下一臺車輛的數(shù)據(jù)。 
第一種方法存在的問題是每輸入一臺車輛的數(shù)據(jù)就需要訪問一次服務(wù)器。這不太好；如果在輸入車輛數(shù)據(jù)后都必須等待服務(wù)器響應(yīng)，用戶會(huì)覺得很失望。換種方法，第二種方法的響應(yīng)時(shí)間幾乎為零。用戶可以快速輸入所有車輛數(shù)據(jù)而無需等待。但這里需要考慮的是如何將數(shù)據(jù)存儲到客戶端上。這里有更多方法可將數(shù)據(jù)存儲到客戶機(jī)上：

在用戶單擊以添加下一臺車輛的數(shù)據(jù)時(shí)將數(shù)據(jù)以某種形式緩存到隱藏的表字段中。 
將數(shù)據(jù)緩存到一個(gè) JavaScript 對象中。 
如果要將數(shù)據(jù)存儲到隱藏字段中，您會(huì)為用戶每次輸入新的車輛數(shù)據(jù)都要處理很多隱藏字段或處理隱藏字段數(shù)據(jù)而感到煩惱。這就像有字符串操作就需要頻繁處理字符串一樣。

但是第二種緩存數(shù)據(jù)的方法提供了一種面向?qū)ο蟮姆椒▉砭彺妗．?dāng)用戶輸入新車輛數(shù)據(jù)時(shí)，您將在數(shù)組對象中創(chuàng)建一個(gè)新元素。不需要任何笨拙的字符串操作。當(dāng)用戶輸完所有車輛數(shù)據(jù)后，您只需構(gòu)建一個(gè)源于該對象的 JSON 字符串，并通過存儲到某個(gè)隱藏字段中的方式將該字符串發(fā)送至服務(wù)器。這種方法要比第一種方法好得多。

JSON、數(shù)據(jù)緩存和 Ajax 功能

當(dāng)使用 JSON 將數(shù)據(jù)緩存到客戶端時(shí)，系統(tǒng)將在用戶每次單擊 Add Vehicle 按鈕時(shí)更新數(shù)據(jù)緩存對象。用于完成此項(xiàng)任務(wù)的 JavaScript 函數(shù)看起來可能跟 清單 5 一樣。


清單 5. 用于將車輛數(shù)據(jù)添加到 JavaScript 對象中以進(jìn)行客戶端緩存的函數(shù)

function addVehicleData() {
    var brand = //get vehicle brand;   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 是用于在用戶裝入頁面時(shí)進(jìn)行初始化的 JavaScript 變量。它被初始化為一個(gè)新的數(shù)組對象，該數(shù)組對象為空或者含有用戶先前輸入的車輛的車輛元素。

當(dāng)此函數(shù)將數(shù)據(jù)保存到 JavaScript 對象中后，程序可以調(diào)用另一個(gè)函數(shù)來清空輸入字段以允許用戶輸入新數(shù)據(jù)。

在此類應(yīng)用程序中，要求用戶輸入出現(xiàn)次數(shù)最少或出現(xiàn)次數(shù)最多的多組或多值屬性。您可以將這些限制置入 JSON 元數(shù)據(jù)對象中。在這種情況下，先前的元數(shù)據(jù)對象將變?yōu)?nbsp;清單 6 中所示的代碼。


清單 6. 帶有出現(xiàn)次數(shù)限制的 JSON 元數(shù)據(jù)對象

var vehicleValidationsMetadata = {
    "MIN_OCC":{0},
    "MAX_OCC":{10},
    "MAX_OCC_MSG":{"...."},
    "MIN_OCC_MSG":{".....},
    //Everything else is the same
} 


然后，addVehicleData() 函數(shù)將先驗(yàn)證數(shù)據(jù)的出現(xiàn)次數(shù)，然后在僅當(dāng)總出現(xiàn)次數(shù)未超出允許的限制時(shí)再將數(shù)據(jù)添加到 JavaScript 對象中。清單 7 顯示了檢查方法。


清單 7. JSON 元數(shù)據(jù)對象限制檢查

function addVehicleData() {
  if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) {
         alert(vehicleValidationsMetadata.MAX_OCC_MSG);
    }  //Everything else is the same
} 


當(dāng)用戶提交一個(gè)頁面時(shí)調(diào)用的函數(shù)實(shí)際上用于驗(yàn)證最少的出現(xiàn)次數(shù)。這種方法的最大好處是屏幕不需要刷新以輸入新車輛數(shù)據(jù)。提供此類靜態(tài)屏幕曾經(jīng)是 Ajax 技術(shù)的主要目標(biāo)，而您現(xiàn)在用 JSON 也能完成此目標(biāo)。這是關(guān)于更新 JSON 數(shù)據(jù)對象和通過 JavaScript 處理 HTML DOM 樹的全部內(nèi)容。用戶響應(yīng)時(shí)間是最小值，因?yàn)樗胁僮鲀H在客戶端上執(zhí)行。您可以使用 JSON 來為應(yīng)用程序提供 Ajax 功能。

當(dāng)用戶單擊 Save 按鈕時(shí)，程序?qū)⒄{(diào)用另一個(gè) JavaScript 函數(shù)，該函數(shù)將把此 JSON 對象 字符串化 并將其存儲到程序提交到服務(wù)器上的隱藏表字段中。JSON.js（請參閱 參考資料）有一個(gè) JSON.stringify() 函數(shù)，該函數(shù)將獲取 JavaScript 對象作為輸入并返回字符串輸出。

服務(wù)器端必須能夠理解 JSON 形式的字符串并生成一個(gè)服務(wù)器端對象，以處理和保存數(shù)據(jù)。Web 站點(diǎn) http://www.json.org/java/i... 提供了一個(gè) Java API，該 API 用于處理基于 Java 的應(yīng)用程序的大部分需求。

結(jié)束語

您在本文中看到了 JSON 的強(qiáng)大用途。歸結(jié)如下： 

JSON 提供了一種優(yōu)秀的面向?qū)ο蟮姆椒ǎ员銓⒃獢?shù)據(jù)緩存到客戶機(jī)上。 
JSON 幫助分離了驗(yàn)證數(shù)據(jù)和邏輯。 
JSON 幫助為 Web 應(yīng)用程序提供了 Ajax 的本質(zhì)。