মাইক্রোসেমি AN1256 Web প্রোগ্রামার অ্যাপ্লিকেশন

ভূমিকা

JSON (জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন) একটি ওপেন-স্ট্যান্ডার্ড file বিন্যাস যা তথ্য বিনিময়ের জন্য মানব-পাঠযোগ্য পাঠ্য ব্যবহার করে। এটি একটি সাধারণ ডেটা বিন্যাস যা অ্যাসিঙ্ক্রোনাস ব্রাউজার/সার্ভার যোগাযোগের জন্য ব্যবহৃত হয়।
নতুনের জন্য web পৃষ্ঠা ডিজাইন, JSON ফর্ম্যাট আসল AJAX শৈলীর প্রতিস্থাপন হতে পারে। AJAX এর সাথে তুলনা করুন, JSON ব্যবহার করে তৈরি করে Web বাস্তবায়ন সহজ এবং সহজ। বিকাশকারীকে শুধুমাত্র ফোকাস করতে হবে web পৃষ্ঠা নকশা এবং Web হ্যান্ডলার বাস্তবায়ন বাদ দেওয়া যেতে পারে যেহেতু JSON অ্যাক্সেস পদ্ধতি ইতিমধ্যেই প্রতিটিতে সমর্থিত WebStaX সফ্টওয়্যার মডিউল।
এই দস্তাবেজটি সফ্টওয়্যার ইঞ্জিনিয়ারের জন্য প্রোগ্রামারদের নির্দেশিকা বর্ণনা করে যাদের বিকাশ করতে হবে Web JSON এর মাধ্যমে পৃষ্ঠা। বিস্তারিত পদ্ধতি এবং প্রাক্তনamples এছাড়াও নিম্নলিখিত বিভাগে অন্তর্ভুক্ত.

JSON ডেটা অ্যাক্সেস প্রবাহ

ওভারview
এখানে JSON ডেটা অ্যাক্সেস ফ্লো রয়েছে যা ক্লায়েন্ট(ব্রাউজার) থেকে একটি HTTP সংযোগ শুরু হয়। সার্ভার (DUT) দিক থেকে প্রাপ্ত JOSN ডেটা অনুযায়ী HTML টেবিলটি গতিশীলভাবে তৈরি করা হয়েছে।

চিত্র 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 মধ্যে কাঠামো WebStaX সফ্টওয়্যার একটি ওপেন সোর্স MooTools এর উপর ভিত্তি করে তৈরি। এটি MIT লাইসেন্স সহ জাভাস্ক্রিপ্ট ইউটিলিটিগুলির একটি সংগ্রহ। (http://mootools.net/license.txt) মেনু বার এবং অধিকাংশ web পৃষ্ঠাগুলি কাঠামোর উপর ভিত্তি করে। AJAX এবং JSON অ্যালগরিদম উভয়ই ইতিমধ্যে এর ইউটিলিটিগুলিতে একীভূত।
তাছাড়া, WebStaX সফ্টওয়্যার অন্যান্য ইউটিলিটি প্রদান করে যা JSON-এর জন্য উপযোগী web পৃষ্ঠা নকশা।

• json.js - JSON সিনট্যাক্স সহ গতিশীল ডেটা প্রেরণ/গ্রহণের জন্য ব্যবহার করুন।
• dynforms.js - গতিশীলভাবে HTML টেবিল তৈরি করার জন্য ব্যবহার করুন।
• validate.js - HTML ফর্মের বৈধতার জন্য ব্যবহার করুন।

সম্পূর্ণ জাভাস্ক্রিপ্ট লাইব্রেরি সোর্স ট্রি ডিরেক্টরির অধীনে অবস্থিত: webstax2\ vtss_appl\web\html\lib.

JSON-এর জন্য নির্দেশিকা Web পৃষ্ঠা নকশা

এই বিভাগে কিভাবে ডিজাইন করতে হয় তা নির্দেশ করে web MSCC জাভাস্ক্রিপ্ট লাইব্রেরি ভিত্তিক পৃষ্ঠা। আমরা মিরর গ্লোবাল কনফিগার করা ব্যবহার করি web প্রাক্তন হিসাবে পৃষ্ঠাampএখানে লে. অ্যাসিঙ্ক্রোনাস যোগাযোগ HTTP JSON অ্যাক্সেস পদ্ধতির উপর ভিত্তি করে এবং সমস্ত বিশ্বব্যাপী কনফিগার করা পরামিতিগুলি একটি ডায়নামিক HTML টেবিলে তালিকাভুক্ত করা হয়।
দ web পৃষ্ঠা বিন্যাস নীচে তালিকাভুক্ত করা হয়েছে এবং সম্পূর্ণ উৎস কোড উৎস গাছ ডিরেক্টরির অধীনে অবস্থিত: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. আরো সাধারণ পেতে web পৃষ্ঠার রেফারেন্স, পরিশিষ্ট বিভাগ দেখুন।

মিরর এবং আরএম মিরর কনফিকিউরেশন টেবিল

চিত্র 5। Exampগ্লোবাল কনফিগার করা টেবিলের লে

সম্পাদনা করুন Web পৃষ্ঠা

এইচটিএমএল হেডার
HTML-এ প্রয়োজনীয় JS লাইব্রেরিগুলি অন্তর্ভুক্ত করুন tag.

ডাইনামিক টেবিল রিসোর্স আরম্ভ করুন

• HTML ডকুমেন্ট প্রস্তুত হলে, ডায়নামিক টেবিল রিসোর্স আরম্ভ করতে DynamicTable() কে কল করুন।
• DynamicTable() JSON ডেটা পাওয়ার পর ডায়নামিক টেবিল তৈরি করতে ব্যবহৃত হয়।
• এটি তারপর JSON কমান্ড প্রবাহ শুরু করার জন্য requestUpdate কল করবে।

1. window.addEvent('domready', function() {
2. // JSON ডেটা গ্রহণ/প্রেরণ করার জন্য টেবিল বডি সহ একটি ফর্ম তৈরি করুন
3. myDynamicTable = নতুন DynamicTable("myTableContent", "config","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. myDynamicTable.restore();
   5
5. // এই টেবিল দুটি JSON ডেটা।
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

প্রাপ্ত JSON ডেটা প্রক্রিয়া করুন

• JSON ডেটা প্রাপ্তির পরে ফাংশন processUpdate() ডায়নামিক টেবিল লেআউট করতে ব্যবহৃত হয়।
• addRows() টেবিলের সারি যোগ করতে ব্যবহৃত হয়। myDynamicTable.update() লেআউট
  এইচটিএমএল টেবিল সারি সারি তথ্য অনুযায়ী.

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);
14. // এই গতিশীল টেবিল আপডেট করুন
15. myDynamicTable.update();
17. // টাইমার রিফ্রেশ করুন
18. var autorefresh = document.getElementById("autorefresh");
19. যদি (autorefresh && autorefresh.checked) {
20. যদি (টাইমারআইডি) {
21. ক্লিয়ারটাইমআউট(টাইমারআইডি);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

টেবিল সারি যোগ করুন

• addRows() ফাংশনে, আমরা টেবিলের সারিতে প্রতিটি গ্লোবাল কনফিগার করা প্যারামিটার পূরণ করতে JSON ফর্ম্যাট ব্যবহার করি।
• সমস্ত HTML ক্ষেত্রগুলি JSON অ্যারেতে তালিকাভুক্ত করা হয়েছে ("টেবিল_সারি") এবং টেবিল ক্ষেত্রের সিনট্যাক্স নীচে রয়েছে৷

সিনট্যাক্স:
টেবিল_সারি:[ , ,… ] : { , ,… }
: {"টাইপ": , "পরম":[ , , …, ]}

• এই ক্ষেত্রে, প্রতিটি সারিতে পাঁচটি ক্ষেত্র রয়েছে: "সেশন আইডি", "মোড", "টাইপ", "VLAN আইডি" এবং "প্রতিফলক পোর্ট" প্রাক্তনের জন্যampলে,

সেশন আইডি (নাম ক্ষেত্র: int32_t)	1 (মিরর সেশনের আইডি)
মোড (নাম ক্ষেত্র: vtss_bool_t)	সত্য (অর্থাৎ মিরর সেশন চালু আছে)
টাইপ (নাম ক্ষেত্র: গণনা {আয়না, rMirrorSource, rMirrorDestination}	আরএমরর সোর্স (এটি একটি দূরবর্তী মিরর সেশনের উত্স
VLAN আইডি (নাম ক্ষেত্র: uint16_t)	200 (আয়না করার জন্য ব্যবহৃত ভ্লান)
প্রতিফলক পোর্ট (নাম ক্ষেত্র: 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 = "NONE";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var সারি = {ক্ষেত্র:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + কী, কী]},
7. {type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type:"text", params:[val.Type == "মিরর"? "-":
   val.RMirrorVlan, “c”]},
10. {type:"text", params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. ফিরতি সারি;
13. }
14. ফাংশন addRows(recv_json)
15. {
16. var সারি, empty_colspan = 7;
17. var টেবিল_রো = নতুন অ্যারে();
18. // টেবিল হেডার যোগ করুন
19. addHeader(টেবিল_সারি);
20. // একক সারি যোগ করুন
21. Object.each(recv_json, ফাংশন(রেকর্ড) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. ফেরত টেবিল_সারি;
25. }

Web সাহায্য পৃষ্ঠা
জন্য web সাহায্য পৃষ্ঠা ডিজাইন, সহায়তা বিবরণ JSON স্পেসিফিকেশন উল্লেখ করতে পারে, যে বর্ণনা পাঠ্য JSON আউটপুটের সাথে সামঞ্জস্যপূর্ণ হতে পারে এবং অপ্রয়োজনীয় বিবরণ কমাতে সাহায্য করে। যেমনample এখানে dhcp6 রিলে কনফিগারেশন থেকে নেওয়া হয়েছে।

উৎসে হাইপার-লিঙ্ক file
সাহায্য বরাদ্দ করুন file এর উৎসে অবস্থান file এইচটিএমএল tag. স্থির পরিবর্তনশীল নাম "help_page" এর জন্য ব্যবহৃত হয় web সাহায্য পৃষ্ঠা অ্যাসাইনমেন্ট।

2. // সাহায্য পৃষ্ঠা জাদু
3. var help_page = “/help/help_xxx.htm”;

JSON স্পেসিফিকেশন থেকে HTML ফিল্ডের বিবরণ আপডেট করুন

• ব্যবহার করুন বা এইচটিএমএল tag এইচটিএমএল টেবিলের বিবরণ ঘোষণা করতে এবং এর জন্য একটি অনন্য আইডি দেওয়া হয়েছে tag.
• HTML ডকুমেন্ট প্রস্তুত হলে, পুরো JSON স্পেসিফিকেশন পেতে loadXMLDoc() এ কল করুন অথবা JSON পদ্ধতির নাম “jsonRpc.status.introspection.specific.inventory.get” দ্বারা নির্দিষ্ট পদ্ধতির বিবরণ পান।
• ProcessTableDesc() টেবিলের বিবরণ আপডেট করতে ব্যবহার করা হয় এবং processUpdate() টেবিলের প্যারামিটারের বিবরণ আপডেট করতে ব্যবহার করা হয়।
• processUpdate(), JSON উপাদানগুলিকে আপডেট করতে updateTableParamsDesc() এ কল করুন যা নির্দিষ্ট উপাদানের নামের সাথে মিলে যায়।
• আপডেট করুন বা tag উপাদান বিবরণ অনুযায়ী ভিতরের HTML.

2. /* HTML বর্ণনা ক্ষেত্র আপডেট করুন */
3. ফাংশন processTableDesc(req) {
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 param_names = [
15. {
16. "উনাম": "ইন্টারফেস",
17. "টাইপ": "vtss_ifindex_t",
18. "নাম": "ভ্লান ইন্টারফেস",
19. "প্রত্যয়": "."
20. },
21. {
22. "অ্যালিয়াস": "রিলে ইন্টারফেস",
23. "টাইপ": "vtss_ifindex_t",
24. "নাম": "relayVlanInterface",
25. "প্রত্যয়": ". রিলে করার জন্য ব্যবহৃত ইন্টারফেসের আইডি।"
26. },
27. {
28. "অরফে": "রিলে গন্তব্য",
29. "টাইপ": "mesa_ipv6_t",
30. "নাম": "রিলে_গন্তব্য",
31. "প্রত্যয়": ". DHCPv6 সার্ভারের IPv6 ঠিকানা যা অনুরোধ করে রিলে করা হবে। ডিফল্ট মান 'ff05::1:3' mans 'যেকোনো 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", processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

মেনু বারে হাইপার-লিঙ্ক

• মেনু বারের এইচটিএমএল সোর্স কোড থেকে তৈরি করা হয় file webstax2\vtss_appl\web\ menu_default.cxx.
• এর মধ্যে আইটেমগুলি সম্পাদনা করুন file জন্য Web পৃষ্ঠা হাইপার-লিঙ্ক।

1. #যদি সংজ্ঞায়িত করা হয় (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("রিলে,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

উল্লেখ্য
লক্ষ্য করুন যে আইটেম(“”) এর স্পেস অক্ষরের সংখ্যা, যা মেনু বারে গ্রুপ স্তর নির্ধারণ করতে ব্যবহৃত হয়। এই ক্ষেত্রে, সব web পৃষ্ঠাগুলি "DHCPv6" গ্রুপের অধীনে রয়েছে৷

চিত্র 6. প্রাক্তনampগ্লোবাল কনফিগার করা টেবিলের লে

পরিশিষ্ট

সাধারণ 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" ইভেন্টের মাধ্যমে শুরু হয় এবং ফলাফলটি requestUpdate ফাংশন দ্বারা পরিচালনা করার জন্য কনফিগার করা হয়।
রিকোয়েস্টআপডেট "mirror.config.session.get" এর কল শুরু করবে,
"port.status.get" এবং স্ট্যাক করার ক্ষেত্রে "topo.config.stacking.get" এবং এই কলগুলির ফলাফলগুলি প্রস্তুতআপডেট ফাংশন দ্বারা পরিচালনা করার জন্য কনফিগার করা হয়েছে।
ফাংশন readyUpdate সমস্ত ফলাফল সংগ্রহ করবে, এবং শুধুমাত্র যখন সবগুলি গৃহীত হবে তখনই এটি ফাংশন প্রসেসআপডেটকে কল করবে যা সারণী তৈরি করবে web.

তথ্যসূত্র

1. উইকিপিডিয়া জাভাস্ক্রিপ্ট https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. মুন টুলস https://mootools.net/

দলিল/সম্পদ

মাইক্রোসেমি AN1256 Web প্রোগ্রামার অ্যাপ্লিকেশন [পিডিএফ] ব্যবহারকারীর নির্দেশিকা এএন১২৫৬, এএন১২৫৬ Web প্রোগ্রামার অ্যাপ্লিকেশন, Web প্রোগ্রামার অ্যাপ্লিকেশন, অ্যাপ্লিকেশন

তথ্যসূত্র

• ব্যবহারকারীর ম্যানুয়াল