मायक्रोसेमी AN1256 Web प्रोग्रामर अनुप्रयोग
परिचय
JSON (JavaScript ऑब्जेक्ट नोटेशन) एक ओपन-स्टँडर्ड आहे 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”}
खालील स्नॅपशॉट्स ब्राउझर आणि DUT मधील JSON सामग्री दर्शवतात.
आकृती 2. क्लायंटकडून HTTP विनंतीचा स्नॅपशॉट
आकृती 3. सर्व्हरकडून HTTP प्रतिसादाचा स्नॅपशॉट
MSCC JSON तपशील
पद्धत, पॅरामीटर, वर्णन आणि इत्यादींसह संपूर्ण JSON माहिती मिळविण्यासाठी. “http:// टाइप करा. तुमच्या ब्राउझर अॅड्रेस बारवर /json_spec. "jsonRpc.status.introspection.specific.inventory.get" नावाच्या JSON पद्धतीद्वारे आणखी एक प्रवेश पद्धत आहे, ती विशिष्ट पद्धतीसाठी वापरली जाते.
आकृती 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 - डायनॅमिकली एचटीएमएल टेबल तयार करण्यासाठी वापरा.
- validate.js - HTML फॉर्मच्या प्रमाणीकरणासाठी वापरा.
संपूर्ण JavaScript लायब्ररी स्त्रोत वृक्ष निर्देशिकेखाली स्थित आहेत: 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 पृष्ठे संदर्भ, परिशिष्ट विभाग पहा.
मिरर आणि आरमिरर कॉन्फिक्रेशन टेबल
आकृती 5. Exampग्लोबल कॉन्फिगर केलेल्या टेबलचे le
संपादित करा Web पृष्ठ
HTML शीर्षलेख
HTML मध्ये आवश्यक असलेल्या JS लायब्ररींचा समावेश करा tag.
डायनॅमिक टेबल रिसोर्स सुरू करा
- HTML दस्तऐवज तयार झाल्यावर, डायनॅमिक टेबल रिसोर्स सुरू करण्यासाठी DynamicTable() ला कॉल करा.
- DynamicTable() चा वापर JSON डेटा मिळाल्यानंतर डायनॅमिक टेबल तयार करण्यासाठी केला जातो.
- त्यानंतर JSON कमांड फ्लो सुरू करण्यासाठी requestUpdate ला कॉल करेल.
- window.addEvent('domready', function() {
- // JSON डेटा प्राप्त/प्रेषित करण्यासाठी टेबल बॉडीसह एक फॉर्म तयार करा
- myDynamicTable = नवीन DynamicTable("myTableContent", "config","plusRowCtrlBar");
4 - requestUdate();
- });
JSON डेटाची विनंती/प्रतिसाद
- HTML दस्तऐवज तयार झाल्यावर, कॉन्फिगर केलेल्या सत्रांबद्दल माहिती मिळवण्यासाठी JSON विनंती “mirror.config.session.get” पाठवण्यासाठी requestJsonDoc() वापरा.
- “mirror.capabilities.get” साठी JSON डेटा प्राप्त झाल्यानंतर, कॉलबॅक फंक्शन requestUpdate() वर प्रक्रिया केली जाईल. रिक्वेस्टअपडेट फंक्शन नंतर वर्तमान कॉन्फिगरेशन मिळविण्यासाठी "mirror.config.session.get" वर कॉल करेल. जेव्हा वर्तमान कॉन्फिगरेशन प्राप्त होते, तेव्हा कार्यप्रक्रिया Update हे सारणी तयार करण्यासाठी कॉल केले जाते.
- कार्य विनंती अद्यतन()
- {
- // टेबल सामग्री पुनर्संचयित करा
- myDynamicTable.restore();
5 - // हे सारणी दोन JSON डेटा.
- requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
- }
प्राप्त JSON डेटावर प्रक्रिया करा
- JSON डेटा प्राप्त झाल्यानंतर डायनॅमिक टेबलचे लेआउट करण्यासाठी processUpdate() फंक्शन वापरले जाते.
- 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.checked) {
- जर (टाइमरआयडी) {
- clearTimeout(timerID);
- }
- timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
- }
- }
टेबल पंक्ती जोडा
- addRows() फंक्शनमध्ये, टेबल पंक्तीमधील प्रत्येक ग्लोबल कॉन्फिगर केलेले पॅरामीटर भरण्यासाठी आम्ही JSON फॉरमॅट वापरतो.
- सर्व एचटीएमएल फील्ड JSON अॅरे (“टेबल_रोज”) मध्ये सूचीबद्ध आहेत आणि टेबल फील्डचा सिंटॅक्स खाली आहे.
वाक्यरचना:
टेबल_पंक्ती:[ , , … ] : { , , … }
: {"प्रकार": , "परम":[ , , …, ]}
- या प्रकरणात, प्रत्येक पंक्तीमध्ये पाच फील्ड आहेत: “सत्र आयडी”, “मोड”, “प्रकार”, “व्हीएलएएन आयडी” आणि “रिफ्लेक्टर पोर्ट” माजीampले,
| सत्र आयडी (नाव फील्ड: int32_t) | 1 (मिरर सत्राचा आयडी) |
| मोड (नाव फील्ड: vtss_bool_t) | खरे (म्हणजे मिरर सत्र सक्षम आहे) |
| प्रकार (नाव फील्ड: गणन
{मिरर, rMirrorSource, rMirrorDestination} |
आरमिरर स्त्रोत (हे रिमोट मिरर सत्राचे स्त्रोत आहे |
| VLAN आयडी (नाव फील्ड: uint16_t) | 200 (मिररिंगसाठी वापरला जाणारा vlan) |
| रिफ्लेक्टर पोर्ट (नाव फील्ड: vtss_ifindex_t) | जी 1/1 (ज्या बंदरावर मिरर केलेली वाहतूक पाठविली जाते |
- myDynamicTable.addRows() JSON डेटा HTML फॉरमॅटमध्ये रूपांतरित करेल आणि HTML टेबल आउटपुट करेल.
- फंक्शन अॅडरो (की, व्हॅल)
- {
- var none_map_val = 0xFFFFFFFF, none_map_text = "काही नाही", none_interface_text = "NONE";
- var tunnel_mode_suffix = val.TunnelMode == “Useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
- var पंक्ती = {फील्ड:[
- {type:”link”, params:[“cr”, “mirror.htm?session_id=” + key, key]},
- {type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
- {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
- {type:"text", params:[val.Type == "मिरर" ? "-":
val.RMirrorVlan, “c”]}, - {type:"text", params:[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 आउटपुट सुसंगत असू शकते आणि अनावश्यक वर्णन कमी करण्यास मदत करते. उदाample येथे dhcp6 रिले कॉन्फिगरेशनमधून घेतले आहे.
स्त्रोतामध्ये हायपर-लिंक file
मदत नियुक्त करा file त्याच्या स्त्रोतामध्ये स्थान file HTML tag. साठी निश्चित व्हेरिएबल नाव “help_page” वापरले जाते web मदत पृष्ठ असाइनमेंट.
- // मदत पृष्ठ जादू
- var help_page = “/help/help_xxx.htm”;
JSON तपशीलावरून HTML फील्ड वर्णन अपडेट करा
- वापरा किंवा HTML tag HTML सारणीचे वर्णन घोषित करण्यासाठी आणि साठी एक अद्वितीय आयडी दिलेला आहे tag.
- HTML दस्तऐवज तयार झाल्यावर, संपूर्ण JSON तपशील मिळविण्यासाठी loadXMLDoc() ला कॉल करा किंवा JSON पद्धतीच्या नावाने "jsonRpc.status.introspection.specific.inventory.get" द्वारे विशिष्ट पद्धतीचे वर्णन मिळवा.
- processTableDesc() चा वापर टेबलचे वर्णन अपडेट करण्यासाठी केला जातो आणि processUpdate() चा वापर टेबल पॅरामीटर वर्णन अपडेट करण्यासाठी केला जातो.
- processUpdate() मध्ये, विशिष्ट घटकांच्या नावांशी जुळणारे JSON घटक अपडेट करण्यासाठी updateTableParamsDesc() वर कॉल करा.
- अद्यतनित करा किंवा tag घटक वर्णनानुसार अंतर्गत HTML.
- /* HTML वर्णन फील्ड अपडेट करा */
- फंक्शन processTableDesc(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",
- "प्रत्यय": ". रिले करण्यासाठी वापरलेल्या इंटरफेसचा आयडी.
- },
- {
- "उर्फ": "रिले गंतव्य",
- "प्रकार": "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);
- });
मेनू बारमध्ये हायपर-लिंक
- मेनूबारचा एचटीएमएल सोर्स कोड येथून तयार केला जातो file webstax2\vtss_appl\web\menu_default.cxx.
- यामध्ये आयटम संपादित करा file साठी Web पृष्ठ हायपर-लिंक.
- #जर परिभाषित केले असेल(VTSS_SW_OPTION_DHCP6_RELAY)
- ITEM("रिले,dhcp6_relay.htm");
- #endif //VTSS_SW_OPTION_DHCP6_RELAY
टीप
लक्षात घ्या की ITEM(“”) मधील स्पेस कॅरेक्टरची संख्या, जी मेनूबारमधील गट पातळी ठरवण्यासाठी वापरली जाते. या प्रकरणात, सर्व web पृष्ठे “DHCPv6” गटांतर्गत आहेत.
आकृती 6. उदाampग्लोबल कॉन्फिगर केलेल्या टेबलचे le
परिशिष्ट
ठराविक web पृष्ठे
अनेक वैशिष्ट्यपूर्ण आहेत web पृष्ठे संदर्भ डिझाइनसाठी वापरली जाऊ शकतात. एक अतिरिक्त माजीampvtss_appl\mirror\html\mirror.htm मध्ये आढळलेल्या सिंगल मिरर सेशनचे कॉन्फिगरेशन येथे दाखवायचे आहे.
द web पृष्ठ एकल मिरर सत्रासाठी तपशीलवार कॉन्फिगरेशन प्रदान करते. सर्व कॉन्फिगर केलेले पॅरामीटर्स सूचीबद्ध आहेत.
- वर्तमान कॉन्फिगरेशन लागू करण्यासाठी "जतन करा" बटणावर क्लिक करा.
- वर्तमान कॉन्फिगरेशन रीसेट करण्यासाठी "रीसेट" बटणावर क्लिक करा.
- षटकात परत येण्यासाठी "रद्द करा" वर क्लिक कराview मिरर सत्रांचे
मिरर आणि आरमिरर कॉन्फिगरेशन
जागतिक सेटिंग्ज
स्रोत VLAN कॉन्फिगरेशन
पोर्ट कॉन्फिगरेशन
आकृती 7. Exampमिरर सत्राचे तपशीलवार कॉन्फिगरेशन
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” स्टॅकिंगच्या बाबतीत आणि या कॉल्सचे निकाल या फंक्शनने हाताळण्यासाठी कॉन्फिगर केले आहेत.
फंक्शन readyUpdate सर्व परिणाम एकत्रित करेल आणि जेव्हा सर्व प्राप्त झाले असेल तेव्हाच ते फंक्शन processUpdate ला कॉल करेल जे वर दाखवण्यासाठी टेबल तयार करेल. web.
संदर्भ
- विकिपीडिया जावास्क्रिप्ट https://en.wikipedia.org/wiki/JavaScript
- JSON https://www.json.org/
- मून टूल्स https://mootools.net/
कागदपत्रे / संसाधने
 |
मायक्रोसेमी AN1256 Web प्रोग्रामर अनुप्रयोग [pdf] वापरकर्ता मार्गदर्शक AN1256, AN1256 Web प्रोग्रामर ऍप्लिकेशन, Web प्रोग्रामर ऍप्लिकेशन, ऍप्लिकेशन |
