Микросеми AN1256 Web Приложение для программистов

Введение

JSON (нотация объектов JavaScript) — это открытый стандарт. file формат, в котором для обмена данными используется удобочитаемый текст. Это общий формат данных, используемый для асинхронной связи браузера и сервера.
Для нового web дизайн страницы, формат JSON может стать заменой исходному стилю AJAX. По сравнению с AJAX, использование JSON делает Web реализация проще и проще. Разработчику нужно сосредоточиться только на web дизайн страницы и Web реализацию обработчика можно опустить, поскольку метод доступа JSON уже поддерживается в каждом WebПрограммные модули StaX.
В этом документе изложено руководство программистов для инженеров-программистов, которым необходимо разработать Web страницу через JSON. Подробные процедуры и exampфайлы также включены в следующие разделы.

Поток доступа к данным JSON

Надview
Вот поток доступа к данным JSON, при котором HTTP-соединение инициируется клиентом (браузером). Таблица HTML создается динамически в соответствии с полученными данными JOSN со стороны сервера (DUT).

Рисунок 1. Поток доступа между клиентом и сервером

Данные запроса/ответа в формате JSON
Пакет запроса JSON основан на методе отправки HTTP-запроса, а содержимое должно соответствовать формату MSCC JSON.

• Синтаксис запроса JSON:{“метод”:” ””параметры”:[ ], «id:»jsonrpc»}
• Синтаксис ответа JSON: {"ошибка": ,"результат": , «id:»jsonrpc»}

На следующих снимках показано содержимое JSON между браузером и DUT.

Рисунок 2. Снимок HTTP-запроса от клиента

Рисунок 3. Снимок HTTP-ответа с сервера

Спецификация MSCC JSON
Чтобы получить полную информацию JSON, включая метод, параметр, описание и т. д., введите «http:// /json_spec» в адресной строке браузера. Существует еще один метод доступа через имя метода JSON «jsonRpc.status.introspection.specific.inventory.get», он используется для определенного метода.

Рисунок 4. Снимок спецификации JSON web страница

Web рамки

The Web рамки в WebПрограммное обеспечение StaX основано на MooTools с открытым исходным кодом. Это набор утилит JavaScript с лицензией MIT. (http://mootools.net/license.txt) Строка меню и большая часть web страницы основаны на фреймворке. Алгоритмы AJAX и JSON уже интегрированы в его утилиты.
Кроме, WebПрограммное обеспечение StaX предоставляет другие утилиты, полезные для JSON. web дизайн страницы.

• json.js – Используйте for для передачи/получения динамических данных с синтаксисом JSON.
• dynforms.js – Используйте для динамического создания таблицы HTML.
• валидировать.js – Используйте для проверки HTML-формы.

Полные библиотеки JavaScript расположены в каталоге дерева исходного кода: webstax2\vtss_appl\web\html\lib.

Руководство по JSON Web дизайн страницы

В этом разделе рассказывается, как спроектировать web страница на основе библиотек JavaScript MSCC. Мы используем глобальное настроенное зеркало web страница как бывшийampле здесь. Асинхронная связь основана на методе доступа HTTP JSON, и все глобальные настроенные параметры перечислены в одной динамической таблице HTML.
The web макет страницы указан ниже, а полный исходный код находится в каталоге дерева исходного кода: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Чтобы стать более типичным web Ссылки на страницы см. в разделе приложения.

Таблица конфигурации зеркала и зеркала

Рисунок 5. Exampфайл глобальной настроенной таблицы

Редактировать Web страница

HTML-заголовок
Включите необходимые библиотеки JS в HTML. tag.

Инициализируйте ресурс динамической таблицы

• Когда HTML-документ будет готов, вызовите DynamicTable(), чтобы инициализировать ресурс динамической таблицы.
• DynamicTable() используется для создания динамической таблицы после получения данных JSON.
• Затем он вызовет requestUpdate, чтобы инициировать поток команд JSON.

1. window.addEvent('domready', function() {
2. // Создаём форму с телом таблицы для приёма/передачи данных JSON
3. myDynamicTable = new DynamicTable («myTableContent», «config», «plusRowCtrlBar»);
   4
4. запросОбновление();
5. });

Данные запроса/ответа в формате JSON

• Когда HTML-документ будет готов, используйте requestJsonDoc() для отправки запроса JSON «mirror.config.session.get» для получения информации о настроенных сеансах.
• После получения данных JSON для «mirror.capabilities.get» будет обработана функция обратного вызова requestUpdate(). Затем функция requestUpdate вызовет «mirror.config.session.get», чтобы получить текущую конфигурацию. Когда получена текущая конфигурация, вызывается функцияprocessUpdate для построения отображаемой таблицы.

1. функция запросаОбновление()
2. {
3. // Восстанавливаем содержимое таблицы
4. myDynamicTable.restore();
   5
5. // В этой таблице два данных JSON.
6. requestJsonDoc("mirror.config.session.get", null,processUpdate, "config");
7. }

Обработать полученные данные JSON

• ФункцияprocessUpdate() используется для разметки динамической таблицы после получения данных JSON.
• addRows() используется для добавления строк таблицы. myDynamicTable.update() макет
  HTML-таблица в соответствии с данными в строках таблицы.

1. функцияprocessUpdate(recv_json, name)
2. {
3. // Игнорируем процесс, если данные не получены
4. если (!recv_json) {
5. alert("Не удалось получить динамические данные.");
6. возвращаться;
7. }
8. // Сохраняем полученные данные JSON
9. myDynamicTable.saveRecvJson («конфигурация», Recv_json);
10. // Добавляем строки таблицы
11. вар table_rows = addRows (recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Обновляем эту динамическую таблицу
15. myDynamicTable.update();
17. // Обновляем таймер
18. var autorefresh = document.getElementById («автообновление»);
19. if (автообновление && autorefresh.checked) {
20. если (ID таймера) {
21. ClearTimeout (ID таймера);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Добавить строки таблицы

• В функции addRows() мы используем формат JSON для заполнения каждого глобального настроенного параметра в строке таблицы.
• Все поля HTML перечислены в массиве JSON («table_rows»), а синтаксис поля таблицы приведен ниже.

Синтаксис:
table_rows:[ , , … ] : { , , … }
: {"тип": , «параметры»:[ , , …, ]}

• В этом случае каждая строка имеет пять полей: «Идентификатор сеанса», «Режим», «Тип», «Идентификатор VLAN» и «Порт рефлектора».ampле,

Идентификатор сеанса (Поле имени: int32_t)	1 (Идентификатор зеркального сеанса)
Режим (Поле имени: vtss_bool_t)	истинный (Это означает, что зеркальный сеанс включен)
Тип (Поле имени: перечисление {зеркало, rMirrorSource, rMirrorDestination}	Источник зеркала (это источник сеанса удаленного зеркала
ИДЕНТИФИКАТОР VLAN (Поле имени: uint16_t)	200 (VLAN, используемый для зеркалирования)
Рефлекторный порт (Поле имени: vtss_ifindex_t)	Ги 1/1 (Порт, на который отправляется зеркальный трафик

• myDynamicTable.addRows() преобразует данные JSON в формат HTML и выводит таблицу HTML.

1. функция addRow (ключ, значение)
2. {
3. вар none_map_val = 0xFFFFFFFF, none_map_text = «Нет», none_interface_text = «НЕТ»;
4. var туннель_mode_suffix = val.TunnelMode == «useglobal» ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. вар строка = {поля:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + key, key]},
7. {type:»text», params:[oTMode[oVMode.indexOf(val.Mode)], «c»]},
8. {type:»text», params:[oTType[oVType.indexOf(val.Type)], «c»]},
9. {type:»текст», params:[val.Type == «зеркало» ? «-»:
   val.RMirrorVlan, «c»]},
10. {type:»текст», params:[val.Type == «rMirrorSource»?
    val.ReflectorPort: «-», «c»]}
11. ]};
12. возвратный ряд;
13. }
14. функция addRows (recv_json)
15. {
16. строка вар, пустой_colspan = 7;
17. вар table_rows = новый массив ();
18. // Добавляем заголовок таблицы
19. addHeader(table_rows);
20. // Добавляем одну строку
21. Object.each(recv_json, функция(запись) {
22. table_rows.push(addRow(record.key, Record.val));
23. });
24. вернуть table_rows;
25. }

Web страница помощи
Для web При дизайне страницы справки описание справки может ссылаться на спецификацию JSON, чтобы текст описания соответствовал выходным данным JSON и помогал уменьшить количество избыточных описаний. БывшийampЗдесь взят файл конфигурации реле dhcp6.

Гиперссылка в источнике file
Назначить помощь file местоположение в источнике file HTML tag. Фиксированное имя переменной «help_page» используется для web Назначение страницы помощи.

2. // Магия страницы помощи
3. var help_page = «/help/help_xxx.htm»;

Обновить описание поля HTML из спецификации JSON.

• Использовать или HTML tag объявить описание таблицы HTML и указать уникальный идентификатор для tag.
• Когда HTML-документ готов, вызовите loadXMLDoc(), чтобы получить всю спецификацию JSON, или получите описание конкретного метода по имени метода JSON «jsonRpc.status.introspection.specific.inventory.get».
• ProcessTableDesc() используется для обновления описания таблицы, а ProcessUpdate() используется для обновления описания параметров таблицы.
• В методеprocessUpdate() вызовите updateTableParamsDesc(), чтобы обновить элементы JSON, соответствующие именам конкретных элементов.
• Обновите или tag внутренний HTML в соответствии с описанием элемента.

2. /* Обновляем поля HTML-описания */
3. функцияprocessTableDesc(req) {
4. если (!req.responseText) {
5. возвращаться;
6. }
7. вар json_spec = JSON.decode(req.responseText);
8. // Обновляем описание таблицы
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan").description;
10. }
11. /* Обновить описание параметра HTML-таблицы */
12. функцияprocessUpdate(recv_json) {
13. // Обновляем описание параметра таблицы
14. вар имя_параметра = [
15. {
16. «псевдоним»: «Интерфейс»,
17. «тип»: «vtss_ifindex_t»,
18. «имя»: «vlanInterface»,
19. «суффикс»: «.»
20. },
21. {
22. «псевдоним»: «Интерфейс реле»,
23. «тип»: «vtss_ifindex_t»,
24. «имя»: «relayVlanInterface»,
25. «суффикс»: «. Идентификатор интерфейса, используемого для ретрансляции».
26. },
27. {
28. «alias»: «Назначение ретрансляции»,
29. «тип»: «mesa_ipv6_t»,
30. «имя»: «relay_destination»,
31. «суффикс»: «. IPv6-адрес сервера DHCPv6, на который будут пересылаться запросы. Значение по умолчанию «ff05::1:3» означает «любой DHCP-сервер».
32. }
33. ];
34. updateTableParamsDesc («TableParamsDesc», Recv_json, «dhcp6_relay.config.vlan.get», param_names);
35. }
36. /* Получить спецификацию JSON */
37. window.addEvent('domready', function () {
38. loadXMLDoc("/json_spec",processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan",processUpdate);
40. });

Гиперссылка в строке меню

• Исходный код HTML строки меню генерируется из file webstax2\vtss_appl\web\ меню_default.cxx.
• Отредактируйте элементы в этом file для Web гиперссылка на страницу.

1. #если определено(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(»Реле,dhcp6_relay.htm»);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

ПРИМЕЧАНИЕ
Обратите внимание, что количество пробелов в ITEM(“”) используется для определения уровня группы в строке меню. В этом случае все web страницы находятся в группе «DHCPv6».

Рисунок 6. Exampфайл глобальной настроенной таблицы

Приложение

Типичный web страницы

Существует несколько типичных web страницы могут быть использованы для эталонного дизайна. Еще один бывшийampЗдесь будет показана конфигурация одного зеркального сеанса, найденная в vtss_appl\mirror\html\mirror.htm.
The web Страница предоставляет подробную конфигурацию для одного зеркального сеанса. Все настроенные параметры перечислены.

• Нажмите кнопку «Сохранить», чтобы применить текущую конфигурацию.
• Нажмите кнопку «Сброс», чтобы сбросить текущую конфигурацию.
• Нажмите «Отмена», чтобы вернуться к предыдущему состоянию.view зеркальных сеансов

Зеркало и конфигурация зеркала

Глобальные настройки

Конфигурация исходных VLAN(ов)

Конфигурация порта

Рисунок 7. Exampфайл детальной настройки зеркальной сессии
Кнопки «Сохранить», «Сбросить» и «Отмена» добавлены html-кодом:

Последовательность команд JSON
Для этой страницы требуется двухэтапный поток команд:

• Сначала необходимо получить возможности устройства с помощью метода «mirror.capabilities.get». Возможности не меняются, и их нужно прочитать только один раз.
• Затем ему необходимо получить текущую конфигурацию устройства методами «mirror.config.session.get», «port.status.get» и в случае стекирования «topo.config.stacking.get».

Вызов «mirror.capabilities.get» инициируется событием «domready», а результат настраивается для обработки функцией requestUpdate.
RequestUpdate инициирует вызов «mirror.config.session.get»,
«port.status.get» и в случае стекирования «topo.config.stacking.get», и результаты этих вызовов настраиваются для обработки функцией подготовитьОбновление.
Функция «preparateUpdate» соберет все результаты, и только когда все они будут получены, она вызовет функцию «processUpdate», которая создаст таблицы, которые будут показаны на экране. web.

Ссылки

1. Википедия JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonИнструменты https://mootools.net/

Документы/Ресурсы

Микросеми AN1256 Web Приложение для программистов [pdf] Руководство пользователя АН1256, АН1256 Web Заявка программиста, Web Программист Заявка, Заявка

Ссылки

• Руководство пользователя