Microsemi AN1256 Web Бағдарламашылар қосымшасы

Кіріспе

JSON (JavaScript Object Notation) ашық стандартты болып табылады file деректер алмасу үшін адам оқи алатын мәтінді пайдаланатын пішім. Бұл асинхронды браузер/сервер байланысы үшін пайдаланылатын жалпы деректер пішімі.
Жаңасы үшін web бет дизайны, JSON пішімі бастапқы AJAX стилін ауыстыруы мүмкін. JSON көмегімен AJAX-пен салыстырыңыз Web жүзеге асыру оңайырақ және қарапайым. Әзірлеуші ​​тек назар аударуы керек web бет дизайны және Web өңдегішті іске асыруды өткізіп жіберуге болады, себебі JSON қатынас әдісі әрқайсысында әлдеқашан қолдау көрсетіледі WebStaX бағдарламалық модульдері.
Бұл құжат әзірлеуі қажет бағдарламалық жасақтама инженеріне арналған бағдарламашыларға арналған нұсқаулықты көрсетеді Web JSON арқылы бет. Егжей-тегжейлі процедуралар және мысampСондай-ақ келесі бөлімдерге енгізілген.

JSON деректеріне қол жеткізу ағыны

Біттіview
Міне, HTTP қосылымы клиенттен (браузерден) іске қосылатын JSON деректеріне қол жеткізу ағыны. HTML кестесі серверден (DUT) алынған JOSN деректеріне сәйкес динамикалық түрде жасалады.

1-сурет. Клиент пен сервер арасындағы қатынас ағыны

JSON деректерін сұрау/жауап беру
JSON сұрау пакеті HTTP сұрауын жариялау әдісіне негізделген және мазмұн MSCC JSON пішіміне сай болуы керек.

• JSON синтаксисін сұрау:{"әдіс":" ”,”параметрлері”:[ ], “id:”jsonrpc”}
• Жауап JSON синтаксисі: {"қате": ,"нәтиже": , “id:”jsonrpc”}

Келесі суреттер браузер мен DUT арасындағы JSON мазмұнын көрсетеді.

2-сурет. Клиенттен HTTP сұрауының суреті

3-сурет. Серверден HTTP жауабының суреті

MSCC JSON спецификациясы
Әдіс, параметр, сипаттама және т.б. қоса, толық JSON ақпаратын алу үшін “http://” теріңіз. /json_spec” браузеріңіздің мекенжай жолағында. JSON әдісінің атауы «jsonRpc.status.introspection.specific.inventory.get» арқылы басқа кіру әдісі бар, ол белгілі бір әдіс үшін пайдаланылады.

4-сурет. JSON спецификациясының суреті web бет

Web шеңбер

The Web шеңберіндегі WebStaX бағдарламалық құралы ашық бастапқы MooTools бағдарламасына негізделген. Бұл MIT лицензиясы бар JavaScript утилиталарының жинағы. (http://mootools.net/license.txt) Мәзір жолағы және көпшілігі web беттер рамкаға негізделген. AJAX және JSON алгоритмдері оның утилиталарында біріктірілген.
Сонымен қатар, WebStaX бағдарламалық құралы JSON үшін пайдалы басқа утилиталарды қамтамасыз етеді web бет дизайны.

• json.js – JSON синтаксисі бар динамикалық деректерді жіберу/қабылдау үшін for пайдаланыңыз.
• 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 беттерге сілтеме, қосымша бөлімін қараңыз.

Mirror&RMirror конфигурация кестесі

5-сурет. Exampжаһандық конфигурацияланған кестенің le

Өңдеу Web бет

HTML тақырыбы
HTML-ге қажет JS кітапханаларын қосыңыз tag.

Динамикалық кесте ресурсын инициализациялаңыз

• HTML құжаты дайын болғанда, динамикалық кесте ресурсын инициализациялау үшін DynamicTable() шақырыңыз.
• DynamicTable() JSON деректерін алғаннан кейін динамикалық кестені жасау үшін пайдаланылады.
• Содан кейін ол JSON пәрмен ағынын бастау үшін requestUpdate шақырады.

1. window.addEvent('doready', function() {
2. // JSON деректерін қабылдау/беру үшін кесте денесі бар пішінді жасаңыз
3. myDynamicTable = жаңа DynamicTable («myTableContent», «config»,»plusRowCtrlBar»);
   4
4. requestUpdate();
5. });

JSON деректерін сұрау/жауап беру

• HTML құжаты дайын болғанда, конфигурацияланған сеанстар туралы ақпаратты алу үшін “mirror.config.session.get” JSON сұрауын жіберу үшін requestJsonDoc() пайдаланыңыз.
• “mirror.capabilities.get” үшін JSON деректері алынғаннан кейін, requestUpdate() кері шақыру функциясы өңделеді. Содан кейін requestUpdate функциясы ағымдағы конфигурацияны алу үшін «mirror.config.session.get» деп атайды. Ағымдағы конфигурация қабылданған кезде, көрсетілетін кестені құру үшін processUpdate функциясы шақырылады.

1. сұрау жаңарту() функциясы
2. {
3. // Кесте мазмұнын қалпына келтіру
4. myDynamicTable.restore();
   5
5. // Бұл кесте екі JSON деректері.
6. requestJsonDoc(“mirror.config.session.get”, нөл, processUpdate, “config”);
7. }

Алынған JSON деректерін өңдеңіз

• processUpdate() функциясы JSON деректерін алғаннан кейін динамикалық кестені орналастыру үшін пайдаланылады.
• addRows() кесте жолдарын қосу үшін пайдаланылады. myDynamicTable.update() орналасуы
  Кесте жолдарындағы деректерге сәйкес HTML кестесі.

1. processUpdate функциясы(recv_json, атауы)
2. {
3. // Ешқандай деректер алынбаса, процесті елемеу
4. егер (!recv_json) {
5. ескерту («Динамикалық деректерді алу сәтсіз аяқталды.»);
6. қайтару;
7. }
8. // Алынған JSON деректерін сақтаңыз
9. myDynamicTable.saveRecvJson («конфигурация», recv_json);
10. // Кесте жолдарын қосу
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(кесте_жолдары);
14. // Осы динамикалық кестені жаңартыңыз
15. myDynamicTable.update();
17. // Таймерді жаңарту
18. var autorefresh = document.getElementById(“autorrefresh”);
19. егер (авторды жаңарту && автожаңғырту.белгіленген) {
20. егер (таймер идентификаторы) {
21. clearTimeout (таймер идентификаторы);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Кесте жолдарын қосыңыз

• addRows() функциясында кесте жолындағы әрбір жаһандық конфигурацияланған параметрді толтыру үшін JSON пішімін пайдаланамыз.
• Барлық HTML өрістері JSON массивінде («кесте_жолдары») тізімделген және кесте өрісінің синтаксисі төменде берілген.

Синтаксис:
кесте_жолдары:[ , , … ] : { , , … }
: {“түрі”: , "парамдар":[ , , …, ]}

• Бұл жағдайда әрбір жолда бес өріс бар: «Сеанс идентификаторы», «Режим», «Түрі», «VLAN идентификаторы» және «Рефлектор порты».ampле,

Сеанс идентификаторы (Атау өрісі: 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 функциясы(кілт, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Жоқ”, none_interface_text = “NONE”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {өрістер:[
6. {түрі:”сілтеме”, параметрлер:[“cr”, “mirror.htm?session_id=” + кілт, кілт]},
7. {түрі:”мәтін”, параметрлер:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {түрі:”мәтін”, параметрлер:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {түрі:”мәтін”, параметрлер:[val.Type == “айна” ? «-»:
   val.RMirrorVlan, “c”]},
10. {түрі:”мәтін”, параметрлері:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. қайтару жолы;
13. }
14. addRows функциясы(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Кесте тақырыбын қосу
19. addHeader(кесте_жолдары);
20. // Жалғыз жолды қосу
21. Object.each(recv_json, функция(жазба) {
22. table_rows.push(addRow(жазба.кілт, жазба.вал));
23. });
24. кесте_жолдарын қайтару;
25. }

Web анықтама беті
үшін web анықтамалық бет дизайны, анықтама сипаттамасы JSON спецификациясына сілтеме жасай алады, бұл сипаттама мәтіні JSON шығысымен сәйкес келуі және артық сипаттамаларды азайтуға көмектеседі. Мысалыample мұнда dhcp6 реле конфигурациясынан алынған.

Дереккөздегі гиперсілтеме file
Көмек тағайындаңыз file оның көзінде орналасуы file HTML tag. Тұрақты айнымалы атауы «анықтама_бет» үшін пайдаланылады web анықтама бетін тағайындау.

2. // Анықтама беті
3. var help_page = “/help/help_xxx.htm”;

JSON спецификациясынан HTML өрісінің сипаттамасын жаңартыңыз

• Қолдану немесе HTML tag HTML кестесінің сипаттамасын жариялау және бірегей идентификаторды беру tag.
• HTML құжаты дайын болғанда, толық JSON спецификациясын алу үшін loadXMLDoc() қызметіне қоңырау шалыңыз немесе JSON әдісі атауы бойынша арнайы әдіс сипаттамасын «jsonRpc.status.introspection.specific.inventory.get» алыңыз.
• processTableDesc() кесте сипаттамасын жаңарту үшін пайдаланылады және processUpdate() кесте параметрінің сипаттамасын жаңарту үшін пайдаланылады.
• processUpdate() ішінде нақты элемент атауларына сәйкес келетін JSON элементтерін жаңарту үшін updateTableParamsDesc() шақырыңыз.
• жаңартыңыз немесе tag элемент сипаттамасына сәйкес ішкі HTML.

2. /* HTML сипаттама өрістерін жаңарту */
3. function processTableDesc(req) {
4. егер (!req.responseText) {
5. қайтару;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Кесте сипаттамасын жаңарту
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).сипаттама;
10. }
11. /* HTML кестесі параметрінің сипаттамасын жаңарту */
12. function 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. «суффикс»: «. Сұраулар жіберілетін DHCPv6 серверінің IPv6 мекенжайы. 'ff05::1:3' әдепкі мәні 'кез келген DHCP серверін' білдіреді.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* JSON спецификациясын алу */
37. window.addEvent('doready', функция () {
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жаһандық конфигурацияланған кестенің le

Қосымша

Типтік 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 функциясы арқылы өңдеуге теңшеледі.
requestUpdate «mirror.config.session.get» қоңырауын бастайды,
«port.status.get» және жинақталған жағдайда «topo.config.stacking.get» және осы шақырулардың нәтижелері readyUpdate функциясымен өңдеуге конфигурацияланады.
ReaderUpdate функциясы барлық нәтижелерді жинайды және барлығы алынған кезде ғана ол процессUpdate функциясын шақырады, ол кестеде көрсетілген кестелерді құрастырады. web.

Анықтамалар

1. Wikipedia 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 Бағдарламашылар қолданбасы, қолданбасы

Анықтамалар

• Пайдаланушы нұсқаулығы