Microsemi AN1256 Web Programmeurs applicatie

Invoering

JSON (JavaScript Object Notation) is een open standaard file formaat dat voor mensen leesbare tekst gebruikt voor gegevensuitwisseling. Het is een algemeen gegevensformaat dat wordt gebruikt voor asynchrone browser/servercommunicatie.
Voor de nieuwe web pagina-ontwerp, JSON-formaat kan een vervanging zijn voor de originele AJAX-stijl. Vergelijk met AJAX, het gebruik van JSON maakt de Web implementatie eenvoudiger en eenvoudiger. De ontwikkelaar hoeft zich alleen maar te concentreren op web pagina-ontwerp en de Web De implementatie van de handler kan worden weggelaten, omdat de JSON-toegangsmethode al in elk wordt ondersteund WebStaX-softwaremodules.
Dit document bevat de handleiding voor programmeurs voor de software-engineer die de Web pagina via JSON. De gedetailleerde procedures en examples ook opgenomen in de volgende secties.

JSON-gegevenstoegangsstroom

Overview
Hier is de JSON-gegevenstoegangsstroom waarbij een HTTP-verbinding wordt geïnitieerd vanaf de client (browser). De HTML-tabel wordt dynamisch gemaakt op basis van de ontvangen JOSN-gegevens van de server (DUT)-zijde.

Figuur 1. De toegangsstroom tussen client en server

Aanvraag/antwoord JSON-gegevens
Het JSON-aanvraagpakket is gebaseerd op de HTTP-aanvraagpostmethode en de inhoud moet de MSCC JSON-indeling volgen.

• JSON-syntaxis aanvragen:{"methode":" ”, “params”:[ ], “id:”jsonrpc”}
• Antwoord-JSON-syntaxis: {"fout": ,"resultaat": , “id:”jsonrpc”}

De volgende momentopnamen tonen de JSON-inhoud tussen de browser en DUT.

Figuur 2. Momentopname van HTTP-verzoek van client

Figuur 3. Momentopname van HTTP-respons van server

MSCC JSON-specificatie
Om de volledige JSON-informatie te krijgen, inclusief de methode, parameter, beschrijving, etc. typt u “http:// /json_spec” in de adresbalk van uw browser. Er is een andere toegangsmethode via JSON-methodenaam “jsonRpc.status.introspection.specific.inventory.get”, deze wordt gebruikt voor een specifieke methode.

Figuur 4. Momentopname van JSON-specificatie web pagina

Web kader

De Web raamwerk erin WebStaX software is gebaseerd op een open source MooTools. Het is een verzameling JavaScript-hulpprogramma's met MIT-licentie. (http://mootools.net/license.txt) De menubalk en de meeste web pagina's zijn gebaseerd op het framework. Zowel AJAX als JSON-algoritme zijn al geïntegreerd in de hulpprogramma's.
Daarnaast, WebStaX-software biedt de andere hulpprogramma's die nuttig zijn voor de JSON web pagina-ontwerp.

• json.js – Gebruik voor het verzenden/ontvangen van dynamische gegevens met JSON-syntaxis.
• dynforms.js – Wordt gebruikt om de HTML-tabel dynamisch te maken.
• valideren.js – Wordt gebruikt voor de validatie van HTML-formulieren.

De volledige JavaScript-bibliotheken bevinden zich in de bronmap: webstax2\vtss_appl\web\html\lib.

Richtlijn voor JSON Web pagina ontwerp

In dit gedeelte wordt uitgelegd hoe u een web pagina gebaseerd op MSCC JavaScript-bibliotheken. We gebruiken de Mirror global geconfigureerd web pagina als de example hier. De asynchrone communicatie is gebaseerd op de HTTP JSON-toegangsmethode en alle globaal geconfigureerde parameters worden weergegeven in één dynamische HTML-tabel.
De web De pagina-indeling staat hieronder vermeld en de volledige broncode bevindt zich in de bronmap: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Om meer typisch te krijgen web Voor de referentiepagina's, zie de bijlage.

Mirror& RMirror configuratie tabel

Figuur 5. Example van globaal geconfigureerde tabel

Bewerking Web pagina

HTML-koptekst
Voeg de JS-bibliotheken toe die nodig zijn in de HTML tag.

Initialiseer de dynamische tabelbron

• Wanneer het HTML-document klaar is, roept u DynamicTable() aan om de dynamische tabelbron te initialiseren.
• DynamicTable() wordt gebruikt om de dynamische tabel te maken nadat de JSON-gegevens zijn ontvangen.
• Vervolgens wordt requestUpdate aangeroepen om de JSON-opdrachtstroom te starten.

1. window.addEvent('domready', functie() {
2. // Maak een formulier met tabelbody voor het ontvangen/verzenden van JSON-gegevens
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. verzoekUpdate();
5. });

Aanvraag/antwoord JSON-gegevens

• Wanneer het HTML-document klaar is, gebruikt u requestJsonDoc() om de JSON-aanvraag “mirror.config.session.get” te verzenden om informatie over de geconfigureerde sessies op te halen.
• Nadat de JSON-gegevens voor "mirror.capabilities.get" zijn ontvangen, wordt de callbackfunctie requestUpdate() verwerkt. De functie requestUpdate roept vervolgens "mirror.config.session.get" aan om de huidige configuratie op te halen. Wanneer de huidige configuratie is ontvangen, wordt de functie processUpdate aangeroepen om de weer te geven tabel te bouwen.

1. functie requestUpdate()
2. {
3. // Herstel tabelinhoud
4. mijnDynamischeTabel.restore();
   5
5. // Deze tabel bevat twee JSON-gegevens.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Verwerk de ontvangen JSON-gegevens

• De functie processUpdate() wordt gebruikt om de dynamische tabel op te maken nadat de JSON-gegevens zijn ontvangen.
• addRows() wordt gebruikt om tabelrijen toe te voegen. myDynamicTable.update() lay-out de
  HTML-tabel volgens de gegevens in tabelrijen.

1. functie processUpdate(recv_json, naam)
2. {
3. // Negeer het proces als er geen gegevens worden ontvangen
4. als (!recv_json) {
5. alert(“Ophalen van dynamische gegevens mislukt.”);
6. opbrengst;
7. }
8. // Sla de ontvangen JSON-gegevens op
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Tabelrijen toevoegen
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tabel_rijen);
14. // Werk deze dynamische tabel bij
15. mijnDynamischeTabel.update();
17. // Vernieuwingstimer
18. var autorefresh = document.getElementById(“automatisch vernieuwen”);
19. als (autorefresh && autorefresh.gecontroleerd) {
20. als (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Tabelrijen toevoegen

• In de functie addRows() gebruiken we de JSON-indeling om elke globaal geconfigureerde parameter in de tabelrij in te vullen.
• Alle HTML-velden worden weergegeven in de JSON-array (“table_rows”) en de syntaxis van het tabelveld staat hieronder.

Syntaxis:
tabel_rijen:[ , , … ] : { , , … }
: {“typen”: , “parameters”:[ , , …, ]}

• In dit geval heeft elke rij vijf velden: “Sessie-ID”, “Modus”, “Type”, “VLAN-ID” en “Reflectorpoort”. Bijvoorbeeldampde,

Sessie-ID (Naamveld: int32_t)	1 (ID van de spiegelsessie)
Modus (Naamveld: vtss_bool_t)	WAAR (Dit betekent dat de spiegelsessie is ingeschakeld)
Type (Naamveld: opsomming {spiegel, rSpiegelBron, rSpiegelBestemming}	RMirror-bron (dit is de bron van een externe spiegelsessie
VLAN-ID (Naamveld: uint16_t)	200 (de vlan die gebruikt wordt voor mirroring)
Reflectorpoort (Naamveld: vtss_ifindex_t)	Ik 1/1 (De poort waarnaar het gespiegelde verkeer wordt verzonden

• myDynamicTable.addRows() converteert de JSON-gegevens naar HTML-formaat en geeft de HTML-tabel weer.

1. functie addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Geen”, none_interface_text = “GEEN”;
4. var tunnel_mode_suffix = val.TunnelMode == “global_gebruiken” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rij = {velden:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + sleutel, sleutel]},
7. {type:”tekst”, parameters:[oTMode[oVMode.indexOf(waarde.Mode)], “c”]},
8. {type:”tekst”, parameters:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”tekst”, params:[val.Type == “spiegelen” ? “-“:
   val.RMirrorVlan, “c”]},
10. {type:”tekst”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. terug rij;
13. }
14. functie addRows(recv_json)
15. {
16. var rij, empty_colspan = 7;
17. var table_rows = nieuwe Array();
18. // Voeg tabelkop toe
19. addHeader(tabel_rijen);
20. // Voeg één rij toe
21. Object.each(recv_json, functie(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. return tabel_rijen;
25. }

Web helppagina
Voor de web helppagina-ontwerp, de helpbeschrijving kan verwijzen naar de JSON-specificatie, dat de beschrijvingstekst consistent kan zijn met JSON-uitvoer en helpt de redundante beschrijvingen te verminderen. ExampDit is afkomstig van de dhcp6-relayconfiguratie.

Hyperlink in de bron file
Wijs de hulp toe file locatie in de bron file HTML tagDe vaste variabelenaam "help_page" wordt gebruikt voor de web Helppagina toewijzing.

2. // Helppagina magie
3. var help_pagina = “/help/help_xxx.htm”;

HTML-veldbeschrijving bijwerken vanuit JSON-specificatie

• Gebruik of HTML tag om de HTML-tabelbeschrijving te declareren en een unieke ID voor de tag.
• Wanneer het HTML-document klaar is, roept u loadXMLDoc() aan om de volledige JSON-specificatie op te halen of haalt u de specifieke methodebeschrijving op met de JSON-methodenaam “jsonRpc.status.introspection.specific.inventory.get”.
• processTableDesc() wordt gebruikt om de tabelbeschrijving bij te werken en processUpdate() wordt gebruikt om de tabelparameterbeschrijving bij te werken.
• Roep in processUpdate() updateTableParamsDesc() aan om de JSON-elementen bij te werken die overeenkomen met de specifieke elementnamen.
• Bijwerken van de of tag interne HTML volgens de elementbeschrijving.

2. /* HTML-beschrijvingsvelden bijwerken */
3. functie processTableDesc(req) {
4. als (!req.responseText) {
5. opbrengst;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Tabelbeschrijving bijwerken
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groepen”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* HTML-tabelparameterbeschrijving bijwerken */
12. functie processUpdate(recv_json) {
13. // Beschrijving van tabelparameter bijwerken
14. var param_namen = [
15. {
16. “alias”: “Interface”,
17. “type”: “vtss_ifindex_t”,
18. “naam”: “vlanInterface”,
19. “achtervoegsel”: “.”
20. },
21. {
22. “alias”: “Relaisinterface”,
23. “type”: “vtss_ifindex_t”,
24. “naam”: “relayVlanInterface”,
25. “suffix”: “. De id van de interface die wordt gebruikt voor het doorgeven.”
26. },
27. {
28. “alias”: “Relaybestemming”,
29. “type”: “mesa_ipv6_t”,
30. “naam”: “relay_bestemming”,
31. “suffix”: “. Het IPv6-adres van de DHCPv6-server waarnaar verzoeken moeten worden doorgestuurd. De standaardwaarde 'ff05::1:3' is 'elke DHCP-server'.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* JSON-specificatie ophalen */
37. window.addEvent('domready', functie () {
38. loadXMLDoc(“/json_spec”, procesTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyperlink in menubalk

• De HTML-broncode van de menubalk wordt gegenereerd vanuit file webstax2\vtss_appl\web\menu_default.cxx.
• Bewerk de items in dit file voor de Web hyperlink naar de pagina.

1. #als gedefinieerd(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relais,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

OPMERKING
Let op het aantal spaties in ITEM(“”), dat wordt gebruikt om het groeperingsniveau in de menubalk te bepalen. In dit geval zijn alle web pagina's vallen onder de groep “DHCPv6”.

Afbeelding 6. Example van globaal geconfigureerde tabel

Bijlage

Typisch web pagina's

Er zijn verschillende typische web pagina's kunnen worden gebruikt voor het referentieontwerp. Eén extra exampHier wordt de configuratie van een enkele mirrorsessie getoond, die te vinden is in vtss_appl\mirror\html\mirror.htm.
De web pagina geeft de gedetailleerde configuratie voor een enkele mirrorsessie. Alle geconfigureerde parameters worden weergegeven.

• Klik op de knop “Opslaan” om de huidige configuratie toe te passen.
• Klik op de knop “Reset” om de huidige configuratie te resetten.
• Klik op "Annuleren" om terug te keren naar het vorigeview van spiegelsessies

Mirror&RMirror-configuratie

Globale instellingen

Configuratie van bron-VLAN(s)

Poortconfiguratie

Figuur 7. Example van gedetailleerde configuratie van spiegelsessie
De knoppen “Opslaan”, “Reset” en “Annuleren” worden toegevoegd door de html-code:

JSON-opdrachtstroom
Voor deze pagina is een opdrachtstroom in twee stappen vereist:

• Eerst moeten de mogelijkheden van het apparaat worden opgehaald met de methode "mirror.capabilities.get". De mogelijkheden veranderen niet en hoeven slechts één keer te worden gelezen.
• Vervolgens moet de huidige configuratie van het apparaat worden opgehaald met behulp van de methoden “mirror.config.session.get”, “port.status.get” en in het geval van stapelen “topo.config.stacking.get”.

De aanroep van “mirror.capabilities.get” wordt geïnitieerd door de gebeurtenis “domready” en het resultaat wordt geconfigureerd om te worden verwerkt door de functie requestUpdate.
De requestUpdate zal de aanroep van “mirror.config.session.get” starten,
“port.status.get” en in het geval van stapelen “topo.config.stacking.get” en de resultaten van deze aanroepen worden geconfigureerd om te worden afgehandeld door de functie prepareUpdate.
De functie prepareUpdate verzamelt alle resultaten en roept pas de functie processUpdate aan als deze allemaal zijn ontvangen. Deze functie maakt de tabellen die op de server moeten worden weergegeven. web.

Referenties

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

Documenten / Bronnen

Microsemi AN1256 Web Programmeurs applicatie [pdf] Gebruikershandleiding AN1256, AN1256 Web Programmeurstoepassing, Web Programmeurs Toepassing, Toepassing

Referenties

• Gebruiksaanwijzing