Microsemi AN1256 Web Programmierer-Anwendung

Einführung

JSON (JavaScript Object Notation) ist ein offener Standard file Format, das für den Datenaustausch menschenlesbaren Text verwendet. Es ist ein allgemeines Datenformat für die asynchrone Browser-/Serverkommunikation.
Für das neue web Seitendesign kann das JSON-Format den ursprünglichen AJAX-Stil ersetzen. Im Vergleich zu AJAX macht die Verwendung von JSON die Web Implementierung einfacher und einfacher. Der Entwickler muss sich nur auf web Seitendesign und die Web Die Handler-Implementierung kann weggelassen werden, da die JSON-Zugriffsmethode bereits in jedem WebStaX-Softwaremodule.
Dieses Dokument stellt den Programmierleitfaden für den Softwareentwickler dar, der die Web Seite über JSON. Die Detailverfahren und ExampDateien, die auch in den folgenden Abschnitten enthalten sind.

JSON-Datenzugriffsfluss

Überview
Hier ist der JSON-Datenzugriffsfluss, bei dem eine HTTP-Verbindung vom Client (Browser) initiiert wird. Die HTML-Tabelle wird dynamisch entsprechend den empfangenen JOSN-Daten vom Server (DUT) erstellt.

Abbildung 1. Der Zugriffsfluss zwischen Client und Server

Anforderungs-/Antwort-JSON-Daten
Das JSON-Anforderungspaket basiert auf der HTTP-Anforderungs-Postmethode und der Inhalt muss dem MSCC-JSON-Format folgen.

• JSON-Anforderungssyntax:{"Methode":" ”,”Parameter”:[ ], „id:“jsonrpc“}
• JSON-Antwortsyntax: {"Fehler": ,"Ergebnis": , „id:“jsonrpc“}

Die folgenden Schnappschüsse zeigen den JSON-Inhalt zwischen Browser und DUT.

Abbildung 2. Momentaufnahme der HTTP-Anfrage vom Client

Abbildung 3. Momentaufnahme der HTTP-Antwort vom Server

MSCC JSON-Spezifikation
Um die vollständigen JSON-Informationen einschließlich Methode, Parameter, Beschreibung usw. zu erhalten, geben Sie „http://“ ein. /json_spec“ in der Adressleiste Ihres Browsers. Es gibt eine weitere Zugriffsmethode über den JSON-Methodennamen „jsonRpc.status.introspection.specific.inventory.get“, sie wird für eine bestimmte Methode verwendet.

Abbildung 4. Momentaufnahme der JSON-Spezifikation web Seite

Web Rahmen

Der Web Rahmen in WebDie StaX-Software basiert auf den Open-Source-MooTools. Es handelt sich um eine Sammlung von JavaScript-Dienstprogrammen unter MIT-Lizenz. (http://mootools.net/license.txt) Die Menüleiste und die meisten web Seiten basieren auf dem Framework. Sowohl der AJAX- als auch der JSON-Algorithmus sind bereits in seine Dienstprogramme integriert.
Außerdem, WebStaX Software bietet die anderen Dienstprogramme, die für die JSON nützlich sind web Seitendesign.

• json.js – Verwenden Sie es zum Senden/Empfangen der dynamischen Daten mit JSON-Syntax.
• dynforms.js – Verwenden Sie diese Option, um die HTML-Tabelle dynamisch zu erstellen.
• validate.js – Wird zur Validierung des HTML-Formulars verwendet.

Die vollständigen JavaScript-Bibliotheken befinden sich im Quellverzeichnis: webstax2\ vtss_appl\web\html\lib.

Leitfaden für JSON Web Seitengestaltung

Dieser Abschnitt beschreibt die Gestaltung eines web Seite basierend auf MSCC JavaScript-Bibliotheken. Wir verwenden die global konfigurierte Mirror web Seite als ExampDatei hier. Die asynchrone Kommunikation basiert auf der HTTP-JSON-Zugriffsmethode und alle global konfigurierten Parameter werden in einer dynamischen HTML-Tabelle aufgelistet.
Der web Das Seitenlayout ist unten aufgeführt und der vollständige Quellcode befindet sich im Quellbaumverzeichnis: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Um typischere web Seitenreferenz finden Sie im Anhang.

Mirror- und RMirror-Konfigurationstabelle

Abbildung 5. ExampDatei der global konfigurierten Tabelle

Bearbeiten Web Seite

HTML-Header
Integrieren Sie die benötigten JS-Bibliotheken in das HTML tag.

Initialisieren der dynamischen Tabellenressource

• Wenn das HTML-Dokument fertig ist, rufen Sie DynamicTable() auf, um die dynamische Tabellenressource zu initialisieren.
• Mit DynamicTable() wird nach Empfang der JSON-Daten die dynamische Tabelle erstellt.
• Anschließend wird requestUpdate aufgerufen, um den JSON-Befehlsfluss zu starten.

1. window.addEvent('domready', Funktion() {
2. // Erstellen Sie ein Formular mit Tabellenkörper zum Empfangen/Senden von JSON-Daten
3. meineDynamicTable = neue DynamicTable(„myTableContent“, „config“, „plusRowCtrlBar“);
   4
4. AnfrageUpdate();
5. });

Anforderungs-/Antwort-JSON-Daten

• Wenn das HTML-Dokument fertig ist, verwenden Sie requestJsonDoc(), um die JSON-Anfrage „mirror.config.session.get“ zu senden und Informationen zu den konfigurierten Sitzungen zu erhalten.
• Nachdem die JSON-Daten für „mirror.capabilities.get“ empfangen wurden, wird die Callback-Funktion requestUpdate() verarbeitet. Die Funktion requestUpdate ruft dann „mirror.config.session.get“ auf, um die aktuelle Konfiguration abzurufen. Wenn die aktuelle Konfiguration empfangen wurde, wird die Funktion processUpdate aufgerufen, um die anzuzeigende Tabelle zu erstellen.

1. Funktion requestUpdate()
2. {
3. // Tabelleninhalt wiederherstellen
4. myDynamicTable.restore();
   5
5. // Diese Tabelle enthält zwei JSON-Daten.
6. requestJsonDoc(„mirror.config.session.get“, null, processUpdate, „config“);
7. }

Verarbeiten der empfangenen JSON-Daten

• Die Funktion processUpdate() wird zum Layout der dynamischen Tabelle nach dem Empfang der JSON-Daten verwendet.
• Mit addRows() werden Tabellenzeilen hinzugefügt. myDynamicTable.update() layoutet die
  HTML-Tabelle entsprechend den Daten in den Tabellenzeilen.

1. Funktion processUpdate(recv_json, Name)
2. {
3. //Ignoriere den Vorgang, wenn keine Daten empfangen werden
4. wenn (!recv_json) {
5. alert(„Das Abrufen dynamischer Daten ist fehlgeschlagen.“);
6. zurückkehren;
7. }
8. // Speichern der empfangenen JSON-Daten
9. myDynamicTable.saveRecvJson(„Konfiguration“, recv_json);
10. //Tabellenzeilen hinzufügen
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Diese dynamische Tabelle aktualisieren
15. meineDynamicTable.update();
17. // Timer aktualisieren
18. var autorefresh = document.getElementById(„autorefresh“);
19. wenn (autorefresh && autorefresh.checked) {
20. wenn (Timer-ID) {
21. löscheTimeout(Timer-ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Tabellenzeilen hinzufügen

• In der Funktion addRows() verwenden wir das JSON-Format, um jeden global konfigurierten Parameter in die Tabellenzeile einzufügen.
• Alle HTML-Felder sind im JSON-Array („table_rows“) aufgelistet und die Syntax des Tabellenfelds ist unten.

Syntax:
Tabellenzeilen:[ , , … ] : { , , … }
: {"Typ": , „Parameter“:[ , , …, ]}

• In diesem Fall hat jede Zeile fünf Felder: „Sitzungs-ID“, „Modus“, „Typ“, „VLAN-ID“ und „Reflector-Port“. Zum Beispielampich,

Sitzungs-ID (Namensfeld: int32_t)	1 (ID der Spiegelsitzung)
Modus (Namensfeld: vtss_bool_t)	WAHR (Bedeutet, dass die Spiegelsitzung aktiviert ist)
Typ (Namensfeld: Aufzählung {Spiegel, rSpiegelQuelle, rSpiegelZiel}	RMirror-Quelle (Dies ist die Quelle einer Remote-Mirror-Sitzung
VLAN-ID (Namensfeld: uint16_t)	200 (das zum Spiegeln verwendete VLAN)
Reflektoranschluss (Namensfeld: vtss_ifindex_t)	Gi 1/1 (Der Port, an den der gespiegelte Datenverkehr gesendet wird

• myDynamicTable.addRows() konvertiert die JSON-Daten in das HTML-Format und gibt die HTML-Tabelle aus.

1. Funktion addRow(Schlüssel, Wert)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = „Keine“, none_interface_text = „KEINE“;
4. var tunnel_mode_suffix = val.TunnelMode == „useglobal“ ?“ (“ + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + „)“ : „“;
5. var Zeile = {Felder:[
6. {Typ:”Link”, Parameter:[“cr”, “mirror.htm?session_id=” + Schlüssel, Schlüssel]},
7. {Typ:”Text”, Parameter:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {Typ:”Text”, Parameter:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {Typ:”Text”, Parameter:[Wert.Typ == “Spiegel” ? “-“:
   val.RMirrorVlan, „c“]},
10. {Typ:”Text”, Parameter:[Wert.Typ == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. Zeile zurückgeben;
13. }
14. Funktion addRows(recv_json)
15. {
16. var Zeile, empty_colspan = 7;
17. var table_rows = neues Array();
18. // Tabellenüberschrift hinzufügen
19. Füge Header hinzu (Tabellenzeilen);
20. // Einzelne Zeile hinzufügen
21. Object.each(recv_json, Funktion(Datensatz) {
22. table_rows.push(addRow(Datensatz.Schlüssel, Datensatz.Wert));
23. });
24. gibt Tabellenzeilen zurück;
25. }

Web Hilfeseite
Für die web Beim Design der Hilfeseite kann die Hilfebeschreibung auf die JSON-Spezifikation verweisen, sodass der Beschreibungstext mit der JSON-Ausgabe übereinstimmt und redundante Beschreibungen reduziert werden. Beispiel:ampDie Datei hier stammt aus der DHCP6-Relay-Konfiguration.

Hyperlink in der Quelle file
Weisen Sie die Hilfe zu file Standort in seiner Quelle file HTML tagDer feste Variablenname „help_page“ wird für die web Hilfeseitenzuordnung.

2. // Hilfeseite Magie
3. var Hilfeseite = „/help/help_xxx.htm“;

Aktualisieren Sie die HTML-Feldbeschreibung anhand der JSON-Spezifikation

• Verwenden oder HTML tag zur Deklaration der HTML-Tabellenbeschreibung und einer eindeutigen ID für die tag.
• Wenn das HTML-Dokument fertig ist, rufen Sie loadXMLDoc() auf, um die gesamte JSON-Spezifikation abzurufen, oder rufen Sie die spezifische Methodenbeschreibung über den JSON-Methodennamen „jsonRpc.status.introspection.specific.inventory.get“ ab.
• Mit processTableDesc() wird die Tabellenbeschreibung aktualisiert und mit processUpdate() die Tabellenparameterbeschreibung aktualisiert.
• Rufen Sie in processUpdate() updateTableParamsDesc() auf, um die JSON-Elemente zu aktualisieren, die mit den spezifischen Elementnamen übereinstimmen.
• Aktualisieren Sie die oder tag inneres HTML entsprechend der Elementbeschreibung.

2. /* HTML-Beschreibungsfelder aktualisieren */
3. Funktion processTableDesc(req) {
4. wenn (!req.responseText) {
5. zurückkehren;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. //Tabellenbeschreibung aktualisieren
9. $(„TableDesc“).innerHTML = getJsonSpecElement(json_spec, „Gruppen“, „dhcp6_relay.config.vlan“).Beschreibung;
10. }
11. /* HTML-Tabellenparameterbeschreibung aktualisieren */
12. Funktion ProzessUpdate(recv_json) {
13. //Tabellenparameterbeschreibung aktualisieren
14. var Parameternamen = [
15. {
16. „alias“: „Schnittstelle“,
17. „Typ“: „vtss_ifindex_t“,
18. „Name“: „VLAN-Schnittstelle“,
19. „Suffix“: „.“
20. },
21. {
22. „alias“: „Relay-Schnittstelle“,
23. „Typ“: „vtss_ifindex_t“,
24. „Name“: „RelayVlanInterface“,
25. „Suffix“: „. Die ID der Schnittstelle, die für die Weiterleitung verwendet wird.“
26. },
27. {
28. „Alias“: „Relay-Ziel“,
29. „Typ“: „mesa_ipv6_t“,
30. „Name“: „Relay-Ziel“,
31. „Suffix“: „. Die IPv6-Adresse des DHCPv6-Servers, an den Anfragen weitergeleitet werden sollen. Der Standardwert ‚ff05::1:3‘ bedeutet ‚jeder DHCP-Server‘.“
32. }
33. ];
34. updateTableParamsDesc(„TableParamsDesc“, recv_json, „dhcp6_relay.config.vlan.get“, param_names);
35. }
36. /* JSON-Spezifikation abrufen */
37. window.addEvent('domready', Funktion () {
38. : loadXMLDoc(„/json_spec“, processTableDesc);
39. requestJsonDoc(„jsonRpc.status.introspection.specific.inventory.get“, „dhcp6_relay.config.vlan“, ProzessUpdate);
40. });

Hyperlink in der Menüleiste

• Der HTML-Quellcode der Menüleiste wird generiert aus file webstax2\vtss_appl\web\menu_default.cxx.
• Bearbeiten Sie die Elemente in diesem file für die Web Seiten-Hyperlink.

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

NOTIZ
Beachten Sie, dass die Anzahl der Leerzeichen in ITEM(“”), die zur Festlegung der Gruppierungsebene in der Menüleiste verwendet wird, web Seiten befinden sich unter der Gruppe „DHCPv6“.

Abbildung 6. BspampDatei der global konfigurierten Tabelle

Anhang

Typisch web Seiten

Es gibt mehrere typische web Seiten können für das Referenzdesign verwendet werden. Ein zusätzliches BeispielampDie hier anzuzeigende Datei ist die Konfiguration einer einzelnen Spiegelsitzung, die sich in vtss_appl\mirror\html\mirror.htm befindet.
Der web Die Seite bietet die detaillierte Konfiguration für eine einzelne Spiegelsitzung. Alle konfigurierten Parameter werden aufgelistet.

• Klicken Sie auf die Schaltfläche „Speichern“, um die aktuelle Konfiguration anzuwenden.
• Klicken Sie auf die Schaltfläche „Zurücksetzen“, um die aktuelle Konfiguration zurückzusetzen.
• Klicken Sie auf „Abbrechen“, um zum vorherigenview von Spiegelsitzungen

Mirror&RMirror-Konfiguration

Globale Einstellungen

Quell-VLAN(s)-Konfiguration

Port-Konfiguration

Abbildung 7. ExampDatei mit detaillierter Konfiguration der Spiegelsitzung
Die Schaltflächen „Speichern“, „Zurücksetzen“ und „Abbrechen“ werden durch den HTML-Code hinzugefügt:

JSON-Befehlsfluss
Diese Seite erfordert einen zweistufigen Befehlsablauf:

• Zuerst müssen mit der Methode „mirror.capabilities.get“ die Capabilities des Gerätes abgefragt werden. Die Capabilities ändern sich nicht und müssen nur einmal ausgelesen werden.
• Anschließend muss die aktuelle Konfiguration des Geräts mit den Methoden „mirror.config.session.get“, „port.status.get“ und im Falle des Stapelns „topo.config.stacking.get“ abgerufen werden.

Der Aufruf von „mirror.capabilities.get“ wird durch das Ereignis „domready“ initiiert und das Ergebnis wird so konfiguriert, dass es von der Funktion requestUpdate verarbeitet wird.
Das requestUpdate initiiert den Aufruf von „mirror.config.session.get“,
„port.status.get“ und im Falle des Stapelns „topo.config.stacking.get“ und die Ergebnisse dieser Aufrufe sind so konfiguriert, dass sie von der Funktion prepareUpdate verarbeitet werden.
Die Funktion prepareUpdate sammelt alle Ergebnisse und ruft erst dann die Funktion processUpdate auf, die die Tabellen erstellt, die auf der web.

Verweise

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

Dokumente / Ressourcen

Microsemi AN1256 Web Programmierer-Anwendung [pdf] Benutzerhandbuch AN1256, AN1256 Web Programmierer Anwendung, Web Programmierer Bewerbung, Bewerbung

Verweise

• Bedienungsanleitung