Microsemi AN1256 Web Programmers applikation

Indledning

JSON (JavaScript Object Notation) er en åben standard file format, der bruger menneskelæsbar tekst til dataudveksling. Det er et almindeligt dataformat, der bruges til asynkron browser/serverkommunikation.
Til det nye web sidedesign, kan JSON-format være en erstatning for den originale AJAX-stil. Sammenlign med AJAX, brug af JSON gør Web implementering nemmere og enklere. Udvikleren skal kun fokusere på web sidedesign og Web handlerimplementering kan udelades, da JSON-adgangsmetoden allerede er understøttet i hver WebStaX software moduler.
Dette dokument angiver programmørvejledningen til softwareingeniøren, der skal udvikle Web side via JSON. Detaljeprocedurerne og examples også inkluderet i de følgende afsnit.

JSON dataadgangsflow

Overview
Her er JSON-dataadgangsflowet, som en HTTP-forbindelse startes fra klienten (browseren). HTML-tabellen oprettes dynamisk i henhold til de modtagne JOSN-data fra server-(DUT)-siden.

Figur 1. Adgangsflowet mellem klient og server

Anmod/svar JSON-data
JSON-anmodningspakken er baseret på HTTP-anmodningspostmetoden, og indholdet skal følge MSCC JSON-formatet.

• Anmod om JSON-syntaks:{"metode":" ","params":[ ], "id:"jsonrpc"}
• Svar JSON-syntaks: {"fejl": ,"resultat": , "id:"jsonrpc"}

Følgende snapshots viser JSON-indholdet mellem browseren og DUT.

Figur 2. Snapshot af HTTP-anmodning fra klient

Figur 3. Snapshot af HTTP-svar fra server

MSCC JSON-specifikation
For at få den fulde JSON-information, inklusive metode, parameter, beskrivelse osv. Skriv "http:// /json_spec" på din browsers adresselinje. Der er en anden adgangsmetode via JSON-metodenavnet "jsonRpc.status.introspection.specific.inventory.get", den bruges til en bestemt metode.

Figur 4. Snapshot af JSON-specifikationen web side

Web rammer

De Web rammer i WebStaX software er baseret på en open source MooTools. Det er en samling af JavaScript-værktøjer med MIT-licens. (http://mootools.net/license.txt) Menulinjen og det meste af web sider er baseret på rammerne. Både AJAX- og JSON-algoritmen er allerede integreret i dets hjælpeprogrammer.
Udover, WebStaX-software giver de andre hjælpeprogrammer, som er nyttige til JSON web sidedesign.

• json.js – Brug for til at sende/modtage de dynamiske data med JSON-syntaks.
• dynforms.js – Bruges til at oprette HTML-tabellen dynamisk.
• validate.js – Bruges til validering af HTML-formular.

De fulde JavaScript-biblioteker er placeret under kildetræbiblioteket: webstax2\ vtss_appl\web\html\lib.

Retningslinje for JSON Web sidedesign

Dette afsnit guider hvordan man designer en web side baseret på MSCC JavaScript-biblioteker. Vi bruger den globale spejl konfigureret web side som exampher. Den asynkrone kommunikation er baseret på HTTP JSON-adgangsmetoden, og alle globalt konfigurerede parametre er opført i én dynamisk HTML-tabel.
De web sidelayout er angivet nedenfor, og den fulde kildekode er placeret under kildetræbiblioteket: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. For at blive mere typisk web siderhenvisning, se appendiksafsnittet.

Spejl & RSpejletabel

Figur 5. Example af globalt konfigureret tabel

Redigere Web side

HTML header
Inkluder de nødvendige JS-biblioteker i HTML tag.

Initialiser den dynamiske tabelressource

• Når HTML-dokumentet er klar, skal du kalde DynamicTable() for at initialisere den dynamiske tabelressource.
• DynamicTable() bruges til at oprette den dynamiske tabel efter modtagelsen af ​​JSON-dataene.
• Det vil derefter kalde requestUpdate for at starte JSON-kommandoflowet.

1. window.addEvent('domready', function() {
2. // Opret en formular med tabeltekst til modtagelse/transmission af JSON-data
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Anmod/svar JSON-data

• Når HTML-dokumentet er klar, skal du bruge requestJsonDoc() til at sende JSON-anmodningen "mirror.config.session.get" for at få information om de konfigurerede sessioner.
• Efter at JSON-dataene for "mirror.capabilities.get" er modtaget, vil tilbagekaldsfunktionen requestUpdate() blive behandlet. Funktionen requestUpdate vil derefter kalde "mirror.config.session.get" for at få den aktuelle konfiguration. Når den aktuelle konfiguration er modtaget, kaldes funktionen processUpdate for at bygge den tabel, der skal vises.

1. funktion requestUpdate()
2. {
3. // Gendan tabelindhold
4. myDynamicTable.restore();
   5
5. // Denne tabel to JSON-data.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Behandle de modtagne JSON-data

• Funktionen processUpdate() bruges til at layoute den dynamiske tabel efter modtagelsen af ​​JSON-dataene.
• addRows() bruges til at tilføje tabelrækker. myDynamicTable.update() layoutet
  HTML-tabel ifølge dataene i tabelrækker.

1. funktion processUpdate(recv_json, navn)
2. {
3. // Ignorer processen, hvis der ikke modtages data
4. if (!recv_json) {
5. alert(“Hent dynamiske data mislykkedes.”);
6. returnere;
7. }
8. // Gem de modtagne JSON-data
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Tilføj tabelrækker
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tabel_rækker);
14. // Opdater denne dynamiske tabel
15. myDynamicTable.update();
17. // Opdater 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. }

Tilføj tabelrækker

• I funktionen addRows() bruger vi JSON-formatet til at udfylde hver globalt konfigureret parameter i tabelrækken.
• Alle HTML-felter er angivet i JSON-arrayet ("table_rows"), og syntaksen for tabelfeltet er nedenfor.

Syntaks:
tabel_rækker:[ , , … ] : { , , … }
: {“type”: , "params":[ , , …, ]}

• I dette tilfælde har hver række fem felter: "Session ID", "Mode", "Type", "VLAN ID" og "Reflector Port" F.eks.ample,

Sessions-id (Navnefelt: int32_t)	1 (Id for spejlsessionen)
Mode (Navnefelt: vtss_bool_t)	ægte (Det betyder, at spejlsessionen er aktiveret)
Type (Navnefelt: opregning {mirror, rMirrorSource, rMirrorDestination}	RMirror kilde (dette er kilden til en ekstern spejlsession
VLAN ID (Navnefelt: uint16_t)	200 (vlanen brugt til spejling)
Reflektor port (Navnefelt: vtss_ifindex_t)	Gi 1/1 (Porten, som den spejlede trafik sendes til

• myDynamicTable.addRows() vil konvertere JSON-dataene til HTML-format og udlæse HTML-tabellen.

1. funktion addRow(nøgle, 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 række = {felter:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + tast, tast]},
7. {type:"tekst", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type:"tekst", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type:”tekst”, params:[val.Type == “spejl” ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”tekst”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : "-", "c"]}
11. ]};
12. retur række;
13. }
14. funktion addRows(recv_json)
15. {
16. var række, tomme_kolspan = 7;
17. var table_rows = new Array();
18. // Tilføj tabeloverskrift
19. addHeader(tabel_rækker);
20. // Tilføj enkelt række
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. returner tabel_rækker;
25. }

Web hjælpeside
For web hjælpesidedesign, kan hjælpebeskrivelsen henvise til JSON-specifikationen, at beskrivelsesteksten kan stemme overens med JSON-output og hjælper med at reducere de overflødige beskrivelser. Eksample her er taget fra dhcp6 relækonfiguration.

Hyperlink i kilden file
Tildel hjælpen file placering i sin kilde file HTML tag. Det faste variabelnavn "help_page" bruges til web hjælpeside opgave.

2. // Hjælp side magi
3. var help_page = “/help/help_xxx.htm”;

Opdater HTML-feltbeskrivelse fra JSON-specifikationen

• Bruge eller HTML tag at erklære HTML-tabelbeskrivelsen og givet et unikt ID for tag.
• Når HTML-dokumentet er klar, skal du kalde loadXMLDoc() for at få hele JSON-specifikationen eller få den specifikke metodebeskrivelse ved JSON-metodenavnet "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc() bruges til at opdatere tabelbeskrivelsen og processUpdate() bruges til at opdatere tabelparameterbeskrivelsen.
• Kald updateTableParamsDesc() i processUpdate() for at opdatere JSON-elementerne, som matcher de specifikke elementnavne.
• Opdater eller tag indre HTML i henhold til elementbeskrivelsen.

2. /* Opdater HTML-beskrivelsesfelter */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. returnere;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Opdater tabelbeskrivelse
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Opdater HTML-tabelparameterbeskrivelse */
12. function processUpdate(recv_json) {
13. // Opdater tabelparameterbeskrivelse
14. var param_navne = [
15. {
16. "alias": "Grænseflade",
17. "type": "vtss_ifindex_t",
18. "navn": "vlanInterface",
19. "suffiks": "."
20. },
21. {
22. "alias": "Relægrænseflade",
23. "type": "vtss_ifindex_t",
24. "navn": "relayVlanInterface",
25. "suffiks": ". Id'et for den grænseflade, der bruges til relæ."
26. },
27. {
28. "alias": "Relædestination",
29. "type": "mesa_ipv6_t",
30. "navn": "relædestination",
31. "suffiks": ". IPv6-adressen på den DHCPv6-server, der anmoder om, videresendes til. Standardværdien 'ff05::1:3' bemander 'enhver DHCP-server'."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Hent 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. });

Hyperlink i menulinjen

• HTML-kildekoden til menulinjen er genereret fra file webstax2\vtss_appl\web\ menu_default.cxx.
• Rediger elementerne i denne file for Web side hyperlink.

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

NOTE
Bemærk, at antallet af mellemrumstegn i ITEM(“”), som bruges til at bestemme gruppeniveauet i menulinjen. I dette tilfælde alle web sider er under "DHCPv6"-gruppen.

Figur 6. Eksample af globalt konfigureret tabel

Tillæg

Typisk web sider

Der er flere typiske web sider kan bruges til referencedesignet. Et ekstra example, der skal vises her, er konfigurationen af ​​en enkelt spejlsession fundet i vtss_appl\mirror\html\mirror.htm.
De web side giver den detaljerede konfiguration for en enkelt spejlsession. Alle konfigurerede parametre er angivet.

• Klik på knappen "Gem" for at anvende den aktuelle konfiguration.
• Klik på knappen "Nulstil" for at nulstille den aktuelle konfiguration.
• Klik på "Annuller" for at vende tilbage til overview af spejlsessioner

Spejl&RMSpejlingskonfiguration

Globale indstillinger

Kilde VLAN(er) Konfiguration

Portkonfiguration

Figur 7. Example af detaljeret konfiguration af spejlsession
Knapperne "Gem", "Nulstil" og "Annuller" tilføjes af html-koden:

JSON kommando flow
Denne side kræver et to-trins kommandoflow:

• Først skal den få enhedens muligheder med metoden "mirror.capabilities.get". Mulighederne ændres ikke og skal kun læses én gang.
• Så skal den få den aktuelle konfiguration af enheden ved hjælp af metoderne "mirror.config.session.get", "port.status.get" og i tilfælde af stabling "topo.config.stacking.get".

Kaldet af "mirror.capabilities.get" initieres af "domready"-hændelsen, og resultatet er konfigureret til at blive håndteret af funktionen requestUpdate.
requestUpdate vil påbegynde opkaldet til "mirror.config.session.get",
"port.status.get" og i tilfælde af stabling "topo.config.stacking.get" og resultaterne af disse opkald er konfigureret til at blive håndteret af funktionen prepareUpdate.
Funktionen prepareUpdate vil indsamle alle resultater, og først når alle er modtaget, vil den kalde funktionen processUpdate, der vil konstruere de tabeller, der skal vises på web.

Referencer

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

Dokumenter/ressourcer

Microsemi AN1256 Web Programmers applikation [pdfBrugervejledning AN1256, AN1256 Web Programmers applikation, Web Programmers applikation, applikation

Referencer

• Brugermanual