JSON으로 캐시_json 처리

데이터 검증은 모든 기업 웹 애플리케이션에서 가장 어렵고 끊임없이 변화하는 부분입니다. 메타데이터 유효성 검사에는 서버측 코드를 JavaScript 모듈에 혼합하는 작업이 포함되는 경우가 많습니다. 이 기사에서는 JSON(JavaScript Object Notation) 형식으로 문자열화된 메타데이터를 제공하는 서버 코드를 사용하여 클라이언트 측에서 메타데이터를 캐시하는 좋은 방법에 대해 알아봅니다. 이 접근 방식을 사용하면 Ajax와 유사한 방식으로 다중 값과 ​​속성 집합을 처리할 수도 있습니다.
모든 애플리케이션은 특정 분야의 문제를 해결하기 위해 개발되었습니다. 그리고 각 필드에는 데이터를 관리하는 고유한 규칙 및 사양 세트가 있습니다. 애플리케이션이 이러한 제약 조건을 데이터에 적용하면 제약 조건이 유효성 검사가 됩니다. 모든 애플리케이션에는 사용자가 입력한 데이터의 유효성 검사가 필요합니다.

현재 애플리케이션에서는 일반적으로 if-else 문의 조합을 사용하여 데이터의 유효성을 검사합니다. 이러한 문에는 개발자가 하드 코딩했거나 서버측 코드를 통해 배치한 유효성 검사 데이터가 포함되어 있습니다. 일반적으로 개발자는 JSP(JavaServer Page)가 발생할 수 있는 미묘한 데이터 변경을 방지하기 위해 서버 측 코드를 사용합니다.

JSON(JavaScript Object Notation)을 사용하여 메타데이터를 그룹화하고 캐시할 수 있으며, JavaScript 함수를 사용하여 메타데이터에 액세스하여 사용자 입력의 유효성을 검사할 수 있습니다.

JavaScript에 메타데이터가 분산되어 있으면 서버가 평가할 데이터의 양과 클라이언트에 전달될 데이터의 양을 제어할 수 없습니다. 모든 서버 측 코드 조각이 평가되어 서버로 전송됩니다. 그러나 JSON을 사용하여 데이터를 캐싱하는 경우 서버측 코드가 JSON 형식으로 메타데이터를 생성하므로 클라이언트로 전송되는 메타데이터의 양을 완벽하게 제어할 수 있습니다. 이는 데이터를 보거나 입력한 사용자에 해당하는 클라이언트에게만 메타데이터를 보내는 데 도움이 됩니다.

JSON을 사용하여 사용자가 입력한 데이터를 캐시할 수도 있습니다. 프로그램이 데이터를 캐시한 후에는 Ajax와 유사하게 화면을 새로 고치는 대신 데이터 필드를 지웁니다. 이 방법으로 사용자는 동일한 속성에 대해 다른 데이터 세트를 입력할 수 있습니다.

JSON을 사용하여 메타데이터를 캐시하는 방법을 살펴보겠습니다.

JSON 개요

JSON(JavaScript Object Notation)을 사용하여 JavaScript 개체를 특정 문자열 형식으로 표현합니다. 이러한 형식의 문자열이 JavaScript 변수에 할당되면 변수는 변수에 할당된 문자열로 구성된 개체를 참조합니다.

예를 들어 다음 속성을 가진 정책 개체가 있다고 가정합니다.

계획 이름
설명
기간
다음 JSON 문자열을 사용하여 정책을 나타낼 수 있습니다. 개체:

{"비행기":{"전체 생명 보장"}, "설명":{"최고의 생명 보험 플랜"}, "기간":{"20년"}}

이 문자열이 JavaScript 변수에 할당되면 변수는 이 개체 단위의 데이터를 허용합니다. 데이터에 액세스하려면 액세스해야 하는 속성의 경로를 제공하세요. 이 예에서는 위 문자열을policy라는 변수에 할당합니다.

varpolicy = {"Plane":{"Full Life Cover"}, "Description":{"The best life Insurance plan "}, "Term":{"20 year"}}

이 문자열을 HTML 페이지의 제목 섹션에 붙여넣고 다음 경고를 작성합니다.

alert(policy.Plan)

JavaScript를 지원하는 브라우저에서 이 페이지를 보면 전략 계획을 보여주는 알림이 표시됩니다.

예제

JSON의 성능을 보여주기 위해 차량 객체 목록이 포함된 사람 객체와 차량을 한 대 이상 소유할 수 있는 사람 객체를 살펴보겠습니다. 각 차량에는 다음과 같은 속성이 있습니다.

브랜드
등록 코드
CC
브라우저 UI를 통해 사용자는 뛰어난 애플리케이션 성능을 갖춘 여러 차량을 추가할 수 있어야 합니다(일반적으로 고유한 요구 사항). 각 속성에는 이와 관련된 몇 가지 제한 사항이나 유효성 검사 규칙이 있습니다. 다음 규칙을 지정해야 합니다.

브랜드 이름
브랜드 이름에는 숫자가 포함될 수 없습니다.
브랜드 이름에는 공백을 포함하여 최대 2개의 단어를 포함할 수 있습니다.
등록코드
등록코드는 모두 숫자로 이루어져야 합니다.
CC
CC는 모두 숫자여야 합니다.
CC의 최소값은 50, 최대값은 5000입니다.
사용자가 정보를 입력할 수 있는 차량 속성에 해당하는 3개의 입력 필드가 있습니다. 다음으로 유효성 검사 메시지를 JSON 그룹으로 그룹화하는 방법과 이러한 유효성 검사 메시지에 액세스하는 방법을 살펴보겠습니다.

기존 방식

이제 사용자가 입력한 차량 데이터가 40CC인 경우 프로그램은 입력한 데이터가 유효한 CC 범위 내에 있지 않다는 메시지를 표시해야 합니다.목록 1의 코드를 사용하여 이 메시지를 간단히 표시할 수 있습니다.


목록 1. 기존 코드

if(cc || cc > ) {
Alert();
}


ResourceList는 차량에 대한 국제화된 메시지(예: vehicleCCRangeMsg)를 포함하는 서버측 클래스입니다. 이 접근 방식은 문제를 해결하는 약간 더 복잡한 방법입니다.


이 접근 방식에서는 모든 클라이언트측 유효성 검사 기능에 서버측 코드를 추가하여 조건을 확인하고 메시지를 표시합니다.
메타데이터와 메시지가 구성되는 방식(예: 서버 측 클래스 또는 변수)을 변경하면 이러한 메타데이터와 메시지를 사용하는 클라이언트 스크립트 유효성 검사 기능을 변경하는 데 어려움을 겪게 됩니다.

JSON이 어떤 도움을 줄 수 있나요?

서버 측 코드 대신 조건부 및 경고에서 JavaScript 변수를 참조할 수 있다면 어떤 느낌이 들겠습니까? JavaScript에 서버측 코드를 포함할 필요가 없으며 저장된 서버측 메타데이터 및 메시지의 변경 사항은 클라이언트측 스크립트에 영향을 주지 않습니다. 정말 좋은 접근 방식이군요, 그렇죠? 좋습니다. 이것이 JSON 기반 캐싱 메타데이터를 사용할 때 수행하는 작업입니다.

JavaScript 개체를 사용하여 유효성 검사 데이터와 메시지를 계층 구조로 그룹화합니다. 그런 다음 이러한 메시지는 계층적 JavaScript 개체처럼 액세스됩니다. 그게 다야, 해냈어!

이 JSON 메타데이터 개체가 준비되면 이전 JavaScript 코드 조각은 목록 2와 같습니다.


목록 2. JSON 메타데이터 캐시 객체를 사용한 경고

if(cc Alert(vehicleValidationsMetadata.CC.RangeMessage);
}


이제 질문은 누가 JSON 메타데이터 객체를 준비할 것인가입니다. 글쎄요, 오직 서버만이 그 일을 할 수 있습니다. 서버는 이 JSON 객체를 생성하여 클라이언트(브라우저)에 제공해야 합니다. 여러 Java API는 실제로 모든 종류의 JSON 객체를 준비하는 데 도움이 될 수 있습니다. 해당 API를 보려면 리소스를 참조하세요.

JSON 메타데이터 개체를 생성하는 일반적인 방법은 다음과 같습니다.

엔티티 및 해당 유효성 검사 메시지에 대한 계층적 Java 개체를 준비합니다.
이러한 엔터티와 해당 유효성 검사 메시지에 대해 toString()을 호출하세요. 이러한 엔터티와 해당 유효성 검사 메시지는 JSON 문자열로 제공될 가능성이 높습니다.
문자열을 요청 범위에 저장합니다.
JSP에서 문자열을 가져와 JavaScript 변수 값의 중괄호에 할당합니다.

최종 차량 메타데이터 객체는 목록 3과 같습니다.


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

var vehicleValidationsMetadata = {
    "브랜드 이름":
                'CanCon tainDigits":{false},
              " MaxWords":{2},
            "FormatMessage":{"브랜드 이름에는 숫자가 포함될 수 없습니다."}, 
         "WordLimitMessage":{"브랜드 이름에는 두 단어 이상이 포함될 수 없습니다."}
        }, " RegistrationNumber":{
           "CanContainAlphabets":{false},
             "CanContainDigits":{"true"},
             "FormatMessage":{"등록 번호는 숫자만 포함할 수 있습니다."} 🎜>    } ,
"CC":{
             "minCC":{50},
              "maxCC":{5000},
             "형식 메시지": 참조에는 숫자만 사용할 수 있습니다.'} , 
                "RangeMessage":{"CC는 50~5000 범위 내에 있을 수 있습니다."}
    }
} 


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

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


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

function validateVehicleData() {
     var brandName = //양식 필드에서 브랜드 이름 가져오기
 var registrationNumber = //get Registration N 양식 필드의 umber .
       var CC = //양식 필드에서 CC 가져오기
  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                   ccNum > vehicleValidationMessages.CC.maxCC) {
             alert(vehicleValidationMessages.CC.RangeMessage);  }
} 


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

扩展客户端数据缓存

某些 웹要求用户为同一个属性或对象输入多个数据。例如，사람-차량 要求人员为其拥有每台车辆都输入数据。개인이 여러 차량을 소유한 경우 애플리케이션은 여러 차량에 대한 데이터 입력을 허용해야 합니다. 이러한 유형의 개체를 다중 집합 속성이라고 부르겠습니다. 다중 집합 속성에 여러 데이터 인스턴스를 보유할 수 있는 속성이 포함되어 있는 경우 이를 다중 값 속성이라고 부릅니다.

이제 다중 집합 속성과 다중 값 속성의 문제점은 동일한 입력 필드에 데이터를 입력해야 한다는 것입니다. 이는 두 번째 차량에 대한 데이터를 입력하기 전에 첫 번째 차량에 대해 입력한 데이터를 저장해야 함을 의미합니다. 이 문제는 두 가지 방법으로 해결할 수 있습니다.

첫 번째 차량의 데이터를 서버로 전송하고 입력 필드를 지워 사용자가 다음 차량의 데이터를 입력할 수 있도록 합니다.
사용자가 다음 차량에 대한 데이터를 입력할 수 있도록 클라이언트에서 데이터를 캐시하고 입력 필드를 지웁니다.
첫 번째 방법의 문제점은 차량의 데이터를 입력할 때마다 서버에 접속해야 한다는 점입니다. 이는 좋지 않습니다. 차량 데이터를 입력한 후 서버의 응답을 기다려야 한다면 사용자는 좌절감을 느낄 것입니다. 다르게 말하면 두 번째 방법의 응답 시간은 거의 0입니다. 사용자는 기다리지 않고 모든 차량 데이터를 빠르게 입력할 수 있습니다. 하지만 여기서 고려해야 할 것은 클라이언트에 데이터를 저장하는 방법입니다. 클라이언트에 데이터를 저장하는 몇 가지 방법은 다음과 같습니다.

사용자가 다음 차량에 대한 데이터를 추가하기 위해 클릭하면 숨겨진 테이블 필드에 어떤 형태로든 데이터를 캐시합니다.
데이터를 JavaScript 개체에 캐시합니다.
숨겨진 필드에 데이터를 저장하려면 많은 숨겨진 필드를 처리해야 하거나 사용자가 새로운 차량 데이터를 입력할 때마다 숨겨진 필드 데이터를 처리해야 하는 번거로움이 있을 것입니다. 이는 문자열을 자주 처리해야 하는 문자열 작업과 같습니다.

그러나 두 번째 데이터 캐싱 방법은 캐싱에 대한 객체 지향 접근 방식을 제공합니다. 사용자가 새 차량 데이터를 입력하면 배열 개체에 새 요소가 생성됩니다. 서투른 문자열 조작이 필요하지 않습니다. 사용자가 모든 차량 데이터를 입력하면 객체에서 파생된 JSON 문자열을 작성하고 해당 문자열을 숨겨진 필드에 저장하여 서버로 보내기만 하면 됩니다. 이 방법은 첫 번째 방법보다 훨씬 낫습니다.

JSON, 데이터 캐싱 및 Ajax 기능

JSON을 사용하여 클라이언트에 데이터를 캐시하는 경우 사용자가 차량 추가 버튼을 클릭할 때마다 시스템이 데이터 캐시 개체를 업데이트합니다. 이 작업을 수행하는 데 사용되는 JavaScript 함수는 목록 5와 같습니다.


목록 5. 클라이언트측 캐싱을 위해 JavaScript 객체에 차량 데이터를 추가하는 함수

function addVehicleData() {
varbrand = //get vehiclebrand; regNo = //등록번호 가져오기;
var cc = //cc 가져오기

vehicleData[vehicleData.length] = new Object()
vehicleData[vehicleData.length]. Object();
vehicleData[vehicleData.length].brandName = Brand;
//동일하게 다른 두 속성 업데이트
}


여기서 vehicleData는 JavaScript 변수입니다. 사용자가 페이지를 로드할 때 초기화됩니다. 비어 있거나 이전에 사용자가 입력한 차량의 차량 요소를 포함하는 새 배열 객체로 초기화됩니다.

이 함수가 데이터를 JavaScript 개체에 저장한 후 프로그램은 다른 함수를 호출하여 사용자가 새 데이터를 입력할 수 있도록 입력 필드를 지울 수 있습니다.

이 유형의 애플리케이션에서는 사용자에게 발생 횟수가 가장 적거나 가장 많은 다중 집합 또는 다중 값 속성을 입력하라는 메시지가 표시됩니다. 이러한 제한 사항을 JSON 메타데이터 개체에 넣을 수 있습니다. 이 경우 이전 메타데이터 개체는 목록 6에 표시된 코드가 됩니다.


목록 6. 발생 제한이 있는 JSON 메타데이터 객체

var vehicleValidationsMetadata = {
"MIN_OCC":{0},
"MAX_OCC": {10},
"MAX_OCC_MSG":{"...."},
"MIN_OCC_MSG":{"....},
//다른 모든 것은 동일합니다
}


그런 다음 addVehicleData() 함수는 데이터 발생 횟수를 확인한 다음 총 발생 횟수가 허용된 제한을 초과하지 않는 경우에만 데이터를 JavaScript 개체에 추가합니다.


목록 7. JSON 메타데이터 개체 제한 확인

function addVehicleData() {
if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) {
경고( vehicleValidationsMetadata.MAX_OCC_MSG);
} //다른 것은 동일합니다
}


사용자가 페이지를 제출할 때 호출되는 함수는 실제로 최소 발생 횟수를 확인하는 데 사용됩니다. 이 방법의 가장 큰 장점은 새로운 차량 데이터를 입력하기 위해 화면을 새로 고칠 필요가 없다는 점입니다. Ajax 기술의 주요 목표는 이러한 정적 화면을 제공하는 것이었지만 이제는 JSON을 사용하여 이를 수행할 수 있습니다. 이것은 JSON 데이터 객체를 업데이트하고 JavaScript를 통해 HTML DOM 트리를 조작하는 것에 관한 것입니다. 모든 작업이 클라이언트에서만 수행되므로 사용자 응답 시간이 최소화됩니다. JSON을 사용하여 애플리케이션에 Ajax 기능을 제공할 수 있습니다.

사용자가 저장 버튼을 클릭하면 프로그램은 이 JSON 개체를 문자열화하고 프로그램이 서버에 제출하는 숨겨진 테이블 필드에 저장하는 또 다른 JavaScript 함수를 호출합니다. JSON.js(참고자료 참조)에는 JavaScript 개체를 입력으로 사용하고 문자열 출력을 반환하는 JSON.stringify() 함수가 있습니다.

서버는 JSON 형식의 문자열을 이해하고 데이터를 처리하고 저장하기 위한 서버측 객체를 생성할 수 있어야 합니다. 웹 사이트 http://www.json.org/java/i...에서는 Java 기반 애플리케이션의 요구 사항 대부분을 처리하는 Java API를 제공합니다.

결론

이 기사에서 JSON의 강력한 사용을 확인했습니다. 요약하면 다음과 같습니다.

JSON은 클라이언트에서 메타데이터를 캐시하는 탁월한 객체 지향 방식을 제공합니다.
JSON은 검증 데이터와 로직을 분리하는 데 도움이 됩니다.
JSON은 웹 애플리케이션에 Ajax의 본질을 제공하는 데 도움이 됩니다.