Microsemi AN1256 Web Programmerare ansökan

Introduktion

JSON (JavaScript Object Notation) är en öppen standard file format som använder läsbar text för datautbyte. Det är ett vanligt dataformat som används för asynkron webbläsare/serverkommunikation.
För det nya web siddesign, kan JSON-formatet ersätta den ursprungliga AJAX-stilen. Jämför med AJAX, att använda JSON gör att Web implementering enklare och enklare. Utvecklaren behöver bara fokusera på web siddesign och Web hanterarimplementering kan utelämnas eftersom JSON-åtkomstmetoden redan stöds i varje WebStaX mjukvarumoduler.
Detta dokument anger programmeringsguiden för mjukvaruingenjören som behöver utveckla Web sida via JSON. Detaljprocedurerna och examples som också ingår i följande avsnitt.

JSON dataåtkomstflöde

Överview
Här är JSON-dataåtkomstflödet som en HTTP-anslutning initieras från klienten (webbläsaren). HTML-tabellen skapas dynamiskt enligt den mottagna JOSN-datan från serverns (DUT) sida.

Figur 1. Åtkomstflödet mellan klient och server

Begär/svar JSON-data
JSON-förfrågningspaketet är baserat på HTTP-begäranpostmetoden och innehållet måste följa MSCC JSON-formatet.

• Begär JSON-syntax:{"metod":" ","params":[ ], “id:”jsonrpc”}
• Svar JSON-syntax: {"fel": ,"resultat": , "id:"jsonrpc"}

Följande ögonblicksbilder visar JSON-innehållet mellan webbläsaren och DUT.

Figur 2. Ögonblicksbild av HTTP-begäran från klienten

Figur 3. Ögonblicksbild av HTTP-svar från server

MSCC JSON-specifikation
För att få den fullständiga JSON-informationen inklusive metoden, parametern, beskrivningen etc. Skriv "http:// /json_spec" i webbläsarens adressfält. Det finns en annan åtkomstmetod via JSON-metodnamnet "jsonRpc.status.introspection.specific.inventory.get", den används för en specifik metod.

Figur 4. Ögonblicksbild av JSON-specifikationen web sida

Web ram

De Web ram i WebStaX programvara är baserad på MooTools med öppen källkod. Det är en samling JavaScript-verktyg med MIT-licens. (http://mootools.net/license.txt) Menyraden och de flesta av web sidor är baserade på ramverket. Både AJAX och JSON-algoritmen är redan integrerade i dess verktyg.
Dessutom, WebStaX programvara tillhandahåller andra verktyg som är användbara för JSON web siddesign.

• json.js – Använd för att överföra/ta emot dynamisk data med JSON-syntax.
• dynforms.js – Använd för att skapa HTML-tabellen dynamiskt.
• validate.js – Använd för validering av HTML-formulär.

De fullständiga JavaScript-biblioteken finns under källträdskatalogen: webstax2\ vtss_appl\web\html\lib.

Riktlinje för JSON Web siddesign

Det här avsnittet vägleder hur du designar en web sida baserad på MSCC JavaScript-bibliotek. Vi använder Mirror global konfigurerad web sida som example här. Den asynkrona kommunikationen är baserad på HTTP JSON-åtkomstmetoden och alla globala konfigurerade parametrar listas i en dynamisk HTML-tabell.
De web sidlayouten listas nedan och hela källkoden finns under källträdskatalogen: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. För att bli mer typiskt web sidhänvisning, se avsnittet bilaga.

Spegel& RSpegelkonfiqurationstabell

Figur 5. Example av globalt konfigurerad tabell

Redigera Web sida

HTML-huvud
Inkludera de JS-bibliotek som behövs i HTML-koden tag.

Initiera den dynamiska tabellresursen

• När HTML-dokumentet är klart, anrop DynamicTable() för att initiera den dynamiska tabellresursen.
• DynamicTable() används för att skapa den dynamiska tabellen efter att ha tagit emot JSON-data.
• Det kommer sedan att anropa requestUpdate för att initiera JSON-kommandoflödet.

1. window.addEvent('domready', function() {
2. // Skapa ett formulär med tabellkropp för att ta emot/sända JSON-data
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Begär/svar JSON-data

• När HTML-dokumentet är klart, använd requestJsonDoc() för att skicka JSON-förfrågan "mirror.config.session.get" för att få information om de konfigurerade sessionerna.
• Efter att JSON-data för "mirror.capabilities.get" har tagits emot kommer callback-funktionen requestUpdate() att behandlas. Funktionen requestUpdate anropar sedan "mirror.config.session.get" för att få den aktuella konfigurationen. När den aktuella konfigurationen tas emot anropas funktionen processUpdate för att bygga tabellen som ska visas.

1. funktion requestUpdate()
2. {
3. // Återställ tabellinnehåll
4. myDynamicTable.restore();
   5
5. // Denna tabell två JSON-data.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Bearbeta mottagna JSON-data

• Funktionen processUpdate() används för att layouta den dynamiska tabellen efter att ha tagit emot JSON-data.
• AddRows() används för att lägga till tabellrader. myDynamicTable.update() layouten
  HTML-tabell enligt data i tabellrader.

1. funktion processUpdate(recv_json, namn)
2. {
3. // Ignorera processen om ingen data tas emot
4. if (!recv_json) {
5. alert(“Hämta dynamisk data misslyckades.”);
6. återvända;
7. }
8. // Spara mottagen JSON-data
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Lägg till tabellrader
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tabell_rader);
14. // Uppdatera den här dynamiska tabellen
15. myDynamicTable.update();
17. // Uppdatera timer
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. }

Lägg till tabellrader

• I funktionen addRows() använder vi JSON-formatet för att fylla varje globalt konfigurerad parameter i tabellraden.
• Alla HTML-fält listas i JSON-matrisen ("tabell_rader") och syntaxen för tabellfältet är nedan.

Syntax:
table_rows:[ , , … ] : { , , … }
: {"typ": , "params":[ , , …, ]}

• I det här fallet har varje rad fem fält: "Session ID", "Mode", "Type", "VLAN ID" och "Reflector Port" T.ex.ample,

Sessions-ID (Namnfält: int32_t)	1 (Id för spegelsessionen)
Läge (Namnfält: vtss_bool_t)	sann (Betyder att spegelsessionen är aktiverad)
Typ (Namnfält: uppräkning {mirror, rMirrorSource, rMirrorDestination}	RMirror källa (detta är källan till en fjärrspegelsession
VLAN ID (Namnfält: uint16_t)	200 (Vlan som används för spegling)
Reflektorport (Namnfält: vtss_ifindex_t)	Gi 1/1 (Porten till vilken den speglade trafiken skickas

• MyDynamicTable.addRows() kommer att konvertera JSON-data till HTML-format och mata ut HTML-tabellen.

1. funktion addRow(nyckel, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Ingen", none_interface_text = "INGEN";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rad = {fält:[
6. {typ:”länk”, params:[“cr”, “mirror.htm?session_id=” + nyckel, nyckel]},
7. {typ:”text”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {typ:”text”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {typ:”text”, params:[val.Type == “spegel” ? "-":
   val.RMirrorVlan, "c"]},
10. {typ:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. återvända rad;
13. }
14. funktion addRows(recv_json)
15. {
16. var rad, tomt_kolspan = 7;
17. var table_rows = new Array();
18. // Lägg till tabellhuvud
19. addHeader(tabell_rader);
20. // Lägg till en rad
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. returnera table_rows;
25. }

Web hjälpsida
För den web hjälpsidans design, kan hjälpbeskrivningen hänvisa till JSON-specifikationen, att beskrivningstexten kan överensstämma med JSON-utdata och hjälper till att minska de redundanta beskrivningarna. Example här är hämtad från dhcp6 reläkonfiguration.

Hyperlänk i källan file
Tilldela hjälpen file plats i dess källa file HTML tag. Det fasta variabelnamnet "help_page" används för web hjälpsida tilldelning.

2. // Hjälpsida magi
3. var help_page = “/help/help_xxx.htm”;

Uppdatera HTML-fältbeskrivning från JSON-specifikationen

• Använda sig av eller HTML tag att deklarera HTML-tabellbeskrivningen och ges ett unikt ID för tag.
• När HTML-dokumentet är klart, anrop loadXMLDoc() för att få hela JSON-specifikationen eller få den specifika metodbeskrivningen av JSON-metodnamnet "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc() används för att uppdatera tabellbeskrivningen och processUpdate() används för att uppdatera tabellparameterbeskrivningen.
• I processUpdate(), anrop updateTableParamsDesc() för att uppdatera JSON-elementen som matchar de specifika elementnamnen.
• Uppdatera eller tag inre HTML enligt elementbeskrivningen.

2. /* Uppdatera HTML-beskrivningsfält */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. återvända;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Uppdatera tabellbeskrivning
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Uppdatera HTML-tabellparameterbeskrivning */
12. function processUpdate(recv_json) {
13. // Uppdatera tabellparameterbeskrivning
14. var param_names = [
15. {
16. "alias": "Gränssnitt",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "suffix": "."
20. },
21. {
22. "alias": "Relägränssnitt",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "suffix": ". Id för gränssnittet som används för vidarebefordran."
26. },
27. {
28. "alias": "Relädestination",
29. "type": "mesa_ipv6_t",
30. "name": "relay_destination",
31. "suffix": ". IPv6-adressen för DHCPv6-servern som begär ska vidarebefordras till. Standardvärdet 'ff05::1:3' anger 'valfri DHCP-server'."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Hämta JSON-specifikation */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyperlänk i menyraden

• HTML-källkoden för menyraden genereras från file webstax2\vtss_appl\web\ menu_default.cxx.
• Redigera objekten i denna file för Web sidans hyperlänk.

1. #if defined(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTERA
Lägg märke till att antalet blanksteg i ITEM(“”), som används för att bestämma gruppnivån i menyraden. I det här fallet, alla web sidorna finns under gruppen "DHCPv6".

Figur 6. Example av globalt konfigurerad tabell

Bilaga

Typisk web sidor

Det finns flera typiska web sidor kan användas för referensdesignen. Ytterligare ett exampDen som ska visas här är konfigurationen av en enstaka spegelsession som finns i vtss_appl\mirror\html\mirror.htm.
De web sidan ger den detaljerade konfigurationen för en enda spegelsession. Alla konfigurerade parametrar listas.

• Klicka på "Spara"-knappen för att tillämpa den aktuella konfigurationen.
• Klicka på knappen "Återställ" för att återställa den aktuella konfigurationen.
• Klicka på "Avbryt" för att återgå till övergångenview av spegelsessioner

Spegel&RMSpegelkonfiguration

Globala inställningar

Käll-VLAN-konfiguration

Portkonfiguration

Figur 7. Exampdel av detaljerad konfiguration av spegelsessionen
Knapparna "Spara", "Återställ" och "Avbryt" läggs till av html-koden:

JSON kommandoflöde
Den här sidan kräver ett kommandoflöde i två steg:

• Först måste den få enhetens funktioner med metoden "mirror.capabilities.get". Möjligheterna ändras inte och behöver bara läsas en gång.
• Sedan måste den få den aktuella konfigurationen av enheten med metoderna "mirror.config.session.get", "port.status.get" och i händelse av stackning "topo.config.stacking.get".

Anropet av "mirror.capabilities.get" initieras av "domready"-händelsen och resultatet är konfigurerat för att hanteras av funktionen requestUpdate.
requestUpdate kommer att initiera anropet av "mirror.config.session.get",
"port.status.get" och i händelse av stackning "topo.config.stacking.get" och resultaten av dessa anrop är konfigurerade för att hanteras av funktionen prepareUpdate.
Funktionen prepareUpdate kommer att samla in alla resultat, och först när alla har tagits emot kommer den att anropa funktionen processUpdate som kommer att konstruera tabellerna som ska visas på web.

Referenser

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

Dokument/resurser

Microsemi AN1256 Web Programmerare ansökan [pdf] Användarhandbok AN1256, AN1256 Web Programmerare applikation, Web Programmerare Application, Application

Referenser

• Användarmanual