Microsemi AN1256 Web Forritara forrit

Inngangur

JSON (JavaScript Object Notation) er opinn staðall file snið sem notar lesanlegan texta fyrir gagnaskipti. Það er algengt gagnasnið sem notað er fyrir ósamstillt vafra/miðlarasamskipti.
Fyrir nýja web síðuhönnun, JSON snið getur komið í staðinn fyrir upprunalega AJAX stílinn. Bera saman við AJAX, með því að nota JSON gerir það Web framkvæmd auðveldari og einfaldari. Framkvæmdaraðilinn þarf aðeins að einbeita sér að web síðuhönnun og Web Hægt er að sleppa útfærslu meðhöndlunar þar sem JSON aðgangsaðferð er nú þegar studd í hverri WebStaX hugbúnaðareiningar.
Þetta skjal tilgreinir forritarahandbókina fyrir hugbúnaðarverkfræðinginn sem þarf að þróa Web síðu í gegnum JSON. Nákvæmar verklagsreglur og tdamples einnig innifalin í eftirfarandi köflum.

JSON gagnaaðgangsflæði

Yfirview
Hér er JSON gagnaaðgangsflæðið sem HTTP tenging er hafin frá biðlaranum (vafranum). HTML taflan er búin til á kraftmikinn hátt í samræmi við mótteknar JOSN gögn frá þjóninum (DUT) hlið.

Mynd 1. Aðgangsflæðið milli biðlara og netþjóns

Beiðni/svar JSON gögn
JSON beiðni pakkinn er byggður á HTTP beiðni póst aðferð og efnið verður að fylgja MSCC JSON sniði.

• Biðja um JSON setningafræði:{"aðferð":" ","params":[ ], “id:”jsonrpc”}
• Svar JSON setningafræði: {“villa”: "niðurstaða": , “id:”jsonrpc”}

Eftirfarandi skyndimyndir sýna JSON efnið á milli vafrans og DUT.

Mynd 2. Skyndimynd af HTTP beiðni frá viðskiptavini

Mynd 3. Skyndimynd af HTTP svari frá netþjóni

MSCC JSON forskrift
Til að fá allar JSON upplýsingar, þar á meðal aðferð, færibreytu, lýsingu og svo framvegis. Sláðu inn “http:// /json_spec“ á veffangastiku vafrans. Það er önnur aðgangsaðferð með JSON aðferðarheiti „jsonRpc.status.introspection.specific.inventory.get“, hún er notuð fyrir ákveðna aðferð.

Mynd 4. Skyndimynd af JSON forskrift web síðu

Web ramma

The Web ramma inn WebStaX hugbúnaður er byggður á opnum MooTools. Það er safn af JavaScript tólum með MIT leyfi. (http://mootools.net/license.txt) Matseðillinn og flest web síður eru byggðar á ramma. Bæði AJAX og JSON reiknirit eru þegar samþætt í tólum þess.
Að auki, WebStaX hugbúnaður veitir önnur tól sem eru gagnleg fyrir JSON web síðu hönnun.

• json.js – Notaðu fyrir til að senda/taka á móti kraftmiklum gögnum með JSON setningafræði.
• dynforms.js – Notaðu til að búa til HTML töfluna á virkan hátt.
• validate.js – Notaðu til að staðfesta HTML form.

Öll JavaScript bókasöfnin eru staðsett undir upprunatrésskránni: webstax2\ vtss_appl\web\html\lib.

Leiðbeiningar fyrir JSON Web síðu hönnun

Þessi hluti leiðbeinir hvernig á að hanna a web síða byggð á MSCC JavaScript bókasöfnum. Við notum Mirror alþjóðlegt stillt web síðu sem fyrrvample hér. Ósamstilltu samskiptin eru byggð á HTTP JSON aðgangsaðferð og allar alþjóðlegar stilltar breytur eru skráðar í einni kraftmikilli HTML töflu.
The web síðuskipulag er skráð hér að neðan og allur frumkóði er staðsettur undir upprunatrésskránni: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Til að verða dæmigerðri web tilvísun síðna, sjá viðaukahlutann.

Spegill& RSpeglunartafla

Mynd 5. Example af alþjóðlegri stilltri töflu

Breyta Web síðu

HTML haus
Hafa JS bókasöfnin sem þarf í HTML tag.

Frumstilla kraftmikla töfluforðina

• Þegar HTML skjalið er tilbúið skaltu hringja í DynamicTable() til að frumstilla kraftmikla töfluforðina.
• DynamicTable() er notað til að búa til kviku töfluna eftir að hafa fengið JSON gögnin.
• Það mun síðan kalla requestUpdate til að hefja JSON skipanaflæðið.

1. window.addEvent('domready', function() {
2. // Búðu til eyðublað með meginmáli töflunnar fyrir móttöku/sendingu JSON gagna
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Beiðni/svar JSON gögn

• Þegar HTML skjalið er tilbúið, notaðu requestJsonDoc() til að senda JSON beiðnina „mirror.config.session.get“ til að fá upplýsingar um stilltu loturnar.
• Eftir að JSON gögnin fyrir „mirror.capabilities.get“ hafa borist verður unnið úr svarhringingaraðgerðinni requestUpdate(). Aðgerðin requestUpdate mun þá kalla „mirror.config.session.get“ til að fá núverandi uppsetningu. Þegar núverandi uppsetning er móttekin er aðgerðin processUpdate kallað til að búa til töfluna sem á að sýna.

1. function requestUpdate()
2. {
3. // Endurheimtu innihald töflunnar
4. myDynamicTable.restore();
   5
5. // Þessi tafla tvö JSON gögn.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, „config“);
7. }

Vinnið úr mótteknum JSON gögnum

• Aðgerðin processUpdate() er notuð til að setja upp kviku töfluna eftir að hafa fengið JSON gögnin.
• AddRows() er notað til að bæta við töflulínum. myDynamicTable.update() útlitið
  HTML töflu í samræmi við gögnin í töflulínum.

1. function processUpdate (recv_json, nafn)
2. {
3. // Hunsa ferlið ef engin gögn berast
4. ef (!recv_json) {
5. alert(„Mistókst að fá kvik gögn.”);
6. skila;
7. }
8. // Vistaðu móttekin JSON gögn
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Bæta við töflulínum
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Uppfærðu þessa kraftmiklu töflu
15. myDynamicTable.update();
17. // Refresh timer
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (tímamælir) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Bættu við töflulínum

• Í addRows() aðgerðinni notum við JSON sniðið til að fylla út hverja alþjóðlega stillta færibreytu í töflulínunni.
• Allir HTML reitir eru skráðir í JSON fylkinu ("table_rows") og setningafræði töflureitsins er hér að neðan.

Setningafræði:
töfluraðir:[ , ,… ] : { , ,… }
: {"gerð": , „params“:[ , , …, ]}

• Í þessu tilviki hefur hver röð fimm reiti: "Session ID", "Mode", "Type", "VLAN ID" og "Reflector Port" Til dæmisample,

Auðkenni lotu (Nafnareitur: int32_t)	1 (Auðkenni speglalotunnar)
Mode (Nafnareitur: vtss_bool_t)	satt (sem þýðir að speglalotan er virkjuð)
Tegund (Nafnareitur: upptalning {mirror, rMirrorSource, rMirrorDestination}	RMirror Source (þetta er uppspretta fjarspeglunarlotu
VLAN auðkenni (Nafnareitur: uint16_t)	200 (Vlanið notað til að spegla)
Reflector Port (Nafnareitur: vtss_ifindex_t)	Gi 1/1 (Höfnin sem speglaða umferðin er send til

• MyDynamicTable.addRows() mun umbreyta JSON gögnunum í HTML snið og gefa út HTML töfluna.

1. fall addRow(lykill, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = „Ekkert“, none_interface_text = „ENGINN“;
4. var tunnel_mode_suffix = val.TunnelMode == „useglobal“ ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var röð = {reitir:[
6. {tegund:”link”, params:[“cr”, “mirror.htm?session_id=” + lykill, lykill]},
7. {tegund:"texti", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {tegund:"texti", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {tegund:“texti”, params:[val.Type == „spegill“ ? "-":
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. aftur röð;
13. }
14. fall addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Bæta við töfluhaus
19. addHeader (table_rows);
20. // Bættu við einni röð
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. skila table_rows;
25. }

Web hjálparsíðu
Fyrir web hjálparsíðuhönnun getur hjálparlýsingin vísað til JSON forskriftarinnar, að lýsingartextinn geti verið í samræmi við JSON úttak og hjálpar til við að draga úr óþarfa lýsingum. Fyrrverandiample hér er tekið úr dhcp6 relay stillingum.

Hyper-linkur í uppruna file
Úthlutaðu hjálpinni file staðsetningu í uppruna sínum file HTML tag. Fasta breytanafnið „help_page“ er notað fyrir web úthlutun hjálparsíðu.

2. // Hjálparsíða galdur
3. var help_page = “/help/help_xxx.htm”;

Uppfærðu HTML svæðislýsingu úr JSON forskrift

• Notaðu eða HTML tag til að lýsa HTML töflulýsingunni og gefið sérstakt auðkenni fyrir tag.
• Þegar HTML skjalið er tilbúið, hringdu í loadXMLDoc() til að fá alla JSON forskriftina eða fáðu tiltekna aðferðalýsingu með JSON aðferðarheiti "jsonRpc.status.introspection.specific.inventory.get".
• processTableDesc() er notað til að uppfæra töflulýsinguna og processUpdate() er notað til að uppfæra töflubreytulýsinguna.
• Í processUpdate(), hringdu í updateTableParamsDesc() til að uppfæra JSON frumefnin sem passa við tiltekna frumheiti.
• Uppfærðu eða tag innri HTML samkvæmt frumefnislýsingunni.

2. /* Uppfæra HTML lýsingareitina */
3. fall processTableDesc(req) {
4. if (!req.responseText) {
5. skila;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Uppfærðu töflulýsingu
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).lýsing;
10. }
11. /* Uppfærðu lýsingu HTML töflubreytu */
12. function processUpdate(recv_json) {
13. // Uppfærðu lýsingu á færibreytu töflu
14. var param_names = [
15. {
16. „alias“: „Viðmót“,
17. “type”: “vtss_ifindex_t”,
18. “nafn”: “vlanInterface”,
19. "viðskeyti": "."
20. },
21. {
22. “alias”: “Relay Interface”,
23. “type”: “vtss_ifindex_t”,
24. "nafn": "relayVlanInterface",
25. "viðskeyti": ". Auðkenni viðmótsins sem notað er fyrir miðlun.“
26. },
27. {
28. “alias”: “Relay Destination”,
29. “type”: “mesa_ipv6_t”,
30. “name”: “relay_destination”,
31. "viðskeyti": ". IPv6 vistfang DHCPv6 netþjónsins sem biður um skal senda til. Sjálfgefið gildi 'ff05::1:3' táknar 'alla DHCP netþjóna'.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Fáðu JSON forskrift */
37. window.addEvent('domready', fall () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-link í valmyndastiku

• HTML frumkóði valmyndarstikunnar er búinn til úr file webstax2\vtss_appl\web\ menu_default.cxx.
• Breyttu hlutunum í þessu file fyrir Web síðu hlekkur.

1. #ef skilgreint (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(“ Relay,dhcp6_relay.htm“);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

ATH
Taktu eftir að fjöldi bilstafs í ITEM(“”), sem er notaður til að ákveða hópstigið í valmyndastikunni. Í þessu tilfelli, allt web síður eru undir „DHCPv6“ hópnum.

Mynd 6. Dæmiample af alþjóðlegri stilltri töflu

Viðauki

Dæmigert web síður

Það eru nokkrir dæmigerðir web Hægt er að nota síður fyrir tilvísunarhönnun. Eitt frvampLeið sem á að sýna hér er uppsetning á einni spegillotu sem er að finna í vtss_appl\mirror\html\mirror.htm.
The web síða veitir nákvæma uppsetningu fyrir eina spegillotu. Allar stilltar færibreytur eru skráðar.

• Smelltu á „Vista“ hnappinn til að nota núverandi stillingar.
• Smelltu á „Endurstilla“ hnappinn til að endurstilla núverandi uppsetningu.
• Smelltu á „Hætta við“ til að fara aftur í yfirview af speglalotum

Spegill&RMSpegill stillingar

Alþjóðlegar stillingar

Uppruni VLAN(s) Stillingar

Port stillingar

Mynd 7. Example af nákvæmri uppsetningu spegillotu
Hnappunum „Vista“, „Endurstilla“ og „Hætta við“ er bætt við með HTML kóða:

JSON skipanaflæði
Þessi síða krefst tveggja þrepa skipanaflæðis:

• Fyrst þarf það að fá getu tækisins með aðferðinni „mirror.capabilities.get“. Möguleikarnir breytast ekki og þarf aðeins að lesa einu sinni.
• Síðan þarf það að fá núverandi uppsetningu tækisins með því að nota aðferðirnar „mirror.config.session.get“, „port.status.get“ og ef um er að ræða stöflun „topo.config.stacking.get“.

Símtalið „mirror.capabilities.get“ er hafið af „domready“ atburðinum og niðurstaðan er stillt þannig að hún sé meðhöndluð af aðgerðinni requestUpdate.
Beiðnin Uppfærsla mun hefja símtalið „mirror.config.session.get“,
„port.status.get“ og ef um er að ræða stöflun „topo.config.stacking.get“ og niðurstöður þessara símtala eru stilltar til að meðhöndla með aðgerðinni prepareUpdate.
Aðgerðin prepareUpdate mun safna öllum niðurstöðum, og aðeins þegar þær hafa allar verið mótteknar kallar hún á aðgerðina processUpdate sem mun búa til töflurnar til að sýna á web.

Heimildir

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

Skjöl / auðlindir

Microsemi AN1256 Web Forritara forrit [pdfNotendahandbók AN1256, AN1256 Web Forritaraumsókn, Web Forritari Umsókn, Umsókn

Heimildir

• Notendahandbók