Форматы данных для AJAX

Существует несколько распространенных форматов общения с сервером.

Рассмотрим

• HTML
• XML
• JSON

HTML

В самом простом случае - ответом на AJAX-запрос является кусок HTML:

<h4>Готово</h4>
<p class="notification">Новость опубликована</p>

Этот кусок можно показать пользователю, записав внутрь тага:

domObject.innerHTML = data

• Не требует дополнительной обработки
• Разметка может давать большой объем
• Ограниченное применение. Это часть документа, а не данные
• Иногда возникают проблемы с формами, создаваемыми через innerHTML (не отсылаются, некорректно показываются и т.п.)

XML

Сервер возвращает XML document типа:

<response>
<status>Готово</status>
<message>Новость опубликована</message>
</response>

На клиенте XML может либо анализироваться через javascript, либо преобразовываться XSL-шаблоном типа:

<xsl:template match="/reports/report">
<h4><xsl:value-of select="status"/></h4>
<p class="notification"><xsl:value-of select="message"/></p>
</xsl:template>

Код на клиенте:

// ... получить XML-ответ в xmlDoc и подготовить XSLT в xslDoc
domObject.innerHTML = xmlDoc.transformNode(xslDoc)

На практике, поддержка XSLT в браузерах очень ограничена и различается в деталях. Завязавшись на обработку XML при помощи client-side XSLT, рано или поздно придется все же использовать javascript из-за ограничений XSLT.
Также браузером не поддерживается EXSLT.

Плюсом XSLT является быстрота метода, по сравнению с javascript, но это актуально лишь на больших документах.

• Работа с DOM/XSLT/XPath
• Давно известный и широко используемый формат:огромное количество стандартных сервисов и известных классов отдают информацию в XML-формате
• Большие ограничения XSLT
• Обязателен дополнительный фреймворк для кросс-браузерного XSLT
• XPath - не во всех браузерах

JSON (JavaScript Object Notation)

Этот формат, как правило, самый оптимальный. Сервер возвращает JavaScript-объект:

{"response":
{"status":"Готово","message":"Новость опубликована"}
}

Чтобы десериализовать объект, клиент просто пропускает текст через встроенный парсер, добавив скобки

var reports = eval( '('+data+')' )

Затем HTML может быть сформирован средствами JavaScript, собственной шаблонной системой и т.п.

domObject.innerHTML = jSmarty.fetch(reportsTemplate)

Конечно же, eval позволяет не только десериализовать JSON-объекты, но и выполнять произвольный JS-код.

Если есть подозрения, что данные с сервера(например, вызов внешнего вебсервиса) могут быть небезопасны, то их можно проверить на соответствие JSON регулярным выражением:

var my_JSON_object =
!(/[^,:{}[]0-9.-+Eaeflnr-u nrt]/.test(data.replace(/"(.|[^"])*"/g, ''))) &&
eval('(' + data + ')')

• Формат самый неудобочитаемый, сложно заметить ошибку на глаз
• Существуют парсеры/сериализаторы, для php есть pear-класс и pecl-extension.
• Менее избыточен, по сравнению с XML и HTML
• eval(), как правило, работает достаточно быстро

Какой формат выбирать?

Надеюсь, будут полезны наблюдения:

• Для небольшого внедрения AJAX в существующее приложение удобен HTML-формат. Известные библиотеки (jpspan, sajax, xajax...) делают работу с ним очень простой. Кроме того, HTML не требует клиентского кода.
• XML является стандартом де-факто для множества приложений.
  Так что работать с ним, вполне возможно, придется вне зависимости от пристрастий разработчиков.
• XML может быть намного проще, чем JavaScript-объекты, так как доступны сложные XPath-выборки. Для JavaScript менее мощные способы выборки есть во фреймворках: dojo,jQuery и т.п.
• JSON удобен, когда нужно переслать данные, и непосредственная переработка данных в HTML не нужна.
• При выборке-отображении большого количества данных (начиная с десятков записей) XML+XSLT может работать быстрее. Например, это может быть существенно для больших таблиц.

Вообще,в разных частях веб-приложения вполне можно использовать несколько форматов. Например:

1. XML для AJAX-подгрузки ленты новостей
2. JSON для работы с узлами JavaScript-дерева
3. HTML для модулей, которые слабо адаптированы под работу в режиме сервиса