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:{“метод”:” ”,”параметри”:[ ], “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 библиотеки. Използваме конфигурирания Mirror global 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 = нова 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. предупреждение („Неуспешно получаване на динамични данни.“);
6. връщане;
7. }
8. // Запазете получените JSON данни
9. myDynamicTable.saveRecvJson(“config”, 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_reds:[ , , … ] : { , , … }
: {"Тип": , „параметри“:[ , , …, ]}

• В този случай всеки ред има пет полета: „ID на сесията“, „Mode“, „Type“, „VLAN ID“ и „Reflector Port“ Напр.ampле,

ID на сесията (Поле за име: int32_t)	1 (ID на огледалната сесия)
Режим (Поле за име: vtss_bool_t)	вярно (Това означава, че огледалната сесия е активирана)
Тип (Поле за име: изброяване {огледало, rMirrorSource, rMirrorDestination}	RMirror Източник (това е източникът на отдалечена огледална сесия
VLAN ID (Поле за име: 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. променлив ред, празен_колпан = 7;
17. var table_rows = new Array();
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. 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. "псевдоним": "Интерфейс",
17. „тип“: „vtss_ifindex_t“,
18. "име": "vlanInterface",
19. "наставка": "."
20. },
21. {
22. „псевдоним“: „Релеен интерфейс“,
23. „тип“: „vtss_ifindex_t“,
24. "име": "relayVlanInterface",
25. "наставка": ". Идентификаторът на интерфейса, използван за препредаване.“
26. },
27. {
28. „псевдоним“: „Дестинация на препредаване“,
29. „тип“: „mesa_ipv6_t“,
30. “име”: “реле_дестинация”,
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(” Реле,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&RMirror конфигурация

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

Конфигурация на VLAN(и) източник

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

Фигура 7. Exampфайл с подробна конфигурация на огледална сесия
Бутоните „Запазване“, „Нулиране“ и „Отказ“ се добавят от html кода:

JSON команден поток
Тази страница изисква команден поток от две стъпки:

• Първо трябва да получи възможностите на устройството с метода “mirror.capabilities.get”. Възможностите не се променят и трябва да се прочетат само веднъж.
• След това трябва да получи текущата конфигурация на устройството с помощта на методите „mirror.config.session.get“, „port.status.get“ и в случай на подреждане „topo.config.stacking.get“.

Извикването на „mirror.capabilities.get“ се инициира от събитието „domready“ и резултатът е конфигуриран да се обработва от функцията requestUpdate.
ЗаявкатаUpdate ще инициира извикването на „mirror.config.session.get“,
„port.status.get“ и в случай на подреждане „topo.config.stacking.get“ и резултатите от тези извиквания са конфигурирани да се обработват от функцията pripraveUpdate.
Функцията 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 Приложение за програмисти, Приложение

Референции

• Ръководство за потребителя