Chithunzi cha Microsemi AN1256 Web Mapulogalamu Ogwiritsa Ntchito

Mawu Oyamba

JSON (JavaScript Object Notation) ndiyokhazikika file mtundu womwe umagwiritsa ntchito mawu owerengeka ndi anthu posinthana data. Ndi mtundu wamba wa data womwe umagwiritsidwa ntchito polumikizana ndi asynchronous browser/server.
Zatsopano web kapangidwe ka tsamba, mawonekedwe a JSON atha kukhala m'malo mwa kalembedwe ka AJAX koyambirira. Fananizani ndi AJAX, kugwiritsa ntchito JSON kumapanga ma Web kukhazikitsa kosavuta komanso kosavuta. Wopangayo amangofunikira kuyang'ana web kapangidwe ka tsamba ndi Web kukhazikitsidwa kwa othandizira kumatha kusiyidwa popeza njira yofikira ya JSON imathandizidwa kale mu chilichonse WebMa module a StaX.
Chikalatachi chimanena za kalozera wa opanga mapulogalamu omwe amafunikira kupanga mapulogalamu Web tsamba kudzera pa JSON. Mwatsatanetsatane ndondomeko ndi exampLes akuphatikizidwanso m'magawo otsatirawa.

JSON data access flow

Zathaview
Nayi njira yolumikizira data ya JSON yomwe kulumikizana kwa HTTP kumayambitsidwa kuchokera kwa kasitomala(msakatuli). Gome la HTML limapangidwa mwamphamvu molingana ndi data yolandilidwa ya JOSN kuchokera pa seva(DUT).

Chithunzi 1. Njira yofikira pakati pa kasitomala ndi seva

Pemphani/Yankhani data ya JSON
Phukusi la pempho la JSON likutengera njira ya positi ya pempho la HTTP ndipo zomwe zilimo zikuyenera kutsatira mtundu wa MSCC JSON.

• Funsani mawu a JSON:{"njira":" "," params":[ ], "id:"jsonrpc"}
• Yankho la JSON syntax: {"cholakwika": ,"zotsatira": , "id:"jsonrpc"}

Zithunzi zotsatirazi zikuwonetsa zomwe zili mu JSON pakati pa msakatuli ndi DUT.

Chithunzi 2. Chithunzithunzi cha pempho la HTTP kuchokera kwa kasitomala

Chithunzi 3. Chithunzithunzi cha mayankho a HTTP kuchokera ku seva

Mafotokozedwe a MSCC JSON
Kuti mumve zambiri za JSON kuphatikiza njira, magawo, mafotokozedwe ndi zina. Lembani “http:// /json_spec" pa bar adilesi yanu. Palinso njira ina yofikira kudzera pa dzina la njira ya JSON "jsonRpc.status.introspection.specific.inventory.get", imagwiritsidwa ntchito pa njira inayake.

Chithunzi 4. Chithunzi chojambula cha JSON web tsamba

Web chimango

The Web framework mu WebPulogalamu ya StaX idakhazikitsidwa ndi gwero lotseguka la MooTools. Ndi gulu la JavaScript zothandizira zomwe zili ndi MIT layisensi. (http://mootools.net/license.txt) Menyu bar ndi zambiri web masamba amatengera chimango. Ma algorithm a AJAX ndi JSON aphatikizidwa kale pazothandizira zake.
Komanso, WebPulogalamu ya StaX imapereka zida zina zomwe ndi zothandiza kwa JSON web kapangidwe ka tsamba.

• json.js - Gwiritsani ntchito kutumiza/kulandira zosinthika ndi mawu a JSON.
• dynforms.js - Gwiritsani ntchito kupanga tebulo la HTML mwachangu.
• validate.js - Gwiritsani ntchito kutsimikizira mawonekedwe a HTML.

Ma library onse a JavaScript ali pansi pa chikwatu cha mtengo: webstax2\ vtss_appl\web\html\lib.

Malangizo a JSON Web kapangidwe ka tsamba

Gawoli likuwongolera momwe mungapangire a web tsamba lochokera ku malaibulale a MSCC JavaScript. Timagwiritsa ntchito Mirror global configured web tsamba ngati example ku. Kuyankhulana kwa asynchronous kumatengera njira yofikira ya HTTP JSON ndipo magawo onse osinthidwa padziko lonse lapansi amalembedwa patebulo limodzi lamphamvu la HTML.
The web masanjidwe atsamba alembedwa pansipa ndipo gwero lathunthu lili pansi pa chikwatu cha mtengo: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Kuti mudziwe zambiri web patsamba, onani gawo lazowonjezera.

Mirror & RMirror Confiquration Table

Chithunzi 5. Example la global configured table

Sinthani Web tsamba

Mutu wa HTML
Phatikizani ndi malaibulale a JS omwe amafunikira mu HTML tag.

Yambitsani gwero la tebulo losinthika

• Chikalata cha HTML chikakonzeka, imbani DynamicTable () kuti muyambe gwero lamphamvu la tebulo.
• DynamicTable() imagwiritsidwa ntchito kupanga tebulo lamphamvu mutalandira data ya JSON.
• Idzayitana requestUpdate kuti iyambitse kuyenda kwa JSON.

1. window.addEvent('domready', ntchito () {
2. // Pangani fomu yokhala ndi tebulo kuti mulandire / kutumiza data ya JSON
3. myDynamicTable = DynamicTable yatsopano(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate ();
5. });

Pemphani/Yankhani data ya JSON

• Chikalata cha HTML chikakonzeka, gwiritsani ntchito requestJsonDoc() kutumiza pempho la JSON "mirror.config.session.get" kuti mudziwe zambiri za magawo omwe asinthidwa.
• Deta ya JSON ya "mirror.capabilities.get" ikalandilidwa, ntchito ya callback requestUpdate() ikonzedwa. Ntchito requestUpdate idzayitana "mirror.config.session.get" kuti mupeze kasinthidwe kameneka. Kukonzekera kwapano kukalandiridwa, ntchito processUpdate imatchedwa kuti ipange tebulo kuti liwonetsedwe.

1. ntchito requestUpdate()
2. {
3. // Bwezerani zomwe zili patebulo
4. myDynamicTable.restore ();
   5
5. // Gome ili la data ya JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Sinthani data yolandila ya JSON

• Ntchito processUpdate() imagwiritsidwa ntchito kuyika tebulo losinthika mutalandira data ya JSON.
• AddRows () amagwiritsidwa ntchito kuwonjezera mizere ya tebulo. myDynamicTable.update() masanjidwe a
  Tebulo la HTML molingana ndi zomwe zili m'mizere ya tebulo.

1. ntchito processUpdate(recv_json, dzina)
2. {
3. // Musanyalanyaze ndondomekoyi ngati palibe deta yomwe yalandiridwa
4. ngati (!recv_json) {
5. chenjezo ("Pezani zosintha zalephera.");
6. kubwerera;
7. }
8. // Sungani zomwe mwalandira JSON
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Onjezani mizere ya tebulo
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Sinthani tebulo ili lamphamvu
15. myDynamicTable.update();
17. // Kutsitsimutsa nthawi
18. var autorefresh = document.getElementById(“autorefresh”);
19. ngati (autorefresh && autorefresh.checked) {
20. ngati (timerID) {
21. clearTimeout (timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Onjezani mizere ya tebulo

• Mu ntchito ya addRows (), timagwiritsa ntchito mawonekedwe a JSON kuti mudzaze gawo lililonse lokhazikitsidwa padziko lonse lapansi pamzere wa tebulo.
• Magawo onse a HTML adandandalikidwa mu gulu la JSON ("table_rows") ndipo masinthidwe a tebulo ali pansipa.

Syntax:
tebulo_mizere:[ , ,… ] : { , ,… }
: {"mtundu": , "params":[ , ,…, ]}

• Pankhaniyi, mzere uliwonse uli ndi magawo asanu: "ID ya Session", "Mode", "Type", "VLAN ID" ndi "Reflector Port" For ex.ample,

ID ya Gawo (Dzina la dzina: int32_t)	1 (Id ya gawo la galasi)
Mode (Dzina la dzina: vtss_bool_t)	zoona (Kutanthauza kuti gawo lagalasi layatsidwa)
Mtundu (Name gawo: enumeration {mirror, rMirrorSource, rMirrorDestination}	Chithunzi cha RMirror (awa ndiye gwero la gawo lagalasi lakutali
ID VLAN (Dzina la dzina: uint16_t)	200 (Vlan amagwiritsidwa ntchito poyang'ana galasi)
Reflector Port (Dzina la dzina: vtss_ifindex_t)	Gawo 1/1 (Doko lomwe magalimoto owoneka bwino amatumizidwa

• The myDynamicTable.addRows() isintha data ya JSON kukhala mtundu wa HTML ndikutulutsa tebulo la HTML.

1. ntchito addRow (kiyi, vale)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Palibe”, none_interface_text = “PALIBE”;
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {minda:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + key, key]},
7. {mtundu:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {mtundu:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {mtundu:"text", params:[val.Type == "galasi" ? "-":
   val.RMirrorVlan, “c”]},
10. {mtundu:"text", params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. mzere wobwerera;
13. }
14. ntchito addRows (recv_json)
15. {
16. var mzere, empty_colspan = 7;
17. var table_rows = new Array();
18. // Onjezani mutu wa tebulo
19. addHeader(table_rows);
20. // Onjezani mzere umodzi
21. Object.each(recv_json, ntchito(mbiri) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. kubwerera tebulo_mizere;
25. }

Web tsamba lothandizira
Za ku web kamangidwe ka tsamba lothandizira, kufotokozera kothandizira kungatanthauze mafotokozedwe a JSON, kuti malemba ofotokozera akhoza kugwirizana ndi zotsatira za JSON ndikuthandizira kuchepetsa mafotokozedwe owonjezera. Eksample apa watengedwa kuchokera ku kasinthidwe ka dhcp6.

Hyper-link mu gwero file
Perekani thandizo file malo mu gwero lake file HTML tag. Dzina losinthika "help_page" limagwiritsidwa ntchito pa web ntchito tsamba lothandizira.

2. // Matsenga atsamba othandizira
3. var help_page = “/help/help_xxx.htm”;

Sinthani malongosoledwe a HTML kuchokera ku JSON

• Gwiritsani ntchito kapena HTML tag kulengeza kufotokozera kwa tebulo la HTML ndikupatsidwa ID yapadera ya tag.
• Chikalata cha HTML chikakonzeka, imbani loadXMLDoc() kuti mumve zonse za JSON kapena kupeza njira yeniyeni yofotokozera ndi dzina la njira ya JSON "jsonRpc.status.introspection.specific.inventory.get".
• The processTableDesc () imagwiritsidwa ntchito kusinthira mafotokozedwe a tebulo ndi processUpdate () imagwiritsidwa ntchito kusinthira mafotokozedwe a tebulo.
• Mu processUpdate(), itanani updateTableParamsDesc() kuti musinthe zinthu za JSON zomwe zikufanana ndi mayina azinthu.
• Kusintha kwa kapena tag HTML yamkati molingana ndi mafotokozedwe azinthu.

2. /* Sinthani magawo ofotokozera a HTML */
3. ntchito processTableDesc(req) {
4. ngati (!req.responseText) {
5. kubwerera;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Sinthani mafotokozedwe a tebulo
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).descript;
10. }
11. /* Sinthani kufotokozera kwa tebulo la HTML */
12. ntchito processUpdate(recv_json) {
13. // Sinthani mafotokozedwe a tebulo
14. var param_names = [
15. {
16. "alias": "interface",
17. "mtundu": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "zokwanira": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "mtundu": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "zokwanira": ". Id ya mawonekedwe omwe amagwiritsidwa ntchito potumiza. ”
26. },
27. {
28. "alias": "Relay Destination",
29. "mtundu": "mesa_ipv6_t",
30. "dzina": "relay_destination",
31. "zokwanira": ". Adilesi ya IPv6 ya seva ya DHCPv6 yomwe pempho idzatumizidwa. Mtengo wosasinthika 'ff05::1:3' mans 'seva ya DHCP'.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Pezani mafotokozedwe a JSON */
37. window.addEvent('domready', ntchito () {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-link mu bar menyu

• Khodi ya HTML source ya menyu bar imapangidwa kuchokera file webstax2\vtss_appl\web\ menyu_default.cxx.
• Sinthani zinthu mu izi file za Web tsamba hyper-link.

1. #ngati zitafotokozedwa(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

ZINDIKIRANI
Zindikirani kuti chiwerengero cha malo mu ITEM(“”), chomwe chimagwiritsidwa ntchito kusankha mulingo wamagulu mu kapamwamba ka menyu. Pankhaniyi, zonse web masamba ali pansi pa gulu la "DHCPv6".

Chithunzi 6. Example la global configured table

Zowonjezera

Chitsanzo web masamba

Pali zingapo mmene web masamba angagwiritsidwe ntchito pakupanga zolemba. Chitsanzo chimodzi chowonjezeraampChoyenera kuwonetsedwa apa ndikukonza gawo lagalasi limodzi lopezeka mu vtss_appl\mirror\html\mirror.htm.
The web tsamba limapereka kasinthidwe katsatanetsatane kwa gawo limodzi lagalasi. Ma parameter onse osinthidwa alembedwa.

• Dinani batani la "Save" kuti mugwiritse ntchito kasinthidwe kameneka.
• Dinani "Bwezerani" batani kuti mukonzenso kasinthidwe komweko.
• Dinani "Kuletsa" kuti mubwerere ku chowonjezeraview za mirror sessions

Kusintha kwa Mirror&RMirror

Zokonda Padziko Lonse

Gwero la VLAN (ma) kasinthidwe

Kukonzekera kwa Port

Chithunzi 7. Example ya kasinthidwe mwatsatanetsatane wa galasi gawo
Mabatani "Sungani", "Bwezerani" ndi "Kuletsa" awonjezedwa ndi code ya html:

JSON Command flow
Tsambali likufunika masitepe awiri olamula:

• Choyamba chiyenera kupeza mphamvu za chipangizocho ndi njira "mirror.capabilities.get". Kuthekera sikusintha ndipo kumangowerengedwa kamodzi.
• Ndiye ikufunika kupeza kasinthidwe kachipangizo kamakono pogwiritsa ntchito njira "mirror.config.session.get", "port.status.get" komanso ngati stacking "topo.config.stacking.get".

Kuitana kwa "mirror.capabilities.get" kumayambitsidwa ndi chochitika cha "domready" ndipo zotsatira zake zimakonzedwa kuti zisamalidwe ndi ntchito requestUpdate.
ApplicationUpdate idzayambitsa kuyimba kwa "mirror.config.session.get",
"port.status.get" komanso ngati mutasunga "topo.config.stacking.get" ndipo zotsatira za mafoniwa zimakonzedwa kuti ziziyendetsedwa ndi ntchito prepareUpdate.
Ntchito prepareUpdate idzasonkhanitsa zotsatira zonse, ndipo pokhapo pamene zonse zalandiridwa zidzayitana ntchito processUpdate yomwe idzapange matebulo kuti awonetsedwe pa web.

Maumboni

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

Zolemba / Zothandizira

Chithunzi cha Microsemi AN1256 Web Mapulogalamu Ogwiritsa Ntchito [pdf] Buku Logwiritsa Ntchito AN1256, AN1256 Web Pulogalamu ya Mapulogalamu, Web Programmers Application, Application

Maumboni

• Buku Logwiritsa Ntchito