Microsemi AN1256 Web Programmeurs Applikaasje

Ynlieding

JSON (JavaScript Object Notation) is in iepen standert file formaat dat troch minsken lêsbere tekst brûkt foar gegevensútwikseling. It is in mienskiplik gegevensformaat dat brûkt wurdt foar asynchrone browser/serverkommunikaasje.
Foar de nije web side-ûntwerp, kin JSON-formaat in ferfanging wêze foar de orizjinele AJAX-styl. Fergelykje mei AJAX, mei help fan JSON makket de Web útfiering makliker en ienfâldiger. De ûntwikkelder moat allinich fokusje op web side ûntwerp en de Web handler-ymplemintaasje kin wurde weilitten sûnt JSON tagong metoade wurdt al stipe yn elk WebStaX software modules.
Dit dokumint stelt de programmeurs gids foar de software yngenieur dy't moatte ûntwikkeljen de Web side fia JSON. De detailprosedueres en eksamples ek opnommen yn 'e folgjende seksjes.

JSON gegevens tagong stream

Oerview
Hjir is de stream fan JSON-gegevenstagong dy't in HTTP-ferbining wurdt inisjearre fanút de client (browser). De HTML-tabel wurdt dynamysk makke neffens de ûntfongen JOSN-gegevens fan 'e server (DUT) side.

figuer 1. De tagong stream tusken client en server

JSON-gegevens oanfreegje / antwurdzje
It JSON-fersykpakket is basearre op HTTP-fersykpostmetoade en de ynhâld moat it MSCC JSON-formaat folgje.

• JSON-syntaksis oanfreegje:{"metoade":" ","params":[ ], "id:"jsonrpc"}
• Antwurd JSON syntaksis: {"fersin": ,"resultaat": , "id:"jsonrpc"}

De folgjende snapshots litte de JSON-ynhâld sjen tusken de browser en DUT.

figuer 2. Snapshot fan HTTP-fersyk fan kliïnt

figuer 3. Snapshot fan HTTP-antwurd fan tsjinner

MSCC JSON spesifikaasje
Om de folsleine JSON-ynformaasje te krijen, ynklusyf de metoade, parameter, beskriuwing en ensfh. Typ "http:// /json_spec" op jo browseradresbalke. Der is in oare tagong metoade fia JSON metoade namme "jsonRpc.status.introspection.specific.inventory.get", it wurdt brûkt foar in spesifike metoade.

figuer 4. Snapshot fan JSON-spesifikaasje web side

Web kader

De Web ramt yn WebStaX-software is basearre op in iepen boarne MooTools. It is in samling JavaSkript-helpprogramma's mei MIT-lisinsje. (http://mootools.net/license.txt) De menubalke en de measte fan web siden binne basearre op it ramt. Sawol AJAX as JSON-algoritme binne al yntegreare yn har nutsbedriuwen.
Neist, WebStaX-software leveret de oare nutsbedriuwen dy't nuttich binne foar de JSON web side ûntwerp.

• json.js - Brûk foar om de dynamyske gegevens oer te stjoeren / te ûntfangen mei JSON-syntaksis.
• dynforms.js – Brûk foar it meitsjen fan de HTML-tabel dynamysk.
• validate.js – Brûk foar de falidaasje fan HTML-formulier.

De folsleine JavaSkript-biblioteken lizze ûnder de boarnebeammap: webstax2\ vtss_appl\web\html\lib.

Rjochtline foar JSON Web side ûntwerp

Dizze seksje liedt hoe't jo in ûntwerp meitsje web side basearre op MSCC JavaSkript bibleteken. Wy brûke de Mirror global konfigurearre web side as eksample hjir. De asynchrone kommunikaasje is basearre op HTTP JSON-tagongsmetoade en alle globale ynstelde parameters wurde fermeld yn ien dynamyske HTML-tabel.
De web side-yndieling wurdt hjirûnder neamd en de folsleine boarnekoade is te finen ûnder de boarnebeammap: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Om mear typysk te wurden web siden referinsje, sjoch de bylage seksje.

Spiegel& R Spiegelkonfiquraasjetabel

figuer 5. Example fan globale konfigurearre tabel

Bewurkje Web side

HTML header
Omfetsje de JS-biblioteken dy't nedich binne yn 'e HTML tag.

Inisjalisearje de dynamyske tabel boarne

• As it HTML-dokumint klear is, rop DynamicTable () foar in initialisearjen fan de dynamyske tabelboarne.
• De DynamicTable () wurdt brûkt om de dynamyske tabel te meitsjen nei't de JSON-gegevens ûntfongen is.
• It sil dan requestUpdate neame om de JSON-kommandostream te begjinnen.

1. window.addEvent('domready', function() {
2. // Meitsje in formulier mei tabel lichem foar ûntfange / ferstjoere JSON gegevens
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

JSON-gegevens oanfreegje / antwurdzje

• As it HTML-dokumint klear is, brûk requestJsonDoc () om it JSON-fersyk "mirror.config.session.get" te stjoeren om ynformaasje te krijen oer de konfigureare sesjes.
• Nei't de JSON-gegevens foar "mirror.capabilities.get" ûntfongen binne, sil de werombelfunksje requestUpdate () wurde ferwurke. De funksje requestUpdate sil dan "mirror.config.session.get" neame om de aktuele konfiguraasje te krijen. As de hjoeddeistige konfiguraasje wurdt ûntfongen, wurdt de funksje processUpdate oproppen om de tabel te bouwen dy't moat wurde werjûn.

1. funksje requestUpdate()
2. {
3. // Tabelynhâld weromsette
4. myDynamicTable.restore();
   5
5. // Dizze tabel twa JSON gegevens.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Ferwurkje de ûntfongen JSON-gegevens

• De funksje processUpdate () wurdt brûkt om de dynamyske tabel op te setten nei't de JSON-gegevens ûntfongen is.
• De addRows () wurdt brûkt om tabel rigen ta te foegjen. myDynamicTable.update () opmaak de
  HTML tabel neffens de gegevens yn tabel rigen.

1. function processUpdate(recv_json, namme)
2. {
3. // Negearje it proses as der gjin gegevens wurde ûntfongen
4. if (!recv_json) {
5. alert ("Dynamyske gegevens krije mislearre.");
6. weromkomme;
7. }
8. // Bewarje de ûntfongen JSON-gegevens
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Tabel rigen taheakje
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Update dizze dynamyske tabel
15. myDynamicTable.update();
17. // Timer ferfarskje
18. var autorefresh = document.getElementById("autorefresh");
19. if (autorefresh && autorefresh.checked) {
20. if (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Foegje tabel rigen ta

• Yn de addRows () -funksje brûke wy it JSON-formaat om elke globale konfigureare parameter yn 'e tabelrige te foljen.
• Alle HTML-fjilden wurde neamd yn 'e JSON-array ("table_rows") en de syntaksis fan tabelfjild is hjirûnder.

Syntaksis:
tabel_rigen:[ , , … ] : { , , … }
: {"type": , "params":[ , , …, ]}

• Yn dit gefal hat elke rige fiif fjilden: "Session ID", "Modus", "Type", "VLAN ID" en "Reflector Port" Bygelyksample,

Sesje ID (Nammefjild: int32_t)	1 (Id fan 'e spegelsesje)
Wize (Nammefjild: vtss_bool_t)	wier (Dat betsjut dat de spegelsesje is ynskeakele)
Type (Nammefjild: opsomming {mirror, rMirrorSource, rMirrorDestination}	RMirror Boarne (dit is de boarne fan in spegelsesje op ôfstân
VLAN ID (Nammefjild: uint16_t)	200 (de vlan brûkt foar spegeljen)
Reflector Port (Nammefjild: vtss_ifindex_t)	Gi 1/1 (De poarte dêr't it spegele ferkear nei ferstjoerd wurdt

• De myDynamicTable.addRows() sil de JSON-gegevens konvertearje nei HTML-formaat en de HTML-tabel útfiere.

1. funksje addRow (key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Gjin", none_interface_text = "Gjin";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rige = {fjilden:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + kaai, kaai]},
7. {type:"tekst", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type:"tekst", params:[val.Type == "spegel" ? "-":
   val.RMirrorVlan, "c"]},
10. {type:"text", params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : "-", "c"]}
11. ]};
12. werom rige;
13. }
14. funksje addRows(recv_json)
15. {
16. var rige, lege_colspan = 7;
17. var table_rows = new Array();
18. // Tafelkop taheakje
19. addHeader(tabel_rows);
20. // Foegje inkele rige ta
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. return table_rows;
25. }

Web help side
Foar de web helpside-ûntwerp, kin de helpbeskriuwing ferwize nei de JSON-spesifikaasje, dat de beskriuwingstekst kin oerienkomme mei JSON-útfier en helpt om de oerstallige beskriuwingen te ferminderjen. Example hjir is nommen út dhcp6 relay konfiguraasje.

Hyperlink yn 'e boarne file
Tawize de help file lokaasje yn syn boarne file HTML tag. De fêste fariabele namme "help_page" wurdt brûkt foar de web help side opdracht.

2. // Help side magic
3. var help_page = "/help/help_xxx.htm";

Update HTML-fjildbeskriuwing fan JSON-spesifikaasje

• Brûke of HTML tag te ferklearjen de HTML tabel beskriuwing en jûn in unike ID foar de tag.
• As it HTML-dokumint klear is, rop loadXMLDoc () om de hiele JSON-spesifikaasje te krijen of de spesifike metoadebeskriuwing te krijen troch JSON-metoadenamme "jsonRpc.status.introspection.specific.inventory.get".
• De processTableDesc () wurdt brûkt om te aktualisearjen de tabel beskriuwing en processUpdate () wurdt brûkt om te fernijen de tabel parameter beskriuwing.
• Yn processUpdate (), rop updateTableParamsDesc () om de JSON-eleminten te aktualisearjen dy't oerienkomme mei de spesifike elemintnammen.
• Update de of tag binnen HTML neffens de elemint beskriuwing.

2. /* Update HTML-beskriuwingsfjilden */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. weromkomme;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Update tabel beskriuwing
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Update HTML tabel parameter beskriuwing */
12. function processUpdate(recv_json) {
13. // Update tabel parameter beskriuwing
14. var param_names = [
15. {
16. "alias": "Interface",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "suffix": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "suffix": ". De id fan 'e ynterface brûkt foar relay.
26. },
27. {
28. "alias": "Relay bestimming",
29. "type": "mesa_ipv6_t",
30. "namme": "relay_destination",
31. "suffix": ". It IPv6-adres fan 'e DHCPv6-tsjinner wêr't fersiken nei wurde trochstjoerd. De standertwearde 'ff05::1:3' bemanet 'elke DHCP-tsjinner'.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Krij JSON-spesifikaasje */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyperlink yn menubalke

• De HTML-boarnekoade fan menubalke wurdt generearre út file webstax2\vtss_appl\web\ menu_default.cxx.
• Bewurkje de items yn dizze file foar de Web side hyperlink.

1. #as definiearre (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOAT
Merken dat it oantal spaasje karakter yn ITEM (""), dat wurdt brûkt om te besluten de groep nivo yn de menubalke. Yn dit gefal, allegear web siden binne ûnder de groep "DHCPv6".

Figuer 6. Example fan globale konfigurearre tabel

Taheakke

Typysk web siden

Der binne ferskate typyske web siden kinne brûkt wurde foar it referinsjeûntwerp. Ien ekstra eksample to be show hjir is de konfiguraasje fan in inkele spegel sesje fûn yn vtss_appl \ mirror \ html \ mirror.htm.
De web side jout de detaillearre konfiguraasje foar in inkele spegel sesje. Alle ynstelde parameters wurde neamd.

• Klikje op de knop "Bewarje" om de aktuele konfiguraasje ta te passen.
• Klikje op "Reset" knop om de aktuele konfiguraasje werom te setten.
• Klikje op "Ofbrekke" om werom te gean nei it oerview fan spegelsesjes

Mirror&RMirror konfiguraasje

Globale ynstellings

Boarne VLAN (s) Konfiguraasje

Port Konfiguraasje

figuer 7. Example fan detaillearre konfiguraasje fan spegel sesje
De knoppen "Bewarje", "Weromsette" en "Ofbrekke" wurde tafoege troch de html-koade:

JSON kommando flow
Dizze side fereasket in twa-stap kommando-flow:

• Earst moat it de mooglikheden fan it apparaat krije mei de metoade "mirror.capabilities.get". De mooglikheden feroarje net en hoege mar ien kear te lêzen.
• Dan moat it de hjoeddeistige konfiguraasje fan it apparaat krije mei de metoaden "mirror.config.session.get", "port.status.get" en yn gefal fan stapeljen "topo.config.stacking.get".

De oprop fan "mirror.capabilities.get" wurdt inisjearre troch it "domready" evenemint en it resultaat is konfigurearre om te wurde behannele troch de funksje requestUpdate.
De requestUpdate sil de oprop fan "mirror.config.session.get" begjinne,
"port.status.get" en yn gefal fan stapeljen "topo.config.stacking.get" en de resultaten fan 'e dizze oproppen binne konfigurearre om te wurde behannele troch de funksje prepareUpdate.
De funksje prepareUpdate sil alle resultaten sammelje, en pas as de allegear ûntfongen binne, sil it de funksje processUpdate neame dy't de tabellen sil konstruearje om te sjen op 'e web.

Referinsjes

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

Dokuminten / Resources

Microsemi AN1256 Web Programmeurs Applikaasje [pdf] Brûkersgids AN 1256, AN 1256 Web Programmeurs applikaasje, Web Programmers Applikaasje, Applikaasje

Referinsjes

• User Manual