Содержание


Знакомство с JsonML

Использование JsonML для создания элементов интерфейса и расширения их возможностей

Comments

Обмен данными в Ajax

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

В Ajax используется инкапсуляция в XML, повсеместно распространенный и понятный стандарт, с который, однако, также имеет определенные проблемы и ограничения. Основная проблема XML состоит в том, что процесс кодирования информации достаточно ресурсоемок, и в большинстве браузеров процесс декодирования ответа XML также затратен по времени.

Зачастую в приложениях Ajax запрос основывается на содержании формы. Ответом будет представление информации, возвращаемой сервером, в виде ряда объектов Java, которые можно использовать для отображения данных. Результирующая последовательность схожа с представленной на Рисунке 1.

Рисунок 1. Типичный процесс Ajax
Типичный процесс Ajax
Типичный процесс Ajax

В процессе, показанном на Рисунке 1, существует две проблемы:

  • Первая состоит в том, что работа с XML вообще весьма сложна. И в случае, если вы формируете XML в браузере, и если получаете XML с сервера, процесс будет продолжительным и трудоемким и зачастую неэффективным.
  • Вторая проблема состоит в сложности преобразования данных в отображаемый формат. Вам нужно либо создать элементы интерфейса вручную, используя модель DOM, или передать данных в виде предварительно отформатированного XHTML. Во втором методе серверу нужно предоставлять элементы интерфейса (что само по себе может быть достаточно опасным). В первом методе к процессу, который вы хотите сделать максимально эффективным, лишь добавляются дополнительные издержки.

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

Существует несколько вариантов решения этой проблемы. Первый состоит в изменении способа передачи данных с формата XML на JSON. Данная тема лежит за рамками этой статьи, однако знание JSON облегчит понимание JsonML. JsonML предлагает второй вариант решения, значительно облегчая отображение информации. Давайте для начала рассмотрим, что такое JSON.

Описание JSON

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

В основе JSON также лежит текстовый формат, однако он более удобен для восприятия человеком и более совместим с тем, как обычно создаются вложенные объекты данных во многих языках (в том числе Perl, PHP, Python, Java, Ruby). Он также хорошо работает с форматом объектов JavaScript (который по сути является просто структурой вложенных данных).

Например, вы можете создать модель списка компаний в XML, похожую на приведенную в Листинге 1.

Листинг 1. Адресные данные в XML
<business>
<name>One on Wharf</name>
<address>
    <street>1 Wharf Road</street>
    <town>Grantham</town>
    <county>Lincolnshire</county>
</address>
<phonenumbers>
    <phone>01476 123456</phone>
    <phone>01476 654321</phone>
</phonenumbers>
</business>

Чтобы обработать эти данные в JavaScript, для доступа к компонентам необходимо использовать модель DOM. Например, чтобы извлечь из этой структуры номера телефонов в JavaScript, потребуется выполнить код, похожий на приведенный в Листинге 2.

Листинг 2. Web-приложение, использующее данные XML
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load("/json/address.xml");
  getaddress();
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
  {
  xmlDoc=document.implementation.createDocument("","",null);
  xmlDoc.load("/json/address.xml");
  xmlDoc.onload=getaddress;
  }
else
  {
  alert('Your browser cannot handle this script');
  }
}
function getaddress()
{
document.getElementById("business").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
document.getElementById("fax").innerHTML=
xmlDoc.getElementsByTagName("phone")[1].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>Address</h1>
<p><b>Business</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

Код, приведенный в Листинге 2, получает информацию для одного адреса, обращаясь к элементам исходного документа XML, например, по названию компании, используя следующую логику: xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue.

Выглядит довольно неуклюже.

Посмотрите на ту же информацию в JSON, которая представлена в Листинге 3.

Листинг 3. Версия адресных данных в JSON
{
    "business" : {
        "name" : "One on Wharf",
        "address" : {
            "street" : "1 Wharf Road",
            "town" : "Grantham",
            "county" : "Lincolnshire",
        },
        "phonenumbers" : [
                          "01476 123456",
                          "01476 654321",
                          ]
                      }
}

Обратите внимание, что это структура гораздо проще, и читать её значительно удобнее. Формат разметки, используемый в JSON, может быть определен непосредственно JavaScript, без необходимости разбора с помощью eval(), а результатом будет просто еще один объект JavaScript: var addressbookObj = eval('(' + jsontext + ')');.

Примечание: Вообще говоря, не рекомендуется использовать eval(), поскольку с его помощью можно запустить на исполнение любой текст. Существует несколько парсеров JSON, которые могут обрабатывать только текст JSON.

Поскольку информация является объектом JavaScript, то для доступа к ней вы можете использовать стандартную нотацию JavaScript. Например, вы можете получить название и номера телефонов из источника данных JSON, переданные в объект (см. Листинг 4).

Листинг 4. Исходные данные JSON, переданные объекту
addressbookObj.business.name
addressbookObj.business.phonenumbers[0]
addressbookObj.business.phonenumbers[1]

Листинг 4 значительно проще в использовании и доступе. Теперь вы можете создать страницу, которая будет использовать приведенную выше структуру данных и выведет ту же информацию, что и исходный пример с XML, примерно такую, как показана в Листинге 5.

Листинг 5. Web-приложение, использующее данные JSON
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function showaddress(req)
{
    var addressbookObj = eval('(' + req.responseText + ')');

    document.getElementById("business").innerHTML = 
       addressbookObj.business.name;
    document.getElementById("phone").innerHTML = 
       addressbookObj.business.phonenumbers[0];
    document.getElementById("fax").innerHTML = 
       addressbookObj.business.phonenumbers[1];
}

function getaddress()
{
   new Ajax.Request('address.json',
                    { method : 'get',
                      onSuccess : showaddress,
                      onFailure: function(){ 
              alert('Something went wrong...') }});
}
</script>
</head>
<body onload="getaddress()">
<h1>Address</h1>
<p><b>Business:</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

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

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

Пример, приведенный выше в Листинге 5, демонстрирует простоту работы со стандартом JSON. Основой большинства приложений Ajax на самом деле является настраиваемое отображение информации. В этом примере для внедрения содержимого данных XML или JSON в страницу HTML использовалась модель DOM. Однако во многих приложениях Ajax вам может потребоваться создавать более сложные элементы интерфейса.

JsonML

В языке разметки JSON (JSON Markup Language) применение возможностей формата обмена данными JSON, к представлению XML позволяет обмениваться данными в формате XML с помощью упрощенной текстовой разметки.

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

Основной целью JsonML является предоставление инструмента для создания элементов интерфейса. Обычно для создания интерфейса пользователя в браузере применяются два метода:

  • Формирование XHTML на сервере и его добавление к текущей странице с помощью атрибута innerHTML объекта DOM.
  • Формирование структуры DOM вручную через клиентский интерфейс DOM.

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

Именно эти проблемы пытается решить JsonML. Он сочетает в себе простоту разметки JSON с использованием DOM в качестве целевого формата. Вы получаете те же преимущества; исходные данные с легкостью загружаются и обрабатываются клиентом JavaScript (независимо от используемой реализации DOM). Кроме того, поскольку в документе JsonML можно описать и данные, и разметку, вы можете эффективно совместить их в одном документе. Так как для формирования вывода не нужна DOM, то для создания интерфейса не нужен сложный процесс обработки.

Если вспомнить Рисунок 1, обычный метод отображения информации, полученной через интерфейс Ajax, заключается в запросе данных, обработке XML, преобразовании XML в структуру DOM, необходимую браузеру, и только после этого выполняется фактическое отображение вывода.

С помощью JsonML вы можете заменить все преобразование XML в XHTML с помощью DOM и JavaScript одним шагом.

Разметка JsonML

Прежде чем рассмотреть несколько примеров использования JsonML, целесообразно изучить структуру JsonML. Официальный формат структуры представлен в Листинге 6.

Листинг 6. Формат разметки JsonML
element
    = '[' tag-name ',' attributes ',' element-list ']'
    | '[' tag-name ',' attributes ']'
    | '[' tag-name ',' element-list ']'
    | '[' tag-name ']'
    | json-string
    ;
tag-name
    = json-string
    ;
attributes
    = '{' attribute-list '}'
    | '{' '}'
    ;
attribute-list
    = attribute ',' attribute-list
    | attribute
    ;
attribute
    = attribute-name ':' attribute-value
    ;
attribute-name
    = json-string
    ;
attribute-value
    = json-string
    ;
element-list
    = element ',' element-list
    | element
    ;

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

Для начала, все элементы должны быть текстовыми, поэтому вы можете создать элемент ненумерованного списка следующим образом: [ "ul" ].

Квадратные скобки выполняют логическую компоновку элемента. Если вы добавляете к элементу атрибуты, используйте фигурные скобки в качестве следующего элемента списка внутри группы. Например, чтобы изменить стиль списка и убрать точки, можно использовать: [ "ul", { style : "list-style-type:none"} ].

Конечно же, список без дочерних элементов не имеет смысла; они добавляются к этому же списку (см. Листинг 7).

Листинг 7. Список с дочерними элементами
[ "ul", { style : "list-style-type:none"}, 
    [ "li",
      "First item"],
    [ "li",
      "Second item"],
    [ "li",
      "Third item"],
    ];

Атрибуты к элементам списка необязательны, поэтому вы можете их опустить, как показано в Листинге 7 для отдельных элементов списка.

Преобразование JsonML в XHTML

Приведенные выше примеры используют JSON, поэтому вы можете их определить непосредственно в приложении JavaScript. Чтобы преобразовать содержимое в объект, который будет фактически отображаться в XHTML, вам понадобится библиотека JsonML, которую можно загрузить с Web-сайта JsonML. Чтобы преобразовать объект JSON из JsonML в XHTML, нужно использовать метод parseJsonML(). После разбора текст JsonML сразу же становится доступен как элемент интерфейса, который можно добавить на страницу.

Например, в Листинге 8 показана Web-страница, которая будет добавлять к предварительно определенному контейнеру ненумерованный список при каждом нажатии на ссылку.

Листинг 8. Web-приложение, отображающее шаблон JsonML
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

function addblock (id,jsonmlblock)
{
    var aselement = listblock.parseJsonML();
    var container = document.getElementById(id);
    container.appendChild(aselement);
}

</script>
</head>
<body>
<a href"#list" onclick="addblock('container', 
 listblock);return false;">Add block</a>
<div id="container"/>
</body>
</html>

На Рисунке 2 показана Web-страница в действии после нескольких нажатий на ссылку, с импортированным ненумерованным списком.

Рисунок 2. Простой пример JsonML в действии
Простой пример JsonML в действии
Простой пример JsonML в действии

Давайте пройдем по примеру шаг за шагом. Первым блоком является JsonML, который представляет элемент списка (см. Листинг 9).

Листинг 9. JsonML, представляющий элемент списка
var listblock = [ "ul",
                  [ "li",
                    "First item"],
                  [ "li",
                    "Second item"],
                  [ "li",
                    "Third item"],
                  ];

Когда пользователь нажимает на ссылку, вызывается функция addblock(). В ней выполняются три действия. Сначала объект JavaScript преобразуется в XHTML с помощью метода parseJsonML(): var aselement = jsonmlblock.parseJsonML();.

Теперь получаем контейнер, в который будет осуществляться вывод: var container = document.getElementById(id);.

И, наконец, добавляем сформированный XHTML к контейнеру: container.appendChild(aselement);.

Преобразование существующего XHTML или XML в JsonML

Возможно, перед тем, как вы приступите к созданию приложений, использующих JsonML, у вас уже будут структуры XML или XHTML, которые вы захотите преобразовать в JsonML. На сайте JsonML (см. раздел Ресурсы) представлена таблица стилей XSL, которая создает JsonML из исходного кода XML.

Чтобы выполнить преобразование, загрузите таблицу стилей JsonML.xsl и запустите xsltproc. Рассмотрим, например, структуру XML, представленную в Листинге 10.

Листинг 10. Структура XML
<table class="maintable">
<tr class="odd">
<th>Situation</th>
<th>Result</th>
</tr>
<tr class="even">
<td><a href="driving.html" title="Driving">Driving</a></td>
<td>Busy</td>
</tr>
...
</table>

Вы можете преобразовать Листинг 10 в JsonML следующим образом: $ xsltproc JsonML.xsl.xml samp.xml.

Результат выполнения показан в Листинге 11. Обратите внимание на форматирование, поскольку таблица стилей XSL для краткости удаляет из результата символы новой строки, хотя в конечном результате они сохраняются как строковые элементы.

Листинг 11. Результат работы
["table",
 {"class":"maintable"},
 "\n",
 ["tr",
  {"class":"odd"},
  "\n",
  ["th",
   "Situation"],
  "\n",
  ["th",
   "Result"],
  "\n"],
 "\n",
 ["tr",
  {"class":"even"},
  "\n",
  ["td",
   ["a",
    {"href":"driving.html",
     "title":"Driving"},
    "Driving"]],
  "\n",
  ["td",
   "Busy"],
  "\n"],
 ]

Вы можете использовать этот способ для преобразования в JsonML любой структуры XML.

Преобразование в JsonML существующих структур DOM

Также может возникнуть ситуация, когда у вас есть сформированный блок XHTML или XML, который вы хотите преобразовать в JsonML. Существует функция JavaScript, которая выполнять такое преобразование. Ее можно загрузить с Web-сайта JsonML.

Использование JsonML для формирования интерфейса

Существует несколько способов использования JsonML для формирования интерфейса. Первый способ состоит в создании в JsonML структуры JavaScript, которая будет действовать как нужный вам интерфейс. После формирования структуры JavaScript она одним действием преобразовывается в XHTML, а созданный XHTML вставляется в страницу. Например, в Листинге 12 показано формирование интерфейса для ячеек таблицы, которое позволяет добавлять к строке таблицы черные и белые ячейки, добавлять строки и в конечном итоге выводить таблицу, исходный JsonML и соответствующий исходный XHTML.

Листинг 12. Формирование таблицы на основе JsonML
<html>
<head>
<script type="text/javascript" src="JsonML.js"></script>
<script type="text/javascript">

var blackcell = [ "td", {"style" : "background-color:black"},"CELL"];
var whitecell = [ "td", {"style" : "background-color:white"},"CELL"];

var currentrow = new Array();
var currenttable = new Array();

function onLoad()
{
    initrow();
    inittable();
}

function initrow()
{
    currentrow = new Array();
    currentrow.push("tr");
}

function inittable()
{
    currenttable = new Array();
    currenttable.push("table");
    currenttable.push({"border" : "1"});
}

function addrow()
{
    currenttable.push(currentrow);
    currentrow = new Array();
    currentrow.push("tr");
    showsource();
}

function addcell(color)
{
    if (color == "black")
        {
            currentrow.push(blackcell);
        }
    else
        {
            currentrow.push(whitecell);
        }
}

function showsource()
{
    var tablelement = currenttable.parseJsonML();
    var container = document.getElementById("viewabletable");
    container.removeChild(container.lastChild);
    container.appendChild(tablelement);

    var srccontainer = document.getElementById("sourceoutput");
    srccontainer.value = currenttable.toSource();

    var domcontainer = document.getElementById("domsourceoutput");
    domcontainer.value = container.innerHTML;
 }

function showtable()
{
    showsource();
    initrow();
    inittable();
}

</script>
</head>
<body onload="onLoad()">
<a href"#addrow" onclick="addrow();return false;">Add Row</a><br/>
<a href"#addbcell" onclick="addcell('black');return false;"
  >Add Black Cell</a><br/>
<a href"#addwcell" onclick="addcell('white');return false;"
  >Add White Cell</a><br/>
<a href"#showtable" onclick="showtable();return false;"
  >Show Table</a><br/>
<a href"#showsource" onclick="showsource();return false;"
  >Show Source</a><br/>

<div id="viewabletable">
</div>
<b>JsonML Source</b>
<textarea rows="20" cols="120" id="sourceoutput"></textarea><br/>
<b>DOM Source</b>
<textarea rows="20" cols="120" id="domsourceoutput"></textarea><br/>

</body>
</html>

Работа этого приложения очень проста. При каждом нажатии кнопки Add Black/White Cell в массив, составляющий текущую строку, добавляется соответствующая информация (в данном случае - ячейка таблицы с нужным текстом и форматированием) в формате JsonML. При нажатии кнопки Add Row к массиву таблицы добавляется массив, соответствующий новой строке. В обоих случаях вы просто расширяете определение внутреннего объекта в нотации JsonML.

При нажатии кнопки Show Table внутренняя структура JavaScript преобразуется в XHTML для отображения таблицы, используя для конвертирования исходного JsonML в визуальный формат метод parseJsonML(). Также выводится исходный текст JsonML (используя метод toSource() с объектом JavaScript) и исходный текст XHTML в виде дампа. Поскольку вы работаете только с внутренними структурами JavaScript, то для создания HTML вам не нужно использовать интерфейс DOM, за исключением собственно добавления XHTML в конечный вариант документа.

Обратите внимание, что хотя вы формируете таблицу с использованием статических текстовых элементов, вы могли бы изменять данные таблицы перед их добавлением в строку. Шаблоны JsonML - это просто объекты JavaScript, поэтому вы можете обновлять содержимое с помощью обычной операции присвоения: blackcell[2] = "Some other content";.

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

Связывание элементов управления с элементами JsonML

В приведенном выше примере (Листинг 12) представлен очень простой способ создания таблицы, внутренняя структура которой может быть использована для формирования соответствующего XHTML. А что если вам нужно изменять вывод в соответствии с определенным стилем или вы хотите изменить шаблон в соответствии со стилем, который определяют параметры текущей страницы?

Одним из способов использования JsonML является формирование шаблонов интерфейса, импортируемых во время загрузки страницы (см. Листинг 13).

Листинг 13. JsonML формирует шаблоны интерфейса в момент загрузки
<script type="text/javascript" src="resultstable.js"></script>
<script type="text/javascript" src="resultline.js"></script>
<script type="text/javascript" src="resultselectionpopup.js"></script>

Теперь для того, чтобы вывести различные элементы страницы, вы загружаете каждый объект, преобразуете его в XHTML с помощью parseJsonML и выводите результат. Возможности CSS на этом заканчиваются, и механизм, показанный в Листинге 13, не предоставляет никаких средств для внедрения какой бы то ни было информации или данных в выводимый результат.

В традиционной модели Ajax/DOM вы могли это сделать, поскольку выполняли обработку каждого элемента по отдельности и могли указать, когда и что применить к тому или иному элементу. Вы не можете таким же образом взаимодействовать с процессом парсинга JsonML, но вы можете добавить обратное связывание на этапе парсинга каждого из элементов и вывода результатов.

Функция связывания выполняется для каждого тега XHTML, который формируется из исходного JsonML, а поскольку они являются стандартными объектами HTML, вы можете использовать для изменения выходного шаблона любые методы сравнения и определения, какие пожелаете.

В качестве примера в Листинге 14 показана еще одна отформатированная таблица JsonML.

Листинг 14. Шаблон JsonML для таблицы
var table = ["table",{ "border" : "1" },
             ["tr",
              ["td",{"class" : "highlight-effect"},"Highlighted row"],
              ],
             ["tr",
              ["td",{"class" : "non-highlight"},"Non-Highlighted row"],
              ],
             ];

При парсинге формируется простая таблица. Для форматирования можно использовать классы CSS. Однако вам может понадобиться выделение не всех строк, а только тех, данные в которых содержат что-нибудь важное.

Чтобы сделать это, вы можете написать функцию связывания, которая будет изменять элементы, добавляя класс эффекта выделения, изменяющий цвет фона, как видно из Листинга 15.

Листинг 15. Добавление функции связывания к шаблону JsonML
function actionbindings(elem) {
    if (elem.className.indexOf("highlight-effect") >= 0) {
        elem.style.backgroundColor = "red";
    }
    return elem;
}

Чтобы создать связь, необходимо передать функцию связывания в функцию parseJsonML(): var renderedtable = table.parseJsonML(actionbindings);.

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

JsonML и XML

Хотя в этой статье рассматривается использование JsonML как решения для XHTML, JsonML можно использовать практически для любых данных XML, поскольку XHTML является подмножеством стандарта XML.

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

В частности, поскольку JsonML доступен в JavaScript как структура, вы можете с легкостью обновить содержимое структуры XML, преобразовать ее в XML и отправить на сервер.

В качестве примера можно рассмотреть простую структуру XML, показанную в Листинге 16.

Листинг 16. Простая структура XML
<name>
<firstname>Martin</firstname>
<lastname>Brown</lastname>
</name>

В JsonML такая структура создается показанным в Листинге 17 способом.

Листинг 17. Простая структура JsonML
["name", 
  ["firstname", "Martin"],
  ["lastname", "Brown"],
]

Так как это объект JavaScript, вы можете его изменить, как показано в Листинге 18.

Листинг 18. Изменение с помощью JavaScript
address[1][1] = "Sharon";

После этого создаем XML-версию объекта, используя для этого parseJsonML(), как показано в Листинге 19.

Листинг 19. parseJsonML формирует XML-версию объекта
<name>
<firstname>Sharon</firstname>
<lastname>Brown</lastname>
</name>

Описанный выше процесс значительно проще, чем создание структуры XML с помощью парсера DOM или путем манипуляций с текстом (которые чреваты злоупотреблениями и ошибками). Основные шаблоны в обоих случаях могут быть небольшими и постоянно доступными.

Резюме

Работа с приложениями Ajax поднимает множество проблем, в том числе проблему эффективного обмена данными и выполнения форматирования этих данных для отображения в приложении. По определению, информация в приложении Ajax динамическая, что значит, что для форматирования этой информации используется XHTML. Написание XHTML вручную - достаточно трудоемкий процесс, а использование модели DOM сопряжено с множеством проблем, поскольку интерфейс DOM различается в различных версиях браузеров.

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

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


Ресурсы для скачивания


Похожие темы


Комментарии

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=257752
ArticleTitle=Знакомство с JsonML
publish-date=09242007