Microsemi AN1256 Web Aratohu Kaiwhakamahi Taupānga Hötaka

Microsemi AN1256 Web Taupānga Kaihōtaka

Kupu Whakataki

Ko te JSON (JavaScript Object Notation) he paerewa tuwhera file whakatakotoranga e whakamahi ana i nga tuhinga ka taea e te tangata te panui mo te whakawhiti raraunga. He whakatakotoranga raraunga noa e whakamahia ana mo te whakawhitiwhiti korero tirotiro / tūmau tukutahi.
Mo te mea hou web hoahoa wharangi, ka taea e te whakatakotoranga JSON te whakakapi mo te momo AJAX taketake. Whakaritea ki te AJAX, ma te whakamahi i a JSON ka hanga te Web he ngawari ake te whakatinanatanga. Me arotahi noa te kaiwhakawhanake web hoahoa wharangi me te Web Ka taea te whakakore i te whakatinanatanga o te kaikawe mai i te mea kua tautokohia te tikanga uru JSON i ia tangata WebNgā kōwae pūmanawa StaX.
Kei roto i tenei tuhinga nga aratohu a te hunga htaka mo te miihini rorohiko e hiahia ana ki te whakawhanake i te Web wharangi ma JSON. Nga tukanga taipitopito me te exampka whakaurua ano ki nga waahanga e whai ake nei.

Rere urunga raraunga JSON

Ka mutuview
Anei te rerenga uru raraunga JSON i timatahia he hononga HTTP mai i te kiritaki(kaitirotiro). Ko te tepu HTML he mea hanga hihiri e ai ki nga raraunga JOSN kua riro mai i te taha tūmau(DUT).

Whakaahua 1. Te rere uru i waenga i te kiritaki me te tūmau

Tono/Whakautu raraunga JSON
Ko te putea tono a JSON e ahu mai ana i runga i te tikanga tuku tono HTTP me te whai i nga ihirangi ki te whakatakotoranga MSCC JSON.

• Tonoa JSON wetereo:{“tikanga”:” ","params":[ ], “id:”jsonrpc”}
• Whakautu JSON wetereo: {“hapa”: ,”hua”: , “id:”jsonrpc”}

Ko nga whakaahua e whai ake nei e whakaatu ana i te ihirangi JSON i waenga i te tirotiro me te DUT.

Whakaahua 2. He whakaahua o te tono HTTP mai i te kiritaki

Whakaahua 3. He whakaahua o te whakautu HTTP mai i te tūmau

Ko nga korero a MSCC JSON
Ki te tiki i nga korero JSON katoa tae atu ki te tikanga, tawhā, whakaahuatanga me etahi atu. Patohia te "http:// /json_spec” i runga i to pae wāhitau tirotiro. Ko tetahi atu tikanga uru ma te ingoa tikanga JSON "jsonRpc.status.introspection.specific.inventory.get", ka whakamahia mo tetahi tikanga motuhake.

Whakaahua 4. Whakaahuatanga o JSON whakaritenga web wharangi

Web angamahi

Ko te Web anga i roto WebKo te raupaparorohiko StaX kei runga i te MooTools puna tuwhera. He kohinga o nga taputapu JavaScript me te raihana MIT. (http://mootools.net/license.txt) Te pae tahua me te nuinga o web Ko nga wharangi kei runga i te anga. Ko te AJAX me te JSON algorithm kua whakauruhia ki roto i ana taputapu.
I tua atu, WebKa whakaratohia e te rorohiko StaX etahi atu taputapu e whai hua ana mo te JSON web hoahoa wharangi.

• json.js – Whakamahia hei tuku/whiwhi i nga raraunga hihiri me te wetereo JSON.
• dynforms.js – Whakamahia mo te hanga i te ripanga HTML kia hihiri.
• whakamana.js – Whakamahia mo te whakamana i te puka HTML.

Ko nga whare pukapuka JavaScript katoa kei raro i te raarangi rakau puna: webstax2\ vtss_appl\web\html\lib.

Aratohu mo JSON Web hoahoa wharangi

Ka arahi tenei waahanga me pehea te hoahoa a web wharangi i runga i nga whare pukapuka MSCC JavaScript. Ka whakamahi matou i te Mirror i whirihora i te ao web page hei exampi konei. Ko te whakawhitiwhitinga tukutahi i runga i te tikanga uru HTTP JSON me nga tawhā whirihora katoa o te ao kua whakarārangihia ki te ripanga HTML hihiri kotahi.
Ko te web kua whakarārangitia te whakatakotoranga whārangi i raro nei, ā, kei raro i te rārangi rākau pūtake te katoa o te waehere pūtake: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Ki te tiki ake angamaheni web wharangi tohutoro, tirohia te waahanga taapiri.

Ripanga Whakaata & RMirror Confiquration Ripanga

Whakaahua 5. Exampte o te tepu whirihora ao

Whakatikatika Web wharangi

pane HTML
Whakauruhia nga whare pukapuka JS e hiahiatia ana ki te HTML tag.

Arawhiti te rauemi ripanga hihiri

• Ina reri te tuhinga HTML, waeahia te Ripanga Dynamic() hei arawhiti i te rauemi ripanga hihiri.
• Ka whakamahia te DynamicTable() ki te hanga i te ripanga hihiri i muri i te whiwhinga o nga raraunga JSON.
• Ka karangahia te tonoUpdate ki te timata i te rerenga whakahau JSON.

1. window.addEvent('domready', function() {
2. // Waihangahia he puka me te tinana ripanga mo te whiwhi/tuku raraunga JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Tono/Whakautu raraunga JSON

• Ina rite te tuhinga HTML, whakamahia te requestJsonDoc() ki te tuku i te tono JSON "mirror.config.session.get" ki te tiki korero mo nga waahi kua whirihorahia.
• I muri i te whiwhinga o nga raraunga JSON mo te "mirror.capabilities.get", ka tukatukahia te tono whakahoki tonoUpdate(). Ko te mahi requestUpdate ka karanga "mirror.config.session.get" ki te tiki i te whirihoranga o naianei. Ina tae mai te whirihoranga o naianei, ka karangahia te mahinga mahiUpdate ki te hanga i te ripanga hei whakaatu.

1. tono mahiWhakahou()
2. {
3. // Whakahokia te ihirangi ripanga
4. myDynamicTable.restore();
   5
5. // Tenei ripanga e rua nga raraunga JSON.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Tukatia nga raraunga JSON kua riro

• Ka whakamahia te tukanga mahiUpdate() ki te whakatakoto i te ripanga hihiri i muri i te whiwhinga o nga raraunga JSON.
• Ka whakamahia te addRows() hei taapiri i nga rarangi ripanga. myDynamicTable.update() tahora te
  Ripanga HTML e ai ki nga raraunga kei nga rarangi ripanga.

1. tukanga mahiWhakahou(recv_json, ingoa)
2. {
3. // Waiho i te tukanga ki te kore he raraunga e whiwhi
4. ki te (!recv_json) {
5. alert("Kua rahua nga raraunga hihiri.");
6. hoki mai;
7. }
8. // Tiakina nga raraunga JSON kua riro
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Tāpiri rarangi ripanga
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rarangi);
14. // Whakahoutia tenei ripanga hihiri
15. myDynamicTable.update();
17. // Tāmatamatawā
18. var autorefresh = document.getElementById(“autorefresh”);
19. ki te (autorefresh && autorefresh.checked) {
20. ki te (tama ID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Tāpiri rarangi ripanga

• I roto i te mahi addRows(), ka whakamahia e matou te whakatakotoranga JSON hei whakaki i ia tawhā whirihora o te ao i te rarangi ripanga.
• Kua whakarārangihia ngā āpure HTML katoa ki te huinga JSON (“table_rows”) ā kei raro iho te wetereo o te āpure ripanga.

Kuputuhi:
table_rows:[<row_0>, <row_1>, …<row_n>]
<row_n>: {<field_0>, <field_1>, …<field_n>}
: {“momo”: , “params”:[ , , …, ]}

• I tenei take, e rima nga waahi o ia rarangi: "Wātū ID", "Aratau", "Momo", "VLAN ID" me te "Tauranga Whakaata" Mo muaample,

• Ko te myDynamicTable.addRows() ka huri i nga raraunga JSON ki te whakatakotoranga HTML me te whakaputa i te ripanga HTML.

1. mahi addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Kore”, none_interface_text = “KORE”;
4. var tunnel_mode_suffix = val.TunnelMode == “use ao” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {nga mara:[
6. {momo:”hono”, params:[“cr”, “mirror.htm?session_id=” + kī, kī]},
7. {momo:”kuputuhi”, parama:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {momo:”kuputuhi”, parama:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {momo:”kuputuhi”, params:[val.Type == “whakaata” ? “-“:
   val.RMirrorVlan, “c”]},
10. {momo:”kuputuhi”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. rarangi whakahoki;
13. }
14. mahi addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = Huanga hou();
18. // Tāpiri pane ripanga
19. addHeader(rarangi_tepu);
20. // Tāpirihia te rarangi kotahi
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. whakahokia ripa_rarangi;
25. }

Web whārangi awhina
Mo nga web hoahoa wharangi awhina, ka taea e te whakaahuatanga awhina te korero ki te tohu JSON, ka taea e te tuhinga whakamaarama te rite ki te putanga JSON me te awhina ki te whakaiti i nga whakaahuatanga taapiri. ExampKo konei ka tangohia mai i te whirihoranga relay dhcp6.

Hononga-itua i te puna file
Whakaritea te awhina file te waahi i tona puna file HTML tag. Ka whakamahia te ingoa taurangi "help_page" mo te web taumahi wharangi awhina.

2. // Maama wharangi awhina
3. var help_page = “/help/help_xxx.htm”;

Whakahouhia te whakaahuatanga mara HTML mai i te tohu JSON

• Whakamahi ranei HTML tag ki te whakapuaki i te whakaahuatanga ripanga HTML ka hoatu he ID ahurei mo te tag.
• Ina rite te tuhinga HTML, waea atu ki te loadXMLDoc() ki te tiki i te katoa o nga korero JSON, ki te tiki ranei i te whakaahuatanga tikanga motuhake ma te ingoa tikanga JSON "jsonRpc.status.introspection.specific.inventory.get".
• Ka whakamahia te processTableDesc() ki te whakahou i te whakaahuatanga ripanga me te processUpdate() ka whakamahia hei whakahou i te whakaahuatanga tawhā ripanga.
• I roto i te processUpdate(), waeahia te updateTableParamsDesc() ki te whakahou i nga huānga JSON e rite ana ki nga ingoa huānga motuhake.
• Whakahoutia te ranei tag HTML o roto e ai ki te whakaahuatanga huānga.

2. /* Whakahoutia nga mara whakaahuatanga HTML */
3. mahi processTableDesc(req) {
4. mehemea (!req.responseText) {
5. hoki mai;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Whakahou whakaahuatanga ripanga
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "rōpū", "dhcp6_relay.config.vlan").whakaahua;
10. }
11. /* Whakahoutia te whakaahuatanga tawhā ripanga HTML */
12. mahi processUpdate(recv_json) {
13. // Whakahoutia te whakaahuatanga tawhā ripanga
14. var param_ingoa = [
15. {
16. “alias”: “Atanga”,
17. "momo": "vtss_ifindex_t",
18. "ingoa": "vlanInterface",
19. “suffix”: “.”
20. },
21. {
22. “alias”: “Atanga Relay”,
23. "momo": "vtss_ifindex_t",
24. "ingoa": "relayVlanInterface",
25. “suffix”: “. Ko te id o te atanga e whakamahia ana mo te tuku."
26. },
27. {
28. “alias”: “Relay Destination”,
29. "momo": "mesa_ipv6_t",
30. “ingoa”: “relay_destination”,
31. “suffix”: “. Ko te wāhitau IPv6 o te tūmau DHCPv6 e tono ana ka tukuna atu. Ko te uara taunoa 'ff05::1:3' te tangata 'tetahi tūmau DHCP'.”
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Tikina te tohu JSON */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Honongaitua i te pae tahua

• Ko te waehere puna HTML o te pae tahua i hangaia mai i file webstax2\vtss_appl\web\ menu_default.cxx.
• Whakatikahia nga mea kei roto i tenei file mo te Web hononga-itua whārangi.

1. #mehemea kua tautuhia(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

FAKATOKANGA
Kia mahara ko te maha o nga tohu mokowā kei ITEM(“”), ka whakamahia hei whakatau i te taumata roopu i te pae tahua. I roto i tenei take, katoa web Ko nga wharangi kei raro i te roopu "DHCPv6".

Whakaahua 6. Exampte o te tepu whirihora ao

Apitihanga

Tikanga web wharangi

He maha nga tikanga web Ka taea te whakamahi i nga wharangi mo te hoahoa tohutoro. Kotahi atu exampKo te whakaatu i konei ko te whirihoranga o te huihuinga whakaata kotahi i kitea i vtss_appl\mirror\html\mirror.htm.
Ko te web Ka whakaratohia e te whaarangi te whirihoranga taipitopito mo te huihuinga whakaata kotahi. Kua whakarārangihia nga tawhā whirihora katoa.

• Patohia te paatene "Tiaki" hei whakamahi i te whirihoranga o naianei.
• Patohia te paatene "Tautuhi" hei tautuhi i te whirihoranga o naianei.
• Paatohia te "Whakakore" ki te hoki ki te mutungaview o nga huihuinga whakaata

Whakaata&Mirror Whirihoranga

Tautuhinga Ao

Pūtake VLAN(s) Whirihoranga

Whirihoranga Tauranga

Whakaahua 7. Exampte whirihoranga taipitopito o te huihuinga whakaata
Ko nga paatene "Tiaki", "Tautuhi" me te "Whakakore" ka taapirihia e te waehere html:

Rere whakahau a JSON
Ko tenei wharangi e hiahia ana kia rua nga waahanga rerenga whakahau:

• Tuatahi me whiwhi i nga kaha o te taputapu me te tikanga "mirror.capabilities.get". Ko nga kaha e kore e huri, me panui kotahi anake.
• Na me whiwhi i te whirihoranga o naianei o te taputapu ma te whakamahi i nga tikanga "mirror.config.session.get", "port.status.get" me te mea kei te taapiri "topo.config.stacking.get".

Ko te waea o "mirror.capabilities.get" ka timatahia e te kaupapa "domready" ka whirihorahia te hua ki te whakahaere i te tono tonoUpdate.
Ko te tonoUpdate ka timata i te piiraa "mirror.config.session.get",
"port.status.get" me te mea ka kohia te "topo.config.stacking.get" me nga hua o enei waea ka whirihorahia kia whakahaerea e te mahi prepareUpdate.
Ko te mahi prepareUpdate ka kohi i nga hua katoa, a ka tae mai nga mea katoa ka karangahia te mahi processUpdate ka hangaia nga ripanga hei whakaatu ki te web.

Tohutoro

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