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

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.

jQuery Templates plugin

Начнём с простенького примера:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
];

$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

<ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:

<ul id="movieList">
  <li><b>The Red Violin</b> (1998)</li>
  <li><b>Eyes Wide Shut</b> (1999)</li>
  <li><b>The Inheritance</b> (1976)</li>
</ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.

Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:

• HTML-частям, из которых состоит шаблон
• ассоциированной единице переданных данных
• родительскому шаблону, если текущий шаблон является вложенным
• текущему шаблону, использованному для вывода
• определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).

Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.

Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:

• Сообщение в блоге jQuery и в блогах MS
• Страница документации плагина (примеры взяты оттуда)

Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

Это моя первая статья в этом блоге, надеюсь, и не последняя  Большое спасибо Геннадию за возможность публикации и за полезные советы по написанию и оформлению материала.

Примеры

Пример 1: Динамическое переключение применяемого шаблона

<!DOCTYPE html>
<html>
<head>
  <style>
    table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
    table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
    .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
</script>

Click for details:
<table><tbody id="movieList"></tbody></table>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

/* Add onclick handlers for movie template items
using the summary or details template */
$("#movieList")
  .delegate( ".movieSummary", "click", function () {
    if (selectedItem) {
      // Set the template on the previously selected item
      // back to the summary template
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
      selectedItem.update();
    }
    /* Get the data structure for the template item
       which this clicked element belongs to, and make
       it the selected item */
    selectedItem = $.tmplItem(this);

    /* Set the template on this item to the detail template */
    selectedItem.tmpl = $( "#detailTemplate" ).template();
    selectedItem.update();
  })
  .delegate( ".movieDetail", "click", function () {
    /* Set the template on this item to the summary template */
    selectedItem.tmpl = $( "#summaryTemplate" ).template();
    selectedItem.update();
    selectedItem = null;
  });
</script>

</body>
</html>

Довольно сложный и объемный, в нём используются сразу несколько методов плагина, взят с этой страницы.

Пример 2: Вставка данных с разметкой в шаблон

<!DOCTYPE html>
<html>
<head>
  <style>
    .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <h4>${Name}</h4>
  <p>{{html Synopsis}}</p>
</script>

<div id="movieContainer"></div>

<script>
/* The Synopsis data field contains HTML markup. */
var movie = {
  Name: "Meet Joe Black",
  Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
};

/* Render the template with the movie data.
   The template uses the {{html}} template tag
   to  insert the Synopsis HTML markup data. */
$( "#movieTemplate" ).tmpl( movie )
  .appendTo( "#movieContainer" );
</script>

</body>
</html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме, если есть комменты именно по статье – то комментируйте ниже.

Для начала определим задачу: первый список будет содержать предварительно загруженные названия стран и всегда находиться в активном состоянии. Два оставшихся списка – выбора авто и выбора модели, пустые и находятся в неактивном состоянии. После того, как в первом списке будет выбрана страна необходимо заполнить второй список названиями автомобилей и перевести его в активное состояние. А после выбора названия автомобиля – заполнить список названиями моделей именно этого автомобиля и тоже активировать список. Кроме того, мы должны гарантировать, что пользователь никогда не сможет выбрать автомобиль «HONDA Vectra произведеный в Ю.Корее». Для обмена данными с сервером будем использовать популярный нынче формат JSON.

Итак, задача определена. Поехали?

Начнем с чего-нибудь очень простого. Например с подключения библиотеки jQuery и создания HTML-разметки:

В HEAD страницы подключаем библиотеку:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

В BODY создаем HTML-разметку:

<div class="border">
  <label>Страна</label><br />
  <select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
  </select>
</div>
<div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
</div>
<div class="border">
  <label>Модель</label><br />
  <select id="model" disabled="disabled"></select>
</div>

Легко и просто! Каждому списку – по id. Первый раскрывающийся список заполняем названиями стран. Два других ничем не заполняем и мало того, устанавливаем в неактивное состояние с помощью атрибута disabled. Описания стилей я приводить не буду – это дело вкуса каждого и не в тему этой статьи.

Что дальше? Задача оказалась не так уж и проста, как казалось в начале. Поэтому предлагаю пораскинуть мозгами и решить, какие общие действия мы будем производить над всеми списками. Я придумал два – заполнение списка и очистка списка. Давайте оформим эти операции в виде методов jQuery, чтобы иметь возможность в любой момент вызвать этот метод в цепочке команд jQuery.

Расширение для jQUery может быть либо методом, оперирующим с набором элементов, либо вспомогательной функцией, которая определяется непосредственно в $. Простой пример: в составе библиотеки есть метод each(callback), который работает как раз с набором элементов, выполняя функцию, определенную в параметре callback в контексте каждого элемента набора и вспомогательная функция $.each(object,callback), которая применяется для обхода массива или объекта, переданного в первом параметре с выполнением функции callback для каждого элемента массива(объекта). Почувствовали разницу?

(function($){
  // очищаем select
  $.fn.clearSelect = function() {
    return this.each(function(){
      if(this.tagName=='SELECT') {
        this.options.length = 0;
        $(this).attr('disabled','disabled');
      }
    });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
    return this.clearSelect().each(function(){
      if(this.tagName=='SELECT') {
        var currentSelect = this;
        $.each(dataArray,function(index,data){
          var option = new Option(data.text,data.value);
          if($.support.cssFloat) {
            currentSelect.add(option,null);
          } else {
            currentSelect.add(option);
          }
        });
      }
    });
  }
})(jQuery);

Итак, что мы тут написали?

При написании метода clearSelect() мы воспользовались методом each(callback) для того, чтобы произвести необходимые операции над каждым элементом, переданным в наборе jQuery. Сначала производим проверку – если tagName переданного элемента действительно SELECT, то удаляем все элементы option и устанавливаем атрибуту disabled значение disabled.

Метод fillSelect(dataArray) несколько сложнее. Он получает в качестве параметра массив dataArray, содержащий данные, которыми необходимо заполнить выпадающий список. Правда перед тем, как заполнять список, мы вызовем метод clearSelect, чтобы очистить список от возможно оставшихся там данных. С помощью метода each(callback) мы перебираем все элементы, переданные в наборе jQuery, проверяем, действительно ли это элемент select и, если да, то сначала запоминаем его в переменной currentSelect. Затем воспользуемся вспомогательной функцией $.each(object,callback) для обхода массива dataArray. В каждой итерации создаем элемент options, заполняем его соответствующими данными и добавляем в select.

При добавлении option мы вынуждены учитывать различия между браузерами. К счастью и тут поможет jQuery. Здесь используем новую вспомогательную функцию $.support, которая появилась в jQuery с версии 1.3 взамен $.browser. Проверим значение свойства cssFloat – false укажет нам на IE, а true на FF, Opera, Safari. Вы можете применить свой способ проверки.

Обратите внимание: при написании метода fillSelect(dataArray) мы использовали метод each(callback) и вспомогательную функцию $.each(object,callback) – это разные вещи.

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

// очищаем select
$('select').clearSelect();
// заполняем select
$('select').fillSelect(dataArray);

Двигаемся дальше. Теперь мы напишем пару функций, которые будут обслуживать списки выбора автомобиля и выбора модели.

// выбор автомобиля
function adjustAuto(){
  var countryValue = $('#country').val();
  var tmpSelect = $('#auto');
  if(countryValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
    adjustModel();
  } else {
    $.getJSON(
      'cascadeSelectAuto.php',
      {country:countryValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
        adjustModel();
    });
  }
};

Здесь мы сначала запоминаем в переменной countryValue значение, выбранное в списке стран #country. В переменной tmpSelect будем хранить ссылку на элемент select с идентификатором #auto – список выбора автомобиля. Далее следует проверка:

Если страна не выбрана, то мы устанавливаем атрибуту disabled элемента select с идентификатором #auto значение ‘disabled’ и вызываем метод clearSelect() для очистки этого списка от возможно находящихся там значений. Также мы вызовем функцию adjustModel() (про нее чуть позже).

Иначе, мы отправляем с помощью вспомогательной функции $.getJSON запрос к файлу cascadeSelectAuto.php, передавая в качестве данных значение, сохраненное в переменной countryValue. При получении ответа сервера вызываем функцию, в которой определена нужная нам последовательность действий. А именно – к переменной tmpSelect (не забыли – это список с идентификатором #auto) применяем нами же написанный метод fillSelect(data), который заполнит список данными, которые получены от сервера и наконец переводим элемент в активное состояние с помощью атрибута disabled. Остается не забыть вызвать функцию adjustModel(), чтобы обработать выпадающий список моделей.

Функция adjustModel(), которая обрабатывает список моделей, очень похожа на adjustAuto(), поэтому нет смысла ее детально рассматривать. Обратите внимание разве на то, что теперь мы запоминаем значение из списка не только выбранной страны, но и выбранного автомобиля. И еще в if – else не вызываем что-то похожее на adjustModel(), поскольку список выбора модели у нас последний – дальше обрабатывать просто нечего.

// выбор модели
function adjustModel(){
  var countryValue = $('#country').val();
  var autoValue = $('#auto').val();
  var tmpSelect = $('#model');
  if(countryValue.length == 0||autoValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
  } else {
    $.getJSON(
      'cascadeSelectModel.php',
      {country:countryValue,auto:autoValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
    });
  }
};

Поздравляю! Самая сложная часть пути уже позади! Остались сущие пустяки.

$('#country').change(function(){
  adjustAuto();
}).change();

Связываем с выпадающим списком стран событие change(fn), при наступлении которого вызываем adjustAuto() – функцию, которая заполнит выпадающий список автомобилей. В цепочке команд вызываем change(), чтобы вызвать событие при начальной загрузке страницы.

$('#auto').change(adjustModel);

С выпадающим списком автомобилей связываем событие change(fn), при наступлении которого будет выполнена функция adjustModel(), которая заполнит список моделей.

$('#model').change(function(){
  if($(this).val().length != 0) {
    alert('Выбор сделан!');
  }
});

И наконец, при изменении списка моделей выполним небольшую проверку – если действительно выбрана какая-либо модель, выведем в alert сообщение. Ну а в действительности тут можно придумать все, что угодно. Например вывести подробную информацию о технических характеристиках, красивую фотографию авто, чтобы его захотелось купить и конечно цену…

Ах, да! Совсем забыл – работающий пример:

Вы можете открыть пример в новом окне, чтобы посмотреть исходный код. Вы можете скачать архив, который содержит файлы примера (в том числе cascadeSelectAuto.php и cascadeSelectModel.php).

Дуглас Крокфорд (Douglas Crockford), который собственно и предложил формат JSON в качестве альтернативы XML при передаче данных от сервера клиенту, в рамках этого проекта разработал специальную утилиту, предназначенную для упомянутых выше преобразований. Исходник можно найти по адресу http://www.json.org/js.html.

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

Но давайте обо всем по порядку. Для начала подключим утилиту к нужному файлу:

<script src="json.js" type="text/javascript"></script>

Создадим объект oAuto обычным способом, забыв о литеральной нотации.

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;
oAuto.sellers = new Array(
  "Фирма А",
  "Фирма Б",
  "Фирма В"
);

Передадим объект методу JSON.stringify()

document.write(JSON.stringify(oAuto));

и в результате работы этого небольшого кусочка кода будет выведена строка в формате JSON, которую можно передавать по любому адресу.

{"firm":"Audi","model":"A6","year":2008,
"price":78000,"sellers":["Фирма А","Фирма Б","Фирма В"]}

Предположим теперь, что эту самую строку мы получили в качестве ответа от сервера и ее надо преобразовать в объект JavaScript. Так нет ничего проще. Передаем строку методу JSON.parse()

var oAuto = JSON.parse(sAuto);

и получаем объект JavaScript.

Вы можете скачать исходный код примера, и испытать его на своем сайте.

Необходимо упомянуть также, что метод JSON.parse() может принимать опционально еще один параметр.

var myObject = JSON.parse(myJSONtext, filter);

Более полную информацию Вы всегда можете найти на сайте http://www.json.org/.

Мы вкратце познакомились с тем, как можно работать с данными в формате JSON на стороне клиента, а как обстоит дело при работе на стороне сервера? Оказывается существует довольно много программного обеспечения для работы с JSON в языках на которых пишутся серверные сценарии. JSON может применяться в Pyton, C#/.NET, PHP, ColdFusion, Perl, Java и т.д. Полный список можно найти на http://www.json.org/, а я для примера выбрал PHP, как наиболее близкий мне.

Утилита JSON-PHP написана Михалем Мигурски (Michal Migurski). Сама утилита – это один файл JSON.PHP, но для работы с утилитой требуется библиотека PEAR (PHP Extension and Application Repository). Скачать утилиту можно отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198.

Если Ваш хостер не удосужился включить библиотеку PEAR – не расстраивайтесь. Вы вполне можете сделать все самостоятельно. Не обязательно даже иметь права администратора сервера. Я приведу ссылки. Кому очень понадобится – тот обязательно разберется.
http://pear.php.net/manual/en/installation.getting.php – см. раздел «PEAR in hosting environments».
В принципе нужно только получить инсталляционный файл, загрузить его на свой сервер, вызвать в адресной строке браузера и далее только следовать инструкциям.
А здесь посмотрите раздел «Динамическая коррекция пути к включаемым файлам».

Разберем все на примере. Пусть имеем такое определение класса (для PHP5)

class Auto {
  public $firm;
  public $model;
  public $year;
  public $price;
  public $sellers;

  function Auto($firm,$model,$year,$price) {
    $this->firm = $firm;
    $this->model = $model;
    $this->year = $year;
    $this->price = $price;
    $this->sellers = array();
  }
}

Используем этот класс так:

$oAuto = new Auto("Audi", "A6", 2008, 78000);
$oAuto->sellers[0] = "Фирма А";
$oAuto->sellers[1] = "Фирма Б";
$oAuto->sellers[2] = "Фирма В";

Теперь то, что нас интересует больше всего. Подключаем утилиту JSON-PHP, создаем новый экземпляр объекта Services_JSON и передаем объект $oAuto методу encode():

require_once("JSON.php");
$json = new Services_JSON();
$sJSONText = $json->encode($oAuto);

В результате переменная $sJSONText будет содержать строку в формате JSON:

{"firm":"Audi","model":"A6","year":2008,"price":78000,
"sellers":["\u0424\u0438\u0440\u043c\u0430 \u0410","\u0424\u0438\u0440\u043c\u0430 \u0411","\u0424\u0438\u0440\u043c\u0430 \u0412"]}

Здесь хочу обратить Ваше внимание на то, что утилита JSON-PHP понимает строки или в ASCII, или в UTF-8. Поэтому существенный выигрыш можно получить при использовании латинских символов, тогда как использование кириллицы в кодировке windows-1251 может привести к увеличению объема данных. Обратите внимание на то место в строке, где должны передаваться Фирма А, Фирма Б, Фирма В.

Но цели мы достигли – объект $oAuto готов к передаче в сценарий на языке JavaScript.

Разберем обратную операцию – преобразование строки текста в формате JSON в объект PHP. Все, что для этого нужно сделать, это передать строку методу decode():

$value = $json->decode($sJSONText);

Если теперь использовать например print_r(), то мы сможем убедиться, что объект был создан:

( [firm] => Audi [model] => A6
[year] => 2008 [price] => 78000
[sellers] => Array ( [0] => Фирма А [1] => Фирма Б [2] => Фирма В ) )

Все это есть в примере, который Вы сможете скачать. Пример включает и утилиту JSON-PHP. Естественно, Вам придется немного поправить пример в той части, где корректируются пути к библиотеке PEAR, либо удалить этот фрагмент кода, если библиотека у Вас уже подключена.

Архив с примером можно скачать здесь.

Что можно еще сказать? Разве что упомянуть о том, что утилита JSON-PHP не единственная для работы с JSON на стороне сервера. Существует расширение PHP – php-json (написано на C Омаром Килани (Omar Kilani)), однако для его установки потребуется умение устанавливать модули расширения PHP. Вот и все, пожалуй.

Буду рад, если найдете время для того, чтобы оставить свои отзывы…

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

Массивы как литералы
Массив в JavaScript можно определить с помощью конструктора Array, например так:

var aData = new Array("строка", true, 43, null);

В JavaScript массивы нетипизированные, поэтому в них можно хранить различные типы данных. В примере массив содержит строку, логическое значение, число и значение null.

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

var aData = ["строка", true, 43, null];

Обращаться к отдельным элемента массива можно указывая имя массива и номер элемента:

alert(aData[0]);
alert(aData[1]);

Объекты как литералы
Объекты в JavaScript определяются с помощью конструктора Object, например так:

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;

Тот же самый код, но в литеральной нотации будет выглядеть так:

var oAuto = {
  "firm":"Audi",
  "model":"A6",
  "year":2008,
  "price":78000
};

Этот код создает объект со свойствами firm, model, year и price и обращаться к ним можно таким образом:

alert(oAuto.model);
alert(oAuto.year);

но можно использовать и синтаксис массивов обращаясь к свойствам объекта таким образом:

alert(oAuto["model"]);
alert(oAuto["year"]);

В литеральной нотации описания массивов и объектов можно вкладывать друг в друга, создавая таким образом объект массивов или массив объектов. Посмотрите этот код:

var aAuto = [
  {
    "firm":"BMW",
    "model":"X5",
    "year":2007,
    "price":99000
  },
  {
    "firm":"Audi",
    "model":"A6",
    "year":2008,
    "price":78000
  },
  {
    "firm":"Volkswagen",
    "model":"Touareg 7L",
    "year":2006,
    "price":45000
  }
];

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

alert(aAuto[1].year); // получаем 2008

Можно сделать наоборот, и описать объект массивов:

var oAuto = {
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
};

в этом случае обращаемся сначала к объекту, а затем к массиву внутри него:

alert(oAuto.year[1]); // получаем 2008

Вот такое длинное получилось предисловие, но зато теперь будет гораздо понятнее при чем здесь вообще JSON…

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

{
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
}

Обратите внимание, что пропали имя переменной и точка-запятая. Передача такого объекта с использованием HTTP-протокола будет происходить очень быстро, поскольку содержит минимум символов. Получив такие данные на стороне клиента и записав ее в какую-либо переменную (например sData) мы получаем строку информации.
Обратите внимание: именно строку, а совсем не объект или объект с вложенными в него массивами. Преобразуем строку в объект, используя функцию eval().

var oAuto = eval("(" + sData + ")");

В результате этого получится объект, который мы описали чуть выше.

Преимущество JSON перед XML
Так в чем же все-таки состоит преимущество JSON перед XML?

Здесь речь идет исключительно о преимуществах и недостатках только лишь с точки зрения организации обмена данными в Сети.

В том, что язык XML оказывается очень избыточным при сравнении с JSON. Давайте убедимся в этом на простом примере. Одни и те же данные представим в формате XML и в формате JSON.

<general>
  <cars>
    <car>
      <firm>BMW</firm>
      <model>X5</model>
      <year>2007</year>
      <price>99000</price>
    </car>
    <car>
      <firm>Audi</firm>
      <model>A6</model>
      <year>2008</year>
      <price>78000</price>
    </car>
    <car>
      <firm>Volkswagen</firm>
      <model>Touareg 7L</model>
      <year>2006</year>
      <price>45000</price>
    </car>
  </cars>
</general>

так это выглядит в формате XML, а ниже – в формате JSON:

{ "general":
  {
    "cars":[
      {
        "firm":"BMW",
        "model":"X5",
        "year":2007,
        "price":99000
      },
      {
        "firm":"Audi",
        "model":"A6",
        "year":2008,
        "price":78000
      },
      {
        "firm":"Volkswagen",
        "model":"Touareg 7L",
        "year":2006,
        "price":45000
      }
    ]
  }
}

При использовании формата JSON выигрыш составит 42 байта, а без учета пробелов и вовсе 86 байт. А если вспомнить еще и о том, что данные в формате JSON не требуют дополнительного синтаксического анализа на стороне клиента – преимущество JSON перед XML в аспекте передачи данных от сервера клиенту становится очевидным…

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