מיקראָסעמי AN1256 Web פּראָגראַממער אַפּפּליקאַטיאָן

הקדמה

JSON (JavaScript Object Notation) איז אַן אָפֿן נאָרמאַל file פֿאָרמאַט וואָס ניצט מענטש-ליינעוודיק טעקסט פֿאַר דאַטן יקסטשיינדזשינג. עס איז אַ פּראָסט דאַטן פֿאָרמאַט געניצט פֿאַר ייסינגקראַנאַס בלעטערער / סערווער קאָמוניקאַציע.
פֿאַר די נייַע web בלאַט פּלאַן, JSON פֿאָרמאַט קענען זיין אַ פאַרבייַט פֿאַר דער אָריגינעל AJAX סטיל. פאַרגלייַכן צו AJAX, ניצן JSON מאכט די Web ימפּלאַמענטיישאַן גרינגער און סימפּלער. דער דעוועלאָפּער נאָר דאַרפֿן צו פאָקוס אויף web בלאַט פּלאַן און די Web האַנדלער ימפּלאַמענטיישאַן קענען זיין איבערגעהיפּערט זינט JSON אַקסעס אופֿן איז שוין געשטיצט אין יעדער Webסטאַקס ווייכווארג מאַדזשולז.
דער דאָקומענט דערקלערט די פּראָוגראַמערז פירער פֿאַר די ווייכווארג ינזשעניר וואָס דאַרפֿן צו אַנטוויקלען די Web בלאַט דורך JSON. די דעטאַל פּראָוסידזשערז און עקסampליי אויך אַרייַנגערעכנט אין די פאלגענדע סעקשאַנז.

JSON דאַטן אַקסעס לויפן

איבערview
דאָ איז די JSON דאַטן אַקסעס לויפן וואָס אַ הטטפּ קשר איז ינישיייטיד פֿון דעם קליענט (בלעטערער). דער HTML טיש איז באשאפן דינאַמיקאַללי לויט די באקומען JOSN דאַטן פון די סערווער (DUT) זייַט.

פיגורע 1. די אַקסעס לויפן צווישן קליענט און סערווער

בעטן / ענטפער JSON דאַטן
די JSON בעטן פּאַקאַט איז באזירט אויף HTTP בעטן פּאָסטן אופֿן און דער אינהאַלט מוזן נאָכפאָלגן די MSCC JSON פֿאָרמאַט.

• בעטן JSON סינטאַקס:{"אויף":" ","פּאַראַמז":[ ], "id:"jsonrpc"}
• ענטפער JSON סינטאַקס: {"טעות": "רעזולטאַט": , "id:"jsonrpc"}

די פאלגענדע סנאַפּשאַץ ווייַזן די JSON אינהאַלט צווישן דעם בלעטערער און DUT.

פיגורע 2. מאָמענטבילד פון הטטפּ בעטן פון קליענט

פיגורע 3. מאָמענטבילד פון הטטפּ ענטפער פון סערווער

MSCC JSON באַשרייַבונג
צו באַקומען די פול JSON אינפֿאָרמאַציע אַרייַנגערעכנט דעם מעטאָד, פּאַראַמעטער, באַשרייַבונג און אאז"ו ו אַרייַן "http:// /json_spec" אויף דיין בלעטערער אַדרעס באַר. עס איז אן אנדער אַקסעס אופֿן דורך JSON אופֿן נאָמען "jsonRpc.status.introspection.specific.inventory.get", עס איז געניצט פֿאַר אַ ספּעציפיש אופֿן.

פיגורע 4. מאָמענטבילד פון JSON באַשרייַבונג web בלאַט

Web פריימווערק

די Web פריימווערק אין Webסטאַקס ווייכווארג איז באזירט אויף אַ אָפֿן מקור MooTools. עס איז אַ זאַמלונג פון דזשאַוואַסקריפּט יוטילאַטיז מיט MIT דערלויבעניש. (http://mootools.net/license.txt) די מעניו באַר און רובֿ פון web בלעטער זענען באזירט אויף די פריימווערק. ביידע AJAX און JSON אַלגערידאַם זענען שוין ינאַגרייטיד אין זייַן יוטילאַטיז.
אַחוץ, Webסטאַקס ווייכווארג גיט די אנדערע יוטילאַטיז וואָס זענען נוציק פֿאַר די JSON web בלאַט פּלאַן.

• json.js - ניצן פֿאַר צו אַריבערפירן / באַקומען דינאַמיש דאַטן מיט JSON סינטאַקס.
• dynforms.js - ניצן די HTML טיש צו מאַכן דינאַמיקאַללי.
• validate.js - ניצן פֿאַר די וואַלאַדיישאַן פון HTML פאָרעם.

די פול דזשאַוואַסקריפּט לייברעריז זענען ליגן אונטער די מקור בוים וועגווייַזער: webstax2\vtss_appl\web\html\lib.

גיידליינז פֿאַר JSON Web בלאַט פּלאַן

דער אָפּטיילונג גיידז ווי צו פּלאַן אַ web בלאַט באזירט אויף MSCC דזשאַוואַסקריפּט לייברעריז. מיר נוצן די שפּיגל גלאבאלע קאַנפיגיערד web בלאַט ווי די עקסampדאָ. די ייסינגקראַנאַס קאָמוניקאַציע איז באזירט אויף HTTP JSON אַקסעס אופֿן און אַלע גלאבאלע קאַנפיגיערד פּאַראַמעטערס זענען ליסטעד אין איין דינאַמיש HTML טיש.
די web בלאַט אויסלייג איז ליסטעד אונטן און די פול מקור קאָד איז ליגן אונטער די מקור בוים וועגווייַזער: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. צו באַקומען מער טיפּיש web בלעטער דערמאָנען, זען די אַפּפּענדיקס אָפּטיילונג.

שפּיגל & רמירער קאָנפיקווראַטיאָן טיש

פיגורע 5. Exampלאַ פון גלאבאלע קאַנפיגיערד טיש

רעדאַגירן Web בלאַט

HTML כעדער
אַרייַננעמען די JS לייברעריז וואָס דארף אין HTML tag.

ינישאַליזע די דינאַמיש טיש מיטל

• ווען דער HTML דאָקומענט איז גרייט, רופן DynamicTable () צו ינישאַלייז די דינאַמיש טיש מיטל.
• די דינאַמיק טאַבלע () איז געניצט צו שאַפֿן די דינאַמיש טיש נאָך באקומען די JSON דאַטן.
• דערנאָך, עס וועט רופן requestUpdate צו אָנהייבן די JSON באַפֿעלן לויפן.

1. windows.addEvent ('דאָמרעאַדי', פֿונקציע () {
2. // שאַפֿן אַ פאָרעם מיט טיש גוף פֿאַר באַקומען / יבערשיקן JSON דאַטן
3. myDynamicTable = new DynamicTable ("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate ();
5. });

בעטן / ענטפער JSON דאַטן

• ווען דער HTML דאָקומענט איז גרייט, נוצן requestJsonDoc () צו שיקן די JSON בעטן "mirror.config.session.get" צו באַקומען אינפֿאָרמאַציע וועגן די קאַנפיגיערד סעשאַנז.
• נאָך די JSON דאַטן פֿאַר "mirror.capabilities.get" איז באקומען, די קאַללבאַקק פונקציע requestUpdate () וועט זיין פּראַסעסט. דער פֿונקציע requestUpdate וועט דעמאָלט רופן "mirror.config.session.get" צו באַקומען די קראַנט קאַנפיגיעריישאַן. ווען די קראַנט קאַנפיגיעריישאַן איז באקומען, די פונקציע פּראָצעסופּדאַטע איז גערופן צו בויען די טיש צו זיין געוויזן.

1. פונקציע requestUpdate ()
2. {
3. // ומקערן טיש אינהאַלט
4. myDynamicTable.restore();
   5
5. // דעם טיש צוויי JSON דאַטן.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

פּראָצעס די באקומען JSON דאַטן

• די פֿונקציע processUpdate () איז געניצט צו אויסלייג די דינאַמיש טיש נאָך באקומען די JSON דאַטן.
• די addRows () איז געניצט צו לייגן טיש ראָוז. myDynamicTable.update() אויסלייג די
  HTML טיש לויט די דאַטן אין טיש ראָוז.

1. פונקציע פּראָצעסופּדאַטע (רעקוו_דזשסאָן, נאָמען)
2. {
3. // איגנאָרירן דעם פּראָצעס אויב קיין דאַטן איז באקומען
4. אויב (!רעקוו_דזשסאָן) {
5. alert ("באַקומען דינאַמיש דאַטן ניט אַנדערש.");
6. צוריקקומען;
7. }
8. // היט די באקומען JSON דאַטן
9. myDynamicTable.saveRecvJson ("config", recv_json);
10. // לייג טיש ראָוז
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows (טאַבלע_ראָווס);
14. // דערהייַנטיקן דעם דינאַמיש טיש
15. מידינאַמיק טאַבלע.ופּדאַטע ();
17. // דערפרישן טייַמער
18. var autorefresh = document.getElementById ("autorefresh");
19. אויב (autorefresh && autorefresh.checked) {
20. אויב (טיימעריד) {
21. קלירטימעאָוט (טימעריד);
22. }
23. timerID = setTimeout ('requestUpdate ()', settingsRefreshInterval ());
24. }
25. }

לייג טיש ראָוז

• אין די addRows () פֿונקציע, מיר נוצן די JSON פֿאָרמאַט צו פּלאָמבירן יעדער גלאבאלע קאַנפיגיערד פּאַראַמעטער אין די טיש רודערן.
• אַלע HTML פעלדער זענען ליסטעד אין די JSON מענגע ("טאַבלע_ראָווס") און די סינטאַקס פון טיש פעלד איז אונטן.

סינטאַקס:
טאַבלע_ראָועס:[ , , … ] : { , , … }
: {"טיפּ": , "פּאַראַמז":[ , , …, ]}

• אין דעם פאַל, יעדער רודערן האט פינף פעלדער: "סעסיע שייַן", "מאָדע", "טיפּ", "וולאַן שייַן" און "רעפלעקטאָר פּאָרט" פֿאַר עקס.ampלא,

סעסיע שייַן (נאָמען פעלד: int32_t)	1 (אייד פון דער שפּיגל סעסיע)
מאָדע (נאָמען פעלד: vtss_bool_t)	אמת (טייַטש די שפּיגל סעסיע איז ענייבאַלד)
טיפּ (נאָמען פעלד: ינומעריישאַן {שפּיגל, rMirrorSource, rMirrorDestination}	רמירר מקור (דאָס איז דער מקור פון אַ ווייַט שפּיגל סעסיע
VLAN ID (נאָמען פעלד: uint16_t)	200 (די וולאַן געניצט פֿאַר מירערינג)
רעפלעקטאָר פּאָרט (נאָמען פעלד: vtss_ifindex_t)	גי 1/1 (די פּאָרט צו וואָס די מירערד פאַרקער איז געשיקט

• די myDynamicTable.addRows () וועט גער די JSON דאַטן צו HTML פֿאָרמאַט און רעזולטאַט די HTML טיש.

1. פונקציע addRow (שליסל, וואַל)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "קיין", none_interface_text = "קיין";
4. var tunnel_mode_suffix = וואַל.טוננעלמאָדע == "ניצןלאָבאַל"? ”(” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)”: “”;
5. וואַר רודערן = {פעלדער:[
6. {טיפּ: "לינק", פּאַראַמס: ["קר", "מירר.הטם?סעססיאָן_יד =" + שליסל, שליסל]},
7. {טיפּ: "טעקסט", פּאַראַמס: [אָטמאָדע[אָוומאָדע.ינדעקסאָף(וואַל.מאָדע)], "C"]},
8. {טיפּ: "טעקסט", פּאַראַמס: [oTType[oVType.indexOf(וואַל.טיפּ)], "C"]},
9. {טיפּ:"טעקסט", פּאַראַמס:[וואַל.טיפּ == "שפּיגל"? "-":
   val.RMirrorVlan, "c"]},
10. {טיפּ:"טעקסט", פּאַראַמס:[וואַל.טיפּ == "רמירראָרסאָורסע"?
    val.ReflectorPort: "-", "C"]}
11. ]};
12. צוריקקומען רודערן;
13. }
14. פונקציע addRows (recv_json)
15. {
16. וואַר רודערן, ליידיק_קאָלספּאַן = 7;
17. var table_rows = new Array ();
18. // לייג טיש כעדער
19. addHeader (טאַבלע_ראָווס);
20. // לייג איין רודערן
21. Object.each (recv_json, function (record) {
22. טאַבלע_ראָווס.פּוש (אַדדראָוו (רעקאָרד.קיי, רעקאָרד.וואַל));
23. });
24. צוריקקומען טאַבלע_ראָווס;
25. }

Web הילף בלאַט
פֿאַר די web הילף בלאַט פּלאַן, די הילף באַשרייַבונג קענען אָפּשיקן צו די JSON ספּעסיפיקאַטיאָן, אַז די באַשרייַבונג טעקסט קענען קאָנסיסטענט מיט JSON רעזולטאַט און העלפּס צו רעדוצירן די יבעריק דיסקריפּשאַנז. עקסampדי דאָ איז גענומען פֿון dhcp6 רעלע קאַנפיגיעריישאַן.

היפּער-לינק אין די מקור file
באַשטימען די הילף file אָרט אין זייַן מקור file HTML tag. די פאַרפעסטיקט בייַטעוודיק נאָמען "help_page" איז געניצט פֿאַר די web הילף בלאַט אַסיינמאַנט.

2. // הילף בלאַט מאַגיש
3. var help_page = "/help/help_xxx.htm";

דערהייַנטיקן HTML פעלד באַשרייַבונג פון די JSON באַשרייַבונג

• ניצן אָדער HTML tag צו דערקלערן די HTML טיש באַשרייַבונג און געגעבן אַ יינציק שייַן פֿאַר די tag.
• ווען דער HTML דאָקומענט איז גרייט, רופן loadXMLDoc () צו באַקומען די גאנצע JSON באַשרייַבונג אָדער באַקומען די ספּעציפיש אופֿן באַשרייַבונג דורך JSON אופֿן נאָמען "jsonRpc.status.introspection.specific.inventory.get".
• די processTableDesc () איז געניצט צו דערהייַנטיקן די טיש באַשרייַבונג און processUpdate () איז געניצט צו דערהייַנטיקן די טיש פּאַראַמעטער באַשרייַבונג.
• אין processUpdate (), רופן updateTableParamsDesc () צו דערהייַנטיקן די JSON עלעמענטן וואָס זענען מאַטשט די ספּעציפיש עלעמענט נעמען.
• דערהייַנטיקן די אָדער tag ינער HTML לויט די עלעמענט באַשרייַבונג.

2. /* דערהייַנטיקן HTML באַשרייַבונג פעלדער */
3. פונקציע processTableDesc (req) {
4. אויב (!req.responseText) {
5. צוריקקומען;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // דערהייַנטיקן טיש באַשרייַבונג
9. $(“טאַבלעדעסק”). איננערהטמל = getJsonSpecElement(json_spec, “גרופּס”, “dhcp6_relay.config.vlan”).
10. }
11. /* דערהייַנטיקן HTML טיש פּאַראַמעטער באַשרייַבונג */
12. פונקציע פּראָצעסופּדאַטע (רעקוו_דזשסאָן) {
13. // דערהייַנטיקן טיש פּאַראַמעטער באַשרייַבונג
14. var param_names = [
15. {
16. "אַליאַס": "Interface",
17. "טיפּ": "vtss_ifindex_t",
18. "נאָמען": "וולאַן ינטערפאַסע",
19. "סאַפיקס": "."
20. },
21. {
22. "אַליאַס": "רעלע צובינד",
23. "טיפּ": "vtss_ifindex_t",
24. "נאָמען": "רילייוולאַן ינטערפאַסע",
25. "סאַפיקס": ". די שייַן פון די צובינד געניצט פֿאַר רילייינג.
26. },
27. {
28. "אַליאַס": "רעלע דעסטיניישאַן",
29. "טיפּ": "mesa_ipv6_t",
30. "נאָמען": "רעלע_דעסטיניישאַן",
31. "סאַפיקס": ". די IPv6 אַדרעס פון די DHCPv6 סערווער וואָס ריקוועס וועט זיין רילייד צו. די פעליקייַט ווערט 'ff05:: 1: 3' איז 'קיין DHCP סערווער'.
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* באַקומען JSON באַשרייַבונג */
37. window.addEvent ('דאָמרעאַדי', פֿונקציע () {
38. loadXMLDoc ("/ דזשסאָן_ספּעק", פּראַסעסטאַבלעדעסק);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

היפּער-לינק אין די מעניו באַר

• דער HTML מקור קאָד פון די מעניו באַר איז דזשענערייטאַד פֿון file webstax2\vtss_appl\web\ menu_default.cxx.
• רעדאַגירן די זאכן אין דעם file פֿאַר די Web בלאַט היפּער-לינק.

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\mirror\html\mirror.htm.
די web בלאַט גיט די דיטיילד קאַנפיגיעריישאַן פֿאַר אַ איין שפּיגל סעסיע. אַלע קאַנפיגיערד פּאַראַמעטערס זענען ליסטעד.

• דריקט "היט" קנעפּל צו צולייגן די קראַנט קאַנפיגיעריישאַן.
• דריקט "באַשטעטיק" קנעפּל צו באַשטעטיק די קראַנט קאַנפיגיעריישאַן.
• דריקט "באָטלירן" צו צוריקקומען צו די איבערבליקview פון שפּיגל סעשאַנז

שפּיגל&רמירער קאַנפיגיעריישאַן

גלאבאלע סעטטינגס

מקור וולאַן (s) קאַנפיגיעריישאַן

פּאָרט קאָנפיגוראַטיאָן

פיגורע 7. Exampדי דיטיילד קאַנפיגיעריישאַן פון שפּיגל סעסיע
די קנעפּלעך "היט", "באַשטעטיק" און "באָטלירן" זענען מוסיף דורך די HTML קאָד:

JSON באַפֿעלן לויפן
דער בלאַט ריקווייערז אַ צוויי-סטעפּ באַפֿעל לויפן:

• ערשטער עס דאַרף צו באַקומען די קייפּאַבילאַטיז פון די מיטל מיט דעם אופֿן "mirror.capabilities.get". די קייפּאַבילאַטיז טאָן ניט טוישן און איר מוזן נאָר לייענען אַמאָל.
• דערנאָך עס דאַרף צו באַקומען די קראַנט קאַנפיגיעריישאַן פון די מיטל מיט די מעטהאָדס "mirror.config.session.get", "port.status.get" און אין פאַל פון סטאַקינג "topo.config.stacking.get".

דער רוף פון "mirror.capabilities.get" איז ינישיייטיד דורך די "דאָמרעאַדי" געשעעניש און דער רעזולטאַט איז קאַנפיגיערד צו זיין כאַנדאַלד דורך די פונקציע requestUpdate.
די בעטןופּדאַטע וועט אָנהייבן דעם רוף פון "mirror.config.session.get",
"port.status.get" און אין פאַל פון סטאַקינג "topo.config.stacking.get" און די רעזולטאַטן פון די קאַללס זענען קאַנפיגיערד צו זיין כאַנדאַלד דורך די פונקציע פּרעפּאַרעופּדאַטע.
די פֿונקציע פּרעפּאַרעופּדאַטע וועט זאַמלען אַלע רעזולטאַטן, און בלויז ווען אַלע האָבן שוין באקומען, עס רופן די פֿונקציע פּראָצעסופּדאַטע וואָס וועט בויען די טישן צו זיין געוויזן אויף די web.

רעפערענצן

1. וויקיפעדיע דזשאַוואַסקריפּט https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

דאָקומענטן / רעסאָורסעס

מיקראָסעמי AN1256 Web פּראָגראַממער אַפּפּליקאַטיאָן [pdfבאַניצער גייד AN1256, AN1256 Web פּראָגראַממער אַפּפּליקאַטיאָן, Web פּראָגראַממער אַפּפּליקאַטיאָן, אַפּפּליקאַטיאָן

רעפערענצן

• באַניצער מאַנואַל