माइक्रोसेमी AN1256 Web प्रोग्रामर आवेदन

परिचय

JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) एक खुला मानक है file प्रारूप जो डेटा के आदान-प्रदान के लिए मानव-पठनीय पाठ का उपयोग करता है। यह एसिंक्रोनस ब्राउज़र/सर्वर संचार के लिए उपयोग किया जाने वाला एक सामान्य डेटा प्रारूप है।
नये के लिए web पेज डिज़ाइन में, JSON फ़ॉर्मेट मूल AJAX स्टाइल का प्रतिस्थापन हो सकता है। AJAX की तुलना में, JSON का उपयोग करना Web कार्यान्वयन आसान और सरल है। डेवलपर को केवल इस पर ध्यान केंद्रित करने की आवश्यकता है web पेज डिजाइन और Web हैंडलर कार्यान्वयन को छोड़ा जा सकता है क्योंकि JSON एक्सेस विधि पहले से ही प्रत्येक में समर्थित है WebStaX सॉफ्टवेयर मॉड्यूल.
यह दस्तावेज़ सॉफ्टवेयर इंजीनियर के लिए प्रोग्रामर गाइड बताता है, जिसे विकसित करने की आवश्यकता है Web JSON के माध्यम से पेज। विस्तृत प्रक्रियाएँ और उदाहरणampनिम्नलिखित अनुभागों में भी शामिल हैं।

JSON डेटा एक्सेस प्रवाह

ऊपरview
यहाँ JSON डेटा एक्सेस फ़्लो है जिसे क्लाइंट (ब्राउज़र) से HTTP कनेक्शन शुरू किया जाता है। HTML टेबल सर्वर (DUT) की ओर से प्राप्त JOSN डेटा के अनुसार गतिशील रूप से बनाई जाती है।

चित्र 1. क्लाइंट और सर्वर के बीच पहुँच प्रवाह

अनुरोध/प्रतिक्रिया JSON डेटा
JSON अनुरोध पैकेट HTTP अनुरोध पोस्ट विधि पर आधारित है और सामग्री को MSCC JSON प्रारूप का पालन करना होगा।

• अनुरोध JSON सिंटैक्स:{"तरीका":" ”,”पैरामीटर”:[ ], “आईडी:”jsonrpc”}
• प्रतिक्रिया JSON सिंटैक्स: {"गलती": ,"परिणाम": , “आईडी:”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 ढांचे में WebStaX सॉफ्टवेयर ओपन सोर्स MooTools पर आधारित है। यह MIT लाइसेंस के साथ जावास्क्रिप्ट उपयोगिताओं का एक संग्रह है। (http://mootools.net/license.txt) मेनू बार और अधिकांश web पेज फ्रेमवर्क पर आधारित हैं। AJAX और JSON एल्गोरिदम दोनों पहले से ही इसकी उपयोगिताओं में एकीकृत हैं।
अलावा, WebStaX सॉफ्टवेयर अन्य उपयोगिताएँ प्रदान करता है जो JSON के लिए उपयोगी हैं web पृष्ठ डिजाइन.

• json.js – JSON सिंटैक्स के साथ गतिशील डेटा प्रेषित/प्राप्त करने के लिए for का उपयोग करें।
• dynforms.js – HTML तालिका को गतिशील रूप से बनाने के लिए उपयोग करें।
• वैलिडेट.जेएस – HTML फॉर्म के सत्यापन के लिए उपयोग करें.

संपूर्ण जावास्क्रिप्ट लाइब्रेरीज़ स्रोत वृक्ष निर्देशिका के अंतर्गत स्थित हैं: webstax2\ vtss_appl\web\html\लिब.

JSON के लिए दिशानिर्देश Web पेज डिजाइन

यह अनुभाग बताता है कि कैसे डिज़ाइन किया जाए web MSCC जावास्क्रिप्ट लाइब्रेरी पर आधारित पेज। हम मिरर ग्लोबल कॉन्फ़िगर का उपयोग करते हैं web पृष्ठ को भूतपूर्व के रूप मेंampयहाँ ले जाएँ। एसिंक्रोनस संचार HTTP JSON एक्सेस विधि पर आधारित हैं और सभी वैश्विक कॉन्फ़िगर किए गए पैरामीटर एक गतिशील HTML तालिका में सूचीबद्ध हैं।
द web पृष्ठ लेआउट नीचे सूचीबद्ध है और पूर्ण स्रोत कोड स्रोत वृक्ष निर्देशिका के अंतर्गत स्थित है: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. अधिक विशिष्ट पाने के लिए web पृष्ठों के संदर्भ के लिए, परिशिष्ट अनुभाग देखें।

मिरर& आरमिरर कॉन्फ़िगरेशन तालिका

चित्र 5. Exampवैश्विक कॉन्फ़िगर की गई तालिका का ले

संपादन करना Web पेज

HTML हेडर
HTML में आवश्यक JS लाइब्रेरीज़ को शामिल करें tag.

गतिशील तालिका संसाधन आरंभ करें

• जब HTML दस्तावेज़ तैयार हो जाए, तो डायनामिक तालिका संसाधन को आरंभ करने के लिए DynamicTable() को कॉल करें।
• JSON डेटा प्राप्त करने के बाद डायनामिक तालिका बनाने के लिए DynamicTable() का उपयोग किया जाता है।
• इसके बाद यह JSON कमांड प्रवाह आरंभ करने के लिए requestUpdate को कॉल करेगा।

1. window.addEvent('domready', फ़ंक्शन() {
2. // JSON डेटा प्राप्त/प्रेषित करने के लिए टेबल बॉडी के साथ एक फॉर्म बनाएं
3. myDynamicTable = नया डायनामिकटेबल ("myTableContent", "कॉन्फ़िगरेशन", "plusRowCtrlBar");
   4
4. अनुरोध अद्यतन();
5. });

अनुरोध/प्रतिक्रिया JSON डेटा

• जब HTML दस्तावेज़ तैयार हो जाए, तो कॉन्फ़िगर किए गए सत्रों के बारे में जानकारी प्राप्त करने के लिए JSON अनुरोध “mirror.config.session.get” भेजने के लिए requestJsonDoc() का उपयोग करें।
• “mirror.capabilities.get” के लिए JSON डेटा प्राप्त होने के बाद, कॉलबैक फ़ंक्शन requestUpdate() को प्रोसेस किया जाएगा। फ़ंक्शन requestUpdate तब वर्तमान कॉन्फ़िगरेशन प्राप्त करने के लिए “mirror.config.session.get” को कॉल करेगा। जब वर्तमान कॉन्फ़िगरेशन प्राप्त होता है, तो दिखाए जाने वाले टेबल को बनाने के लिए फ़ंक्शन processUpdate को कॉल किया जाता है।

1. फ़ंक्शन अनुरोध अपडेट()
2. {
3. // तालिका सामग्री पुनर्स्थापित करें
4. मायडायनामिकटेबल.रिस्टोर();
   5
5. // यह तालिका दो JSON डेटा है.
6. requestJsonDoc(“mirror.config.session.get”, शून्य, प्रक्रिया अद्यतन, “कॉन्फ़िगरेशन”);
7. }

प्राप्त JSON डेटा को संसाधित करें

• JSON डेटा प्राप्त करने के बाद डायनामिक तालिका को लेआउट करने के लिए प्रोसेसअपडेट() फ़ंक्शन का उपयोग किया जाता है।
• addRows() का उपयोग तालिका पंक्तियों को जोड़ने के लिए किया जाता है। myDynamicTable.update() लेआउट
  तालिका पंक्तियों में डेटा के अनुसार HTML तालिका।

1. फ़ंक्शन प्रोसेस अपडेट (recv_json, नाम)
2. {
3. // यदि कोई डेटा प्राप्त नहीं होता है तो प्रक्रिया को अनदेखा करें
4. अगर (!recv_json) {
5. चेतावनी("गतिशील डेटा प्राप्त करना विफल हुआ।");
6. वापस करना;
7. }
8. // प्राप्त JSON डेटा को सहेजें
9. myDynamicTable.saveRecvJson(“कॉन्फ़िगरेशन”, recv_json);
10. // तालिका पंक्तियाँ जोड़ें
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(तालिका_पंक्तियाँ);
14. // इस गतिशील तालिका को अद्यतन करें
15. मायडायनामिकटेबल.अपडेट();
17. // रिफ्रेश टाइमर
18. var ऑटोरिफ्रेश = document.getElementById("ऑटोरिफ्रेश");
19. यदि (ऑटोरिफ्रेश और ऑटोरिफ्रेश.चेक्ड) {
20. अगर (टाइमरआईडी) {
21. क्लियरटाइमआउट(टाइमरआईडी);
22. }
23. टाइमरआईडी = सेटटाइमआउट('रिक्वेस्टअपडेट()', सेटिंग्सरिफ्रेशइंटरवल());
24. }
25. }

तालिका पंक्तियाँ जोड़ें

• addRows() फ़ंक्शन में, हम तालिका पंक्ति में प्रत्येक वैश्विक कॉन्फ़िगर किए गए पैरामीटर को भरने के लिए JSON प्रारूप का उपयोग करते हैं।
• सभी HTML फ़ील्ड JSON सरणी (“table_rows”) में सूचीबद्ध हैं और तालिका फ़ील्ड का सिंटैक्स नीचे दिया गया है।

वाक्यविन्यास:
तालिका_पंक्तियाँ:[ , , … ] : { , , … }
: {"प्रकार": , “पैरामीटर”:[ , , …, ]}

• इस मामले में, प्रत्येक पंक्ति में पाँच फ़ील्ड हैं: "सत्र आईडी", "मोड", "प्रकार", "वीएलएएन आईडी" और "रिफ्लेक्टर पोर्ट" उदाहरण के लिएampले,

सत्र आईडी (नाम फ़ील्ड: int32_t)	1 (मिरर सत्र की आईडी)
तरीका (नाम फ़ील्ड: vtss_bool_t)	सत्य (अर्थात् मिरर सत्र सक्षम है)
प्रकार (नाम फ़ील्ड: गणना {मिरर, आरमिररसोर्स, आरमिररडेस्टिनेशन}	आरमिरर स्रोत (यह रिमोट मिरर सत्र का स्रोत है
वीएलएएन आईडी (नाम फ़ील्ड: uint16_t)	200 (मिररिंग के लिए प्रयुक्त vlan)
रिफ्लेक्टर पोर्ट (नाम फ़ील्ड: 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 = “कोई नहीं”;
4. vartunnel_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, “सी”]},
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(तालिका_पंक्तियाँ);
20. // एकल पंक्ति जोड़ें
21. ऑब्जेक्ट.प्रत्येक(recv_json, फ़ंक्शन(रिकॉर्ड) {
22. तालिका_पंक्तियाँ.push(addRow(रिकॉर्ड.कुंजी, रिकॉर्ड.वैल));
23. });
24. तालिका_पंक्तियाँ लौटाएँ;
25. }

Web सहायता पृष्ठ
के लिए web सहायता पृष्ठ डिज़ाइन में, सहायता विवरण JSON विनिर्देश को संदर्भित कर सकता है, जिससे विवरण पाठ JSON आउटपुट के साथ सुसंगत हो सकता है और अनावश्यक विवरणों को कम करने में मदद मिलती है। उदाहरणampयहाँ दिया गया चित्र dhcp6 रिले कॉन्फ़िगरेशन से लिया गया है।

स्रोत में हाइपर-लिंक file
सहायता असाइन करें file इसके स्रोत में स्थान file एचटीएमएल tag. निश्चित चर नाम “help_page” का उपयोग इसके लिए किया जाता है web सहायता पृष्ठ असाइनमेंट.

2. // सहायता पृष्ठ जादू
3. var help_page = “/help/help_xxx.htm”;

JSON विनिर्देश से HTML फ़ील्ड विवरण अपडेट करें

• उपयोग या एचटीएमएल tag HTML तालिका विवरण घोषित करने और उसके लिए एक विशिष्ट आईडी देने के लिए tag.
• जब HTML दस्तावेज़ तैयार हो जाए, तो संपूर्ण JSON विनिर्देश प्राप्त करने के लिए loadXMLDoc() को कॉल करें या JSON विधि नाम “jsonRpc.status.introspection.specific.inventory.get” द्वारा विशिष्ट विधि विवरण प्राप्त करें।
• processTableDesc() का उपयोग तालिका विवरण को अद्यतन करने के लिए किया जाता है और processUpdate() का उपयोग तालिका पैरामीटर विवरण को अद्यतन करने के लिए किया जाता है।
• processUpdate() में, विशिष्ट तत्व नामों से मेल खाने वाले JSON तत्वों को अद्यतन करने के लिए updateTableParamsDesc() को कॉल करें।
• अपडेट करें या tag तत्व विवरण के अनुसार आंतरिक HTML.

2. /* HTML विवरण फ़ील्ड अपडेट करें */
3. फ़ंक्शन प्रोसेसटेबलडिस्क(आवश्यकता) {
4. यदि (!req.responseText) {
5. वापस करना;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // तालिका विवरण अपडेट करें
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* HTML तालिका पैरामीटर विवरण अद्यतन करें */
12. फ़ंक्शन प्रोसेस अपडेट(recv_json) {
13. // तालिका पैरामीटर विवरण अपडेट करें
14. var पैरा_नाम = [
15. {
16. “उपनाम”: “इंटरफ़ेस”,
17. “प्रकार”: “vtss_ifindex_t”,
18. “नाम”: “vlanइंटरफ़ेस”,
19. “प्रत्यय”: “.”
20. },
21. {
22. “उपनाम”: “रिले इंटरफ़ेस”,
23. “प्रकार”: “vtss_ifindex_t”,
24. “नाम”: “रिलेवलानइंटरफ़ेस”,
25. “प्रत्यय”: “. रिलेइंग के लिए उपयोग किए जाने वाले इंटरफ़ेस की आईडी।”
26. },
27. {
28. “उपनाम”: “रिले गंतव्य”,
29. “प्रकार”: “mesa_ipv6_t”,
30. “नाम”: “रिले_गंतव्य”,
31. “प्रत्यय”: “. जिस DHCPv6 सर्वर से अनुरोध किया जाता है उसका IPv6 पता रिले किया जाएगा। डिफ़ॉल्ट मान 'ff05::1:3' का अर्थ है 'कोई भी DHCP सर्वर'।”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* JSON विनिर्देश प्राप्त करें */
37. window.addEvent('domready', फ़ंक्शन () {
38. loadXMLDoc(“/json_spec”, प्रोसेसटेबलडिस्क);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

मेनू बार में हाइपर-लिंक

• मेनू बार का HTML स्रोत कोड निम्न से उत्पन्न होता है file webstax2\vtss_appl\web\ मेनू_डिफ़ॉल्ट.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 फ़ंक्शन द्वारा नियंत्रित करने के लिए कॉन्फ़िगर किया जाता है।
requestUpdate “mirror.config.session.get” का कॉल आरंभ करेगा,
“port.status.get” और स्टैकिंग के मामले में “topo.config.stacking.get” और इन कॉल के परिणामों को prepareUpdate फ़ंक्शन द्वारा नियंत्रित करने के लिए कॉन्फ़िगर किया गया है।
फंक्शन prepareUpdate सभी परिणाम एकत्रित करेगा, और केवल जब सभी प्राप्त हो जाएंगे, तब यह function processUpdate को कॉल करेगा, जो कि टेबल का निर्माण करेगा, जिसे पृष्ठ पर दिखाया जाएगा। web.

संदर्भ

1. विकिपीडिया जावास्क्रिप्ट https://en.wikipedia.org/wiki/JavaScript
2. जेएसओएन https://www.json.org/
3. मूनटूल https://mootools.net/

दस्तावेज़ / संसाधन

माइक्रोसेमी AN1256 Web प्रोग्रामर आवेदन [पीडीएफ] उपयोगकर्ता गाइड एएन1256, एएन1256 Web प्रोग्रामर्स एप्लीकेशन, Web प्रोग्रामर्स एप्लीकेशन, एप्लीकेशन

संदर्भ

• उपयोगकर्ता पुस्तिका