Microsemi AN1256 Web Aplikace pro programátory

Zavedení

JSON (JavaScript Object Notation) je otevřený standard file formát, který používá pro výměnu dat text čitelný pro člověka. Je to běžný datový formát používaný pro asynchronní komunikaci prohlížeč/server.
Pro nové web design stránky, formát JSON může být náhradou za původní styl AJAX. Ve srovnání s AJAX, použití JSON dělá Web implementace jednodušší a jednodušší. Vývojář se musí soustředit pouze na web design stránky a Web implementaci handleru lze vynechat, protože přístupová metoda JSON je již podporována v každé z nich WebSoftwarové moduly StaX.
Tento dokument uvádí programátorskou příručku pro softwarového inženýra, který potřebuje vyvinout Web stránku přes JSON. Podrobné postupy a exampjsou také zahrnuty v následujících částech.

Tok přístupu k datům JSON

Nadview
Zde je tok přístupu k datům JSON, při kterém je z klienta (prohlížeče) iniciováno připojení HTTP. HTML tabulka se vytváří dynamicky podle přijatých JOSN dat ze strany serveru (DUT).

Obrázek 1. Tok přístupu mezi klientem a serverem

Požadavek/odpověď na data JSON
Paket požadavku JSON je založen na metodě odesílání požadavku HTTP a obsah musí odpovídat formátu MSCC JSON.

• Požadavek na syntaxi JSON:{"metoda":" ”,”parametry”:[ ], “id:”jsonrpc”}
• Syntaxe JSON odpovědi: {"chyba": ,"výsledek": , “id:”jsonrpc”}

Následující snímky ukazují obsah JSON mezi prohlížečem a DUT.

Obrázek 2. Snímek požadavku HTTP od klienta

Obrázek 3. Snímek odpovědi HTTP ze serveru

Specifikace MSCC JSON
Chcete-li získat úplné informace JSON včetně metody, parametru, popisu atd. Zadejte „http:// /json_spec“ v adresním řádku prohlížeče. Existuje další metoda přístupu přes metodu JSON s názvem „jsonRpc.status.introspection.specific.inventory.get“, používá se pro konkrétní metodu.

Obrázek 4. Snímek specifikace JSON web strana

Web rámec

The Web rámec v WebSoftware StaX je založen na open source MooTools. Jedná se o kolekci utilit JavaScript s licencí MIT. (http://mootools.net/license.txt) Panel nabídek a většina web stránky jsou založeny na frameworku. Algoritmus AJAX i JSON jsou již integrovány v jeho utilitách.
Kromě, WebSoftware StaX poskytuje další nástroje, které jsou užitečné pro JSON web design stránky.

• json.js – Použijte pro pro přenos/příjem dynamických dat se syntaxí JSON.
• dynforms.js – Slouží k dynamickému vytváření HTML tabulky.
• validate.js – Používá se pro ověření HTML formuláře.

Úplné knihovny JavaScriptu jsou umístěny ve zdrojovém stromovém adresáři: webstax2\vtss_appl\web\html\lib.

Pokyny pro JSON Web design stránky

Tato část popisuje, jak navrhnout a web stránka založená na MSCC JavaScript knihovnách. Používáme globální konfiguraci Mirror web stránku jako example tady. Asynchronní komunikace je založena na přístupové metodě HTTP JSON a všechny globální nakonfigurované parametry jsou uvedeny v jedné dynamické HTML tabulce.
The web rozvržení stránky je uvedeno níže a celý zdrojový kód je umístěn ve zdrojovém stromovém adresáři: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Abych byl typičtější web odkaz na stránky, viz část přílohy.

Mirror & RMirror Confiquation Table

Obrázek 5. Example globální konfigurované tabulky

Upravit Web strana

HTML záhlaví
Zahrňte do kódu HTML potřebné knihovny JS tag.

Inicializujte prostředek dynamické tabulky

• Když je dokument HTML připraven, zavolejte DynamicTable() k inicializaci prostředku dynamické tabulky.
• DynamicTable() se používá k vytvoření dynamické tabulky po přijetí dat JSON.
• Poté zavolá requestUpdate, aby zahájil tok příkazů JSON.

1. window.addEvent('domready', function() {
2. // Vytvoří formulář s tělem tabulky pro příjem/odesílání dat JSON
3. myDynamicTable = new DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Požadavek/odpověď na data JSON

• Když je dokument HTML připraven, použijte requestJsonDoc() k odeslání požadavku JSON „mirror.config.session.get“, abyste získali informace o nakonfigurovaných relacích.
• Po přijetí dat JSON pro „mirror.capabilities.get“ bude zpracována funkce zpětného volání requestUpdate(). Funkce requestUpdate pak zavolá „mirror.config.session.get“, aby získala aktuální konfiguraci. Když je přijata aktuální konfigurace, je zavolána funkce processUpdate k vytvoření tabulky, která se má zobrazit.

1. funkce requestUpdate()
2. {
3. // Obnovení obsahu tabulky
4. myDynamicTable.restore();
   5
5. // Tato tabulka obsahuje dvě data JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Zpracujte přijatá data JSON

• Funkce processUpdate() se používá k rozložení dynamické tabulky po přijetí dat JSON.
• AddRows() se používá k přidání řádků tabulky. myDynamicTable.update() rozvržení
  HTML tabulka podle údajů v řádcích tabulky.

1. funkce processUpdate(recv_json, název)
2. {
3. // Ignorovat proces, pokud nejsou přijata žádná data
4. if (!recv_json) {
5. alert(“Získání dynamických dat se nezdařilo.”);
6. návrat;
7. }
8. // Uložte přijatá data JSON
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Přidání řádků tabulky
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(řádky_tabulky);
14. // Aktualizujte tuto dynamickou tabulku
15. myDynamicTable.update();
17. // Obnovit časovač
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (ID časovače) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Přidejte řádky tabulky

• Ve funkci addRows() používáme formát JSON k vyplnění každého globálního nakonfigurovaného parametru v řádku tabulky.
• Všechna pole HTML jsou uvedena v poli JSON („řádky_tabulky“) a syntaxe pole tabulky je níže.

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

• V tomto případě má každý řádek pět polí: „ID relace“, „Režim“, „Typ“, „ID VLAN“ a „Port reflektoru“ např.ample,

ID relace (Pole názvu: int32_t)	1 (ID relace zrcadlení)
Režim (Pole názvu: vtss_bool_t)	věrný (To znamená, že relace zrcadlení je povolena)
Typ (Pole jména: výčet {mirror, rMirrorSource, rMirrorDestination}	Zdroj RMirror (toto je zdroj relace vzdáleného zrcadlení
ID VLAN (Pole názvu: uint16_t)	200 (vlan používaný pro zrcadlení)
Port reflektoru (Pole názvu: vtss_ifindex_t)	Gi 1/1 (Port, na který je odesílán zrcadlený provoz

• Funkce myDynamicTable.addRows() převede data JSON do formátu HTML a vydá tabulku HTML.

1. funkce addRow(klíč, hodnota)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Žádné”, none_interface_text = “ŽÁDNÉ”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {fields:[
6. {type:”link”, params:[”cr”, “mirror.htm?session_id=” + klíč, klíč]},
7. {type:”text”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “zrcadlo” ? "-":
   val.RMirrorVlan, „c“]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. návratová řada;
13. }
14. funkce addRows(recv_json)
15. {
16. var řádek, empty_colspan = 7;
17. var table_rows = new Array();
18. // Přidání záhlaví tabulky
19. addHeader(řádky_tabulky);
20. // Přidat jeden řádek
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(záznam.klíč, záznam.hodnota));
23. });
24. vrátit řádky_tabulky;
25. }

Web stránka nápovědy
Pro web design stránky nápovědy, popis nápovědy může odkazovat na specifikaci JSON, že text popisu může být v souladu s výstupem JSON a pomáhá snížit nadbytečné popisy. PřampZde je převzat z konfigurace relé dhcp6.

Hyper-odkaz ve zdroji file
Přidělte nápovědu file umístění v jeho zdroji file HTML tag. Pevný název proměnné „help_page“ se používá pro web přiřazení stránky nápovědy.

2. // Magie stránky nápovědy
3. var help_page = "/help/help_xxx.htm";

Aktualizujte popis pole HTML ze specifikace JSON

• Použití nebo HTML tag deklarovat popis HTML tabulky a dát mu jedinečné ID tag.
• Když je dokument HTML připraven, zavolejte loadXMLDoc(), abyste získali celou specifikaci JSON, nebo získejte popis konkrétní metody podle názvu metody JSON „jsonRpc.status.introspection.specific.inventory.get“.
• ProcessTableDesc() se používá k aktualizaci popisu tabulky a processUpdate() se používá k aktualizaci popisu parametru tabulky.
• V processUpdate() zavolejte updateTableParamsDesc() k aktualizaci prvků JSON, které odpovídají konkrétním názvům prvků.
• Aktualizujte nebo tag vnitřní HTML podle popisu prvku.

2. /* Aktualizace polí popisu HTML */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. návrat;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Aktualizace popisu tabulky
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “skupiny”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Aktualizace popisu parametru HTML tabulky */
12. function processUpdate(recv_json) {
13. // Aktualizace popisu parametru tabulky
14. var param_names = [
15. {
16. "alias": "Rozhraní",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "přípona": "."
20. },
21. {
22. "alias": "Reléové rozhraní",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. „přípona“: „. ID rozhraní použitého pro přenos."
26. },
27. {
28. "alias": "Relay Destination",
29. "type": "mesa_ipv6_t",
30. "name": "relay_destination",
31. „přípona“: „. Adresa IPv6 serveru DHCPv6, na který budou požadavky předány. Výchozí hodnota 'ff05::1:3' znamená 'jakýkoli server DHCP'.“
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, názvy_param);
35. }
36. /* Získat specifikaci JSON */
37. window.addEvent('domready', function () {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hypertextový odkaz na liště nabídek

• Zdrojový kód HTML panelu nabídek je generován z file webstax2\vtss_appl\web\ menu_default.cxx.
• Upravte položky v tomto file pro Web hypertextový odkaz na stránku.

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

POZNÁMKA
Všimněte si, že počet znaků mezery v ITEM(“”), který se používá k rozhodování o úrovni skupiny v pruhu nabídek. V tomto případě všechny web stránky jsou ve skupině „DHCPv6“.

Obrázek 6. Přample globální konfigurované tabulky

Dodatek

Typický web stránky

Typických je několik web stránky lze použít pro návrh reference. Jeden další exampZde se zobrazí konfigurace jedné relace zrcadlení nalezená v vtss_appl\mirror\html\mirror.htm.
The web poskytuje podrobnou konfiguraci pro jednu relaci zrcadlení. Jsou uvedeny všechny nakonfigurované parametry.

• Kliknutím na tlačítko „Uložit“ použijete aktuální konfiguraci.
• Kliknutím na tlačítko „Reset“ resetujete aktuální konfiguraci.
• Kliknutím na „Zrušit“ se vrátíte na konecview zrcadlových relací

Konfigurace Mirror&RMirror

Globální nastavení

Konfigurace zdrojové VLAN(y).

Konfigurace portu

Obrázek 7. Exampsoubor podrobné konfigurace relace zrcadlení
Tlačítka „Uložit“, „Resetovat“ a „Zrušit“ jsou přidána pomocí html kódu:

Tok příkazů JSON
Tato stránka vyžaduje dvoukrokový tok příkazů:

• Nejprve potřebuje získat schopnosti zařízení metodou „mirror.capabilities.get“. Možnosti se nemění a stačí je přečíst jednou.
• Poté potřebuje získat aktuální konfiguraci zařízení pomocí metod „mirror.config.session.get“, „port.status.get“ a v případě stohování „topo.config.stacking.get“.

Volání „mirror.capabilities.get“ je zahájeno událostí „domready“ a výsledek je nakonfigurován tak, aby jej zpracovala funkce requestUpdate.
requestUpdate zahájí volání „mirror.config.session.get“,
„port.status.get“ a v případě stohování „topo.config.stacking.get“ a výsledky těchto volání jsou nakonfigurovány tak, aby je zpracovávala funkce PrepareUpdate.
Funkce PrepareUpdate shromáždí všechny výsledky a teprve po obdržení všech zavolá funkci processUpdate, která vytvoří tabulky, které se zobrazí na web.

Reference

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

Dokumenty / zdroje

Microsemi AN1256 Web Aplikace pro programátory [pdfUživatelská příručka AN1256, AN1256 Web Aplikace pro programátory, Web Aplikace programátorů, aplikace

Reference

• Uživatelská příručka