مایکروسیمي AN1256 Web د پروګرام کونکو غوښتنلیک
پیژندنه
JSON (جاواسکریپټ آبجیکٹ نوټیشن) یو خلاص معیار دی file هغه بڼه چې د معلوماتو تبادلې لپاره د انسان د لوستلو وړ متن کاروي. دا یو عام ډیټا فارمیټ دی چې د غیر متناسب براوزر/سرور اړیکو لپاره کارول کیږي.
د نوي لپاره web د پاڼې ډیزاین، د JSON بڼه کیدای شي د اصلي AJAX سټایل لپاره بدیل وي. د AJAX سره پرتله کول، د JSON په کارولو سره دا جوړوي Web تطبیق اسانه او ساده. پرمخ وړونکی یوازې تمرکز ته اړتیا لري web د پاڼې ډیزاین او Web د هینډلر پلي کول له مینځه وړل کیدی شي ځکه چې د JSON لاسرسي میتود دمخه په هر یو کې ملاتړ شوی Webد StaX سافټویر ماډلونه.
دا سند د سافټویر انجینر لپاره د برنامې لارښود بیانوي څوک چې اړتیا ته وده ورکوي Web پاڼه د JSON له لارې. د تفصیل طرزالعملونه او پخوانیamples په لاندې برخو کې هم شامل دي.
د JSON ډیټا لاسرسي جریان
اوورview
دلته د JSON ډیټا لاسرسي جریان دی چې د پیرودونکي (براوزر) څخه د HTTP پیوستون پیل شوی. د HTML جدول د سرور (DUT) اړخ څخه د ترلاسه شوي JOSN ډیټا سره سم په متحرک ډول رامینځته شوی.
انځور 1. د پیرودونکي او سرور ترمنځ د لاسرسي جریان
د JSON ډیټا غوښتنه / ځواب
د JSON غوښتنې کڅوړه د HTTP غوښتنې پوسټ میتود پراساس ده او مینځپانګه باید د MSCC JSON بڼه تعقیب کړي.
- د JSON ترکیب غوښتنه وکړئ:{"طريقه":" "، پارام":[ ]، "id:"jsonrpc"}
- ځواب JSON ترکیب: {"غلطي": "نتیجه": , "id:"jsonrpc"}
لاندې عکسونه د براوزر او DUT ترمینځ د JSON مینځپانګه ښیې.
انځور 2. د پیرودونکي څخه د HTTP غوښتنې سنیپ شاټ
انځور 3. د سرور څخه د HTTP ځواب سنیپ شاټ
د MSCC JSON توضیحات
د JSON بشپړ معلومات ترلاسه کولو لپاره چې میتود، پیرامیټر، توضیحات او نور پکې شامل دي. ټایپ کړئ "http:// /json_spec" ستاسو د براوزر په پته بار کې. د JSON میتود نوم "jsonRpc.status.introspection.specific.inventory.get" له لارې د لاسرسي بله طریقه شتون لري، دا د یوې ځانګړې میتود لپاره کارول کیږي.
انځور 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 تصفیه جدول
انځور 5. Exampد نړیوال ترتیب شوي جدول څخه
سمون Web پاڼه
د HTML سرلیک
د JS کتابتونونه شامل کړئ چې په HTML کې ورته اړتیا لري tag.
د متحرک میز سرچینې پیل کړئ
- کله چې د HTML سند چمتو وي، د متحرک میز سرچینې پیل کولو لپاره DynamicTable() ته زنګ ووهئ.
- DynamicTable() د JSON ډیټا ترلاسه کولو وروسته د متحرک میز جوړولو لپاره کارول کیږي.
- دا به بیا د JSON کمانډ جریان پیل کولو لپاره requestUpdate ته زنګ ووهي.
- window.addEvent('domready', function() {
- // د JSON ډیټا ترلاسه کولو / لیږدولو لپاره د جدول بدن سره یوه فورمه جوړه کړئ
- myDynamicTable = نوی DynamicTable("myTableContent","config","plusRowCtrlBar")؛
4 - requestUpdate();
- });
د JSON ډیټا غوښتنه / ځواب
- کله چې د HTML سند چمتو وي، د ترتیب شوي غونډو په اړه د معلوماتو ترلاسه کولو لپاره د JSON غوښتنه "mirror.config.session.get" لیږلو لپاره requestJsonDoc() وکاروئ.
- وروسته له دې چې د "mirror.capabilities.get" لپاره د JSON ډیټا ترلاسه شي ، د کال بیک فنکشن requestUpdate() به پروسس شي. د فعالیت غوښتنه تازه کول به بیا د اوسني تشکیلاتو ترلاسه کولو لپاره "mirror.config.session.get" ته زنګ ووهي. کله چې اوسنی ترتیب ترلاسه شي، د فعالیت پروسې اپډیټ د ښودلو میز جوړولو لپاره ویل کیږي.
- د فعالیت غوښتنه تازه ()
- {
- // د میز منځپانګې بیا رغول
- myDynamicTable.restore();
5 - // دا جدول دوه JSON ډاټا.
- requestJsonDoc("mirror.config.session.get", null, process Update, "config");
- }
ترلاسه شوي JSON ډیټا پروسس کړئ
- د فنکشن processUpdate() د JSON ډیټا ترلاسه کولو وروسته د متحرک میز ترتیب کولو لپاره کارول کیږي.
- addRows() د میز قطارونو اضافه کولو لپاره کارول کیږي. myDynamicTable.update() ترتیب
HTML جدول د جدول په قطارونو کې د معلوماتو له مخې.
- د فعالیت پروسې تازه کول (recv_json، نوم)
- {
- // پروسه له پامه غورځول که چیرې معلومات ترلاسه نشي
- که (!recv_json) {
- خبرتیا("متحرک ډاټا ترلاسه کول ناکام شوي.");
- راستنېدل
- }
- // ترلاسه شوي JSON ډاټا خوندي کړئ
- myDynamicTable.saveRecvJson("config", recv_json);
- // د میز قطارونه اضافه کړئ
- var table_rows = addRows(recv_json);
- myDynamicTable.addRows(table_rows);
- // دا متحرک میز تازه کړئ
- myDynamicTable.update();
- // ټایمر تازه کړئ
- var autorefresh = document.getElementById("autorefresh");
- که (autorefresh && autorefresh.checked) {
- که (timeerID) {
- پاک وخت ختم (timeerID)؛
- }
- timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
- }
- }
د میز قطارونه اضافه کړئ
- په 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 جدول به تولید کړي.
- فنکشن اضافه رو (کیلي، ویل)
- {
- var none_map_val = 0xFFFFFFFF, none_map_text = "هیڅ"، none_interface_text = "هیڅ نه"؛
- var tunnel_mode_suffix = val.TunnelMode == " useglobal" ? " (" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
- var قطار = {ساحې:[
- {ډول:"لینک"، پارام:["cr"، "mirror.htm؟session_id=" + کیلي، کیلي]}،
- {ډول:"متن"، پارامونه:[oTMode[oVMode.indexOf(val.Mode)]، "c"]}،
- {ډول:"متن"، پارامونه:[oTType[oVType.indexOf(val.Type)]، "c"]}،
- {ډول:"متن"، پارام:[val.Type == "عکس"؟ "-":
val.RMirrorVlan, "c"]}, - {ډول:"متن"، پارام:[val.Type == "rMirrorSource"؟
val. ReflectorPort : "-" , "c"]} - ]};
- بیرته ستنیدنه؛
- }
- فنکشن addRows(recv_json)
- {
- var قطار, empty_colspan = 7;
- var table_rows = نوی صف ();
- // د میز سرلیک اضافه کړئ
- addHeader(table_rows);
- // یو قطار اضافه کړئ
- Object.each(recv_json, function(record) {
- table_rows.push(addRow(record.key, record.val));
- });
- بیرته راستنیدنه
- }
Web مرسته پاڼه
د دې لپاره web د مرستې پاڼې ډیزاین، د مرستې توضیحات کولی شي د JSON توضیحاتو ته مراجعه وکړي، چې د توضیح متن د JSON محصول سره مطابقت لري او د بې ځایه توضیحاتو کمولو کې مرسته کوي. Example دلته د dhcp6 ریل ترتیب څخه اخیستل شوی.
په سرچینه کې هایپر لینک file
مرسته وټاکئ file په سرچینه کې موقعیت file HTML tag. ثابت متغیر نوم "help_page" د دې لپاره کارول کیږي web د مرستې پاڼې دنده.
- // د مرستې پاڼې جادو
- 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.
- /* د HTML تفصیل ساحې تازه کړئ */
- د فعالیت بهیر میز ډیسک(req) {
- که (!req.responseText) {
- راستنېدل
- }
- var json_spec = JSON.decode(req.responseText);
- // د میز تفصیل تازه کول
- $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan"). تفصیل;
- }
- /* د HTML جدول پیرامیټر توضیحات تازه کړئ */
- د فعالیت بهیر تازه (recv_json) {
- // د جدول پیرامیټر توضیحات تازه کړئ
- var param_names = [
- {
- "عرف": "انټرفیس"،
- "ډول": "vtss_ifindex_t",
- "نوم": "vlanInterface"،
- "لاحقه": "."
- },
- {
- "عرف": "ریلی انٹرفیس"،
- "ډول": "vtss_ifindex_t",
- "نوم": "relayVlanInterface"،
- "سیفکس": ". د انٹرفیس id د ریلینګ لپاره کارول کیږي.
- },
- {
- "عرف": "ریلی منزل"،
- "ډول": "mesa_ipv6_t",
- "نوم": "ریلی_منځته"،
- "سیفکس": ". د DHCPv6 سرور IPv6 پته چې غوښتنه یې کوي باید اړیکه ونیسي. ډیفالټ ارزښت 'ff05::1:3' مینز 'هر DHCP سرور'.
- }
- ];
- updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names)؛
- }
- /* د JSON توضیحات ترلاسه کړئ */
- window.addEvent('domready', function () {
- loadXMLDoc("/json_spec", processTableDesc)؛
- requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
- });
په مینو بار کې هایپر لینک
- د مینو بار HTML سرچینه کوډ له دې څخه رامینځته شوی file webstax2\vtss_appl\web\ menu_default.cxx.
- په دې کې توکي سم کړئ file لپاره Web پاڼه هایپر لینک.
- # که تعریف شوی وي (VTSS_SW_OPTION_DHCP6_RELAY)
- ITEM("Relay,dhcp6_relay.htm");
- #endif //VTSS_SW_OPTION_DHCP6_RELAY
نوټ
په یاد ولرئ چې په ITEM("") کې د ځای کریکټ شمیره ، کوم چې په مینو بار کې د ګروپ کچې پریکړه کولو لپاره کارول کیږي. په دې حالت کې، ټول web پاڼې د "DHCPv6" ګروپ لاندې دي.
شکل 6. پخوانیampد نړیوال ترتیب شوي جدول څخه
ضمیمه
عادي web پاڼې
څو عادي دي web پاڼې د حوالې ډیزاین لپاره کارول کیدی شي. یو اضافي پخوانیampدلته د ښودلو لپاره د یو واحد عکس سیشن ترتیب دی چې په vtss_appl\mirror\html\mirror.htm کې موندل شوی.
د web پاڼه د یوې شیشې ناستې لپاره تفصيلي ترتیب چمتو کوي. ټول ترتیب شوي پیرامیټونه لیست شوي دي.
- د اوسني تشکیلاتو پلي کولو لپاره "Save" تڼۍ کلیک وکړئ.
- د اوسني ترتیب بیا تنظیم کولو لپاره "ری سیٹ" تڼۍ کلیک وکړئ.
- اوور ته د راستنیدو لپاره "لغوه" کلیک وکړئview د عکس ناستې
د عکس او RMirror ترتیب
نړیوال ترتیبات
سرچینه VLAN(s) ترتیب
د پورټ ترتیب
انځور 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.
حوالې
- ويکيپېډيا جاوا سکرپٹ https://en.wikipedia.org/wiki/JavaScript
- JSON https://www.json.org/
- د سپوږمۍ وسایل https://mootools.net/
اسناد / سرچینې
![]() |
مایکروسیمي AN1256 Web د پروګرام کونکو غوښتنلیک [pdf] د کارونکي لارښود AN1256، AN1256 Web د پروګرامرانو غوښتنلیک، Web د پروګرام کونکو غوښتنلیک، غوښتنلیک |