Mikrosemi AN1256 Web Programmeerders Aansoek

Inleiding

JSON (JavaScript Object Notation) is 'n oop standaard file formaat wat mensleesbare teks vir data-uitruiling gebruik. Dit is 'n algemene dataformaat wat gebruik word vir asinchroniese blaaier/bedienerkommunikasie.
Vir die nuwe web bladsyontwerp, kan JSON-formaat 'n plaasvervanger wees vir die oorspronklike AJAX-styl. Vergelyk met AJAX, met behulp van JSON maak die Web implementering makliker en eenvoudiger. Die ontwikkelaar hoef net te fokus op web bladsy ontwerp en die Web hanteerderimplementering kan weggelaat word aangesien JSON-toegangsmetode reeds in elkeen ondersteun word WebStaX sagteware modules.
Hierdie dokument stel die programmeerdersgids vir die sagteware-ingenieur wat die Web bladsy via JSON. Die detail prosedures en examples ook ingesluit in die volgende afdelings.

JSON-datatoegangvloei

verbyview
Hier is die JSON-datatoegangsvloei wat 'n HTTP-verbinding vanaf die kliënt (blaaier) geïnisieer word. Die HTML-tabel word dinamies geskep volgens die ontvangde JOSN-data vanaf die bediener(DUT)-kant.

Figuur 1. Die toegangsvloei tussen kliënt en bediener

Versoek/reageer JSON-data
Die JSON-versoekpakket is gebaseer op die HTTP-versoekposmetode en die inhoud moet die MSCC JSON-formaat volg.

• Versoek JSON-sintaksis:{"metode":" ","params":[ ], "id:"jsonrpc"}
• Antwoord JSON-sintaksis: {“fout”: "resultaat": , "id:"jsonrpc"}

Die volgende kiekies wys die JSON-inhoud tussen die blaaier en DUT.

Figuur 2. Foto van HTTP-versoek van kliënt

Figuur 3. Foto van HTTP-reaksie vanaf bediener

MSCC JSON spesifikasie
Om die volledige JSON-inligting te kry, insluitend die metode, parameter, beskrywing en ens. Tik “http:// /json_spec" op jou blaaieradresbalk. Daar is 'n ander toegang metode via JSON metode naam "jsonRpc.status.introspection.specific.inventory.get", dit word gebruik vir 'n spesifieke metode.

Figuur 4. Foto van JSON-spesifikasie web bladsy

Web raamwerk

Die Web raamwerk in WebStaX-sagteware is gebaseer op 'n oopbron MooTools. Dit is 'n versameling JavaScript-hulpprogramme met MIT-lisensie. (http://mootools.net/license.txt) Die spyskaartbalk en die meeste van web bladsye is gebaseer op die raamwerk. Beide AJAX- en JSON-algoritme is reeds in sy nutsprogramme geïntegreer.
Buitendien, WebStaX-sagteware verskaf die ander nutsprogramme wat nuttig is vir die JSON web bladsy ontwerp.

• json.js – Gebruik vir om die dinamiese data met JSON-sintaksis te stuur/ontvang.
• dynforms.js – Gebruik om die HTML-tabel dinamies te skep.
• validate.js – Gebruik vir die validering van HTML-vorm.

Die volledige JavaScript-biblioteke is onder die bronboomgids geleë: webstax2\ vtss_appl\web\html\lib.

Riglyn vir JSON Web bladsy ontwerp

Hierdie afdeling lei hoe om 'n web bladsy gebaseer op MSCC JavaScript biblioteke. Ons gebruik die Spieël globale gekonfigureerde web bladsy as die example hier. Die asynchrone kommunikasie is gebaseer op HTTP JSON-toegangsmetode en alle globale gekonfigureerde parameters word in een dinamiese HTML-tabel gelys.
Die web bladsyuitleg word hieronder gelys en die volledige bronkode is onder die bronboomgids geleë: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Om meer tipies te word web bladsye verwysing, sien die bylaag afdeling.

Spieël& RSpieëlkonfiqurasietabel

Figuur 5. Example van globale gekonfigureerde tabel

Wysig Web bladsy

HTML-kopskrif
Sluit die JS-biblioteke in wat nodig is in die HTML tag.

Inisialiseer die dinamiese tabelhulpbron

• Wanneer die HTML-dokument gereed is, roep DynamicTable() om die dinamiese tabelhulpbron te inisialiseer.
• Die DynamicTable() word gebruik om die dinamiese tabel te skep nadat die JSON-data ontvang is.
• Dit sal dan requestUpdate oproep om die JSON-opdragvloei te begin.

1. window.addEvent('domready', function() {
2. // Skep 'n vorm met tabelliggaam vir ontvang/stuur JSON-data
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Versoek/reageer JSON-data

• Wanneer die HTML-dokument gereed is, gebruik requestJsonDoc() om die JSON-versoek "mirror.config.session.get" te stuur om inligting oor die gekonfigureerde sessies te kry.
• Nadat die JSON-data vir "mirror.capabilities.get" ontvang is, sal die terugbelfunksie requestUpdate() verwerk word. Die funksie requestUpdate sal dan "mirror.config.session.get" roep om die huidige konfigurasie te kry. Wanneer die huidige konfigurasie ontvang word, word die funksie processUpdate geroep om die tabel te bou wat gewys moet word.

1. funksie requestUpdate()
2. {
3. // Herstel tabelinhoud
4. myDynamicTable.restore();
   5
5. // Hierdie tabel twee JSON data.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Verwerk die ontvangde JSON-data

• Die funksie processUpdate() word gebruik om die dinamiese tabel uit te lê nadat die JSON-data ontvang is.
• Die addRows() word gebruik om tabelrye by te voeg. myDynamicTable.update() uitleg die
  HTML-tabel volgens die data in tabelrye.

1. funksie processUpdate (recv_json, naam)
2. {
3. // Ignoreer die proses as geen data ontvang word nie
4. if (!recv_json) {
5. alert(“Kry dinamiese data het misluk.”);
6. terugkeer;
7. }
8. // Stoor die ontvangde JSON-data
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Voeg tabelrye by
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tabel_rye);
14. // Dateer hierdie dinamiese tabel op
15. myDynamicTable.update();
17. // Verfris 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. }

Voeg tabelrye by

• In die addRows()-funksie gebruik ons ​​die JSON-formaat om elke globale gekonfigureerde parameter in die tabelry in te vul.
• Alle HTML-velde word in die JSON-skikking (“table_rows”) gelys en die sintaksis van tabelveld is hieronder.

Sintaksis:
tabel_rye:[ , , … ] : { , , … }
: {“tipe”: , "params":[ , , …, ]}

• In hierdie geval het elke ry vyf velde: "Sessie ID", "Mode", "Type", "VLAN ID" en "Reflektorpoort" Bv.ample,

Sessie-ID (Naam veld: int32_t)	1 (Id van die spieëlsessie)
Modus (Naam veld: vtss_bool_t)	waar (Beteken dat die spieëlsessie geaktiveer is)
Tik (Naam veld: opsomming {mirror, rMirrorSource, rMirrorDestination}	RMirror Bron (dit is die bron van 'n afgeleë spieëlsessie
VLAN ID (Naam veld: uint16_t)	200 (die vlan wat vir spieëls gebruik word)
Reflektorpoort (Naam veld: vtss_ifindex_t)	Gi 1/1 (Die poort waarheen die spieëlverkeer gestuur word

• Die myDynamicTable.addRows() sal die JSON-data na HTML-formaat omskakel en die HTML-tabel uitvoer.

1. funksie addRow (sleutel, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Geen", none_interface_text = "GEEN";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var ry = {velde:[
6. {tipe:”skakel”, params:[“cr”, “mirror.htm?session_id=” + sleutel, sleutel]},
7. {tipe:"teks", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {tipe:"teks", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {tipe:”teks”, params:[val.Type == “spieël” ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. ry terug;
13. }
14. funksie addRows (recv_json)
15. {
16. var ry, leeg_kolspan = 7;
17. var table_rows = new Array();
18. // Voeg tabelopskrif by
19. addHeader(tabel_rye);
20. // Voeg enkele ry by
21. Object.each(recv_json, funksie(rekord) {
22. table_rows.push(addRow(rekord.sleutel, rekord.val));
23. });
24. gee tabel_rye terug;
25. }

Web hulp bladsy
Vir die web help bladsy ontwerp, kan die hulp beskrywing verwys na die JSON spesifikasie, dat die beskrywing teks kan ooreenstem met JSON uitvoer en help om die oortollige beskrywings te verminder. Bvample hier is geneem uit dhcp6-afloskonfigurasie.

Hiperskakel in die bron file
Ken die hulp toe file ligging in sy bron file HTML tag. Die vaste veranderlike naam "help_page" word gebruik vir die web hulpbladsy-opdrag.

2. // Hulpbladsy magie
3. var help_page = “/help/help_xxx.htm”;

Dateer HTML-veldbeskrywing op vanaf JSON-spesifikasie

• Gebruik of HTML tag om die HTML-tabelbeskrywing te verklaar en 'n unieke ID gegee vir die tag.
• Wanneer die HTML-dokument gereed is, roep loadXMLDoc() om die hele JSON-spesifikasie te kry of kry die spesifieke metodebeskrywing deur JSON-metodenaam “jsonRpc.status.introspection.specific.inventory.get”.
• Die processTableDesc() word gebruik om die tabelbeskrywing op te dateer en processUpdate() word gebruik om die tabelparameterbeskrywing op te dateer.
• In processUpdate(), roep updateTableParamsDesc() om die JSON-elemente op te dateer wat ooreenstem met die spesifieke elementname.
• Dateer die op of tag innerlike HTML volgens die elementbeskrywing.

2. /* Dateer HTML-beskrywingsvelde op */
3. funksie processTableDesc(req) {
4. if (!req.responseText) {
5. terugkeer;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Dateer tabelbeskrywing op
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groepe”, “dhcp6_relay.config.vlan”).beskrywing;
10. }
11. /* Dateer HTML-tabelparameterbeskrywing op */
12. function processUpdate (recv_json) {
13. // Dateer tabelparameterbeskrywing op
14. var param_name = [
15. {
16. "alias": "koppelvlak",
17. "tipe": "vtss_ifindex_t",
18. "naam": "vlanInterface",
19. "agtervoegsel": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "tipe": "vtss_ifindex_t",
24. "naam": "relayVlanInterface",
25. "agtervoegsel": ". Die ID van die koppelvlak wat vir herlegging gebruik word.”
26. },
27. {
28. "alias": "Aflosbestemming",
29. "tipe": "mesa_ipv6_t",
30. "naam": "aflos_bestemming",
31. "agtervoegsel": ". Die IPv6-adres van die DHCPv6-bediener wat versoek, sal na herlei word. Die verstekwaarde 'ff05::1:3' beman 'enige DHCP-bediener'."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Kry JSON-spesifikasie */
37. window.addEvent('domready', funksie () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hiperskakel in menubalk

• Die HTML-bronkode van die menubalk word gegenereer uit file webstax2\vtss_appl\web\ menu_default.cxx.
• Wysig die items hierin file vir die Web bladsy hiperskakel.

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

LET WEL
Let op dat die aantal spasiekarakters in ITEM(“”), wat gebruik word om die groepvlak in die kieslysbalk te bepaal. In hierdie geval, almal web bladsye is onder die "DHCPv6"-groep.

Figuur 6. Eksample van globale gekonfigureerde tabel

Bylaag

Tipies web bladsye

Daar is verskeie tipiese web bladsye kan vir die verwysingsontwerp gebruik word. Een bykomende example wat hier gewys moet word, is die konfigurasie van 'n enkele spieëlsessie wat in vtss_appl\mirror\html\mirror.htm gevind word.
Die web bladsy verskaf die gedetailleerde konfigurasie vir 'n enkele spieëlsessie. Alle gekonfigureerde parameters word gelys.

• Klik op "Stoor"-knoppie om die huidige konfigurasie toe te pas.
• Klik op "Herstel" -knoppie om die huidige konfigurasie terug te stel.
• Klik "Kanselleer" om terug te keer na die oorview van spieëlsessies

Spieël&RMSpieëlkonfigurasie

Globale instellings

Bron VLAN(s) konfigurasie

Poortkonfigurasie

Figuur 7. Example van gedetailleerde konfigurasie van spieëlsessie
Die knoppies "Stoor", "Herstel" en "Kanselleer" word bygevoeg deur die html-kode:

JSON-opdragvloei
Hierdie bladsy vereis 'n tweestap-opdragvloei:

• Eerstens moet dit die vermoëns van die toestel kry met die metode "mirror.capabilities.get". Die vermoëns verander nie en hoef net een keer gelees te word.
• Dan moet dit die huidige konfigurasie van die toestel kry deur die metodes "mirror.config.session.get", "port.status.get" en in die geval van stapeling "topo.config.stacking.get" te gebruik.

Die oproep van "mirror.capabilities.get" word geïnisieer deur die "domready" gebeurtenis en die resultaat is gekonfigureer om deur die funksie requestUpdate hanteer te word.
Die requestUpdate sal die oproep van "mirror.config.session.get" inisieer.
"port.status.get" en in die geval van stapeling "topo.config.stacking.get" en die resultate van hierdie oproepe is gekonfigureer om deur die funksie prepareUpdate hanteer te word.
Die funksie prepareUpdate sal alle resultate versamel, en eers wanneer almal ontvang is, sal dit die funksie processUpdate oproep wat die tabelle sal saamstel om op die web.

Verwysings

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

Dokumente / Hulpbronne

Mikrosemi AN1256 Web Programmeerders Aansoek [pdf] Gebruikersgids AN1256, AN1256 Web Programmeerderstoepassing, Web Programmeerders Aansoek, Toepassing

Verwysings

• Gebruikershandleiding