माइक्रोसेमी AN1256 Web प्रोग्रामर आवेदन
परिचय
JSON (जाभास्क्रिप्ट वस्तु नोटेशन) एक खुला मानक हो file ढाँचा जसले डेटा आदानप्रदानको लागि मानव-पढ्न योग्य पाठ प्रयोग गर्दछ। यो एसिन्क्रोनस ब्राउजर/सर्भर संचारको लागि प्रयोग गरिने सामान्य डाटा ढाँचा हो।
नयाँ को लागी web पृष्ठ डिजाइन, JSON ढाँचा मूल AJAX शैलीको लागि प्रतिस्थापन हुन सक्छ। AJAX सँग तुलना गर्नुहोस्, JSON प्रयोग गरेर बनाउँछ Web कार्यान्वयन सजिलो र सरल। विकासकर्ताले मात्र ध्यान केन्द्रित गर्न आवश्यक छ web पृष्ठ डिजाइन र Web ह्यान्डलर कार्यान्वयनलाई हटाउन सकिन्छ किनकि JSON पहुँच विधि पहिले नै प्रत्येकमा समर्थित छ WebStaX सफ्टवेयर मोड्युलहरू।
यो कागजातले सफ्टवेयर इन्जिनियरको लागि प्रोग्रामर गाइडलाई बताउँछ जसले विकास गर्न आवश्यक छ Web JSON मार्फत पृष्ठ। विस्तृत प्रक्रिया र पूर्वamples पनि निम्न खण्डहरूमा समावेश छ।
JSON डेटा पहुँच प्रवाह
माथिview
यहाँ JSON डाटा पहुँच प्रवाह हो जुन क्लाइन्ट (ब्राउजर) बाट HTTP जडान प्रारम्भ गरिएको छ। HTML तालिका सर्भर (DUT) साइडबाट प्राप्त JOSN डाटा अनुसार गतिशील रूपमा सिर्जना गरिएको छ।
चित्र १। ग्राहक र सर्भर बीचको पहुँच प्रवाह
अनुरोध/प्रतिक्रिया JSON डेटा
JSON अनुरोध प्याकेट HTTP अनुरोध पोस्ट विधिमा आधारित छ र सामग्रीले MSCC JSON ढाँचा पालना गर्नुपर्छ।
- JSON वाक्य रचना अनुरोध गर्नुहोस्:{"विधि":" "," params ":[ ], "आईडी:"jsonrpc"}
- प्रतिक्रिया JSON वाक्य रचना: {"त्रुटि": "नतिजा": , "id:"jsonrpc"}
निम्न स्न्यापसटहरूले ब्राउजर र DUT बीचको JSON सामग्री देखाउँछन्।
चित्र १। ग्राहकबाट HTTP अनुरोधको स्न्यापसट
चित्र १। सर्भरबाट HTTP प्रतिक्रियाको स्न्यापसट
MSCC JSON विनिर्देश
विधि, प्यारामिटर, विवरण र आदि सहित पूर्ण JSON जानकारी प्राप्त गर्न "http://" टाइप गर्नुहोस्। /json_spec" तपाईको ब्राउजर ठेगाना पट्टीमा। JSON विधि नाम "jsonRpc.status.introspection.specific.inventory.get" मार्फत अर्को पहुँच विधि छ, यो एक विशेष विधिको लागि प्रयोग गरिन्छ।
चित्र १। 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 पृष्ठ डिजाइन
यो खण्ड कसरी डिजाइन गर्ने मार्गदर्शन गर्दछ web MSCC JavaScript पुस्तकालयहरूमा आधारित पृष्ठ। हामी मिरर ग्लोबल कन्फिगर प्रयोग गर्छौं web पूर्वको रूपमा पृष्ठampयहाँ ले। एसिन्क्रोनस संचार HTTP JSON पहुँच विधिमा आधारित छ र सबै विश्वव्यापी कन्फिगर गरिएका प्यारामिटरहरू एक गतिशील HTML तालिकामा सूचीबद्ध छन्।
द web पृष्ठ लेआउट तल सूचीबद्ध छ र पूर्ण स्रोत कोड स्रोत रूख डाइरेक्टरी अन्तर्गत स्थित छ: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm। थप सामान्य प्राप्त गर्न web पृष्ठ सन्दर्भ, परिशिष्ट खण्ड हेर्नुहोस्।
मिरर र आरमिरर कन्फिगरेसन तालिका
चित्र १। Exampवैश्विक कन्फिगर गरिएको तालिकाको le
सम्पादन गर्नुहोस् Web पृष्ठ
HTML हेडर
HTML मा आवश्यक JS पुस्तकालयहरू समावेश गर्नुहोस् tag.
गतिशील तालिका स्रोत प्रारम्भ गर्नुहोस्
- जब HTML कागजात तयार हुन्छ, डायनामिक टेबल रिसोर्स सुरु गर्न DynamicTable() लाई कल गर्नुहोस्।
- DynamicTable() JSON डाटा प्राप्त गरेपछि गतिशील तालिका सिर्जना गर्न प्रयोग गरिन्छ।
- त्यसपछि यसले JSON आदेश प्रवाह सुरु गर्न requestUpdate लाई कल गर्नेछ।
- window.addEvent('domready', function() {
- // JSON डाटा प्राप्त/प्रसारण गर्नको लागि तालिकाको मुख्य भागको साथ फारम सिर्जना गर्नुहोस्
- myDynamicTable = नयाँ DynamicTable("myTableContent", "config","plusRowCtrlBar");
4 - अनुरोध अपडेट ();
- });
अनुरोध/प्रतिक्रिया JSON डेटा
- जब HTML कागजात तयार हुन्छ, कन्फिगर गरिएका सत्रहरूको बारेमा जानकारी प्राप्त गर्न JSON अनुरोध "mirror.config.session.get" पठाउन requestJsonDoc() प्रयोग गर्नुहोस्।
- "mirror.capabilities.get" को लागि JSON डाटा प्राप्त भएपछि, कलब्याक प्रकार्य requestUpdate() लाई प्रशोधन गरिनेछ। प्रकार्य अनुरोधअपडेटले हालको कन्फिगरेसन प्राप्त गर्न "mirror.config.session.get" लाई कल गर्नेछ। जब हालको कन्फिगरेसन प्राप्त हुन्छ, देखाउनको लागि तालिका निर्माण गर्न प्रकार्य processUdate भनिन्छ।
- प्रकार्य अनुरोध अपडेट()
- {
- // तालिका सामग्री पुनर्स्थापना गर्नुहोस्
- myDynamicTable.restore();
5 - // यो तालिका दुई JSON डाटा।
- requestJsonDoc("mirror.config.session.get", null, processUpdate, "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("autorfresh");
- यदि (autorfresh && autorefresh.checked) {
- यदि (टाइमरआईडी) {
- क्लियरटाइमआउट(टाइमरआईडी);
- }
- timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
- }
- }
तालिका पङ्क्तिहरू थप्नुहोस्
- addRows() प्रकार्यमा, हामी तालिका पङ्क्तिमा प्रत्येक विश्वव्यापी कन्फिगर गरिएको प्यारामिटर भर्न JSON ढाँचा प्रयोग गर्छौं।
- सबै HTML फिल्डहरू JSON array ("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 तालिका आउटपुट गर्नेछ।
- प्रकार्य addRow (कुञ्जी, भ्याल)
- {
- var none_map_val = 0xFFFFFFFF, none_map_text = "None", none_interface_text = "NONE";
- var tunnel_mode_suffix = val.TunnelMode == "Useglobal" ? " (" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
- var पङ्क्ति = {क्षेत्रहरू:[
- {प्रकार:"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"]}, - {प्रकार:"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, प्रकार्य(रेकर्ड) {
- 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 तालिका विवरण घोषणा गर्न र को लागि एक अद्वितीय ID दिइएको छ tag.
- जब HTML कागजात तयार हुन्छ, loadXMLDoc() लाई सम्पूर्ण JSON विशिष्टता प्राप्त गर्न कल गर्नुहोस् वा JSON विधि नाम "jsonRpc.status.introspection.specific.inventory.get" द्वारा विशिष्ट विधि विवरण प्राप्त गर्नुहोस्।
- processTableDesc() तालिका विवरण अद्यावधिक गर्न प्रयोग गरिन्छ र तालिका प्यारामिटर विवरण अद्यावधिक गर्न processUpdate() प्रयोग गरिन्छ।
- processUpdate() मा, JSON तत्वहरू अपडेट गर्न updateTableParamsDesc() लाई कल गर्नुहोस् जुन विशिष्ट तत्व नामहरूसँग मेल खान्छ।
- अपडेट गर्नुहोस् वा tag तत्व विवरण अनुसार भित्री HTML।
- /* HTML विवरण फिल्डहरू अपडेट गर्नुहोस् */
- प्रकार्य प्रक्रियाटेबलडेस्क(अनुरोध) {
- यदि (!req.responseText) {
- फिर्ता;
- }
- var json_spec = JSON.decode(req.responseText);
- // तालिका विवरण अपडेट गर्नुहोस्
- $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "समूहहरू", "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' mans 'कुनै पनि 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("रिले,dhcp6_relay.htm");
- #endif //VTSS_SW_OPTION_DHCP6_RELAY
नोट
ध्यान दिनुहोस् कि ITEM("") मा स्पेस क्यारेक्टरको संख्या, जुन मेनु पट्टीमा समूह स्तर निर्धारण गर्न प्रयोग गरिन्छ। यस अवस्थामा, सबै web पृष्ठहरू "DHCPv6" समूह अन्तर्गत छन्।
चित्र ४ उदाampवैश्विक कन्फिगर गरिएको तालिकाको le
परिशिष्ट
सामान्य web पृष्ठहरू
त्यहाँ धेरै विशिष्ट छन् web पृष्ठहरू सन्दर्भ डिजाइनको लागि प्रयोग गर्न सकिन्छ। एक अतिरिक्त पूर्वampvtss_appl\mirror\html\mirror.htm मा पाइने एकल मिरर सत्रको कन्फिगरेसन यहाँ देखाइन्छ।
द web पृष्ठले एकल मिरर सत्रको लागि विस्तृत कन्फिगरेसन प्रदान गर्दछ। सबै कन्फिगर गरिएका प्यारामिटरहरू सूचीबद्ध छन्।
- हालको कन्फिगरेसन लागू गर्न "बचत गर्नुहोस्" बटन क्लिक गर्नुहोस्।
- हालको कन्फिगरेसन रिसेट गर्न "रिसेट" बटन क्लिक गर्नुहोस्।
- ओभरमा फर्कन "रद्द गर्नुहोस्" मा क्लिक गर्नुहोस्view मिरर सत्रहरूको
मिरर र आरमिरर कन्फिगरेसन
ग्लोबल सेटिङहरू
स्रोत VLAN(हरू) कन्फिगरेसन
पोर्ट कन्फिगरेसन
चित्र १। Exampमिरर सत्रको विस्तृत कन्फिगरेसनको le
बटनहरू "बचत गर्नुहोस्", "रिसेट गर्नुहोस्" र "रद्द गर्नुहोस्" 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" स्ट्याकिङको अवस्थामा र यी कलहरूको नतिजाहरू प्रकार्य readyUpdate द्वारा ह्यान्डल गर्न कन्फिगर गरिएको छ।
प्रकार्यको तयारीअपडेटले सबै नतिजाहरू सङ्कलन गर्नेछ, र सबै प्राप्त भइसकेपछि मात्र यसले कार्य प्रक्रिया अपडेटलाई कल गर्नेछ जसले तालिकाहरूमा देखाउनको लागि निर्माण गर्नेछ। web.
सन्दर्भहरू
- विकिपीडिया जाभास्क्रिप्ट https://en.wikipedia.org/wiki/JavaScript
- JSON https://www.json.org/
- मूनटुलहरू https://mootools.net/
कागजातहरू / स्रोतहरू
 |
माइक्रोसेमी AN1256 Web प्रोग्रामर आवेदन [pdf] प्रयोगकर्ता गाइड AN1256, AN1256 Web प्रोग्रामर आवेदन, Web प्रोग्रामर आवेदन, आवेदन |
