Microsemi AN1256 Web Daim ntawv thov Programmers

Taw qhia

JSON (JavaScript Object Notation) yog tus qauv qhib file hom ntawv uas siv tib neeg cov ntawv nyeem tau rau kev sib pauv cov ntaub ntawv. Nws yog ib hom ntaub ntawv siv rau asynchronous browser/server kev sib txuas lus.
Rau qhov tshiab web nplooj ntawv tsim, JSON hom tuaj yeem hloov pauv rau thawj AJAX style. Piv rau AJAX, siv JSON ua tus Web kev siv tau yooj yim dua thiab yooj yim dua. Tus tsim tawm tsuas yog xav tau tsom mus rau web page design thiab Web Kev siv tus neeg siv tuaj yeem raug tshem tawm vim JSON txoj kev nkag mus tau twb tau txais kev txhawb nqa hauv txhua qhov WebStaX software modules.
Cov ntaub ntawv no hais txog cov programmers phau ntawv qhia rau software engineer uas xav tau los tsim cov Web nplooj ntawv ntawm JSON. Cov txheej txheem nthuav dav thiab examples kuj suav nrog hauv ntu nram qab no.

JSON cov ntaub ntawv nkag mus

Tshajview
Nov yog JSON cov ntaub ntawv nkag mus uas HTTP kev sib txuas tau pib los ntawm tus neeg siv khoom (browser). Lub rooj HTML yog tsim dynamically raws li tau txais JOSN cov ntaub ntawv los ntawm lub server (DUT) sab.

Daim duab 1. Kev nkag mus tau ntawm tus neeg siv khoom thiab server

Thov / teb JSON cov ntaub ntawv
Cov pob ntawv thov JSON yog raws li HTTP thov tshaj tawm txoj kev thiab cov ntsiab lus yuav tsum ua raws li MSCC JSON hom.

• Thov JSON syntax:{"txoj kev":" "," params ": [ ], "id:"jsonrpc"}
• Teb JSON syntax: {"yuam kev": , "result": , "id:"jsonrpc"}

Cov duab thaij duab hauv qab no qhia txog JSON cov ntsiab lus ntawm browser thiab DUT.

Daim duab 2. Snapshot ntawm HTTP thov los ntawm cov neeg siv khoom

Daim duab 3. Snapshot ntawm HTTP teb los ntawm server

MSCC JSON specification
Txhawm rau kom tau txais cov ntaub ntawv JSON tag nrho suav nrog cov txheej txheem, qhov ntsuas, kev piav qhia thiab lwm yam. Ntaus "http:// /json_spec" ntawm koj qhov browser chaw nyob bar. Muaj lwm txoj hauv kev los ntawm JSON lub npe "jsonRpc.status.introspection.specific.inventory.get", nws yog siv rau ib txoj kev tshwj xeeb.

Daim duab 4. Snapshot ntawm JSON specification web nplooj

Web lub moj khaum

Cov Web lub moj khaum hauv WebStaX software yog raws li qhov qhib MooTools. Nws yog ib phau ntawm JavaScript utilities nrog MIT daim ntawv tso cai. (http://mootools.net/license.txt) Cov ntawv qhia zaub mov bar thiab feem ntau ntawm web nplooj ntawv yog raws li lub moj khaum. Ob lub AJAX thiab JSON algorithm twb tau koom ua ke hauv nws cov khoom siv.
Tsis tas li ntawd, WebStaX software muab lwm yam khoom siv uas muaj txiaj ntsig zoo rau JSON web nplooj ntawv tsim.

• json.js – Siv rau xa / tau txais cov ntaub ntawv dynamic nrog JSON syntax.
• dynforms.js – Siv los tsim cov lus HTML dynamically.
• validate.js – Siv rau validation ntawm HTML daim ntawv.

Cov tsev qiv ntawv JavaScript tag nrho yog nyob hauv qab cov npe ntoo: webstax2\ vtss_appl\web\html\lib.

Cov lus qhia rau JSON Web nplooj ntawv tsim

Tshooj lus no qhia yuav ua li cas tsim a web nplooj ntawv raws li MSCC JavaScript cov tsev qiv ntawv. Peb siv Daim iav ntiaj teb teeb tsa web paj as exampli no. Kev sib txuas lus asynchronous yog raws li HTTP JSON txoj kev nkag mus thiab txhua qhov kev teeb tsa thoob ntiaj teb tau teev tseg hauv ib lub rooj HTML dynamic.
Cov web nplooj ntawv layout yog teev hauv qab no thiab tag nrho cov cai yog nyob rau hauv lub hauv paus ntoo directory: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Kom tau ntau tus raug web cov nplooj ntawv siv, saib cov ntawv txuas ntxiv.

Daim iav & RMMirror Confiquration Table

Daim duab 5. Example ntawm ntiaj teb configured rooj

Kho kom raug Web nplooj

HTML header
suav nrog JS cov tsev qiv ntawv uas xav tau hauv HTML tag.

Pib lub dynamic table resource

• Thaum cov ntaub ntawv HTML npaj txhij, hu rau DynamicTable() los pib cov ntaub ntawv dynamic.
• Lub DynamicTable() yog siv los tsim lub rooj dynamic tom qab tau txais cov ntaub ntawv JSON.
• Nws mam li hu rau thovUpdate los pib JSON cov lus txib ntws.

1. window.addEvent('domready', function() {
2. // Tsim ib daim ntawv nrog lub rooj rau kev txais / xa JSON cov ntaub ntawv
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. thovUpdate();
5. });

Thov / teb JSON cov ntaub ntawv

• Thaum cov ntaub ntawv HTML npaj tau, siv requestJsonDoc() xa JSON thov "mirror.config.session.get" kom tau txais cov ntaub ntawv hais txog cov kev teeb tsa.
• Tom qab JSON cov ntaub ntawv rau "mirror.capabilities.get" tau txais, hu rov qab muaj nuj nqi thovUpdate() yuav ua tiav. Lub luag haujlwm thovUpdate yuav hu rau "mirror.config.session.get" kom tau txais kev teeb tsa tam sim no. Thaum qhov kev teeb tsa tam sim no tau txais, cov haujlwm txheej txheemUpdate raug hu los tsim lub rooj kom pom.

1. function thovUpdate()
2. {
3. // Rov qab cov ntsiab lus ntawm lub rooj
4. myDynamicTable.restore();
   5
5. // Cov lus no ob JSON cov ntaub ntawv.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Ua cov ntaub ntawv JSON tau txais

• Cov txheej txheem ua haujlwmUpdate() yog siv los teeb tsa lub rooj dynamic tom qab tau txais cov ntaub ntawv JSON.
• AddRows() yog siv los ntxiv cov kab lus. myDynamicTable.update() layout lub
  HTML rooj raws li cov ntaub ntawv hauv kab kab.

1. function processUpdate(recv_json, npe)
2. {
3. // Tsis quav ntsej cov txheej txheem yog tias tsis muaj cov ntaub ntawv tau txais
4. yog tias (!recv_json) {
5. ceeb toom ("Tau txais cov ntaub ntawv dynamic tsis tau.");
6. rov qab los;
7. }
8. // Txuag cov ntaub ntawv JSON tau txais
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Ntxiv cov kab lus
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Hloov kho lub rooj dynamic no
15. myDynamicTable.update();
17. //Refresh timer
18. var autorefresh = document.getElementById("autorefresh");
19. yog (autorefresh && autorefresh.checked) {
20. yog (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Ntxiv cov kab lus

• Hauv addRows() muaj nuj nqi, peb siv JSON hom los sau txhua qhov kev teeb tsa thoob ntiaj teb hauv kab lus.
• Tag nrho cov HTML teb tau teev nyob rau hauv JSON array ("table_rows") thiab cov syntax ntawm cov lus teb yog hauv qab no.

Syntax:
table_rows:[ , ,… ] : { , ,… }
: {"type": , “cov”:[ , , …, ]}

• Hauv qhov no, txhua kab muaj tsib lub teb: "Session ID", "Mode", "Type", "VLAN ID" thiab "Reflector Port" Rau example,

Session ID (Lub npe teb: int32_t)	1 (Id ntawm daim iav kev sib tham)
Hom (Lub npe teb: vtss_bool_t)	muaj tseeb (Lub ntsiab lus daim iav kev sib kho yog enabled)
Hom (Lub npe teb: enumeration { daim iav, rMirrorSource, rMirrorDestination}	RMirror qhov chaw (qhov no yog lub hauv paus ntawm kev sib tham ntawm daim iav tej thaj chaw deb
VLAN ID (Lub npe teb: uint16_t)	200 (lub vlan siv rau mirroring)
Reflector Chaw nres nkoj (Lub npe teb: vtss_ifindex_t)	Ib 1/1 (Qhov chaw nres nkoj uas xa mus rau mirrored tsheb

• Lub myDynamicTable.addRows() yuav hloov cov ntaub ntawv JSON rau HTML hom thiab tso tawm cov lus HTML.

1. muaj nuj nqi addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Tsis muaj”, none_interface_text = “NO”;
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {fields:[
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 == “daim iav” ? "-":
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : "-", "c"]}
11. ]};
12. rov qab kab;
13. }
14. muaj nuj nqi addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Ntxiv cov lus header
19. addHeader(table_rows);
20. // Ntxiv ib kab
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. rov qab table_rows;
25. }

Web nplooj ntawv pab
Rau qhov web pab tsim nplooj ntawv, cov lus piav qhia pab tuaj yeem xa mus rau JSON specification, tias cov ntawv piav qhia tuaj yeem ua raws li JSON cov zis thiab pab txo qis cov lus piav qhia ntxiv. Example ntawm no yog coj los ntawm dhcp6 relay configuration.

Hyper-link hauv qhov chaw file
Muab kev pab file qhov chaw nyob hauv nws qhov chaw file HTML tag. Lub npe hloov pauv ruaj khov "help_page" yog siv rau web pab nplooj ntawv.

2. // Pab page khawv koob
3. var help_page = “/help/help_xxx.htm”;

Hloov kho HTML cov lus piav qhia los ntawm JSON specification

• Siv los yog HTML tag tshaj tawm HTML cov lus piav qhia thiab muab tus ID tshwj xeeb rau cov tag.
• Thaum cov ntaub ntawv HTML npaj tau, hu rau loadXMLDoc() kom tau txais tag nrho JSON specification lossis tau txais cov lus piav qhia tshwj xeeb los ntawm JSON txoj kev npe "jsonRpc.status.introspection.specific.inventory.get".
• Lub processTableDesc() yog siv los hloov kho cov lus piav qhia thiab processUpdate() yog siv los hloov kho cov lus piav qhia parameter.
• Hauv processUpdate(), hu rau updateTableParamsDesc() los hloov kho JSON cov ntsiab lus uas tau phim cov npe tshwj xeeb.
• Hloov kho cov los yog tag sab hauv HTML raws li lub ntsiab lus piav qhia.

2. /* Hloov kho HTML cov lus piav qhia teb */
3. muaj nuj nqi processTableDesc(req) {
4. yog tias (!req.responseText) {
5. rov qab los;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Hloov cov lus piav qhia
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Hloov tshiab HTML cov lus parameter piav qhia */
12. function processUpdate(recv_json) {
13. // Hloov tshiab cov lus piav qhia parameter
14. var param_names = [
15. {
16. "Alias": "Interface",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "suffix": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "suffix": ". Tus ID ntawm lub interface siv rau relaying. "
26. },
27. {
28. "alias": "Relay Destination",
29. "type": "mesa_ipv6_t",
30. "npe": "relay_destination",
31. "suffix": ". Qhov chaw nyob IPv6 ntawm DHCPv6 server uas thov yuav tsum raug xa mus rau. Lub neej ntawd tus nqi 'ff05:: 1: 3' txiv neej 'ib qho DHCP server'.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Tau txais JSON specification */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-link hauv kab ntawv qhia zaub mov

• HTML qhov chaws ntawm cov ntawv qhia zaub mov yog tsim los ntawm file webstax2\vtss_appl\web\menu_default.cxx.
• Kho cov khoom hauv no file rau cov Web nplooj ntawv hyper-link.

1. #if defined(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(“Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

Nco tseg
Daim ntawv ceeb toom tias tus naj npawb ntawm qhov chaw cim hauv ITEM(“”), uas yog siv los txiav txim siab pab pawg qib hauv cov ntawv qhia zaub mov. Hauv qhov no, tag nrho web nplooj ntawv yog nyob rau hauv "DHCPv6" pawg.

Daim duab 6. Example ntawm ntiaj teb configured rooj

Cov ntawv ntxiv

Hom web nplooj ntawv

Muaj ob peb yam web nplooj ntawv tuaj yeem siv rau kev tsim qauv siv. Ib tug ntxiv example yuav tsum tau qhia ntawm no yog configuration ntawm ib daim iav ib zaug pom nyob rau hauv vtss_appl\mirror\html\mirror.htm.
Cov web nplooj ntawv muab cov ncauj lus kom ntxaws configuration rau ib daim iav ib zaug. Tag nrho cov configured parameter yog teev.

• Nyem "Txuag" khawm siv qhov kev teeb tsa tam sim no.
• Nyem "Reset" khawm kom rov pib dua qhov kev teeb tsa tam sim no.
• Nyem "Cancel" rov qab mus rau qhov tshajview ntawm daim iav sessions

Daim iav & RM Mirror Configuration

Ntiaj teb no chaw

Tau qhov twg los VLAN(s) Configuration

Port Configuration

Daim duab 7. Example ntawm cov ncauj lus kom ntxaws configuration ntawm daim iav kev sib ntsib
Cov nyees khawm "Txuag", "Reset" thiab "Cancel" yog ntxiv los ntawm html code:

JSON Command flow
Nplooj ntawv no yuav tsum muaj ob kauj ruam hais kom ua:

• Ua ntej nws yuav tsum tau txais lub peev xwm ntawm lub cuab yeej nrog rau txoj kev "mirror.capabilities.get". Cov peev xwm tsis hloov pauv thiab tsuas yog yuav tsum tau nyeem ib zaug.
• Tom qab ntawd nws yuav tsum tau txais cov kev teeb tsa tam sim no ntawm cov cuab yeej siv txoj hauv kev "mirror.config.session.get", "port.status.get" thiab nyob rau hauv rooj plaub ntawm stacking "topo.config.stacking.get".

Kev hu xov tooj ntawm "mirror.capabilities.get" yog pib los ntawm "domready" kev tshwm sim thiab cov txiaj ntsig tau teeb tsa los ua haujlwm los ntawm kev thov hloov tshiab.
Qhov kev thovUpdate yuav pib hu ntawm "mirror.config.session.get",
"port.status.get" thiab nyob rau hauv cov ntaub ntawv ntawm stacking "topo.config.stacking.get" thiab cov txiaj ntsig ntawm cov kev hu no tau teeb tsa los ntawm kev ua haujlwm npajUpdate.
Kev ua haujlwm npajUpdate yuav sau tag nrho cov txiaj ntsig, thiab tsuas yog thaum tau txais tag nrho nws yuav hu rau cov txheej txheem ua haujlwmUpdate uas yuav tsim cov ntxhuav los qhia rau ntawm web.

Cov ntaub ntawv

1. Wikipedia JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Cov ntaub ntawv / Cov ntaub ntawv

Microsemi AN1256 Web Daim ntawv thov Programmers [ua pdf] Cov neeg siv phau ntawv qhia AN1256, UA 1256 Web Daim ntawv thov Programmers, Web Daim ntawv thov Programmers, Application

Cov ntaub ntawv

• Cov neeg siv phau ntawv