Использование AJAX для создания WEB-интерфейса встроенных систем.

Ключевой технологией создания пользовательских интерфейсов для embedded-устройств на сегодняшний день является создание WEB-приложений. Преимуществом такого решения является  платформонезависимость и отсутствие необходимости в ПО пользователя. Требуется только компьютер любой системы с уже установленным интернет-браузером. Необходимые интерфейсы в виде шаблонов HTML-страниц содержатся прямо в памяти вашего устройства и по запросам браузера “компилирутся” и отдаются  встроенным НTTP-сервером.

Традиционный подход иллюстрируется этим рисунком, на котором показаны функциональные связи программных модулей.

Следует сразу сказать, что это  нормальный подход и он действительно работает, хотя он и лишён некоторых удобств, появившихся в связи с выходом нового поколения браузеров. Эти новшества[1] привели к появлению AJAX-подхода в WEB-программировании, на сегодня вполне обустроенного и обеспеченного средствами отладки.

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

Есть такая задача не из самых приятных – парсить HTML-шаблон, искать среди потока текста метки, куда нам надо придётся подставлять вычисленные значения (представьте отчёт в  виде таблицы – строки, колонки), интерпретировать их - подставлять вместо меток текст, и переправлять поток дальше – собственно серверу. А управлять этим парсером должен сам сервер в зависимости от принятого запроса. А размер запроса зависит, в свою очередь, от сложности и количества полей HTML-формы той страницы, с которой запрос посылается и этот размер может оказаться значительным для ресурсов вашего МК.

Рассмотрим альтернативную реализацию на основе AJAX.

Основная идея заключается в использовании практически неограниченных (по сравнению с возможностями МК) ресурсов браузера. По запросу браузера сервер отдаёт статические файлы, совершенно не интересуясь их содержанием. После загрузки страницы интерпретируются браузером, порождая поток коротких запросов к серверу. Эти запросы генерируются javascript в адрес виртуального файла (backend) ,  в который пишется или считывается соответствующая информация. На каждый такой запрос сервер отвечает коротким ответом, ничего лишнего. Можете вообще отдавать двоичные данные,  хотя обычно отвечают строкой в родном для javascript JSON[2]-формате.  Обработчик  парсит строку (javascript имеет мощные встроенные средства для работы с текстом), и результаты вставляются в нужное место – например, ячейки таблицы.

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

  • Выигрыш номер один – нет парсера HTML, сервер гоняет статические страницы, не заглядывая в них. Поэтому может оказаться выгодным хранить большие файлы в пожатом zip'ом состоянии и отдавать прямо в таком виде, предваряя передачу соответствующим заголовком. Помните - весь динамический контент создаётся на стороне компьютера.
  • Выигрыш номер два – громоздкий запрос разбивается на несколько коротких, в каждом из которых передаётся только изменённая информация. Длина запросов уменьшается, вы полностью её контролируете. С другой стороны, увеличивается число одновременно открытых соединений, но это можно контролировать. Можно запускать скрипт заполнения полей данных после окончания загрузки страницы, вот таким образом: 
    <body onload="init()">
....
</body>
    При этом вначале грузится статический контент, а только потом запускается скрипт.
  • Выигрыш номер три - из-за исключения перезагрузки страниц информация окон (например, содержимое форм) не теряется и не требуется ничего запоминать на стороне сервера. Кроме этого трафик не расходуется вхолостую и не обогревает окна впустую :)
  • Выигрыш номер четыре - благодаря полному разделению разметки (статические файлы HTML) и javascript-кода появляется возможность полностью развести разработку интерфейса и прибора и вести их параллельно. Обе части могут быть написаны и отлажены отдельно разными программистами.
  • Недостаток один, но большой - появляется необходимость изучения AJAX :)

    • Необходимо отметить, что область применения AJAX объективно ограничена временем реакции линии связи. Если в локальной сети это время пренебрежимо мало, то в сетях GRPS время от посылки запроса до получения ответа может достигать 2 секунд.

    Из неочевидных вещей, которые следует иметь в  виду – возможность подключения пользовательских javascript-файлов. Представьте, что ваш интерфейс позволяет распечатать прямо из окна браузера платёжку, форма которой отличается от региона к региону. Так вот, эта форма легко может быть изменёна пользовательским скриптом.

    Полезные ссылки

  • Демо-проект
  • Полезное чтение по технологии AJAX (frontend, backend): http://dklab.ru/lib/JsHttpRequest
  • Сервер на PIC: TCP/IP Design Page Info
  • Сервер на MSP430: MSP430 Internet Connectivity
  • Оpen-source uIP TCP/IP stack
  • Онлайн-учебник (рус): http://wdh.suncloud.ru/refindex.htm
  • Онлайн-справочник: http://www.w3schools.com/
  • http://www.toppers.jp/tinet-download.html - здесь пакет tinet японский, но весьма функциональный. Для работы под RTOS uITRON. Полезно для знакомства с общей архитектурой.
  • http://www.freertos.org/ - FreeRTOS. Качается весь дистрибутив. И там только в некоторых директориях для STR912, LPC2xxx, SAM7 есть демки с использованием WEB сервера. Но демки вполне крута работают.
  • http://sourceforge.net/projects/opentcp - OpenTCP. Просто его когда-то портировал. WEB сервер зачаточный, но его легко нарастить.

    Средства отладки

  • Для отладки HTML и javascript рекомендуем использовать Firefox с установленным плагинами Firebug (AJAX) и Web Developer (HTML, CSS, куки)
  • В качестве тестового сервера рекомендуем установить Denwer

    • [1] Интерфейс XMLHttpRequest позволяет javascript обмениваться данными с сервером без перезагрузки страниц.

    [2] JSON- Javascript Simple Object Notation. Минималистский формат описания объектов javascript. Широко применяется как альтернатива XML. Позволяет передавать переменные, массивы, объекты, функции javascript. Очень простой и наглядный.

    Значение	2 или "ОК"
Массив		[1,2,3,"f"]
Объект		{name:"80c51", pins:40, price:2.02}
и т.д.
    Ключевые слова: embedded, web, AJAX, html, css, javascript, json

    Gеneral