Javascript.RU

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

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

Рассмотрим

  • HTML
  • XML
  • JSON

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

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

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

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

Сервер возвращает 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 - не во всех браузерах

Этот формат, как правило, самый оптимальный. Сервер возвращает 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 для модулей, которые слабо адаптированы под работу в режиме сервиса

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

В общем, спасибо за статью - довольно познавательно.
Я давно уже пишу для веб, но только не давно решил разобраться в новых технологиях, и ajax - первая из них (тем более что и так давненько читал про нее)


Автор: Хаён (не зарегистрирован), дата: 16 октября, 2008 - 14:40
#permalink

Да, сайт полезный! Особенно порадовали тесты.


Автор: Владимир Зайцев (не зарегистрирован), дата: 10 ноября, 2008 - 17:39
#permalink

Присоединяюсь к благодарностям!
Нельзя ли осветить еще вариант SOAP?


Автор: Илья Кантор, дата: 21 января, 2009 - 21:53
#permalink

SOAP - надстройка над XML. Никаких встроенных языковых средств для его обработки нет.. Да и вообще, не популярен он на клиент-сайде...


Автор: B~Vladi, дата: 5 августа, 2009 - 15:18
#permalink

При выборке-отображении большого количества данных (начиная с десятков записей) XML+XSLT может работать быстрее. Например, это может быть существенно для больших таблиц.

Значит я сделал правельный выбор:)


Автор: Max-Tryk (не зарегистрирован), дата: 1 сентября, 2009 - 17:51
#permalink

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


Автор: subzey, дата: 25 декабря, 2009 - 10:36
#permalink

Добавьте, пожалуйста экранирование в регулярку-проверку json, кажется, его порезало.


Автор: SMakS (не зарегистрирован), дата: 13 октября, 2012 - 18:18
#permalink

Помогите, пожалуйста, есть скрипт, который принимает JSON с сервера, сам JSON приходит в таком виде:
[{"id":"1","body":"sometext"},{"id":"2","body":"sometext2"}]
Делаю
JSON.parse(здесь_пришедший_JSON) или eval('('+здесь_пришедший_JSON+')')
И браузер начинает выводить
[object Object],[object Object]
Объясните, пожалуйста, как вставить значения body разных записей в html код? Заранее спасибо!


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2012 - 17:15
#permalink

"[{"id":"1","body":"sometext"},{"id":"2","body":"sometext2"}]"

Попробуй на сервере сформировать массив вида [{"id":"body","id1":"body1" и т.д.}]
и парсь


Автор: Гость, дата: 14 января, 2013 - 11:48
#permalink

eval( '(' +request.responseText+ ')' )
Для чего нужны эти скобки?
Без них не работает, но почему?


Автор: Гость (не зарегистрирован), дата: 18 апреля, 2013 - 14:08
#permalink

Всё дело в том, что в JavaScript с фигурной скобки { начинаются и объекты и блоки кода. Если передать в eval объект напрямую, то он подумает, что первая "{" начинает блок кода:

{
"name": "Вася",
"age": 25
}

Выполнение такого кода, конечно, приведёт к ошибке.

А если eval получает выражение в скобках ( ... ), то интерпретатор точно знает, что блока кода внутри быть не может, значит это объект.


Автор: Гость (не зарегистрирован), дата: 14 августа, 2013 - 15:27
#permalink

Пожалуйста, если не затруднит.
Приведите пример перевода минут в часы, в формате HH:MM на JS.
Для Adobe Acrobat.
Я чайник и впервые столкнулся с подобной задачей.
Огромное спасибо!


Автор: Гость (не зарегистрирован), дата: 21 августа, 2013 - 05:52
#permalink

Кода!
Решение найдено.


Автор: Гость (не зарегистрирован), дата: 22 августа, 2013 - 01:20
#permalink

Фигня всё... Работает и без скобок () прекрасно! В принципе пересылать JSON формат можно и без внешних скобок, фигурных или квадратных, только внутренность. Но надо не забывать их перед распарсиванием ставить. Вот в этом случае они обязательны ибо определяют суть! А вообще для Ajax есть вызов AJAX.parse(text).


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 17 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum