Кэширование с помощью JSON

Опции документа Опции документа, требующие включения JavaScript, не отображаются Обсудить Выскажите мнение об этой странице Помогите нам улучшить содержание

Уровень сложности: средний

Бакуль Патель, разработчик программного обеспечения, IBM

08.06.2007

Верификация данных один из наиболее изменяющихся параметров предметной области Web приложения. Зачастую верификация метаданных оставляет в модулях JavaScript много серверных программ. В этой статье показан путь кэширования метаданных клиента посредством серверных программ, которые предусматривают строчные метаданные формата JSON (Представление объекта JavaScript Object Notation). Этот подход позволит вам обрабатывать многозначные и многогрупповые атрибуты как в Ajax.

Каждое приложение указывает на проблему домена. А каждый домен имеет свои определенные правила и установки, которые ограничивают данные. Когда приложение использует это ограничение, то ограничение устанавливает достоверность данных. Все приложения должны проверять достоверность данных, введенных пользователем.

На сегодня, приложения, в основном, используют для верификации утверждений если-тогда (if-else). Эти приложения содержат данные для верификации, запрограммированные разработчиками либо введенные серверной программой. В основном, разработчики используют серверные программы, чтобы избежать изменений данных, которые могут привести к изменениям страниц JavaServer Pages (JSP).

Вы можете использовать представление объекта JavaScript Object Notation (JSON) для группировки и кэширования метаданных, и использовать функцию JavaScript, что позволит метаданным проверить достоверность ввода пользователя.

Если метаданные будут рассеяны по JavaScript, вы не сможете контролировать, сколько данных сервер распознает и отправляет клиенту. Вместо этого, все элементы серверных программ распознаются и отправляются на сервер. Однако, когда вы кэшируете данные с помощью JSON, вы полностью контролируете количество, отправляемой клиенту, информации, потому что серверная программа генерирует метаданные формата JSON. Это способствует отправке метаданных клиенту, который корреспондирует пользователю, который получит или введет данные.

Также вы можете использовать JSON, чтобы кэшировать данные, введенные пользователем. Как только программа будет кэшировать данные, она очистит поля данных быстрее, чем обновится экран, как в Ajax. Таким образом, пользователь может ввести другое множество данных с этой же целью.

Давайте, исследуем кэширование метаданных с помощью JSON.

JSON - вкратце

С помощью JSON, или представлением данных JavaScript Object Notation, вы представляете свой объект (JavaScript object) в особом строчном формате. Если вы присвоите строку с таким форматом любой переменной JavaScript, переменная отправится объекту, созданному из строки, присвоенной ему.

Представьте, что у вас есть объект стратегии с такими атрибутами:

• Название плана (Plan Name)
• Описание (Description)
• Продолжительность (Duration)

Вы можете представить эту стратегию в формате JSON с использованием следующей строки:

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

Если вы присвоите строку с таким форматом любой переменной JavaScript, переменная примет данные объекта. Чтобы сделать данные доступными, задайте путь доступа нужного атрибута. В этом примере, присвойте строку переменной с именем Стратегия:

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

Вставьте эту строку в раздел заголовка вашей HTML страницы и напишите следующее извещение:

alert(policy.Plan)

Если вы увидите эту страницу в браузере, поддерживающем JavaScript, вы увидите, что извещение отображает план стратегии.

Пример

Для демонстрации свойств JSON, вам нужно выбрать объект, имеющий перечень программ, и объект который может иметь одну или несколько программ. Каждая программа имеет свои свойства:

• Имя марки (Brand Name)
• Регистрационный номер (Registration Number)
• Классификационный код (CC)

Браузер должен позволить пользователям добавлять множество программ с наилучшим качеством приложений (обычно, требование установлено). Каждое свойство имеет свое присоединенное ограничение либо правило верификации. Вы присвоите следующие правила:

• Имя марки
  • Имя марки не должно содержать цифр.
  • Имя марки должно состоять максимум из двух слов, разделенных пробелом.
• Регистрационный номер
  • Регистрационный номер должен содержать только цифры.
• Классификационный код (CC)
  • Классификационный код (CC)должен содержать только цифры.
  • Классификационный код (CC)может быть только от 50 до 5000.

У вас будет 3 поля для ввода, соответствующих свойствам программы, куда пользователь может вводить информацию. Затем вы узнаете, как группировать сообщения верификации в группу JSON, и как найти доступ к ним.

Условный подход

Теперь, если пользователь введет 40 CC для данных программы, программа должна отобразить сообщение, что введенные данные не совпадают с достоверными СС. Это сообщение показано в листинге 1:

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

Перечень ресурсов (ResourceList) это серверная категория, которая содержит интернационализированные сообщения в таких переменных, как vehicleCCRangeMsg . Решение задачи этим подходом имеет некоторые погрешности:

1. Вы добавляете серверную программу всем клиентским функциям верификации, чтобы проверять условия их работы и отображать сообщения.
2. Если изменить путь формирования метаданных и сообщений (таких как северные категории и переменные), вы прекратите изменение функций верификации клиента.

Каковы функции JSON

Что если бы вам пришлось обращаться только к переменной JavaScript в случае ошибки, т.е. без участия серверной программы? В вашем JavaScript не будет серверной программы и изменения в серверных метаданных и сообщениях не будут влиять на клиентскую программу. Разве не здорово? Это и будет обеспечено, если вы используете кэширование метаданных, основанных на JSON.

Вы используете объект JavaScript, чтобы сгруппировать данные верификации и сообщений по иерархии. У вас будет доступ к этим сообщениям, как есть доступ к иерархическому объекту JavaScript.

Как только вы установите объект метаданных JSON, ваш предыдущий элемент JavaScript будет выглядеть, как показывает листинг 2.

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

Речь о том, кто подготовит объект метаданных (JSON metadata object)? Это может сделать только сервер. Сервер должен вывести и предоставить объект (JSON object) клиенту (браузер). Некоторые интерфейсы прикладного программирования (Java APIs) помогут вам приготовить такие объекты JSON. См. Ресурсы, чтобы найти эти APIs.

Стандартный подход генерирования объекта метаданных JSON - это

1. Вы подготавливаете иерархический объект Java к вашим установкам и сообщениям верификации сервера
2. Вызовите toString() их. Это предоставит вам строку формата JSON.
3. Сохраните эту строку в контексте запроса.
4. В JSP, возьмите эту строку и присвойте ее значение переменной JavaScript, заключив строку в фигурные скобки переменной.

Заключительный объект метаданных показан в листинге 3.

                 
 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"}
     }
 }

Сервер должен вывести эту строку для всех строк, кроме первой и последней, потому что местная специфика пользователя может затребовать эти сообщения (а это может сделать только серверная программа). Заметьте, что объект метаданных используется только для верификации программы. Лучшая инкапсуляция обеспечивается, если объект метаданных программы является частью персонального объекта метаданных. Таким образом, чем создавать новую переменную JavaScript, вы можете просто включить объект метаданных в ваш персональный объект метаданных.

Как только объект метаданных будет готов, вы можете использовать метаданные и сообщения объекта для верификации введенных данных и отображения сообщений. Функция JavaScript, которая верифицирует введенные данные программы, показана в листинге 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 приложения требуют, чтобы пользователь вводил многокомпонентные данные для одинаковых объектов. Например, персональная программа требует, чтобы пользователь ввел данные для каждой его программы. Если он оперирует более чем одной программой, приложение позволит вводить данные для всех программ. Нужно обратиться за информацией к многогрупповому атрибуту. Если многогрупповой атрибут содержит множества с многокомпонентными данными, нужно обратиться к многозначному атрибуту.

Проблема, связанная с этими атрибутами, состоит в том, что вы должны вводить информацию в одинаковые поля ввода. Т есть, прежде чем ввести данные для второй программы, вы должны сохранить данные первой программы. Эту проблему можно решить двумя способами:

1. Отправьте данные первой программы на сервер и очистите поля ввода, чтобы пользователь мог ввести новую информацию.
2. Кэшируйте данные клиента, чтобы пользователь мог ввести новую информацию.

Проблема первого подхода в том, что каждый ввод данных программы сопровождается посещением сервера. Это плохо; пользователь раздражается вследствие длительного ожидания ответа сервера. Тогда как второй подход не сопровождается ожиданием. Пользователь может быстро ввести данные программы. Но здесь следует обратить внимание на то, как клиент кэширует данные. Вот еще два способа сохранения данных для клиента:

1. Кэшируйте данные в скрытое поле формы в определенном формате, так чтобы пользователь мог добавить данные новой программы.
2. Кэшируйте данные в объект JavaScript.

Когда вы сохраняете данные в скрытых полях, вы прерываете управление скрытыми полями каждый раз, когда пользователь вводит новые данные программы. Также как вы управляете строчными операциями.

Но другая форма кэширования данных предлагает объектно-ориентированный подход к кэшированию. Когда пользователь вводит новые данные программы, вы создаете новый элемент в массиве объекта. Нет неловких строчных операций. Когда пользователь создаст все программы, он может просто создать форму строки JSON вне этого объекта и отправить его на сервер, сохранив его в скрытом поле. Этот подход гораздо лучше предыдущего.

JSON, кэширование данных и свойства Ajax

Когда вы кэшируете данные клиента с помощью JSON, вы обновляете объект кэширования данных каждый раз, когда пользователь нажимает кнопку "Добавить программу". Функция JavaScript, выполняющая это задание показана в листинге 5.

                 
 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
 }

Здесь данные программы - это переменная JavaScript, которая инициализируется, когда пользователь загружает страницу. Она инициализируется в новый массив объекта, который пуст или имеет ранее сохраненные данные.

Когда функция сохранит данные в объект JavaScript, программа вызовет другую функцию, которая очистит поля ввода, чтобы пользователь мог ввести новые данные.

В этих приложениях требуется, чтобы пользователь ввел определенное максимальное или минимальное число событий многогруппового или многозначного атрибута. Вы можете ввести эти лимиты в объект метаданных JSON. Сформированный объект метаданных показан в листинге 6.

                 
 var vehicleValidationsMetadata = {
     "MIN_OCC":{0},
     "MAX_OCC":{10},
     "MAX_OCC_MSG":{"...."},
     "MIN_OCC_MSG":{".....},
     // Остальное остается без изменений
 }

Затем addVehicleData() функция добавления данных программы, во-первых, кэширует данные на события, и добавляет данные в объект JavaScript, если количество событий не превышает лимиты. Листинг 7 показывает, как проверить это.

                 
  function addVehicleData() {
   if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) {
          alert(vehicleValidationsMetadata.MAX_OCC_MSG);
     }
  //Остальное остается без изменений
}

Функция, вызываемая, когда пользователь открывает страницу, проверяет на минимальное количество событий. Наибольшим преимуществом такого подхода есть то, что изображение не обновляется, чтобы ввести новые данные программы. Обеспечение статического изображение было основной целью технологии Ajax, и также может осуществляться с помощью JSON. В этом и состоит обновление объекта данных JSON и управление деревом HTML DOM через JavaScript. Время пользователя минимизируется, так как он может осуществить все действия самостоятельно. Вы можете использовать JSON, чтобы снабдить ваше приложение свойствами Ajax .

Когда пользователь нажимает кнопку Сохранить, программа вызывает другую функцию JavaScript, которая делает строчным этот объект JSON и сохраняет его в поле скрытой формы, которую программа отправляет серверу. JSON.js (см. Ресурсы) имеет JSON.stringify() функцию, которая рассматривает объект JavaScript как ввод и возвращает строчный вывод.

Сервер должен распознать строку формата JSON и вывести серверный объект, чтобы сохранить данные. Web сайт http://www.json.org/java/index.html предоставляет Java API, который соответствует всем требованиям приложениям Java.

Заключение

в этой статье вы увидели, как используется JSON. Выводы:

1. JSON предлагает легкий и объектно-ориентированный путь кэширования метаданных клиента.
2. JSON помогает разделить верификацию данных и логику.
3. JSON способствует введению технологии Ajax в Web приложение.

Ресурсы

• Оригинал статьи Cache in with JSON.
  
  
• json.js: Загрузите JavaScript для JSON.
  
  
• Java API: Получите бесплатный API для JSON.
  
  
• json.org: Получите полезную информацию, пособия и каналы связи для представления объекта JavaScript Object Notation.
  
  
• Ajax: Узнайте больше об Ajax и о том, как ввести эти технологии в Web разработку, на информационном сайте.
  
  
• Работы разработчиков Ajax Resource Center: Проверьте информацию о модели программирования Ajax, включая статьи, пособия, форумы, события и новости.
  
  
• Web зона на developerWorks: Усовершенствуйте свою работу с информацией, которая специализируется на Web архитектуре и разработке, загрузке и продуктах, проектах с открытым исходным текстом, технических библиотеках, практике и записи событий.
  
  
• технические показатели и версии работ разработчиков: Посетите короткие технические сеансы, которые сократят время обучения, и улучшат качество и результаты ваших проектов программного обеспечения.

• Примите участие в обсуждении материала на форуме.
  
  
• JSON группа на Yahoo: Присоединяйтесь и посмотрите, как используется JSON.
  
  
• Блоги на developerWorks: Подключайтесь к обществу разработчиков!
  
  

Об авторе

		Бакуль Патель (Bakul Patel) - инженер программного обеспечения в IBM. Он разрабатывает продукты, основанные на WebSphere и работал над современными технологиями графического пользовательского интерфейса (GUI technologies), такими как Ajax и JSON. Он увлекается музыкой и прогулками на свежем воздухе

Выскажите мнение об этой странице

Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса. Помогла ли данная информация достичь Вашей цели? Да Нет Не знаю   Пожалуйста, напишите комментарий, чтобы мы могли улучшить данную страницу:   Насколько полезна эта информация? (1 = Бесполезна, 5 = Очень полезна) 1 2 3 4 5

В начало