Microsemi AN1256 Web Aplikácia programátorov

Úvod

JSON (JavaScript Object Notation) je otvorený štandard file formát, ktorý používa na výmenu údajov text čitateľný pre človeka. Je to bežný dátový formát používaný na asynchrónnu komunikáciu prehliadač/server.
Pre nové web dizajn stránky, formát JSON môže byť náhradou za pôvodný štýl AJAX. V porovnaní s AJAX, použitie JSON robí Web implementácia jednoduchšia a jednoduchšia. Vývojár sa musí sústrediť iba na web dizajn stránky a Web implementáciu handlera možno vynechať, pretože prístupová metóda JSON je už podporovaná v každej z nich WebSoftvérové ​​moduly StaX.
Tento dokument uvádza programátorskú príručku pre softvérového inžiniera, ktorý potrebuje vyvinúť Web stránku cez JSON. Podrobné postupy a naprampsú zahrnuté aj v nasledujúcich častiach.

Tok prístupu k údajom JSON

Koniecview
Tu je tok prístupu k údajom JSON, pri ktorom sa z klienta (prehliadača) iniciuje pripojenie HTTP. Tabuľka HTML sa vytvára dynamicky podľa prijatých údajov JOSN zo strany servera (DUT).

Obrázok 1. Tok prístupu medzi klientom a serverom

Údaje JSON požiadavky/odpovede
Paket požiadavky JSON je založený na metóde odosielania požiadavky HTTP a obsah musí byť vo formáte MSCC JSON.

• Vyžiadať syntax JSON:{"metóda":" ”,”parametre”:[ ], “id:”jsonrpc”}
• Syntax odpovede JSON: {"chyba": "výsledok": , “id:”jsonrpc”}

Nasledujúce snímky zobrazujú obsah JSON medzi prehliadačom a DUT.

Obrázok 2. Snímka HTTP požiadavky od klienta

Obrázok 3. Snímka odpovede HTTP zo servera

MSCC špecifikácia JSON
Ak chcete získať úplné informácie JSON vrátane metódy, parametra, popisu atď. Zadajte „http:// /json_spec” na paneli s adresou prehliadača. Existuje ďalšia metóda prístupu cez metódu JSON s názvom „jsonRpc.status.introspection.specific.inventory.get“, používa sa pre špecifickú metódu.

Obrázok 4. Snímka špecifikácie JSON web stránku

Web rámec

The Web rámec v WebSoftvér StaX je založený na open source MooTools. Je to kolekcia JavaScript utilít s licenciou MIT. (http://mootools.net/license.txt) Panel s ponukami a väčšina z nich web stránky sú založené na frameworku. Algoritmus AJAX aj JSON sú už integrované v jeho nástrojoch.
okrem toho WebSoftvér StaX poskytuje ďalšie nástroje, ktoré sú užitočné pre JSON web dizajn stránky.

• json.js – Použite pre na prenos/prijímanie dynamických údajov so syntaxou JSON.
• dynforms.js – Používa sa na dynamické vytváranie HTML tabuľky.
• validate.js – Používa sa na overenie HTML formulára.

Úplné knižnice JavaScriptu sa nachádzajú v adresári zdrojového stromu: webstax2\ vtss_appl\web\html\lib.

Smernica pre JSON Web dizajn stránky

Táto časť popisuje, ako navrhnúť a web stránka založená na MSCC JavaScript knižniciach. Používame globálne nakonfigurované zrkadlo web stránku ako example tu. Asynchrónna komunikácia je založená na prístupovej metóde HTTP JSON a všetky globálne nakonfigurované parametre sú uvedené v jednej dynamickej HTML tabuľke.
The web rozloženie stránky je uvedené nižšie a celý zdrojový kód sa nachádza v adresári zdrojového stromu: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Aby som bol typickejší web odkaz na strany, pozri časť dodatok.

Konfiguračná tabuľka Mirror & RMirror

Obrázok 5. Example globálnej konfigurovanej tabuľky

Upraviť Web stránku

HTML hlavička
Zahrňte do kódu HTML potrebné knižnice JS tag.

Inicializujte prostriedok dynamickej tabuľky

• Keď je dokument HTML pripravený, zavolajte DynamicTable() na inicializáciu prostriedku dynamickej tabuľky.
• DynamicTable() sa používa na vytvorenie dynamickej tabuľky po prijatí údajov JSON.
• Potom zavolá requestUpdate na spustenie toku príkazov JSON.

1. window.addEvent('domready', function() {
2. // Vytvorenie formulára s telom tabuľky na príjem/prenos údajov JSON
3. myDynamicTable = new DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Údaje JSON požiadavky/odpovede

• Keď je dokument HTML pripravený, pomocou requestJsonDoc() odošlite požiadavku JSON „mirror.config.session.get“, aby ste získali informácie o nakonfigurovaných reláciách.
• Po prijatí údajov JSON pre „mirror.capabilities.get“ sa spracuje funkcia spätného volania requestUpdate(). Funkcia requestUpdate potom zavolá „mirror.config.session.get“, aby získala aktuálnu konfiguráciu. Po prijatí aktuálnej konfigurácie sa zavolá funkcia processUpdate na zostavenie tabuľky, ktorá sa má zobraziť.

1. funkcia requestUpdate()
2. {
3. // Obnovenie obsahu tabuľky
4. myDynamicTable.restore();
   5
5. // Táto tabuľka obsahuje dva údaje JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Spracujte prijaté údaje JSON

• Funkcia processUpdate() sa používa na rozloženie dynamickej tabuľky po prijatí údajov JSON.
• AddRows() sa používa na pridávanie riadkov tabuľky. myDynamicTable.update() rozloženie
  HTML tabuľka podľa údajov v riadkoch tabuľky.

1. function processUpdate(recv_json, name)
2. {
3. // Ignorovať proces, ak nie sú prijaté žiadne údaje
4. if (!recv_json) {
5. alert("Získanie dynamických údajov zlyhalo.");
6. návrat;
7. }
8. // Uložte prijaté údaje JSON
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Pridať riadky tabuľky
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(riadky_tabuľky);
14. // Aktualizujte túto dynamickú tabuľku
15. myDynamicTable.update();
17. // Obnoviť časovač
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (ID časovača) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Pridajte riadky tabuľky

• Vo funkcii addRows() používame formát JSON na vyplnenie každého globálneho nakonfigurovaného parametra v riadku tabuľky.
• Všetky polia HTML sú uvedené v poli JSON („riadky_tabuľky“) a syntax poľa tabuľky je uvedená nižšie.

Syntax:
table_rows:[ , ,… ] : { , ,… }
: {"typ": , “paramy”:[ , , …, ]}

• V tomto prípade má každý riadok päť polí: „ID relácie“, „Režim“, „Typ“, „ID VLAN“ a „Port reflektora“ napr.ample,

ID relácie (Pole názvu: int32_t)	1 (Id zrkadlovej relácie)
Režim (Pole názvu: vtss_bool_t)	pravda (To znamená, že zrkadlová relácia je povolená)
Typ (Pole s názvom: enumerácia {mirror, rMirrorSource, rMirrorDestination}	Zdroj RMirror (toto je zdroj relácie vzdialeného zrkadla
ID VLAN (Pole názvu: uint16_t)	200 (vlan používaná na zrkadlenie)
Port reflektora (Pole názvu: vtss_ifindex_t)	Gi 1/1 (Port, na ktorý sa odosiela zrkadlená prevádzka

• MyDynamicTable.addRows() skonvertuje údaje JSON do formátu HTML a vygeneruje tabuľku HTML.

1. funkcia addRow(kľúč, hodnota)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Žiadne”, none_interface_text = “NONE”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var riadok = {fields:[
6. {type:”link”, params:[”cr”, “mirror.htm?session_id=” + kľúč, kľúč]},
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 == “mirror” ? "-":
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. návratový riadok;
13. }
14. funkcia addRows(recv_json)
15. {
16. var riadok, empty_colspan = 7;
17. var table_rows = new Array();
18. // Pridať hlavičku tabuľky
19. addHeader(riadky_tabuľky);
20. // Pridať jeden riadok
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(záznam.kľúč, záznam.hodnota));
23. });
24. return table_rows;
25. }

Web stránku pomocníka
Pre web dizajn stránky pomocníka, popis pomocníka môže odkazovať na špecifikáciu JSON, že text popisu môže byť v súlade s výstupom JSON a pomáha znižovať nadbytočné popisy. NaprampTento súbor je prevzatý z konfigurácie relé dhcp6.

Hyper-link v zdroji file
Priraďte pomoc file umiestnenie v jeho zdroji file HTML tag. Pevný názov premennej „help_page“ sa používa pre web priradenie stránky pomocníka.

2. // Kúzlo stránky pomocníka
3. var help_page = “/help/help_xxx.htm”;

Aktualizujte popis poľa HTML zo špecifikácie JSON

• Použite alebo HTML tag deklarovať popis HTML tabuľky a prideliť jedinečné ID pre tag.
• Keď je dokument HTML pripravený, zavolajte loadXMLDoc(), aby ste získali celú špecifikáciu JSON, alebo získajte popis konkrétnej metódy podľa názvu metódy JSON „jsonRpc.status.introspection.specific.inventory.get“.
• ProcessTableDesc() sa používa na aktualizáciu popisu tabuľky a processUpdate() sa používa na aktualizáciu popisu parametra tabuľky.
• V processUpdate() zavolajte updateTableParamsDesc() na aktualizáciu prvkov JSON, ktoré sa zhodujú s konkrétnymi názvami prvkov.
• Aktualizujte alebo tag vnútorné HTML podľa popisu prvku.

2. /* Aktualizácia polí popisu HTML */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. návrat;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Aktualizácia popisu tabuľky
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Aktualizácia popisu parametra HTML tabuľky */
12. function processUpdate(recv_json) {
13. // Aktualizácia popisu parametra tabuľky
14. var param_names = [
15. {
16. "alias": "Rozhranie",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "prípona": "."
20. },
21. {
22. "alias": "reléové rozhranie",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. „prípona“: „. ID rozhrania použitého na prenos."
26. },
27. {
28. „alias“: „Cieľ relé“,
29. "type": "mesa_ipv6_t",
30. "name": "relay_destination",
31. „prípona“: „. Adresa IPv6 servera DHCPv6, ktorý požaduje, sa má preniesť. Predvolená hodnota „ff05::1:3“ znamená „akýkoľvek server DHCP“.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, názvy_parametrov);
35. }
36. /* Získať špecifikáciu 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 paneli s ponukami

• Zdrojový kód HTML panela s ponukami je generovaný z file webstax2\vtss_appl\web\ menu_default.cxx.
• Upravte položky v tomto file pre Web hypertextový odkaz na stránku.

1. #if define(VTSS_SW_OPTION_DHCP6_RELAY)
2. POLOŽKA(”relé,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

POZNÁMKA
Všimnite si, že počet znakov medzery v ITEM(“”), ktorý sa používa na určenie úrovne skupiny v lište ponuky. V tomto prípade všetky web stránky sú v skupine „DHCPv6“.

Obrázok 6. Prample globálnej konfigurovanej tabuľky

Dodatok

Typické web stránky

Typických je niekoľko web stránky môžu byť použité na referenčný dizajn. Jeden ďalší exampTu sa zobrazí konfigurácia jednej zrkadlovej relácie, ktorá sa nachádza v vtss_appl\mirror\html\mirror.htm.
The web poskytuje podrobnú konfiguráciu pre jednu reláciu zrkadla. Všetky nakonfigurované parametre sú uvedené.

• Kliknutím na tlačidlo „Uložiť“ použijete aktuálnu konfiguráciu.
• Kliknutím na tlačidlo „Reset“ obnovíte aktuálnu konfiguráciu.
• Kliknutím na „Zrušiť“ sa vrátite na koniecview zrkadlových relácií

Konfigurácia zrkadla a zrkadla

Globálne nastavenia

Konfigurácia zdrojových VLAN

Konfigurácia portu

Obrázok 7. Exampsúbor podrobnej konfigurácie relácie zrkadla
Tlačidlá „Uložiť“, „Resetovať“ a „Zrušiť“ sú pridané pomocou html kódu:

Tok príkazov JSON
Táto stránka vyžaduje dvojkrokový tok príkazov:

• Najprv potrebuje získať možnosti zariadenia pomocou metódy „mirror.capabilities.get“. Možnosti sa nemenia a stačí si ich prečítať raz.
• Následne potrebuje získať aktuálnu konfiguráciu zariadenia pomocou metód „mirror.config.session.get“, „port.status.get“ a v prípade stohovania „topo.config.stacking.get“.

Volanie „mirror.capabilities.get“ je iniciované udalosťou „domready“ a výsledok je nakonfigurovaný tak, aby ho spracovala funkcia requestUpdate.
PožiadavkaUpdate spustí volanie „mirror.config.session.get“,
„port.status.get“ a v prípade stohovania „topo.config.stacking.get“ a výsledky týchto volaní sú nakonfigurované tak, aby ich spracoval funkcia PrepareUpdate.
Funkcia PrepareUpdate zhromaždí všetky výsledky a až keď budú všetky prijaté, zavolá funkciu processUpdate, ktorá vytvorí tabuľky, ktoré sa zobrazia na web.

Referencie

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

Dokumenty / zdroje

Microsemi AN1256 Web Aplikácia programátorov [pdf] Používateľská príručka AN1256, AN1256 Web Aplikácia programátorov, Web Aplikácia programátorov, aplikácia

Referencie

• Používateľská príručka