Microsemi AN1256 Web Iarrtas luchd-prògramaidh

Ro-ràdh

Tha JSON (JavaScript Object Notation) na inbhe fosgailte file cruth a chleachdas teacsa a ghabhas leughadh le daoine airson iomlaid dàta. Is e cruth dàta cumanta a th’ ann airson conaltradh brobhsair/frithealaiche asyncronach.
Airson an ùr web dealbhadh duilleag, faodaidh cruth JSON a bhith na àite an stoidhle AJAX tùsail. Dèan coimeas ri AJAX, le bhith a’ cleachdadh JSON bidh an Web buileachadh nas fhasa agus nas sìmplidhe. Chan fheum an leasaiche ach fòcas a chuir air web dealbhadh duilleag agus an Web faodar buileachadh an làimhseachaidh fhàgail air falbh leis gu bheil modh ruigsinneachd JSON a’ faighinn taic anns gach fear mu thràth WebModalan bathar-bog StaX.
Tha an sgrìobhainn seo ag innse stiùireadh prògramadairean airson an innleadair bathar-bog a dh’ fheumas leasachadh a dhèanamh air an Web duilleag tro JSON. Tha na modhan-obrach mionaideach agus exampcuideachd air a ghabhail a-steach anns na roinnean a leanas.

Sruth ruigsinneachd dàta JSON

Thairisview
Seo an sruth ruigsinneachd dàta JSON a tha ceangal HTTP air a thòiseachadh bhon neach-dèiligidh (brabhsair). Tha an clàr HTML air a chruthachadh gu dinamach a rèir an dàta JOSN a fhuaireadh bho thaobh an fhrithealaiche (DUT).

Figear 1. An sruth ruigsinneachd eadar teachdaiche agus frithealaiche

Dàta iarrtas / freagairt JSON
Tha pasgan iarrtas JSON stèidhichte air modh post iarrtas HTTP agus feumaidh an susbaint cruth MSCC JSON a leantainn.

• Iarr co-chàradh JSON:{"dòigh":" ”,” param ”:[ ], “id:” jsonrpc ”}
• Freagairt JSON syntax: {"mearachd": "toradh": , “id:” jsonrpc ”}

Tha na dealbhan a leanas a’ sealltainn susbaint JSON eadar am brabhsair agus DUT.

Figear 2. Dealbh de iarrtas HTTP bhon neach-dèiligidh

Figear 3. Dealbh de fhreagairt HTTP bhon fhrithealaiche

Sònrachadh MSCC JSON
Gus am fiosrachadh iomlan JSON fhaighinn a’ toirt a-steach an dòigh, paramadair, tuairisgeul agus msaa. Seòrsa “http: // / json_spec” air bàr seòlaidh do bhrobhsair. Tha dòigh inntrigidh eile ann tro ainm modh JSON “jsonRpc.status.introspection.specific.inventory.get”, tha e air a chleachdadh airson dòigh sònraichte.

Figear 4. Dealbh de shònrachadh JSON web duilleag

Web frèam

Tha an Web frèam a-steach WebTha bathar-bog StaX stèidhichte air stòr fosgailte MooTools. Is e cruinneachadh de ghoireasan JavaScript a th’ ann le cead MIT. (http://mootools.net/license.txt) Bàr a’ chlàr agus a’ mhòr-chuid dheth web tha duilleagan stèidhichte air an fhrèam. Tha an dà chuid algairim AJAX agus JSON mar-thà amalaichte anns na goireasan aige.
A bharrachd air sin, WebTha bathar-bog StaX a’ toirt seachad na goireasan eile a tha feumail don JSON web dealbhadh duilleag.

• json.js - Cleachd airson an dàta fiùghantach a thar-chuir / fhaighinn le co-chòrdadh JSON.
• dynforms.js - Cleachd airson clàr HTML a chruthachadh gu dinamach.
• dearbhadh.js - Cleachd gus foirm HTML a dhearbhadh.

Tha na leabharlannan JavaScript slàn suidhichte fon eòlaire craobh stòr: webstax2\vtss_appl\web\html\lib.

Stiùireadh airson JSON Web dealbhadh duilleag

Tha an earrann seo a’ stiùireadh mar a nì thu dealbhadh a web duilleag stèidhichte air leabharlannan MSCC JavaScript. Bidh sinn a’ cleachdadh an Mirror global configured web duilleag mar an t-seannampan seo. Tha an conaltradh asyncronach stèidhichte air modh ruigsinneachd HTTP JSON agus tha a h-uile paramadair rèiteachaidh cruinne air an liostadh ann an aon chlàr HTML fiùghantach.
Tha an web tha cruth na duilleige air a liostadh gu h-ìosal agus tha an còd stòr slàn suidhichte fon eòlaire craobh stòr: webstax2 \ vtss_appl \ sgàthan \ html \ sgàthan_ctrl.htm. Gus a bhith nas àbhaistiche web duilleag iomradh, faic an earrann pàipear-taice.

Clàr rèiteachaidh sgàthan & RM

Figear 5. Example clàr cruinne rèiteachaidh

Deasaich Web duilleag

Ceann-cinn HTML
Cuir a-steach na leabharlannan JS a bha a dhìth anns an HTML tag.

Tòisich an goireas clàr fiùghantach

• Nuair a bhios an sgrìobhainn HTML deiseil, cuir fios gu DynamicTable() gus an goireas clàr fiùghantach a thòiseachadh.
• Tha an DynamicTable () air a chleachdadh gus an clàr fiùghantach a chruthachadh às deidh an dàta JSON fhaighinn.
• An uairsin cuiridh e fios gu requestUpdate gus an sruth àithne JSON a thòiseachadh.

1. window.addEvent('domready', gnìomh() {
2. // Cruthaich foirm le bodhaig bùird airson dàta JSON fhaighinn / a thoirt seachad
3. myDynamicTable = DynamicTable ùr (“myTableContent”, “config”, “plusRowCtrlBar”);
   4
4. iarrtas Update();
5. });

Dàta iarrtas / freagairt JSON

• Nuair a bhios an sgrìobhainn HTML deiseil, cleachd iarrtasJsonDoc() gus an t-iarrtas JSON “mirror.config.session.get” a chuir gus fiosrachadh fhaighinn mu na seiseanan a chaidh a rèiteachadh.
• Às deidh dàta JSON airson “mirror.capabilities.get” fhaighinn, thèid an t-iarrtas gnìomh gairm air ais Update () a phròiseasadh. Canaidh an t-iarrtas gnìomh an uairsin “mirror.config.session.get” gus an rèiteachadh gnàthach fhaighinn. Nuair a gheibhear an rèiteachadh gnàthach, thèid am pròiseas gnìomhUpdate a ghairm gus an clàr a thogail a thèid a shealltainn.

1. iarrtas gnìomh ùrachadh()
2. {
3. // Thoir air ais susbaint clàr
4. myDynamicTable.restore();
   5
5. // An clàr seo dà dhàta JSON.
6. requestJsonDoc (“ mirror.config.session.get”, null, processUpdate, “config”);
7. }

Pròiseas an dàta JSON a fhuaireadh

• Tha am pròiseas gnìomhUpdate () air a chleachdadh gus an clàr fiùghantach a dhealbhadh às deidh an dàta JSON fhaighinn.
• Tha an addRows() air a chleachdadh gus sreathan bùird a chur ris. myDynamicTable.update() cruth an
  Clàr HTML a rèir an dàta ann an sreathan clàir.

1. ùrachadh pròiseas gnìomh (recv_json, ainm)
2. {
3. // Mothaich am pròiseas mura faighear dàta
4. ma tha (! recv_json) {
5. rabhadh ("Faigh dàta fiùghantach air fàiligeadh.");
6. tilleadh;
7. }
8. // Sàbhail an dàta JSON a fhuair thu
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Cuir sreathan bùird ris
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Ùraich am bòrd fiùghantach seo
15. myDynamicTable.update();
17. // Ùraich an timer
18. var autorefresh = document.getElementById (“autorefresh”);
19. ma tha (autorefresh && autorefresh.checked) {
20. ma tha (timerID) {
21. soilleir Timeout (timerID);
22. }
23. timerID = setTimeout ('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Cuir sreathan bùird ris

• Anns a’ ghnìomh addRows (), bidh sinn a’ cleachdadh cruth JSON gus gach paramadair rèiteachaidh cruinne a lìonadh ann an sreath a’ bhùird.
• Tha a h-uile raon HTML air an liostadh anns an raon JSON (“table_rows”) agus tha co-chòrdadh raon clàr gu h-ìosal.

Co-chòrdadh:
bùird_sreathan:[ , ,… ] : { , ,… }
: {"seòrsa": , “params”:[ , , …, ]}

• Anns a 'chùis seo, tha còig raointean anns gach sreath: "ID Seisean", "Modh", "Seòrsa", "ID VLAN" agus "Port Reflector" Airson example,

ID an t-seisein (Raoin ainm: int32_t)	1 (Id an t-seisean sgàthan)
Modh (Raoin ainm: vtss_bool_t)	fìor (A’ ciallachadh gu bheil an seisean sgàthan air a chomasachadh)
Seòrsa ( Raon ainm: àireamhachd {sgàthan, rMirrorSource, rMirrorDestination}	Stòr sgàthan (is e seo stòr seisean sgàthan iomallach
ID VLAN (Raoin ainm: uint16_t)	200 (an vlan air a chleachdadh airson sgàthan)
Port Reflector (Raoin ainm: vtss_ifindex_t)	Gi 1/1 (Am port dhan tèid an trafaic le sgàthan a chuir

• Tionndaidhidh am myDynamicTable.addRows() an dàta JSON gu cruth HTML agus cuiridh e a-mach an clàr HTML.

1. gnìomh addRow (iuchair, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Chan eil", none_interface_text = "CHAN EIL";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {raointean:[
6. {seòrsa: “ceangal”, paramaichean:[“cr”, “mirror.htm?session_id=” + iuchair, iuchair]},
7. {seòrsa: “text”, paramaichean: [oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {seòrsa: “text”, paramaichean:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {seòrsa: “text”, paramaichean:[val.Type == “sgàthan” ? “-“:
   val.RMirrorVlan, “c”]},
10. {seòrsa: “text”, paramaichean:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. sreath tilleadh;
13. }
14. gnìomh addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = Array ùr ();
18. // Cuir bann-cinn a’ bhùird ris
19. addHeader (table_rows);
20. // Cuir sreath shingilte ris
21. Object.each(recv_json, gnìomh (clàr) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. tilleadh table_rows;
25. }

Web duilleag cuideachaidh
Airson an web dealbhadh duilleag cuideachaidh, faodaidh an tuairisgeul cuideachaidh iomradh a thoirt air sònrachadh JSON, gum faod an teacsa tuairisgeul a bhith co-chòrdail ri toradh JSON agus a’ cuideachadh le bhith a’ lughdachadh nan tuairisgeulan gun fheum. Mar eisimpleirample an seo air a thoirt bho rèiteachadh sealaidheachd dhcp6.

Hyper-cheangal anns an stòr file
Sònraich an cuideachadh file àite san stòr aige file HTML tag. Tha an t-ainm caochlaideach stèidhichte “help_page” air a chleachdadh airson an web obair duilleag cuideachaidh.

2. // Draoidheachd duilleag cuideachaidh
3. var help_page = “/help/help_xxx.htm”;

Ùraich tuairisgeul raon HTML bho shònrachadh JSON

• Cleachd neo HTML tag gus an tuairisgeul clàr HTML fhoillseachadh agus ID sònraichte a thoirt seachad airson an tag.
• Nuair a bhios an sgrìobhainn HTML deiseil, cuir fios gu loadXMLDoc() gus an sònrachadh JSON gu lèir fhaighinn no faigh an tuairisgeul modh sònraichte le ainm modh JSON “jsonRpc.status.introspection.specific.inventory.get”.
• Tha am processTableDesc () air a chleachdadh gus tuairisgeul a’ chlàir ùrachadh agus tha processUpdate() air a chleachdadh gus tuairisgeul paramadair a’ bhùird ùrachadh.
• Ann am processUpdate (), cuir fios gu updateTableParamsDesc () gus na h-eileamaidean JSON ùrachadh a tha co-chosmhail ri ainmean nan eileamaidean sònraichte.
• Ùraich an neo tag HTML a-staigh a rèir tuairisgeul an eileamaid.

2. /* Ùraich raointean tuairisgeul HTML */
3. pròiseas gnìomhTableDesc(req) {
4. ma tha (! req.responseText) {
5. tilleadh;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Ùraich tuairisgeul clàr
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “buidhnean”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Ùraich tuairisgeul paramadair clàr HTML */
12. ùrachadh pròiseas gnìomh(recv_json) {
13. // Ùraich tuairisgeul paramadair clàr
14. var param_names = [
15. {
16. "alias": "Eadar-aghaidh",
17. "seòrsa": "vtss_ifindex_t",
18. “ainm”: “vlanInterface”,
19. “iar-leas”: “.”
20. },
21. {
22. “alias”: “Eadar-aghaidh sealaidheachd”,
23. "seòrsa": "vtss_ifindex_t",
24. “ainm”: “relayVlanInterface”,
25. “iar-leas”: “. Id an eadar-aghaidh a thathas a’ cleachdadh airson ath-chraoladh.”
26. },
27. {
28. “alias”: “Ceann-uidhe Relay”,
29. "seòrsa": "mesa_ipv6_t",
30. “ainm”: “relay_deestination”,
31. “iar-leas”: “. Thèid seòladh IPv6 an fhrithealaiche DHCPv6 a dh'iarras a chuir air adhart. An luach bunaiteach 'ff05:: 1: 3' mans 'frithealaiche DHCP sam bith'."
32. }
33. ];
34. updateTableParamsDesc (“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Faigh sònrachadh JSON */
37. window.addEvent('domready', gnìomh () {
38. loadXMLDoc ("/ json_spec", processTableDesc);
39. requestJsonDoc (“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-cheangal anns a’ bhàr clàr

• Tha còd stòr HTML bàr clàr air a chruthachadh bho file webstax2\vtss_appl\web\menu_default.cxx.
• Deasaich na stuthan ann an seo file airson an Web hyper-cheangal duilleag.

1. # ma tha e air a mhìneachadh (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM (“Relay, dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Mothaich gu bheil an àireamh de charactar fànais ann an ITEM (“”), a thathas a’ cleachdadh gus ìre na buidhne sa bhàr clàr a cho-dhùnadh. Anns a 'chùis seo, a h-uile web tha duilleagan fon bhuidheann “DHCPv6”.

Figear 6. Example clàr cruinne rèiteachaidh

Pàipear-taice

àbhaisteach web duilleagan

Tha grunnan àbhaisteach ann web faodar duilleagan a chleachdadh airson dealbhadh iomraidh. Aon ex a bharrachdampLe ri fhaicinn an seo tha rèiteachadh aon seisean sgàthan a lorgar ann an vtss_appl \ sgàthan \ html \ mirror.htm.
Tha an web duilleag a’ toirt seachad an rèiteachadh mionaideach airson aon seisean sgàthan. Tha a h-uile paramadair rèiteachaidh air an liostadh.

• Cliog air a’ phutan “Sàbhail” gus an rèiteachadh gnàthach a chuir an sàs.
• Briog air “Ath-shuidhich” putan gus an rèiteachadh gnàthach ath-shuidheachadh.
• Briog air "Sguir dheth" gus tilleadh chun an còrrview de sheiseanan sgàthan

Sgàthan&Rèiteachadh sgàthan

Roghainnean cruinne

Stòr VLAN(an) Rèiteachadh

Rèiteachadh Port

Figear 7. Example rèiteachadh mionaideach de sheisean sgàthan
Tha na putanan “Sàbhail”, “Ath-shuidhich” agus “Sguir dheth” air an cur ris leis a’ chòd html:

Sruth òrdugh JSON
Feumaidh an duilleag seo sruth àithne dà cheum:

• An toiseach feumaidh e comasan an inneal fhaighinn leis an dòigh “mirror.capabilities.get”. Chan eil na comasan ag atharrachadh agus chan fheumar a leughadh ach aon turas.
• An uairsin feumaidh e rèiteachadh gnàthach an inneil fhaighinn a’ cleachdadh na dòighean “mirror.config.session.get”, “port.status.get” agus gun fhios nach tèid “topo.config.stacking.get” a chruachadh.

Tha an gairm “mirror.capabilities.get” air a thòiseachadh leis an tachartas “domready” agus tha an toradh air a rèiteachadh gus a bhith air a làimhseachadh leis a ’ghnìomh iarrtasUpdate.
Tòisichidh an requestUpdate gairm “mirror.config.session.get”,
“port.status.get” agus gun fhios nach tèid “topo.config.stacking.get” a chruachadh agus tha toraidhean nan fiosan sin air an rèiteachadh gus an làimhseachadh leis a’ ghnìomh prepareUpdate.
Cruinnichidh an t-ullachadh gnìomh Update a h-uile toradh, agus dìreach nuair a gheibhear iad uile thèid fios a chuir gu pròiseas ùrachadh gnìomh a thogas na clàran airson an sealltainn air an web.

Iomraidhean

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

Sgrìobhainnean/Goireasan

Microsemi AN1256 Web Iarrtas luchd-prògramaidh [pdfStiùireadh Cleachdaiche AN1256, AN1256 Web Iarrtas luchd-prògramaidh, Web Iarrtas luchd-prògramaidh, Iarrtas

Iomraidhean

• Leabhar-làimhe cleachdaiche