მიკროსემი AN1256 Web პროგრამისტების აპლიკაცია

შესავალი

JSON (JavaScript Object Notation) არის ღია სტანდარტი 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”}

შემდეგი სნეპშოტები აჩვენებს JSON კონტენტს ბრაუზერსა და DUT-ს შორის.

სურათი 2. კლიენტისგან HTTP მოთხოვნის სურათი

სურათი 3. სერვერიდან HTTP პასუხის სურათი

MSCC JSON სპეციფიკაცია
სრული JSON ინფორმაციის მისაღებად მეთოდის, პარამეტრის, აღწერილობის და ა.შ. ჩათვლით. აკრიფეთ „http:// /json_spec” თქვენი ბრაუზერის მისამართის ზოლში. არსებობს სხვა წვდომის მეთოდი JSON მეთოდის სახელით „jsonRpc.status.introspection.specific.inventory.get“, ის გამოიყენება კონკრეტული მეთოდისთვის.

სურათი 4. JSON სპეციფიკაციის Snapshot web გვერდი

Web ჩარჩო

The Web ჩარჩოში WebStaX პროგრამული უზრუნველყოფა დაფუძნებულია ღია კოდის MooTools-ზე. ეს არის JavaScript უტილიტების კოლექცია MIT ლიცენზიით. (http://mootools.net/license.txt) მენიუს ზოლი და უმეტესობა web გვერდები ეფუძნება ჩარჩოს. ორივე AJAX და JSON ალგორითმი უკვე ინტეგრირებულია მის კომუნალურ პროგრამაში.
გარდა ამისა, WebStaX პროგრამული უზრუნველყოფა გთავაზობთ სხვა კომუნალურ პროგრამებს, რომლებიც სასარგებლოა JSON-ისთვის web გვერდის დიზაინი.

• json.js – გამოიყენეთ for JSON სინტაქსით დინამიური მონაცემების გადასაცემად/მიღებისთვის.
• dynforms.js – გამოიყენეთ HTML ცხრილის დინამიურად შესაქმნელად.
• validate.js – გამოიყენეთ HTML ფორმის დასადასტურებლად.

JavaScript-ის სრული ბიბლიოთეკები განთავსებულია წყაროს ხის დირექტორიაში: webstax2\ vtss_appl\web\html\lib.

სახელმძღვანელო JSON-ისთვის Web გვერდის დიზაინი

ეს განყოფილება გვიჩვენებს, თუ როგორ უნდა შეიმუშაოთ ა web გვერდი დაფუძნებული MSCC JavaScript ბიბლიოთეკებზე. ჩვენ ვიყენებთ Mirror გლობალურ კონფიგურაციას web გვერდი, როგორც ყოფილიampაქ. ასინქრონული კომუნიკაცია დაფუძნებულია HTTP JSON წვდომის მეთოდზე და ყველა გლობალური კონფიგურირებული პარამეტრი ჩამოთვლილია ერთ დინამიურ HTML ცხრილში.
The web გვერდის განლაგება ჩამოთვლილია ქვემოთ და სრული წყაროს კოდი მდებარეობს წყაროს ხის დირექტორიაში: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. უფრო ტიპიური რომ მივიღოთ web გვერდების მითითება, იხილეთ დანართის განყოფილება.

Mirror& RMMirror კონფიგურაციის ცხრილი

სურათი 5. Exampგლობალური კონფიგურირებული ცხრილის le

რედაქტირება Web გვერდი

HTML სათაური
ჩართეთ JS ბიბლიოთეკები, რომლებიც საჭიროა HTML-ში tag.

დინამიური ცხრილის რესურსის ინიცირება

• როდესაც HTML დოკუმენტი მზად იქნება, გამოიძახეთ DynamicTable() დინამიური ცხრილის რესურსის ინიციალიზაციისთვის.
• DynamicTable() გამოიყენება დინამიური ცხრილის შესაქმნელად JSON მონაცემების მიღების შემდეგ.
• შემდეგ ის გამოიძახებს requestUpdate-ს JSON ბრძანების ნაკადის დასაწყებად.

1. window.addEvent('domready', function() {
2. // შექმენით ფორმა ცხრილის ტექსტით JSON მონაცემების მისაღებად/გადაცემისთვის
3. myDynamicTable = ახალი DynamicTable ("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

JSON მონაცემების მოთხოვნა/პასუხი

• როდესაც HTML დოკუმენტი მზად არის, გამოიყენეთ requestJsonDoc() JSON მოთხოვნის გასაგზავნად „mirror.config.session.get“ კონფიგურირებული სესიების შესახებ ინფორმაციის მისაღებად.
• მას შემდეგ, რაც JSON მონაცემები მიიღება „mirror.capabilities.get“-ისთვის, გამოძახების ფუნქცია requestUpdate() დამუშავდება. ფუნქცია requestUpdate დარეკავს "mirror.config.session.get" მიმდინარე კონფიგურაციის მისაღებად. როდესაც მიმდინარე კონფიგურაცია მიიღება, ფუნქცია processUpdate გამოიძახება საჩვენებელი ცხრილის ასაგებად.

1. ფუნქცია requestUpdate()
2. {
3. // ცხრილის შინაარსის აღდგენა
4. myDynamicTable.restore();
   5
5. // ეს ცხრილი ორი JSON მონაცემია.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

მიღებული JSON მონაცემების დამუშავება

• ფუნქცია processUpdate() გამოიყენება დინამიური ცხრილის განლაგებისთვის JSON მონაცემების მიღების შემდეგ.
• addRows() გამოიყენება ცხრილის რიგების დასამატებლად. myDynamicTable.update() განლაგება
  HTML ცხრილი ცხრილის სტრიქონების მონაცემების მიხედვით.

1. ფუნქცია processUpdate (recv_json, სახელი)
2. {
3. // პროცესის იგნორირება, თუ მონაცემები არ არის მიღებული
4. თუ (!recv_json) {
5. alert ("დინამიური მონაცემების მიღება ვერ მოხერხდა.");
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 autorrefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorrefresh.შემოწმებულია) {
20. თუ (ტაიმერის ID) {
21. clearTimeout (timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

ცხრილის რიგების დამატება

• addRows() ფუნქციაში ვიყენებთ JSON ფორმატს ცხრილის მწკრივში თითოეული გლობალური კონფიგურირებული პარამეტრის შესავსებად.
• ყველა HTML ველი ჩამოთვლილია JSON მასივში („table_rows“) და ცხრილის ველის სინტაქსი ქვემოთ მოცემულია.

სინტაქსი:
ცხრილის_სტრიქონები:[ , ,… ] : { , ,… }
: {„ტიპი“: , „პარამები“:[ , ,…, ]}

• ამ შემთხვევაში, თითოეულ მწკრივს აქვს ხუთი ველი: "სესიის ID", "რეჟიმი", "ტიპი", "VLAN ID" და "რეფლექტორის პორტი"ampლე,

სესიის ID (სახელის ველი: int32_t)	1 (სარკის სესიის ID)
რეჟიმი (სახელის ველი: vtss_bool_t)	მართალია (რაც ნიშნავს, რომ სარკის სესია ჩართულია)
ტიპი (სახელის ველი: აღრიცხვა {mirror, rMirrorSource, rMirrorDestination}	RMMirror წყარო (ეს არის დისტანციური სარკის სესიის წყარო
VLAN ID (სახელის ველი: uint16_t)	200 (ვლანი, რომელიც გამოიყენება სარკეებისთვის)
რეფლექტორის პორტი (სახელის ველი: vtss_ifindex_t)	გი 1/1 (პორტი, რომელზეც იგზავნება სარკისებური ტრაფიკი

• myDynamicTable.addRows() გადააქცევს JSON მონაცემებს HTML ფორმატში და გამოსცემს HTML ცხრილს.

1. ფუნქცია addRow (გასაღები, val)
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 row = {ველები:[
6. {type:”link”, პარამეტრები:[“cr”, “mirror.htm?session_id=” + გასაღები, გასაღები]},
7. {type:"text", პარამეტრები:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type:”ტექსტი”, პარამეტრები:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”ტექსტი”, პარამეტრები:[val.Type == “სარკე” ? "-":
   val.RMirrorVlan, „c“]},
10. {type:”text”, პარამეტრები:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: "-", "c"]}
11. ]};
12. დაბრუნების რიგი;
13. }
14. ფუნქცია addRows (recv_json)
15. {
16. var მწკრივი, ცარიელი_კოლსპანი = 7;
17. var table_rows = new Array();
18. // ცხრილის სათაურის დამატება
19. addHeader(table_rows);
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 HTML tag. ფიქსირებული ცვლადის სახელი "help_page" გამოიყენება web დახმარების გვერდის მინიჭება.

2. // დახმარების გვერდის მაგია
3. var help_page = “/help/help_xxx.htm”;

განაახლეთ HTML ველის აღწერა JSON სპეციფიკაციიდან

• გამოყენება ან HTML tag გამოაცხადოს HTML ცხრილის აღწერა და მიენიჭოს უნიკალური ID tag.
• როდესაც HTML დოკუმენტი მზად იქნება, გამოიძახეთ loadXMLDoc() რათა მიიღოთ მთელი JSON სპეციფიკაცია ან მიიღოთ კონკრეტული მეთოდის აღწერა JSON მეთოდის სახელით „jsonRpc.status.introspection.specific.inventory.get“.
• processTableDesc() გამოიყენება ცხრილის აღწერილობის გასაახლებლად და processUpdate() გამოიყენება ცხრილის პარამეტრის აღწერილობის განახლებისთვის.
• processUpdate()-ში გამოიძახეთ updateTableParamsDesc() JSON ელემენტების განახლებისთვის, რომლებიც ემთხვევა კონკრეტული ელემენტების სახელებს.
• განაახლეთ ან tag შიდა HTML ელემენტის აღწერილობის მიხედვით.

2. /* განაახლეთ HTML აღწერილობის ველები */
3. ფუნქცია processTableDesc(req) {
4. if (!req.responseText) {
5. დაბრუნება;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // ცხრილის აღწერილობის განახლება
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "ჯგუფები", "dhcp6_relay.config.vlan"). აღწერა;
10. }
11. /* განაახლეთ HTML ცხრილის პარამეტრის აღწერა */
12. ფუნქცია processUpdate(recv_json) {
13. // ცხრილის პარამეტრის აღწერილობის განახლება
14. var param_names = [
15. {
16. "სხვა": "ინტერფეისი",
17. "ტიპი": "vtss_ifindex_t",
18. "სახელი": "vlanInterface",
19. "სუფიქსი": "."
20. },
21. {
22. "სხვა სახელი": "რელე ინტერფეისი",
23. "ტიპი": "vtss_ifindex_t",
24. "სახელი": "relayVlanInterface",
25. "სუფიქსი": ". ინტერფეისის ID, რომელიც გამოიყენება გადაცემისთვის. ”
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”, processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

ჰიპერბმული მენიუს ზოლში

• მენიუს ზოლის HTML წყაროს კოდი გენერირებულია 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

შენიშვნა
ყურადღება მიაქციეთ, რომ ITEM(“”) სიმბოლოების რაოდენობა, რომელიც გამოიყენება მენიუს ზოლში ჯგუფის დონის დასადგენად. ამ შემთხვევაში ყველა web გვერდები "DHCPv6" ჯგუფშია.

სურათი 6. გამampგლობალური კონფიგურირებული ცხრილის le

დანართი

ტიპიური web გვერდები

რამდენიმე ტიპიურია web გვერდები შეიძლება გამოყენებულ იქნას საცნობარო დიზაინისთვის. ერთი დამატებითი ყოფილიampაქ ნაჩვენები იქნება ერთი სარკის სესიის კონფიგურაცია, რომელიც გვხვდება vtss_appl\mirror\html\mirror.htm-ში.
The web გვერდი გთავაზობთ დეტალურ კონფიგურაციას ერთი სარკის სესიისთვის. ჩამოთვლილია ყველა კონფიგურირებული პარამეტრი.

• დააჭირეთ ღილაკს "შენახვა" მიმდინარე კონფიგურაციის გამოსაყენებლად.
• დააწკაპუნეთ ღილაკზე „გადატვირთვა“ მიმდინარე კონფიგურაციის აღსადგენად.
• დააწკაპუნეთ "გაუქმებაზე" დასაბრუნებლადview სარკის სესიები

Mirror&RMirror კონფიგურაცია

გლობალური პარამეტრები

წყაროს VLAN(ებ)ის კონფიგურაცია

პორტის კონფიგურაცია

სურათი 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" და ამ ზარების შედეგები კონფიგურირებულია იმისათვის, რომ დამუშავდეს ფუნქციის მომზადება Update.
ფუნქცია "preparateUpdate" შეაგროვებს ყველა შედეგს და მხოლოდ მას შემდეგ, რაც ყველა მიღებული იქნება, ის გამოიძახებს ფუნქციის პროცესს Update, რომელიც ააშენებს ცხრილებს, რომლებიც უნდა იყოს ნაჩვენები. web.

ცნობები

1. ვიკიპედია JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

დოკუმენტები / რესურსები

მიკროსემი AN1256 Web პროგრამისტების აპლიკაცია [pdf] მომხმარებლის სახელმძღვანელო AN1256, AN1256 Web პროგრამისტების აპლიკაცია, Web პროგრამისტების აპლიკაცია, აპლიკაცია

ცნობები

• მომხმარებლის სახელმძღვანელო