Microsemi AN1256 Web Додаток для програмістів

вступ

JSON (JavaScript Object Notation) є відкритим стандартом file формат, який використовує зрозумілий для людини текст для обміну даними. Це поширений формат даних, який використовується для асинхронного зв’язку між браузером і сервером.
Для нового web дизайн сторінки, формат JSON може бути заміною оригінального стилю AJAX. Порівняйте з AJAX, використання JSON робить Web впровадження легше і простіше. Розробнику потрібно лише зосередитися web дизайн сторінки та Web реалізацію обробника можна пропустити, оскільки метод доступу JSON уже підтримується в кожному WebПрограмні модулі StaX.
У цьому документі міститься посібник для програмістів, яким необхідно розробити Web сторінки через JSON. Детальні процедури та прampтакож включені в наступні розділи.

Потік доступу до даних JSON

закінченоview
Ось потік доступу до даних JSON, який HTTP-з’єднання ініціюється від клієнта (браузера). Таблиця HTML створюється динамічно відповідно до даних JOSN, отриманих від сервера (DUT).

малюнок 1. Потік доступу між клієнтом і сервером

Дані запиту/відповіді JSON
Пакет запиту JSON базується на методі публікації запиту HTTP, а вміст має відповідати формату MSCC JSON.

• Синтаксис запиту JSON:{“метод”:” ”,”params”:[ ], “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 – Використовуйте для передачі/отримання динамічних даних із синтаксисом JSON.
• dynforms.js – Використовуйте для динамічного створення таблиці HTML.
• validate.js – Використовуйте для перевірки форми HTML.

Повні бібліотеки JavaScript розташовані в каталозі вихідного дерева: webstax2\ vtss_appl\web\html\lib.

Керівництво для JSON Web дизайн сторінки

У цьому розділі описано, як спроектувати a web сторінка на основі бібліотек MSCC JavaScript. Ми використовуємо налаштоване глобальне дзеркало web сторінка як колишняampсюди. Асинхронний зв’язок базується на методі доступу HTTP JSON, і всі глобальні налаштовані параметри перераховані в одній динамічній таблиці HTML.
The web макет сторінки наведено нижче, а повний вихідний код знаходиться в каталозі дерева вихідних кодів: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Щоб отримати більш типове web посилання на сторінки див. розділ додатків.

Таблиця конфігурації дзеркала та RMirror

малюнок 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. requestUpdate();
5. });

Дані запиту/відповіді JSON

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

1. функція requestUpdate()
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, ім'я)
2. {
3. // Ігнорувати процес, якщо дані не отримано
4. if (!recv_json) {
5. alert(“Не вдалося отримати динамічні дані.”);
6. повернення;
7. }
8. // Збережіть отримані дані JSON
9. myDynamicTable.saveRecvJson(“конфігурація”, recv_json);
10. // Додати рядки таблиці
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Оновити цю динамічну таблицю
15. myDynamicTable.update();
17. // Таймер оновлення
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Додайте рядки таблиці

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

Синтаксис:
table_rows:[ , , … ] : { , , … }
: {“тип”: , "params":[ , , …, ]}

• У цьому випадку кожен рядок має п’ять полів: «Session ID», «Mode», «Type», «VLAN ID» і «Reflector Port». Наприклад,ample,

Ідентифікатор сеансу (Поле імені: int32_t)	1 (Ідентифікатор дзеркальної сесії)
Режим (Поле імені: vtss_bool_t)	правда (Це означає, що дзеркальний сеанс увімкнено)
Тип (Поле імені: перерахування {дзеркало, rMirrorSource, rMirrorDestination}	Джерело RMirror (це джерело сеансу віддаленого дзеркала
Ідентифікатор VLAN (Поле імені: uint16_t)	200 (vlan, що використовується для віддзеркалення)
Порт рефлектора (Поле імені: vtss_ifindex_t)	Gi 1/1 (Порт, на який надсилається віддзеркалений трафік

• Функція myDynamicTable.addRows() перетворить дані JSON у формат HTML і виведе таблицю HTML.

1. функція addRow(ключ, значення)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = «Немає», none_interface_text = «НЕМАЄ»;
4. var tunnel_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:”text”, params:[val.Type == “mirror” ? «-»:
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. зворотний ряд;
13. }
14. функція addRows(recv_json)
15. {
16. змінний рядок, empty_colspan = 7;
17. var table_rows = new Array();
18. // Додати заголовок таблиці
19. addHeader(table_rows);
20. // Додати один рядок
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. повернути table_rows;
25. }

Web довідкова сторінка
Для web дизайн сторінки довідки, опис довідки може посилатися на специфікацію JSON, що текст опису може узгоджуватися з виводом JSON і допомагає зменшити надлишкові описи. Прample тут взято з конфігурації реле 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. if (!req.responseText) {
5. повернення;
6. }
7. var 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. var param_names = [
15. {
16. “alias”: “Інтерфейс”,
17. “тип”: “vtss_ifindex_t”,
18. “name”: “vlanInterface”,
19. «суфікс»: «.»
20. },
21. {
22. «alias»: «Інтерфейс ретрансляції»,
23. “тип”: “vtss_ifindex_t”,
24. “name”: “relayVlanInterface”,
25. «суфікс»: «. Ідентифікатор інтерфейсу, який використовується для ретрансляції».
26. },
27. {
28. «alias»: «Пункт призначення»,
29. “тип”: “mesa_ipv6_t”,
30. “name”: “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', функція () {
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\ menu_default.cxx.
• Відредагуйте елементи в цьому file для Web гіперпосилання на сторінку.

1. #якщо визначено(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

ПРИМІТКА
Зверніть увагу, що кількість символів пробілу в ITEM(“”), який використовується для визначення рівня групи в рядку меню. В даному випадку все web сторінки знаходяться в групі «DHCPv6».

Малюнок 6. Впрampфайл глобальної налаштованої таблиці

Додаток

Типовий web сторінки

Є кілька типових web сторінки можна використовувати для еталонного дизайну. Ще один ексampТут буде показано конфігурацію окремого дзеркального сеансу, знайденого у vtss_appl\mirror\html\mirror.htm.
The web сторінка містить детальну конфігурацію для одного сеансу дзеркала. Перераховано всі налаштовані параметри.

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

Конфігурація Mirror&RMiror

Глобальні налаштування

Конфігурація вихідної VLAN(s).

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

малюнок 7. Exampфайл детальної конфігурації дзеркального сеансу
Кнопки «Зберегти», «Скинути» та «Скасувати» додано html кодом:

Потік команд JSON
Для цієї сторінки потрібен двоетапний потік команд:

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

Виклик «mirror.capabilities.get» ініціюється подією «domready», а результат налаштовується для обробки функцією requestUpdate.
QuestUpdate ініціює виклик «mirror.config.session.get»,
“port.status.get” і у випадку стекування “topo.config.stacking.get” і результати цих викликів налаштовані на обробку функцією preparatUpdate.
Функція preparatUpdate збере всі результати, і лише коли всі отримані, вона викличе функцію processUpdate, яка створить таблиці, які відображатимуться на web.

Список літератури

1. Вікіпедія JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

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

Microsemi AN1256 Web Додаток для програмістів [pdfПосібник користувача AN1256, AN1256 Web Додаток для програмістів, Web Програмісти Application, Application

Список літератури

• Посібник користувача