Microsemi AN1256 Web Programozói alkalmazás

Bevezetés

A JSON (JavaScript Object Notation) nyílt szabvány file olyan formátum, amely ember által olvasható szöveget használ az adatcseréhez. Ez egy általános adatformátum, amelyet az aszinkron böngésző/szerver kommunikációhoz használnak.
Az újnak web oldaltervezés, a JSON formátum helyettesítheti az eredeti AJAX stílust. Az AJAX-szal összehasonlítva a JSON használatával a Web könnyebb és egyszerűbb a megvalósítás. A fejlesztőnek csak arra kell koncentrálnia web oldal tervezése és a Web A kezelő megvalósítása elhagyható, mivel a JSON hozzáférési módszer már mindegyikben támogatott WebStaX szoftvermodulok.
Ez a dokumentum tartalmazza a programozói útmutatót azoknak a szoftvermérnököknek, akiknek ki kell fejleszteniük a Web oldal JSON-on keresztül. A részletes eljárások és plample is szerepelnek a következő szakaszokban.

JSON adathozzáférési folyamat

Felettview
Íme a JSON-adat-hozzáférési folyamat, amely HTTP-kapcsolatot kezdeményez az ügyfélből (böngészőből). A HTML tábla dinamikusan jön létre a szerver(DUT) oldalról kapott JOSN adatok alapján.

1. ábra. A kliens és a szerver közötti hozzáférési folyamat

Kérjen/válaszoljon JSON-adatokat
A JSON-kéréscsomag a HTTP-kérés feladási módszerén alapul, és a tartalomnak követnie kell az MSCC JSON-formátumot.

• JSON szintaxis kérése:{"módszer":" ","params":[ ], „id:”jsonrpc”}
• Válasz JSON szintaxisa: {"hiba": ,"eredmény": , „id:”jsonrpc”}

A következő pillanatképek a böngésző és a DUT közötti JSON-tartalmat mutatják.

2. ábra. Az ügyféltől érkező HTTP-kérés pillanatképe

3. ábra. Pillanatkép a szerver HTTP-válaszáról

MSCC JSON specifikáció
A teljes JSON-információ eléréséhez, beleértve a metódust, paramétert, leírást stb. Írja be a „http://” /json_spec” címet a böngésző címsorában. Van egy másik hozzáférési módszer a JSON metódusnéven keresztül: „jsonRpc.status.introspection.specific.inventory.get”, ez egy adott metódushoz használatos.

4. ábra. Pillanatkép a JSON specifikációról web oldalon

Web keretrendszer

A Web keret be WebA StaX szoftver egy nyílt forráskódú MooTools-on alapul. Ez MIT licenccel rendelkező JavaScript segédprogramok gyűjteménye. (http://mootools.net/license.txt) A menüsor és a legtöbb web oldalak a keretrendszeren alapulnak. Mind az AJAX, mind a JSON algoritmus már integrálva van a segédprogramjaiba.
Kívül, WebA StaX szoftver biztosítja a JSON számára hasznos egyéb segédprogramokat web oldal kialakítása.

• json.js – Használja a dinamikus adatok JSON szintaxissal történő továbbítására/fogadására.
• dynforms.js – Használja a HTML-tábla dinamikus létrehozásához.
• validate.js – Használja a HTML űrlap érvényesítésére.

A teljes JavaScript-könyvtárak a forrásfa könyvtárában találhatók: webstax2\ vtss_appl\web\html\lib.

Útmutató a JSON-hoz Web oldal kialakítása

Ez a rész bemutatja, hogyan kell megtervezni a web oldal az MSCC JavaScript könyvtárakon alapul. A Mirror globális konfigurálását használjuk web oldal, mint az example itt. Az aszinkron kommunikáció a HTTP JSON hozzáférési módszeren alapul, és az összes globálisan konfigurált paraméter egyetlen dinamikus HTML-táblázatban van felsorolva.
A web Az oldal elrendezése az alábbiakban látható, a teljes forráskód pedig a forrásfa könyvtárában található: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Hogy még tipikusabb legyen web oldalak hivatkozása, lásd a függelék részt.

Tükör és RTükör konfiqurációs táblázat

5. ábra. Example a globális konfigurált tábla

Szerkesztés Web oldalon

HTML fejléc
Szerelje be a szükséges JS-könyvtárakat a HTML-be tag.

Inicializálja a dinamikus tábla erőforrást

• Amikor a HTML-dokumentum készen áll, hívja meg a DynamicTable() függvényt a dinamikus tábla-erőforrás inicializálásához.
• A DynamicTable() a dinamikus tábla létrehozására szolgál a JSON-adatok fogadása után.
• Ezután meghívja a requestUpdate-t a JSON-parancsfolyam elindításához.

1. window.addEvent('domready', function() {
2. // Hozzon létre egy űrlapot táblázat törzsével a JSON-adatok fogadásához/továbbításához
3. myDynamicTable = new DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Kérjen/válaszoljon JSON-adatokat

• Amikor a HTML-dokumentum készen áll, használja a requestJsonDoc() parancsot a „mirror.config.session.get” JSON-kérelem elküldéséhez, hogy információkat kapjon a konfigurált munkamenetekről.
• A „mirror.capabilities.get” JSON-adatok beérkezése után a requestUpdate() visszahívási függvény feldolgozásra kerül. A requestUpdate függvény ezután meghívja a „mirror.config.session.get”-et az aktuális konfiguráció lekéréséhez. Az aktuális konfiguráció fogadásakor a processUpdate függvény meghívásra kerül a megjelenítendő táblázat összeállításához.

1. függvény requestUpdate()
2. {
3. // Táblázat tartalmának visszaállítása
4. myDynamicTable.restore();
   5
5. // Ez a táblázat két JSON-adat.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

A kapott JSON-adatok feldolgozása

• A processUpdate() függvény a dinamikus tábla elrendezésére szolgál a JSON-adatok fogadása után.
• Az addRows() a táblázat sorainak hozzáadására szolgál. myDynamicTable.update() elrendezés a
  HTML táblázat a táblázat soraiban szereplő adatok szerint.

1. függvény processUpdate(recv_json, név)
2. {
3. // Ha nem érkezik adat, figyelmen kívül hagyja a folyamatot
4. if (!recv_json) {
5. alert("Dinamikus adatok lekérése nem sikerült.");
6. visszatérés;
7. }
8. // Mentse a kapott JSON-adatokat
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Táblázatsorok hozzáadása
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tábla_sorok);
14. // Frissítse ezt a dinamikus táblát
15. myDynamicTable.update();
17. // Frissítési időzítő
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. }

Táblázatsorok hozzáadása

• Az addRows() függvényben a JSON formátumot használjuk a táblázatsor minden globális konfigurált paraméterének kitöltésére.
• Az összes HTML-mező szerepel a JSON-tömbben („table_rows”), a táblázat mező szintaxisa pedig alább látható.

Szintaxis:
táblázat_sorai:[ , ,… ] : { , ,… }
: {"típus": , „params”:[ , , …, ]}

• Ebben az esetben minden sorban öt mező található: „Session ID”, „Mode”, „Type”, „VLAN ID” és „Reflector Port” pl.ample,

Munkamenet azonosítója (Név mező: int32_t)	1 (A tükörmunka azonosítója)
Mód (Név mező: vtss_bool_t)	igaz (Ez azt jelenti, hogy a tükrözés engedélyezve van)
Írja be (Névmező: felsorolás {tükör, rMirrorSource, rMirrorDestination}	RMirror Source (ez a távoli tükör munkamenet forrása
VLAN azonosító (Név mező: uint16_t)	200 (a tükrözéshez használt vlan)
Reflektor port (Név mező: vtss_ifindex_t)	Gi 1/1 (A port, amelyre a tükrözött forgalmat küldik

• A myDynamicTable.addRows() konvertálja a JSON-adatokat HTML formátumba, és kiadja a HTML-táblázatot.

1. függvény addRow(kulcs, érték)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Nincs", none_interface_text = "NINCS";
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=" + kulcs, kulcs]},
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 == "tükör" ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”text”, params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : "-" , "c"]}
11. ]};
12. visszatérő sor;
13. }
14. függvény addRows(recv_json)
15. {
16. var sor, üres_colspan = 7;
17. var táblázat_sorok = new Array();
18. // Táblafejléc hozzáadása
19. addHeader(tábla_sorok);
20. // Egy sor hozzáadása
21. Object.each(recv_json, function(rekord) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. return táblázat_sorok;
25. }

Web súgóoldal
A web A súgóoldal tervezésénél a súgó leírása hivatkozhat a JSON specifikációra, hogy a leírás szövege összhangban legyen a JSON kimenettel, és segít csökkenteni a redundáns leírásokat. Voltample itt a dhcp6 relé konfigurációjából származik.

Hiperhivatkozás a forrásban file
Rendelje hozzá a súgót file helyét a forrásában file HTML tag. A „help_page” rögzített változónevet használják a web súgóoldal feladat.

2. // Súgóoldal varázslat
3. var help_page = "/help/help_xxx.htm";

Frissítse a HTML-mező leírását a JSON-specifikációból

• Használat vagy HTML tag deklarálni a HTML tábla leírását, és egyedi azonosítót kell adni a számára tag.
• Amikor a HTML-dokumentum készen áll, hívja meg a loadXMLDoc() függvényt a teljes JSON-specifikáció lekéréséhez, vagy a „jsonRpc.status.introspection.specific.inventory.get” JSON-metódusnévvel kapja meg az adott metódus leírását.
• A processTableDesc() a tábla leírásának frissítésére szolgál, a processUpdate() pedig a táblaparaméter leírásának frissítésére.
• A processUpdate() függvényben hívja meg az updateTableParamsDesc() függvényt az adott elemnevekkel megegyező JSON-elemek frissítéséhez.
• Frissítse a vagy tag belső HTML az elem leírása szerint.

2. /* A HTML-leíró mezők frissítése */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. visszatérés;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Tábla leírásának frissítése
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* HTML tábla paraméter leírásának frissítése */
12. function processUpdate(recv_json) {
13. // Táblaparaméter leírásának frissítése
14. var param_names = [
15. {
16. „alias”: „Interfész”,
17. "type": "vtss_ifindex_t",
18. "név": "vlanInterface",
19. "utótag": "."
20. },
21. {
22. „alias”: „Relé interfész”,
23. "type": "vtss_ifindex_t",
24. "név": "relayVlanInterface",
25. „utótag”: „. A továbbításhoz használt interfész azonosítója."
26. },
27. {
28. „alias”: „Relay Destination”,
29. "type": "mesa_ipv6_t",
30. „name”: „relay_destination”,
31. „utótag”: „. A kérést küldő DHCPv6-szerver IPv6-címét továbbítani kell. Az alapértelmezett „ff05::1:3” érték a „bármely DHCP-kiszolgálót” jelenti.”
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_nevek);
35. }
36. /* JSON specifikáció lekérése */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hiperhivatkozás a menüsorban

• A menüsor HTML-forráskódja ebből jön létre file webstax2\vtss_appl\web\ menü_default.cxx.
• Szerkessze az elemeket ebben file a Web oldal hiperhivatkozása.

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

JEGYZET
Figyelje meg, hogy az ITEM(“”) szóköz karakterének száma, amely a menüsorban a csoportszint meghatározására szolgál. Ebben az esetben minden web oldalak a „DHCPv6” csoportban találhatók.

6. ábra Plample a globális konfigurált tábla

Függelék

Tipikus web oldalakat

Több tipikus is van web oldalak használhatók a referenciatervhez. Egy további exampAz itt bemutatandó egyetlen tükrözési munkamenet konfigurációja a vtss_appl\mirror\html\mirror.htm fájlban.
A web oldal egyetlen tükrözési munkamenet részletes konfigurációját tartalmazza. Az összes konfigurált paraméter megjelenik.

• Kattintson a „Mentés” gombra az aktuális konfiguráció alkalmazásához.
• Kattintson a „Reset” gombra az aktuális konfiguráció visszaállításához.
• Kattintson a „Mégse” gombra, hogy visszatérjen a végéhezview tükör ülések

Mirror&RMirror konfiguráció

Globális beállítások

Forrás VLAN(ok) konfigurációja

Port konfiguráció

7. ábra. Examptükörmunka részletes konfigurálása
A „Mentés”, „Visszaállítás” és „Mégse” gombokat a html kód adja:

JSON parancsfolyam
Ez az oldal kétlépéses parancsfolyamatot igényel:

• Először meg kell szereznie az eszköz képességeit a „mirror.capabilities.get” módszerrel. A képességek nem változnak, és csak egyszer kell elolvasni.
• Ezután be kell szereznie az eszköz aktuális konfigurációját a „mirror.config.session.get”, „port.status.get” és halmozás esetén „topo.config.stacking.get” metódusokkal.

A „mirror.capabilities.get” meghívását a „domready” esemény kezdeményezi, és az eredményt a requestUpdate függvény kezeli.
A requestUpdate elindítja a „mirror.config.session.get” hívását,
A „port.status.get” és halmozás esetén a „topo.config.stacking.get” és ezeknek a hívásoknak az eredményei úgy vannak beállítva, hogy azokat a readyUpdate függvény kezelje.
A readyUpdate függvény összegyűjti az összes eredményt, és csak ha az összes beérkezett, akkor hívja meg a processUpdate függvényt, amely létrehozza a megjelenítendő táblákat. web.

Hivatkozások

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

Dokumentumok / Források

Microsemi AN1256 Web Programozói alkalmazás [pdf] Felhasználói útmutató AN1256, AN1256 Web Programozói alkalmazás, Web Programozói alkalmazás, alkalmazás

Hivatkozások

• Felhasználói kézikönyv