ማይክሮሴሚ AN1256 Web የፕሮግራም አውጪዎች መተግበሪያ

መግቢያ

JSON (ጃቫስክሪፕት የነገር ማስታወሻ) ክፍት ደረጃ ነው። file ለመረጃ ልውውጥ በሰው ሊነበብ የሚችል ጽሑፍን የሚጠቀም ቅርጸት። ለተመሳሳይ አሳሽ/አገልጋይ ግንኙነት የሚያገለግል የተለመደ የመረጃ ቅርጸት ነው።
ለአዲሱ web የገጽ ንድፍ፣ JSON ቅርጸት ለዋናው የAJAX ዘይቤ ምትክ ሊሆን ይችላል። ከ AJAX ጋር አወዳድር፣ JSON ን በመጠቀም Web ትግበራ ቀላል እና ቀላል. ገንቢው ማተኮር ያለበት ብቻ ነው። web ገጽ ንድፍ እና Web የጄሶን የመዳረሻ ዘዴ በእያንዳንዳቸው ስለሚደገፍ የተቆጣጣሪ ትግበራ ሊቀር ይችላል። WebStaX ሶፍትዌር ሞጁሎች.
ይህ ሰነድ የሶፍትዌር መሐንዲሱን ማዳበር ለሚያስፈልገው የፕሮግራም አውጪዎች መመሪያ ይገልጻል Web ገጽ በJSON በኩል። ዝርዝር ሂደቶች እና ለምሳሌamples ደግሞ በሚቀጥሉት ክፍሎች ውስጥ ተካትቷል.

JSON የውሂብ መዳረሻ ፍሰት

አልቋልview
የኤችቲቲፒ ግንኙነት ከደንበኛው(አሳሽ) የተጀመረበት የJSON ውሂብ መዳረሻ ፍሰት ይኸውና። የኤችቲኤምኤል ሰንጠረዥ በተለዋዋጭ ሁኔታ የተፈጠረው ከአገልጋዩ (ዲዩቲ) ጎን በተቀበለው የ JOSN መረጃ መሠረት ነው።

ምስል 1. በአገልጋይ እና በደንበኛው መካከል ያለው የመዳረሻ ፍሰት

የJSON ውሂብን ይጠይቁ/ምላሽ ይስጡ
የJSON ጥያቄ ፓኬት በኤችቲቲፒ ጥያቄ ፖስት ዘዴ ላይ የተመሰረተ ነው እና ይዘቱ የMSCC JSON ቅርጸት መከተል አለበት።

• JSON አገባብ ጠይቅ፡-{"ዘዴ": "ፓራምስ":[ ]፣ “id:”jsonrpc”}
• ምላሽ JSON አገባብ፡- {"ስህተት": "ውጤት": ፣ “id:”jsonrpc”}

የሚከተሉት ቅጽበተ-ፎቶዎች በአሳሹ እና በDUT መካከል ያለውን የJSON ይዘት ያሳያሉ።

ምስል 2. ከደንበኛው የቀረበ የኤችቲቲፒ ጥያቄ ቅጽበታዊ እይታ

ምስል 3. ከአገልጋይ የኤችቲቲፒ ምላሽ ቅጽበታዊ እይታ

የMSCC JSON ዝርዝር መግለጫ
ሙሉውን የJSON መረጃ ለማግኘት ዘዴ፣ መለኪያ፣ መግለጫ እና ወዘተ ጨምሮ። http:// ይተይቡ / json_spec” በአሳሽዎ አድራሻ አሞሌ ላይ። በJSON ዘዴ ስም "jsonRpc.status.introspection.specific.inventory.get" በኩል ሌላ የመዳረሻ ዘዴ አለ፣ እሱ ለተወሰነ ዘዴ ጥቅም ላይ ይውላል።

ምስል 4. የJSON ዝርዝር መግለጫ web ገጽ

Web ማዕቀፍ

የ Web ውስጥ ማዕቀፍ WebStaX ሶፍትዌር በክፍት ምንጭ MooTools ላይ የተመሰረተ ነው። የ MIT ፍቃድ ያላቸው የጃቫስክሪፕት መገልገያዎች ስብስብ ነው። (http://mootools.net/license.txt) የምናሌ አሞሌ እና አብዛኛዎቹ web ገጾች በማዕቀፉ ላይ የተመሰረቱ ናቸው. ሁለቱም AJAX እና JSON አልጎሪዝም አስቀድሞ በመገልገያዎች ውስጥ የተዋሃዱ ናቸው።
ከዚህም በተጨማሪ እ.ኤ.አ. WebStaX ሶፍትዌር ለJSON ጠቃሚ የሆኑትን ሌሎች መገልገያዎችን ያቀርባል web የገጽ ንድፍ.

• json.js - ተለዋዋጭ ውሂቡን ከJSON አገባብ ጋር ለማስተላለፍ/ ለመቀበል ይጠቀሙ።
• dynforms.js - የኤችቲኤምኤል ሰንጠረዥን በተለዋዋጭ ለመፍጠር ይጠቀሙ።
• አረጋግጥ.js - የኤችቲኤምኤል ቅጽን ለማረጋገጥ ይጠቀሙ።

ሙሉው የጃቫ ስክሪፕት ቤተ-ፍርግሞች ከምንጩ የዛፍ ማውጫ ስር ይገኛሉ፡- webstax2 \ vtss_applweb\html\lib.

ለJSON መመሪያ Web የገጽ ንድፍ

ይህ ክፍል ሀን እንዴት ዲዛይን ማድረግ እንደሚቻል ይመራል። web በMSCC ጃቫስክሪፕት ቤተ-መጻሕፍት ላይ የተመሠረተ ገጽ። የ Mirror ግሎባል የተዋቀረውን እንጠቀማለን። web ገጽ እንደ የቀድሞampእዚህ. ያልተመሳሰለው ግንኙነት በኤችቲቲፒ JSON የመዳረሻ ዘዴ ላይ የተመሰረተ ነው እና ሁሉም አለምአቀፍ የተዋቀሩ መለኪያዎች በአንድ ተለዋዋጭ የኤችቲኤምኤል ሰንጠረዥ ውስጥ ተዘርዝረዋል።
የ web የገጽ አቀማመጥ ከዚህ በታች ተዘርዝሯል እና ሙሉ ምንጭ ኮድ ከምንጩ ዛፍ ማውጫ ስር ይገኛል፡ webstax2 \ vtss_appl \ መስታወት \ html \ mirror_ctrl.htm. የበለጠ የተለመደ ለማግኘት web የገጾች ማጣቀሻ, የአባሪውን ክፍል ይመልከቱ.

የመስታወት እና የ RMirror ውቅረት ሰንጠረዥ

ምስል 5. Exampዓለም አቀፍ የተዋቀረ ሠንጠረዥ

አርትዕ Web ገጽ

HTML ራስጌ
በኤችቲኤምኤል ውስጥ የሚያስፈልጉትን የJS ቤተ-ፍርግሞች ያካትቱ tag.

ተለዋዋጭ የጠረጴዛ መርጃውን ያስጀምሩ

• የኤችቲኤምኤል ሰነዱ ዝግጁ ሲሆን ተለዋዋጭ የጠረጴዛ መርጃውን ለመጀመር DynamicTable() ይደውሉ።
• የJSON ውሂብ ከተቀበለ በኋላ ተለዋዋጭ ሰንጠረዥን ለመፍጠር DynamicTable() ጥቅም ላይ ይውላል።
• የJSON የትእዛዝ ፍሰትን ለመጀመር ጥያቄን አዘምን ይደውላል።

1. window.addEvent('domready'፣ function() {
2. // JSON ውሂብ ለመቀበል/ ለማስተላለፍ ከጠረጴዛ አካል ጋር ቅጽ ይፍጠሩ
3. myDynamicTable = አዲስ DynamicTable ("myTableContent", "config", plusRowCtrlBar");
   4
4. ጥያቄ ማሻሻያ ();
5. });

የJSON ውሂብን ይጠይቁ/ምላሽ ይስጡ

• የኤችቲኤምኤል ሰነዱ ዝግጁ ሲሆን ስለ የተዋቀሩ ክፍለ-ጊዜዎች መረጃ ለማግኘት የJSON ጥያቄን "mirror.config.session.get" ለመላክ requestJsonDoc() ይጠቀሙ።
• የJSON ውሂብ ለ"mirror.capabilities.get" ከደረሰ በኋላ የመልሶ መደወያ ተግባር ጥያቄUpdate() ይከናወናል። የተግባር ጥያቄ አፕዴት አሁን ያለውን ውቅር ለማግኘት “mirror.config.session.get” ይደውላል። የአሁኑ ውቅር ሲደርሰው, የሚታየውን ሠንጠረዥ ለመገንባት የተግባር ሂደት አፕዴት ይባላል.

1. የተግባር ጥያቄ አዘምን()
2. {
3. // የሰንጠረዡን ይዘት ወደነበረበት ይመልሱ
4. myDynamicTable.restore ();
   5
5. // ይህ ሰንጠረዥ ሁለት JSON ውሂብ.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

የተቀበለውን የJSON ውሂብ ያስኬዱ

• የተግባር ሂደት ማዘመኛ() የJSON ውሂቡን ከተቀበለ በኋላ ተለዋዋጭ ሰንጠረዥን ለመዘርጋት ይጠቅማል።
• የ addRows() የሰንጠረዥ ረድፎችን ለመጨመር ስራ ላይ ይውላል። myDynamicTable.update () አቀማመጥ የ
  የኤችቲኤምኤል ሰንጠረዥ በሰንጠረዥ ረድፎች ውስጥ ባለው መረጃ መሠረት።

1. የተግባር ሂደት አዘምን(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 ("autorefresh");
19. ከሆነ (ራስ-አድስ እና እና autorefresh. ምልክት የተደረገበት) {
20. ከሆነ (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()'፣ settingsRefreshInterval());
24. }
25. }

የጠረጴዛ ረድፎችን አክል

• በ addRows() ተግባር፣ በሠንጠረዡ ረድፍ ላይ ያለውን እያንዳንዱን ዓለም አቀፍ የተዋቀረ መለኪያ ለመሙላት የJSON ቅርጸትን እንጠቀማለን።
• ሁሉም የኤችቲኤምኤል መስኮች በJSON ድርድር ውስጥ ተዘርዝረዋል ("የጠረጴዛ_ረድፎች") እና የሰንጠረዥ መስክ አገባብ ከዚህ በታች አለ።

አገባብ፡
የጠረጴዛ_ረድፎች:[ , ፣… ] : { , ፣… }
: {"አይነት": ፣ “ፓራምስ”፡[ , ፣… ]}

• በዚህ አጋጣሚ እያንዳንዱ ረድፍ አምስት መስኮች አሉት፡ “የክፍለ ጊዜ መታወቂያ”፣ “ሞድ”፣ “አይነት”፣ “VLAN ID” እና “Reflector Port” ለ exampሌ፣

የክፍለ ጊዜ መታወቂያ (ስም መስክ፡ int32_t)	1 (የመስታወት ክፍለ ጊዜ መታወቂያ)
ሁነታ (ስም መስክ፡vtss_bool_t)	እውነት ነው። (የመስታወት ክፍለ ጊዜ ነቅቷል ማለት ነው)
ዓይነት (ስም መስክ: መቁጠር {መስተዋት፣ rMirrorSource፣ rMirrorDestination}	RMirror ምንጭ (ይህ የርቀት የመስታወት ክፍለ ጊዜ ምንጭ ነው።
VLAN መታወቂያ (ስም መስክ፡ uint16_t)	200 (ቪላን ለማንጸባረቅ ጥቅም ላይ ይውላል)
አንጸባራቂ ወደብ (ስም መስክ፡ vtss_ifindex_t)	ጂ 1/1 (የተንጸባረቀው ትራፊክ የተላከበት ወደብ

• MyDynamicTable.addRows() የJSON ውሂቡን ወደ ኤችቲኤምኤል ቅርጸት ይለውጣል እና የኤችቲኤምኤል ሰንጠረዥ ያወጣል።

1. ተግባር addRow (ቁልፍ፣ ቫል)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "ምንም", none_interface_text = "ምንም";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal”? ” (”+ oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)”፡ “”;
5. var ረድፍ = {መስኮች፡[
6. {አይነት፡”አገናኝ”፣ params:[“cr”፣ “mirror.htm?session_id=” + ቁልፍ፣ ቁልፍ]}፣
7. {አይነት፡”ጽሑፍ”፣ params፡[oTMode[oVMode.indexOf(val.Mode)]፣ “c”]}፣
8. {አይነት፡”ጽሑፍ”፣ params:[oTType[oVType.indexOf(val.Type)]፣ “c”]}፣
9. {አይነት፡”ጽሑፍ”፣ params:[val.Type == “መስተዋት”? "-":
   val.RMirrorVlan፣ “c”]}፣
10. {አይነት፡”ጽሑፍ”፣ params:[val.Type == “rMirrorSource”?
    val.ReflectorPort፡ “-”፣ “ሐ”]}
11. ]};
12. የመመለሻ ረድፍ;
13. }
14. ተግባር addRows(recv_json)
15. {
16. var ረድፍ, ባዶ_colspan = 7;
17. var table_rows = አዲስ አደራደር ();
18. // የሰንጠረዥ ራስጌ አክል
19. addHeader (የጠረጴዛ_ረድፎች);
20. // ነጠላ ረድፍ አክል
21. Object.each (recv_json፣ ተግባር(መዝገብ) {
22. table_rows.push (addRow (record.key, record.val));
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 tag የኤችቲኤምኤል ሰንጠረዥ መግለጫን ለማወጅ እና ልዩ መታወቂያ ለ tag.
• የኤችቲኤምኤል ሰነዱ ዝግጁ ሲሆን ሙሉውን የJSON ዝርዝር መግለጫ ለማግኘት ወደ ሎድXMLDoc() ይደውሉ ወይም የተወሰነውን ዘዴ በJSON ዘዴ ስም "jsonRpc.status.introspection.specific.inventory.get" ያግኙ።
• ProcessTableDesc() የሠንጠረዡን መግለጫ ለማዘመን ይጠቅማል እና የሂደት አፕዴት() የሠንጠረዡን መለኪያ መግለጫ ለማዘመን ይጠቅማል።
• በProcessUpdate() ውስጥ፣ ከልዩ አባል ስሞች ጋር የሚዛመዱትን የJSON አባሎችን ለማዘመን updateTableParamsDesc() ይደውሉ።
• አዘምን ወይም tag በንጥረ ነገሮች መግለጫ መሠረት ውስጣዊ HTML።

2. /* የኤችቲኤምኤል መግለጫ መስኮችን አዘምን */
3. የተግባር ሂደትTableDesc(req) {
4. ከሆነ (!req.responseText) {
5. መመለስ;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // የሰንጠረዡን መግለጫ አዘምን
9. $ ("TableDesc").innerHTML = getJsonSpecElement (json_spec, "ቡድኖች", "dhcp6_relay.config.vlan") መግለጫ;
10. }
11. /* የኤችቲኤምኤል ሰንጠረዥ መለኪያ መግለጫን አዘምን */
12. የተግባር ሂደት አዘምን(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 ('domready'፣ ተግባር () {
38. loadXMLDoc ("/ json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

በምናሌ አሞሌ ውስጥ ልዕለ-አገናኝ

• የምናሌ አሞሌ HTML ምንጭ ኮድ የመነጨው ከ ነው። file webstax2 \vtss_applweb\ menu_default.cxx.
• በዚህ ውስጥ ያሉትን እቃዎች ያርትዑ file ለ Web ገጽ hyper-link.

1. # ከተገለፀ(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relay,dhcp6_relay.htm");
3. # endif //VTSS_SW_OPTION_DHCP6_RELAY

ማስታወሻ
በ ITEM("") ውስጥ ያለው የቦታ ቁምፊ ​​ቁጥር በምናሌ አሞሌ ውስጥ ያለውን የቡድን ደረጃ ለመወሰን የሚያገለግል መሆኑን ልብ ይበሉ። በዚህ ሁኔታ, ሁሉም web ገጾች በ"DHCPv6" ቡድን ስር ናቸው።

ምስል 6. ዘፀampዓለም አቀፍ የተዋቀረ ሠንጠረዥ

አባሪ

የተለመደ web ገጾች

በርካታ የተለመዱ አሉ web ገጾችን ለማጣቀሻ ንድፍ መጠቀም ይቻላል. አንድ ተጨማሪ የቀድሞampእዚህ ላይ መታየት ያለበት በvtss_appl \mmirror\html\mirror.htm ውስጥ የሚገኘው የአንድ የመስታወት ክፍለ ጊዜ ውቅር ነው።
የ web ገጽ ለአንድ የመስታወት ክፍለ ጊዜ ዝርዝር ውቅር ያቀርባል። ሁሉም የተዋቀሩ መለኪያዎች ተዘርዝረዋል.

• የአሁኑን ውቅር ለመተግበር "አስቀምጥ" ቁልፍን ጠቅ ያድርጉ።
• የአሁኑን ውቅር እንደገና ለማስጀመር "ዳግም አስጀምር" ቁልፍን ጠቅ ያድርጉ።
• ወደ ትርፍ ለመመለስ "ሰርዝ" ን ጠቅ ያድርጉview የመስታወት ክፍለ ጊዜዎች

የመስታወት እና የመስታወት ውቅረት

ዓለም አቀፍ ቅንብሮች

ምንጭ VLAN(ዎች) ውቅር

ወደብ ውቅረት

ምስል 7. Exampየመስታወት ክፍለ ጊዜ ዝርዝር ውቅር
“አስቀምጥ”፣ “ዳግም አስጀምር” እና “ሰርዝ” የሚሉት አዝራሮች በኤችቲኤምኤል ኮድ ተጨምረዋል።

JSON የትእዛዝ ፍሰት
ይህ ገጽ ባለ ሁለት ደረጃ የትእዛዝ ፍሰት ይፈልጋል።

• በመጀመሪያ የመሳሪያውን አቅም በ "መስተዋት.capabilities.get" ዘዴ ማግኘት ያስፈልገዋል. ችሎታዎቹ አይለወጡም እና አንድ ጊዜ ብቻ ማንበብ አለባቸው.
• ከዚያም "mirror.config.session.get", "port.status.get" እና "topo.config.stacking.get" በሚደራረብበት ጊዜ ዘዴዎችን በመጠቀም የመሳሪያውን የአሁኑን ውቅር ማግኘት ያስፈልገዋል.

የ"mirror.capabilities.get" ጥሪ የተጀመረው በ"domready" ክስተት ሲሆን ውጤቱም በተግባር ጥያቄው እንዲስተናገድ ተዋቅሯል።
የጥያቄው አፕዴት የ"mirror.config.session.get" ጥሪን ይጀምራል፣
"port.status.get" እና "topo.config.stacking.get" ከተቆለሉ እና የእነዚህ ጥሪዎች ውጤቶች በዝግጅት አፕዴት እንዲያዙ ተዋቅረዋል።
የተግባር ማዘጋጃ አፕዴት ሁሉንም ውጤቶች ይሰበስባል፣ እና ሁሉም ሲቀበሉ ብቻ የተግባር ሂደቱን የሚጠራው በ web.

ዋቢዎች

1. ዊኪፔዲያ ጃቫስክሪፕት https://en.wikipedia.org/wiki/JavaScript
2. ጄሰን https://www.json.org/
3. MoonTools https://mootools.net/

ሰነዶች / መርጃዎች

ማይክሮሴሚ AN1256 Web የፕሮግራም አውጪዎች መተግበሪያ [pdf] የተጠቃሚ መመሪያ AN1256፣ AN1256 Web የፕሮግራም አውጪዎች መተግበሪያ ፣ Web የፕሮግራም አውጪዎች መተግበሪያ ፣ መተግበሪያ

ዋቢዎች

• የተጠቃሚ መመሪያ