Microsemi-LGOO

مایکروسیمي AN1256 Web د پروګرام کونکو غوښتنلیک

Microsemi-AN1256-Web-پروګرامر-اپلیکیشن-PRO

پیژندنه

JSON (جاواسکریپټ آبجیکٹ نوټیشن) یو خلاص معیار دی file هغه بڼه چې د معلوماتو تبادلې لپاره د انسان د لوستلو وړ متن کاروي. دا یو عام ډیټا فارمیټ دی چې د غیر متناسب براوزر/سرور اړیکو لپاره کارول کیږي.
د نوي لپاره web د پاڼې ډیزاین، د JSON بڼه کیدای شي د اصلي AJAX سټایل لپاره بدیل وي. د AJAX سره پرتله کول، د JSON په کارولو سره دا جوړوي Web تطبیق اسانه او ساده. پرمخ وړونکی یوازې تمرکز ته اړتیا لري web د پاڼې ډیزاین او Web د هینډلر پلي کول له مینځه وړل کیدی شي ځکه چې د JSON لاسرسي میتود دمخه په هر یو کې ملاتړ شوی Webد StaX سافټویر ماډلونه.
دا سند د سافټویر انجینر لپاره د برنامې لارښود بیانوي څوک چې اړتیا ته وده ورکوي Web پاڼه د JSON له لارې. د تفصیل طرزالعملونه او پخوانیamples په لاندې برخو کې هم شامل دي.

د JSON ډیټا لاسرسي جریان

اوورview
دلته د JSON ډیټا لاسرسي جریان دی چې د پیرودونکي (براوزر) څخه د HTTP پیوستون پیل شوی. د HTML جدول د سرور (DUT) اړخ څخه د ترلاسه شوي JOSN ډیټا سره سم په متحرک ډول رامینځته شوی.Microsemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 1

انځور 1. د پیرودونکي او سرور ترمنځ د لاسرسي جریان

د JSON ډیټا غوښتنه / ځواب
د JSON غوښتنې کڅوړه د HTTP غوښتنې پوسټ میتود پراساس ده او مینځپانګه باید د MSCC JSON بڼه تعقیب کړي.

  • د JSON ترکیب غوښتنه وکړئ:{"طريقه":" "، پارام":[ ]، "id:"jsonrpc"}
  • ځواب JSON ترکیب: {"غلطي": "نتیجه": , "id:"jsonrpc"}

لاندې عکسونه د براوزر او DUT ترمینځ د JSON مینځپانګه ښیې.Microsemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 2

انځور 2. د پیرودونکي څخه د HTTP غوښتنې سنیپ شاټMicrosemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 3

انځور 3. د سرور څخه د HTTP ځواب سنیپ شاټ

د MSCC JSON توضیحات
د JSON بشپړ معلومات ترلاسه کولو لپاره چې میتود، پیرامیټر، توضیحات او نور پکې شامل دي. ټایپ کړئ "http:// /json_spec" ستاسو د براوزر په پته بار کې. د JSON میتود نوم "jsonRpc.status.introspection.specific.inventory.get" له لارې د لاسرسي بله طریقه شتون لري، دا د یوې ځانګړې میتود لپاره کارول کیږي.Microsemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 4

انځور 4. د JSON ځانګړتیا سنیپ شاټ web پاڼه

Web چوکاټ

د Web چوکاټ کې Webد StaX سافټویر د خلاصې سرچینې MooTools پر بنسټ والړ دی. دا د MIT جواز سره د JavaScript اسانتیاوو ټولګه ده. ((http://mootools.net/license.txt) مینو بار او ډیری یې web پاڼې د چوکاټ پر بنسټ دي. دواړه AJAX او JSON الګوریتم لا دمخه په خپلو اسانتیاو کې مدغم شوي.
سربیره پردې، Webد StaX سافټویر نورې اسانتیاوې وړاندې کوي کوم چې د JSON لپاره ګټور دي web د پاڼې ډیزاین.

  • json.js – د JSON ترکیب سره متحرک ډیټا لیږدولو / ترلاسه کولو لپاره وکاروئ.
  • dynforms.js – په متحرک ډول د HTML جدول جوړولو لپاره وکاروئ.
  • validate.js – د HTML فارم تصدیق کولو لپاره وکاروئ.

د جاواسکریپټ بشپړ کتابتونونه د سرچینې ونې لارښود لاندې موقعیت لري: webstax2\ vtss_appl\web\html\lib.

د JSON لپاره لارښود Web د پاڼې ډیزاین

دا برخه د ډیزاین کولو څرنګوالی لارښوونه کوي web پاڼه د MSCC JavaScript کتابتونونو پر بنسټ. موږ د عکس نړیوال تنظیم شوی کاروو web پاڼه د پخواني په توګهampدلته. غیر متناسب ارتباط د HTTP JSON لاسرسي میتود پراساس دي او ټول نړیوال ترتیب شوي پیرامیټونه په یو متحرک HTML جدول کې لیست شوي.
د web د پاڼې ترتیب لاندې لیست شوی او د بشپړ سرچینې کوډ د سرچینې ونې لارښود لاندې موقعیت لري: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. د نور عادي ترلاسه کولو لپاره web د مخونو حواله، د ضمیمې برخه وګورئ.

د عکس او RMirror تصفیه جدولMicrosemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 5

انځور 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. requestUpdate();
  5. });

د JSON ډیټا غوښتنه / ځواب

  • کله چې د HTML سند چمتو وي، د ترتیب شوي غونډو په اړه د معلوماتو ترلاسه کولو لپاره د JSON غوښتنه "mirror.config.session.get" لیږلو لپاره requestJsonDoc() وکاروئ.
  • وروسته له دې چې د "mirror.capabilities.get" لپاره د JSON ډیټا ترلاسه شي ، د کال بیک فنکشن requestUpdate() به پروسس شي. د فعالیت غوښتنه تازه کول به بیا د اوسني تشکیلاتو ترلاسه کولو لپاره "mirror.config.session.get" ته زنګ ووهي. کله چې اوسنی ترتیب ترلاسه شي، د فعالیت پروسې اپډیټ د ښودلو میز جوړولو لپاره ویل کیږي.
  1. د فعالیت غوښتنه تازه ()
  2. {
  3. // د میز منځپانګې بیا رغول
  4. myDynamicTable.restore();
    5
  5. // دا جدول دوه JSON ډاټا.
  6. requestJsonDoc("mirror.config.session.get", null, process Update, "config");
  7. }

ترلاسه شوي JSON ډیټا پروسس کړئ

  • د فنکشن processUpdate() د JSON ډیټا ترلاسه کولو وروسته د متحرک میز ترتیب کولو لپاره کارول کیږي.
  • addRows() د میز قطارونو اضافه کولو لپاره کارول کیږي. myDynamicTable.update() ترتیب
    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);
  13. // دا متحرک میز تازه کړئ
  14. myDynamicTable.update();
  15. // ټایمر تازه کړئ
  16. var autorefresh = document.getElementById("autorefresh");
  17. که (autorefresh && autorefresh.checked) {
  18. که (timeerID) {
  19. پاک وخت ختم (timeerID)؛
  20. }
  21. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
  22. }
  23. }

د میز قطارونه اضافه کړئ

  • په addRows() فنکشن کې، موږ د جدول په قطار کې د هر نړیوال ترتیب شوي پیرامیټر ډکولو لپاره د JSON بڼه کاروو.
  • ټول HTML ساحې په JSON صف کې لیست شوي دي ("table_rows") او د جدول ساحې ترکیب لاندې دی.

نحو:
د میز_لاریون:[ , ,… ] : { , ,… }
: {"ډول": , "پارامونه":[ , , …, ]}

  • په دې حالت کې، هر قطار پنځه ساحې لري: "د ناستې ID"، "موضوع"، "ډول"، "VLAN ID" او "انعکاس پورټ" د مثال لپاره.ampلي
د غونډې ID (د نوم ساحه: int32_t) 1 (د عکس ناستې پیژندنه)
موډ (د نوم ساحه: vtss_bool_t) ریښتیا (مطلب د عکس سیشن فعال شوی دی)
ډول (د نوم ساحه: شمیرنه

{عکس، rMirrorSource، rMirrorDestination}

د RMirror سرچینه (دا د لیرې عکس ناستې سرچینه ده
د VLAN ID (د نوم ساحه: uint16_t) 200 (ویلان د عکس کولو لپاره کارول کیږي)
د انعکاس بندر (د نوم ساحه: vtss_ifindex_t) Gi 1/1 (هغه بندر چې عکس شوی ترافیک لیږل کیږي
  • myDynamicTable.addRows() به د JSON ډیټا په HTML شکل بدل کړي او د HTML جدول به تولید کړي.
  1. فنکشن اضافه رو (کیلي، ویل)
  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. {ډول:"لینک"، پارام:["cr"، "mirror.htm؟session_id=" + کیلي، کیلي]}،
  7. {ډول:"متن"، پارامونه:[oTMode[oVMode.indexOf(val.Mode)]، "c"]}،
  8. {ډول:"متن"، پارامونه:[oTType[oVType.indexOf(val.Type)]، "c"]}،
  9. {ډول:"متن"، پارام:[val.Type == "عکس"؟ "-":
    val.RMirrorVlan, "c"]},
  10. {ډول:"متن"، پارام:[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 محصول سره مطابقت لري او د بې ځایه توضیحاتو کمولو کې مرسته کوي. Example دلته د dhcp6 ریل ترتیب څخه اخیستل شوی.

په سرچینه کې هایپر لینک file
مرسته وټاکئ file په سرچینه کې موقعیت file HTML tag. ثابت متغیر نوم "help_page" د دې لپاره کارول کیږي web د مرستې پاڼې دنده.

  1. // د مرستې پاڼې جادو
  2. var help_page = "/help/help_xxx.htm";

د JSON توضیحاتو څخه د HTML ساحې توضیحات تازه کړئ

  • کارول یا HTML tag د HTML جدول توضیحات اعلانولو لپاره او د دې لپاره ځانګړی ID ورکړل شوی tag.
  • کله چې د HTML سند چمتو وي، د JSON ټول توضیحات ترلاسه کولو لپاره loadXMLDoc() ته زنګ ووهئ یا د JSON میتود نوم "jsonRpc.status.introspection.specific.inventory.get" لخوا د ځانګړي میتود توضیحات ترلاسه کړئ.
  • ProcessTableDesc() د جدول توضیح تازه کولو لپاره کارول کیږي او processUpdate() د میز پیرامیټر توضیح تازه کولو لپاره کارول کیږي.
  • په processUpdate() کې، د JSON عناصرو تازه کولو لپاره updateTableParamsDesc() ته زنګ ووهئ کوم چې د ځانګړي عنصر نومونو سره سمون لري.
  • تازه کړئ یا tag د عنصر توضیحاتو مطابق داخلي HTML.
  1. /* د HTML تفصیل ساحې تازه کړئ */
  2. د فعالیت بهیر میز ډیسک(req) {
  3. که (!req.responseText) {
  4. راستنېدل
  5. }
  6. var json_spec = JSON.decode(req.responseText);
  7. // د میز تفصیل تازه کول
  8. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan"). تفصیل;
  9. }
  10. /* د HTML جدول پیرامیټر توضیحات تازه کړئ */
  11. د فعالیت بهیر تازه (recv_json) {
  12. // د جدول پیرامیټر توضیحات تازه کړئ
  13. var param_names = [
  14. {
  15. "عرف": "انټرفیس"،
  16. "ډول": "vtss_ifindex_t",
  17. "نوم": "vlanInterface"،
  18. "لاحقه": "."
  19. },
  20. {
  21. "عرف": "ریلی انٹرفیس"،
  22. "ډول": "vtss_ifindex_t",
  23. "نوم": "relayVlanInterface"،
  24. "سیفکس": ". د انٹرفیس id د ریلینګ لپاره کارول کیږي.
  25. },
  26. {
  27. "عرف": "ریلی منزل"،
  28. "ډول": "mesa_ipv6_t",
  29. "نوم": "ریلی_منځته"،
  30. "سیفکس": ". د DHCPv6 سرور IPv6 پته چې غوښتنه یې کوي باید اړیکه ونیسي. ډیفالټ ارزښت 'ff05::1:3' مینز 'هر DHCP سرور'.
  31. }
  32. ];
  33. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names)؛
  34. }
  35. /* د JSON توضیحات ترلاسه کړئ */
  36. window.addEvent('domready', function () {
  37. loadXMLDoc("/json_spec", processTableDesc)؛
  38. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
  39. });

په مینو بار کې هایپر لینک

  • د مینو بار 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" ګروپ لاندې دي.Microsemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 6

شکل 6. پخوانیampد نړیوال ترتیب شوي جدول څخه

ضمیمه

عادي web پاڼې

څو عادي دي web پاڼې د حوالې ډیزاین لپاره کارول کیدی شي. یو اضافي پخوانیampدلته د ښودلو لپاره د یو واحد عکس سیشن ترتیب دی چې په vtss_appl\mirror\html\mirror.htm کې موندل شوی.
د web پاڼه د یوې شیشې ناستې لپاره تفصيلي ترتیب چمتو کوي. ټول ترتیب شوي پیرامیټونه لیست شوي دي.

  • د اوسني تشکیلاتو پلي کولو لپاره "Save" تڼۍ کلیک وکړئ.
  • د اوسني ترتیب بیا تنظیم کولو لپاره "ری سیٹ" تڼۍ کلیک وکړئ.
  • اوور ته د راستنیدو لپاره "لغوه" کلیک وکړئview د عکس ناستې
د عکس او RMirror ترتیب

نړیوال ترتیباتMicrosemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 7

سرچینه VLAN(s) ترتیبMicrosemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 8

د پورټ ترتیبMicrosemi-AN1256-Web-پروګرامر- غوښتنلیک- انځور 9

انځور 7. Exampد عکس سیشن تفصیلي ترتیب
تڼۍ "Save"، "Reset" او "Cancel" د html کوډ لخوا اضافه شوي دي:

د JSON کمانډ جریان
دا پاڼه دوه مرحلې کمانډ جریان ته اړتیا لري:

  • لومړی دا اړتیا لري چې د "mirror.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" د سټیک کولو په صورت کې او د دې زنګونو پایلې د دې لپاره تنظیم شوي چې د functionreadupdate لخوا اداره کیږي.
د فنکشن Preupdate به ټولې پایلې راټولې کړي، او یوازې کله چې ټول ترلاسه شوي وي دا به د فنکشن پروسس اپډیټ ته زنګ ووهي چې د ښودلو لپاره میزونه جوړ کړي. web.

حوالې

  1. ويکيپېډيا جاوا سکرپٹ https://en.wikipedia.org/wiki/JavaScript
  2. JSON https://www.json.org/
  3. د سپوږمۍ وسایل https://mootools.net/

اسناد / سرچینې

مایکروسیمي AN1256 Web د پروګرام کونکو غوښتنلیک [pdf] د کارونکي لارښود
AN1256، AN1256 Web د پروګرامرانو غوښتنلیک، Web د پروګرام کونکو غوښتنلیک، غوښتنلیک

حوالې

یو نظر پریږدئ

ستاسو بریښنالیک پته به خپره نشي. اړین ساحې په نښه شوي *