Microsemi AN1256 Web Programmeerijate rakendus

Sissejuhatus

JSON (JavaScript Object Notation) on avatud standard file vorming, mis kasutab andmete vahetamiseks inimloetavat teksti. See on levinud andmevorming, mida kasutatakse brauseri/serveri asünkroonses suhtluses.
Uue jaoks web lehe kujundus, JSON-vorming võib asendada algse AJAX-stiili. Võrrelge AJAX-iga, JSON-i kasutamine muudab Web rakendamine on lihtsam ja lihtsam. Arendaja peab ainult keskenduma web lehe kujundus ja Web käitleja juurutamise võib ära jätta, kuna JSON-juurdepääsumeetod on juba toetatud WebStaX tarkvara moodulid.
See dokument sisaldab programmeerijate juhendit tarkvarainseneridele, kes peavad selle välja töötama Web leht JSON-i kaudu. Üksikasjalikud protseduurid ja ntampka järgmistes jaotistes.

JSON-andmete juurdepääsuvoog

Läbiview
Siin on JSON-i andmete juurdepääsuvoog, mille HTTP-ühendus käivitatakse kliendist (brauserist). HTML-tabel luuakse dünaamiliselt vastavalt serveri (DUT) poolelt vastuvõetud JOSN-andmetele.

Joonis 1. Juurdepääsuvoog kliendi ja serveri vahel

JSON-andmete taotlemine/vastamine
JSON-i päringupakett põhineb HTTP-päringu postitamismeetodil ja sisu peab järgima MSCC JSON-vormingut.

• Taotlege JSON-i süntaksit:{"meetod":" ","params":[ ], "id:"jsonrpc"}
• Vastuse JSON-i süntaks: {"viga": ,"tulemus": , "id:"jsonrpc"}

Järgmised hetktõmmised näitavad JSON-i sisu brauseri ja DUT-i vahel.

Joonis 2. Kliendi HTTP-päringu hetktõmmis

Joonis 3. Serveri HTTP vastuse hetktõmmis

MSCC JSON spetsifikatsioon
Täieliku JSON-teabe, sealhulgas meetodi, parameetri, kirjelduse jms hankimiseks tippige „http:// /json_spec” brauseri aadressiribal. JSON-i meetodi nime "jsonRpc.status.introspection.specific.inventory.get" kaudu on veel üks juurdepääsumeetod, seda kasutatakse konkreetse meetodi jaoks.

Joonis 4. JSON-i spetsifikatsiooni hetktõmmis web lehel

Web raamistik

The Web raamistik sisse WebStaX tarkvara põhineb avatud lähtekoodiga MooToolsil. See on MIT-litsentsiga JavaScripti utiliitide kogu. (http://mootools.net/license.txt) Menüüriba ja enamik web lehed põhinevad raamistikul. Nii AJAX kui ka JSON-algoritm on selle utiliitidesse juba integreeritud.
Pealegi, WebStaX-tarkvara pakub muid JSON-i jaoks kasulikke utiliite web lehe kujundus.

• json.js – Kasutage dünaamiliste andmete edastamiseks/vastuvõtmiseks JSON-i süntaksiga.
• dynforms.js – Kasutage HTML-tabeli dünaamiliseks loomiseks.
• validate.js – Kasutage HTML-vormingu kinnitamiseks.

Täielikud JavaScripti teegid asuvad lähtepuu kataloogi all: webstax2\ vtss_appl\web\html\lib.

JSON-i juhis Web lehe kujundus

See jaotis juhendab, kuidas kujundada a web leht, mis põhineb MSCC JavaScripti raamatukogudel. Kasutame globaalset konfiguratsiooni Mirror web lehekülg nagu endineample siin. Asünkroonne suhtlus põhineb HTTP JSON-juurdepääsumeetodil ja kõik globaalsed konfigureeritud parameetrid on loetletud ühes dünaamilises HTML-i tabelis.
The web lehe paigutus on loetletud allpool ja täielik lähtekood asub lähtepuu kataloogi all: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Et saada tüüpilisemaks web lehekülgede viide, vt lisa jaotist.

Peegli ja RMirror kinnitustabel

Joonis 5. Exampglobaalse konfigureeritud tabeli le

Muuda Web lehel

HTML-i päis
Lisage HTML-i vajalikud JS-i teegid tag.

Initsialiseerige dünaamilise tabeli ressurss

• Kui HTML-dokument on valmis, kutsuge dünaamilise tabeli ressursi lähtestamiseks välja DynamicTable().
• DynamicTable() kasutatakse dünaamilise tabeli loomiseks pärast JSON-andmete vastuvõtmist.
• Seejärel kutsub see JSON-käsuvoo käivitamiseks esile rakenduse requestUpdate.

1. window.addEvent('domready', function() {
2. // Looge tabeli kehaosaga vorm JSON-andmete vastuvõtmiseks/edastamiseks
3. myDynamicTable = uus dünaamiline tabel("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

JSON-andmete taotlemine/vastamine

• Kui HTML-dokument on valmis, kasutage konfigureeritud seansside kohta teabe saamiseks JSON-i päringu "mirror.config.session.get" saatmiseks käsku requestJsonDoc().
• Pärast „mirror.capabilities.get” JSON-andmete vastuvõtmist töödeldakse tagasihelistamisfunktsiooni requestUpdate(). Funktsioon requestUpdate kutsub seejärel praeguse konfiguratsiooni hankimiseks "mirror.config.session.get". Kui praegune konfiguratsioon on vastu võetud, kutsutakse kuvatava tabeli koostamiseks funktsioon processUpdate.

1. funktsioon requestUpdate()
2. {
3. // Tabeli sisu taastamine
4. myDynamicTable.restore();
   5
5. // See tabel kaks JSON-i andmeid.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Töötle vastuvõetud JSON-andmeid

• Funktsiooni processUpdate() kasutatakse dünaamilise tabeli paigutuseks pärast JSON-andmete vastuvõtmist.
• AddRows() kasutatakse tabeli ridade lisamiseks. myDynamicTable.update() paigutus
  HTML-tabel vastavalt tabeliridade andmetele.

1. funktsioon processUpdate(recv_json, nimi)
2. {
3. // Ignoreeri protsessi, kui andmeid ei saada
4. if (!recv_json) {
5. alert ("Dünaamiliste andmete hankimine nurjus.");
6. tagastamine;
7. }
8. // Salvestage saadud JSON-andmed
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Tabeli ridade lisamine
11. var tabeli_read = addRows(recv_json);
12. myDynamicTable.addRows(tabeli_read);
14. // Värskendage seda dünaamilist tabelit
15. myDynamicTable.update();
17. // Värskenda taimer
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (taimerID) {
21. clearTimeout(taimeri ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Lisa tabeli ridu

• Funktsioonis addRows() kasutame JSON-vormingut, et täita tabelireal iga globaalne konfigureeritud parameeter.
• Kõik HTML-i väljad on loetletud JSON-massiivis ("table_rows") ja tabelivälja süntaks on allpool.

Süntaks:
tabeli_read:[ , , … ] : { , , … }
: {"tüüp": , "parameetrid":[ , , …, ]}

• Sel juhul on igal real viis välja: "Session ID", "Mode", "Type", "VLAN ID" ja "Reflector Port" Näiteksample,

• MyDynamicTable.addRows() teisendab JSON-i andmed HTML-vormingusse ja väljastab HTML-tabeli.

1. funktsioon addRow(klahv, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Puudub", none_interface_text = "POLE";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rida = {väljad:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + võti, võti]},
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 == “peegel” ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : "-" , "c"]}
11. ]};
12. tagastusrida;
13. }
14. funktsioon addRows(recv_json)
15. {
16. var rida, tühi_colspan = 7;
17. var tabeli_read = new Massiiv();
18. // Lisa tabeli päis
19. addHeader(tabeli_read);
20. // Lisage üks rida
21. Object.each(recv_json, function(rekord) {
22. tabel_read.push(lisaRida(kirje.võti, kirje.valik));
23. });
24. tagasta tabel_read;
25. }

Web abileht
jaoks web Abilehe kujundus, spikri kirjeldus võib viidata JSON-i spetsifikatsioonile, et kirjeldustekst on JSON-i väljundiga kooskõlas ja aitab vähendada üleliigseid kirjeldusi. Ntample siin on võetud dhcp6 relee konfiguratsioonist.

Hüperlink allikas file
Määrake abi file asukoht selle allikas file HTML tag. Fikseeritud muutuja nime "help_page" kasutatakse web abilehe ülesanne.

2. // Abilehe maagia
3. var help_page = "/help/help_xxx.htm";

Värskendage HTML-välja kirjeldust JSON-i spetsifikatsioonist

• Kasutage või HTML tag deklareerida HTML-tabeli kirjeldus ja anda unikaalne ID tag.
• Kui HTML-dokument on valmis, kutsuge kogu JSON-i spetsifikatsiooni saamiseks kutsuma loadXMLDoc() või hankige konkreetse meetodi kirjeldus JSON-i meetodi nimega "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc() kasutatakse tabeli kirjelduse värskendamiseks ja processUpdate() tabeli parameetri kirjelduse värskendamiseks.
• Funktsioonis processUpdate() kutsuge välja updateTableParamsDesc(), et värskendada JSON-elemente, mis vastavad konkreetsete elementide nimedele.
• Värskendage või tag sisemine HTML vastavalt elemendi kirjeldusele.

2. /* HTML-i kirjeldusväljade värskendamine */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. tagastamine;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Tabeli kirjelduse värskendamine
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Värskenda HTML tabeli parameetri kirjeldust */
12. function processUpdate(recv_json) {
13. // Tabeli parameetri kirjelduse värskendamine
14. var param_names = [
15. {
16. "alias": "liides",
17. "tüüp": "vtss_ifindex_t",
18. "nimi": "vlanInterface",
19. "sufiks": "."
20. },
21. {
22. "alias": "Releeliides",
23. "tüüp": "vtss_ifindex_t",
24. "nimi": "relayVlanInterface",
25. "sufiks": ". Edastamise jaoks kasutatava liidese ID.
26. },
27. {
28. "alias": "Relee sihtkoht",
29. "tüüp": "mesa_ipv6_t",
30. "nimi": "relee_sihtkoht",
31. "sufiks": ". DHCPv6 serveri IPv6 aadress, millele päringud edastatakse. Vaikeväärtus "ff05::1:3" tähendab "mis tahes DHCP-serverit".
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Hankige JSON-i spetsifikatsioon */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hüperlink menüüribal

• Menüüriba HTML-i lähtekood on loodud file webstax2\vtss_appl\web\ menüü_default.cxx.
• Muutke selles olevaid üksusi file jaoks Web lehe hüperlink.

1. #kui määratud (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relee,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

MÄRKUS
Pange tähele, et ITEM(“”) tühikute arv, mida kasutatakse menüüribal rühma taseme määramiseks. Sel juhul kõik web lehed on grupi "DHCPv6" all.

Joonis 6. Näideampglobaalse konfigureeritud tabeli le

Lisa

Tüüpiline web lehekülgi

Neid on mitu tüüpilist web lehekülgi saab kasutada võrdluskujunduse jaoks. Üks täiendav eksampSiin näidatakse ühe peegelseansi konfiguratsiooni, mis asub failis vtss_appl\mirror\html\mirror.htm.
The web leht pakub üksikasjalikku konfiguratsiooni ühe peegelseansi jaoks. Kõik konfigureeritud parameetrid on loetletud.

• Praeguse konfiguratsiooni rakendamiseks klõpsake nuppu "Salvesta".
• Praeguse konfiguratsiooni lähtestamiseks klõpsake nuppu "Lähtesta".
• Lõpu juurde naasmiseks klõpsake nuppu "Tühista".view peegli seanssidest

Peegli ja RMirrori konfiguratsioon

Globaalsed seaded

Allika VLAN(ide) konfiguratsioon

Pordi konfiguratsioon

Joonis 7. Examppeegelseansi üksikasjalik konfiguratsioon
Nupud “Salvesta”, “Lähtesta” ja “Tühista” on lisatud html-koodiga:

JSON-i käsuvoog
See leht nõuab kaheastmelist käsuvoogu:

• Kõigepealt tuleb hankida seadme võimalused meetodiga “mirror.capabilities.get”. Võimalused ei muutu ja neid tuleb lugeda ainult üks kord.
• Seejärel peab see hankima seadme praeguse konfiguratsiooni, kasutades meetodeid “mirror.config.session.get”, “port.status.get” ja virnastamise korral “topo.config.stacking.get”.

Faili "mirror.capabilities.get" väljakutse algatab sündmus "domready" ja tulemus on konfigureeritud nii, et seda käsitleb funktsioon requestUpdate.
PäringUpdate käivitab väljakutse "mirror.config.session.get",
"port.status.get" ja virnastamise korral "topo.config.stacking.get" ning nende kõnede tulemused on konfigureeritud nii, et neid käsitleb funktsioon readyUpdate.
Funktsioon readyUpdate kogub kõik tulemused ja alles siis, kui need on vastu võetud, kutsub ta funktsiooni processUpdate, mis loob tabelid, mida web.

Viited

1. Wikipedia JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Dokumendid / Ressursid

Microsemi AN1256 Web Programmeerijate rakendus [pdfKasutusjuhend AN1256, AN1256 Web Programmeerija rakendus, Web Programmeerijate rakendus, rakendus

Viited

• Kasutusjuhend