форматы для ajax

Форматы данных для 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 может работать быстрее. Например, это может быть существенно для больших таблиц.

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

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

версия для печати

Автор: e-FreeZe (не зарегистрирован), дата: 9 октября, 2008 - 17:54

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

Отправить комментарий

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное