مائڪروسيمي AN1256 Web پروگرامر ايپليڪيشن

تعارف

JSON (JavaScript Object Notation) هڪ کليل معيار آهي file فارميٽ جيڪو ڊيٽا جي مٽاسٽا لاءِ انساني پڙهڻ لائق ٽيڪسٽ استعمال ڪري ٿو. اهو هڪ عام ڊيٽا فارميٽ آهي جيڪو غير مطابقت رکندڙ برائوزر/سرور ڪميونيڪيشن لاءِ استعمال ٿيندو آهي.
نئين لاءِ web صفحي جي ڊيزائن، JSON فارميٽ اصل AJAX انداز جي متبادل ٿي سگھي ٿي. AJAX سان ڀيٽ ڪريو، JSON استعمال ڪندي ٺاهي ٿو Web عمل آسان ۽ آسان. ڊولپر کي صرف ڌيان ڏيڻ جي ضرورت آهي web صفحي جي ڊيزائن ۽ Web هينڊلر تي عمل درآمد کي ختم ڪري سگهجي ٿو ڇو ته JSON رسائي جو طريقو اڳ ۾ ئي سپورٽ آهي هر هڪ ۾ WebStaX سافٽ ويئر ماڊلز.
هي دستاويز بيان ڪري ٿو پروگرامر گائيڊ سافٽ ويئر انجنيئر لاءِ جن کي ترقي ڪرڻ جي ضرورت آهي Web صفحو JSON ذريعي. تفصيلي طريقا ۽ اڳوڻيamples پڻ ھيٺين حصن ۾ شامل آھن.

JSON ڊيٽا جي رسائي جي وهڪري

مٿانview
ھتي آھي JSON ڊيٽا پھچڻ جو وهڪرو جيڪو HTTP ڪنيڪشن ڪلائنٽ (براؤزر) کان شروع ڪيو ويو آھي. HTML جدول متحرڪ طور تي سرور (DUT) پاسي کان حاصل ڪيل JOSN ڊيٽا جي مطابق ٺاھيو ويو آھي.

شڪل 1. ڪلائنٽ ۽ سرور جي وچ ۾ رسائي جي وهڪري

درخواست / جواب JSON ڊيٽا
JSON درخواست پيڪٽ HTTP درخواست پوسٽ جي طريقي تي ٻڌل آهي ۽ مواد کي MSCC JSON فارميٽ تي عمل ڪرڻو پوندو.

• درخواست JSON نحو:{"طريقو":" ”، پارامس“:[ ]، "id:"jsonrpc"}
• جواب JSON نحو: {"غلطي": "نتيجو": , "id:"jsonrpc"}

هيٺيون سنيپ شاٽ ڏيکاري ٿو JSON مواد برائوزر ۽ DUT جي وچ ۾.

شڪل 2. ڪلائنٽ کان HTTP درخواست جو سنيپ شاٽ

شڪل 3. سرور مان HTTP جواب جو سنيپ شاٽ

MSCC JSON وضاحت
مڪمل JSON معلومات حاصل ڪرڻ لاءِ جنهن ۾ طريقو، پيراميٽر، وضاحت ۽ وغيره ٽائپ ڪريو ”http:// /json_spec" توهان جي برائوزر ايڊريس بار تي. اتي هڪ ٻيو رسائي جو طريقو آهي JSON طريقي جي نالي سان "jsonRpc.status.introspection.specific.inventory.get"، اهو هڪ مخصوص طريقي لاء استعمال ڪيو ويندو آهي.

شڪل 4. JSON وضاحت جو سنيپ شاٽ web صفحو

Web فريم ورڪ

جي Web فريم ورڪ ۾ WebStaX سافٽ ويئر هڪ اوپن سورس MooTools تي ٻڌل آهي. اهو MIT لائسنس سان گڏ JavaScript يوٽيلٽيز جو مجموعو آهي. (http://mootools.net/license.txt) مينيو بار ۽ گھڻا web صفحا فريم ورڪ تي ٻڌل آهن. ٻئي AJAX ۽ JSON الگورتھم اڳ ۾ ئي ان جي افاديت ۾ ضم ٿيل آھن.
ان کان علاوه، WebStaX سافٽ ويئر مهيا ڪري ٿو ٻيون افاديت جيڪي JSON لاءِ ڪارآمد آهن web صفحي جي ڊيزائن.

• json.js - JSON نحو سان متحرڪ ڊيٽا منتقل ڪرڻ / وصول ڪرڻ لاءِ استعمال ڪريو.
• dynforms.js - متحرڪ طور تي HTML ٽيبل ٺاهڻ لاءِ استعمال ڪريو.
• validate.js - HTML فارم جي تصديق لاءِ استعمال ڪريو.

مڪمل JavaScript لائبريريون ماخذ وڻ ڊاريڪٽري هيٺ واقع آهن: webstax2\ vtss_appl\web\html\lib.

JSON لاءِ ھدايتون Web صفحي جي ڊيزائن

ھي سيڪشن ھدايت ڪري ٿو ته ڪيئن ٺاھيو a web صفحو MSCC JavaScript لائبريرين تي ٻڌل آهي. اسان استعمال ڪريون ٿا آئيني عالمي ترتيب ڏنل web صفحو جيئن اڳampهتي. هم وقت سازي ڪميونيڪيشن HTTP JSON جي رسائي جي طريقي تي ٻڌل آهي ۽ سڀئي عالمي ترتيب ڏنل پيٽرولر هڪ متحرڪ HTML ٽيبل ۾ درج ٿيل آهن.
جي web صفحي جي ترتيب ھيٺ ڏنل آھي ۽ مڪمل سورس ڪوڊ ماخذ وڻ ڊاريڪٽري جي ھيٺان واقع آھي: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. وڌيڪ عام حاصل ڪرڻ لاء web صفحن جو حوالو، ڏسو ضميمو سيڪشن.

آئيني ۽ آر ايمرر ٺاھڻ واري ٽيبل

شڪل 5. Exampعالمي ترتيب ڏنل جدول جو

ترميم ڪريو Web صفحو

HTML هيڊر
JS لائبريريون شامل ڪريو جيڪي HTML ۾ گهربل آھن tag.

متحرڪ ٽيبل وسيلن کي شروع ڪريو

• جڏهن HTML دستاويز تيار آهي، ڪال ڪريو DynamicTable() کي شروع ڪرڻ لاءِ ڊائنامڪ ٽيبل ريسورس.
• DynamicTable() JSON ڊيٽا حاصل ڪرڻ کان پوء متحرڪ ٽيبل ٺاهڻ لاء استعمال ڪيو ويندو آهي.
• ان کان پوءِ JSON ڪمانڊ فلو کي شروع ڪرڻ لاءِ requestUpdate کي سڏيندو.

1. window.addEvent('domready', function() {
2. // JSON ڊيٽا وصول ڪرڻ / منتقل ڪرڻ لاءِ ٽيبل باڊي سان فارم ٺاهيو
3. myDynamicTable = نئون DynamicTable ("myTableContent"، "config","plusRowCtrlBar")؛
   4
4. درخواست جي تازه ڪاري ()؛
5. })؛

درخواست / جواب JSON ڊيٽا

• جڏهن HTML دستاويز تيار آهي، استعمال ڪريو requestJsonDoc() JSON جي درخواست موڪلڻ لاءِ “mirror.config.session.get” ترتيب ڏنل سيشن بابت معلومات حاصل ڪرڻ لاءِ.
• "mirror.capabilities.get" لاءِ JSON ڊيٽا حاصل ٿيڻ کان پوءِ، ڪال بڪ فنڪشن requestUpdate() تي عمل ڪيو ويندو. فنڪشن RequestUpdate وري ڪال ڪندو "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() layout the
  HTML جدول جدول جي قطار ۾ ڊيٽا مطابق.

1. فنڪشن پروسيس اپڊيٽ (recv_json، نالو)
2. {
3. // عمل کي نظر انداز ڪريو جيڪڏھن ڪا ڊيٽا مليل نه آھي
4. جيڪڏهن (!recv_json) {
5. خبردار ("متحرڪ ڊيٽا حاصل ڪريو ناڪام.")؛
6. واپسي؛
7. }
8. // حاصل ڪيل JSON ڊيٽا محفوظ ڪريو
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // ٽيبل جون قطارون شامل ڪريو
11. var table_rows = addRows(recv_json)؛
12. myDynamicTable.addRows(table_rows)؛
14. // ھن متحرڪ جدول کي اپڊيٽ ڪريو
15. myDynamicTable.update();
17. // ريفريش ٽائمر
18. var autorefresh = document.getElementById("autorefresh")؛
19. جيڪڏھن (autorefresh && autorefresh.checked) {
20. جيڪڏهن (timerID) {
21. صاف وقت ختم (timeerID)؛
22. }
23. timerID = setTimeout('requestUpdate()'، settingsRefreshInterval())؛
24. }
25. }

ٽيبل جون قطارون شامل ڪريو

• addRows() فنڪشن ۾، اسان JSON فارميٽ استعمال ڪريون ٿا جدول جي قطار ۾ هر عالمي ترتيب ڏنل پيٽرول کي ڀرڻ لاءِ.
• سڀئي HTML فيلڊز JSON صف ۾ درج ٿيل آھن (“table_rows”) ۽ ٽيبل فيلڊ جي نحو ھيٺ ڏنل آھي.

نحو:
ٽيبل_قطار:[ , ،… ] : { , ،… }
: {"قسم": , "پيرام":[ , ،…، ]}

• انهي صورت ۾، هر قطار ۾ پنج شعبا آهن: "سيشن ID"، "موڊ"، "قسم"، "VLAN ID" ۽ "ريفلڪٽر پورٽ" اڳوڻي لاءampلي،

سيشن ID (نالو فيلڊ: int32_t)	1 (عڪس جي سيشن جي سڃاڻپ)
موڊ (نالو فيلڊ: vtss_bool_t)	سچو (مطلب آئيني سيشن فعال آهي)
قسم (نالو فيلڊ: ڳڻپ {عڪس، مثنويءَ جو ماخذ، آئيني منزل}	RMirror ذريعو (هي ريموٽ آئيني سيشن جو ذريعو آهي
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 = "NONE"؛
4. var tunnel_mode_suffix = val.TunnelMode == "استعمال گلوبل"؟ "(" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : ""؛
5. var قطار = { فيلڊ:[
6. {قسم:"لنڪ"، پارمس:["cr"، "mirror.htm?session_id=" + key، key]},
7. {قسم:"text"، params:[oTMode[oVMode.indexOf(val.Mode)]، "c"]}،
8. {قسم:"text"، params:[oTType[oVType.indexOf(val.Type)]، "c"]}،
9. {قسم:"ٽيڪسٽ"، پارمس:[val.Type == "عڪس"؟ "-":
   val.RMirrorVlan, “c”]},
10. {قسم:"text"، params:[val.Type == "rMirrorSource"؟
    val.ReflectorPort : "-"، "c"]}
11. ]}؛
12. واپسي قطار؛
13. }
14. فنڪشن addRows(recv_json)
15. {
16. var قطار، empty_colspan = 7؛
17. var table_rows = نئين سري ()؛
18. // ٽيبل هيڊر شامل ڪريو
19. addHeader(table_rows)؛
20. // ھڪڙي قطار شامل ڪريو
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key، record.val))؛
23. })؛
24. واپسي ٽيبل_ قطارون؛
25. }

Web مدد صفحو
لاءِ web مدد صفحي جي ڊيزائن، مدد جي وضاحت JSON وضاحت جو حوالو ڏئي سگھي ٿو، ته وضاحت جو متن JSON آئوٽ سان مطابقت رکي سگھي ٿو ۽ غير ضروري وضاحتن کي گھٽائڻ ۾ مدد ڪري ٿي. مثالample هتي dhcp6 رلي ترتيب مان ورتو ويو آهي.

ماخذ ۾ هائپر لنڪ file
مدد مقرر ڪريو file ان جي ماخذ ۾ مقام file HTML tag. مقرر ٿيل متغير جو نالو "help_page" لاء استعمال ڪيو ويو آهي web مدد صفحي جي تفويض.

2. // مدد صفحو جادو
3. var help_page = "/help/help_xxx.htm"؛

تازه ڪاري ڪريو HTML فيلڊ جي وضاحت JSON وضاحتن کان

• استعمال ڪريو يا HTML tag HTML جدول جي وضاحت جو اعلان ڪرڻ ۽ لاءِ هڪ منفرد ID ڏني وئي tag.
• جڏهن HTML دستاويز تيار آهي، loadXMLDoc() کي ڪال ڪريو پوري JSON وضاحت حاصل ڪرڻ لاءِ يا JSON طريقي جي نالي سان مخصوص طريقي جي وضاحت حاصل ڪريو “jsonRpc.status.introspection.specific.inventory.get”.
• ProcessTableDesc() ٽيبل وضاحت کي اپڊيٽ ڪرڻ لاءِ استعمال ڪيو ويندو آهي ۽ پروسيس اپ ڊيٽ () ٽيبل پيٽرولر جي تفصيل کي اپڊيٽ ڪرڻ لاءِ استعمال ڪيو ويندو آهي.
• پروسيس اپ ڊيٽ () ۾، JSON عناصر کي اپڊيٽ ڪرڻ لاء updateTableParamsDesc() ڪال ڪريو جيڪي مخصوص عنصر جي نالن سان ملن ٿا.
• اپڊيٽ ڪريو يا tag اندروني HTML عنصر جي وضاحت مطابق.

2. /* تازه ڪاري HTML وضاحت جا شعبا */
3. فنڪشن پروسيس ٽيبل ڊيسڪ (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. /* HTML جدول جي پيٽرول جي وضاحت کي اپڊيٽ ڪريو */
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. "لاحق": ". انٽرفيس جو id استعمال ڪيو ويو رلينگ لاءِ.
26. },
27. {
28. "عرف": "رلي منزل",
29. "قسم": "mesa_ipv6_t",
30. “نالو”: “relay_destination”,
31. "لاحق": ". DHCPv6 سرور جو IPv6 ايڊريس جنهن کي درخواستون ڏنيون وينديون. ڊفالٽ قدر 'ff05::1:3' mans 'ڪو به DHCP سرور'.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names)؛
35. }
36. /* 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. })؛

مينيو بار ۾ هائپر لنڪ

• مينيو بار جو HTML سورس ڪوڊ ٺاھيو ويو آھي مان file webstax2\vtss_appl\web\ menu_default.cxx.
• ھن ۾ شيون تبديل ڪريو file لاءِ Web صفحو هائپر لنڪ.

1. #جيڪڏهن وضاحت ڪئي وئي (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("رلي،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 آئيني سيشن جو

آئيني ۽ آر ايمرر ترتيب

گلوبل سيٽنگون

ماخذ VLAN(s) ترتيب

پورٽ جي ٺاھ جوڙ

شڪل 7. Exampآئيني سيشن جي تفصيلي تشڪيل
بٽڻ "محفوظ ڪريو"، "ري سيٽ ڪريو" ۽ "منسوخ ڪريو" html ڪوڊ پاران شامل ڪيا ويا آھن:

JSON حڪم وهڪري
هن صفحي کي ٻه قدم حڪم جي وهڪري جي ضرورت آهي:

• پهرين ان کي "mirror.capabilities.get" جي طريقي سان ڊوائيس جي صلاحيت حاصل ڪرڻ جي ضرورت آهي. صلاحيتون تبديل نه ٿينديون آهن ۽ صرف هڪ ڀيرو پڙهڻ جي ضرورت آهي.
• پوء ان کي "mirror.config.session.get"، "port.status.get" ۽ "topo.config.stacking.get" کي اسٽيڪ ڪرڻ جي صورت ۾ طريقن کي استعمال ڪندي ڊوائيس جي موجوده تشڪيل حاصل ڪرڻ جي ضرورت آهي.

"mirror.capabilities.get" جي ڪال "domready" واقعي جي ذريعي شروع ڪئي وئي آهي ۽ نتيجو ترتيب ڏنل آهي ترتيب ڏنل فنڪشن جي درخواست جي تازه ڪاري سان.
RequestUpdate "mirror.config.session.get" جي ڪال کي شروع ڪندي،
"port.status.get" ۽ اسٽيڪ ڪرڻ جي صورت ۾ "topo.config.stacking.get" ۽ انهن ڪالن جا نتيجا ترتيب ڏنل آهن ترتيب ڏنل فنڪشن جي ترتيب سان ترتيب ڏيڻ لاءِ.
فنڪشن تيار ڪرڻ اپ ڊيٽ سڀني نتيجن کي گڏ ڪندو، ۽ صرف جڏهن سڀ حاصل ڪيا ويندا، اهو فنڪشن پروسيس اپ ڊيٽ کي سڏيندو، جيڪو ٽيبل تي ڏيکاريو ويندو. web.

حوالو

1. Wikipedia JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. چنڊ جا اوزار https://mootools.net/

دستاويز / وسيلا

مائڪروسيمي AN1256 Web پروگرامر ايپليڪيشن [pdf] استعمال ڪندڙ ھدايت اي اين 1256، اي اين 1256 Web پروگرامر ايپليڪيشن، Web پروگرامر جي درخواست، درخواست

حوالو

• استعمال ڪندڙ دستي