Microsemi AN1256 Web Aplikacija programera

Uvod

JSON (JavaScript Object Notation) je otvoreni standard file format koji koristi ljudski čitljiv tekst za razmjenu podataka. To je uobičajeni format podataka koji se koristi za asinkronu komunikaciju pretraživač/server.
Za novo web dizajn stranice, JSON format može biti zamjena za originalni AJAX stil. Uporedite sa AJAX-om, korišćenje JSON-a čini Web implementacija lakša i jednostavnija. Programer se samo treba fokusirati na web dizajn stranice i Web Implementacija rukovatelja se može izostaviti jer je JSON metoda pristupa već podržana u svakom od njih WebStaX softverski moduli.
Ovaj dokument navodi vodič za programere za softverskog inženjera koji treba da razvije Web stranica putem JSON-a. Detaljne procedure i npramplekcije su takođe uključene u naredne odeljke.

JSON tok pristupa podacima

Gotovoview
Evo JSON toka pristupa podacima kojim se HTTP veza pokreće od klijenta (pretraživača). HTML tabela se kreira dinamički prema primljenim JOSN podacima sa strane servera (DUT).

Slika 1. Tok pristupa između klijenta i servera

Zahtjev/odgovor JSON podaci
JSON paket zahtjeva je baziran na HTTP metodi postavljanja zahtjeva i sadržaj mora slijediti MSCC JSON format.

• Zatražite JSON sintaksu:{“metoda”:” ”,”params”:[ ], “id:”jsonrpc”}
• JSON sintaksa odgovora: {“greška”: ,”rezultat”: , “id:”jsonrpc”}

Sljedeći snimci prikazuju JSON sadržaj između pretraživača i DUT-a.

Slika 2. Snimak HTTP zahtjeva od klijenta

Slika 3. Snimak HTTP odgovora sa servera

MSCC JSON specifikacija
Da biste dobili potpune JSON informacije uključujući metodu, parametar, opis itd. Upišite “http:// /json_spec” na adresnoj traci vašeg pretraživača. Postoji još jedan metod pristupa preko naziva JSON metode “jsonRpc.status.introspection.specific.inventory.get”, koristi se za određenu metodu.

Slika 4. Snimak JSON specifikacije web stranica

Web okvir

The Web okvir u WebStaX softver je baziran na MooTools otvorenog koda. To je kolekcija JavaScript uslužnih programa sa MIT licencom. (http://mootools.net/license.txt) Traka menija i većina web stranice su zasnovane na okviru. I AJAX i JSON algoritam su već integrisani u njegove uslužne programe.
osim toga, WebStaX softver pruža druge uslužne programe koji su korisni za JSON web dizajn stranice.

• json.js – Koristite za za prijenos/primanje dinamičkih podataka sa JSON sintaksom.
• dynforms.js – Koristi se za dinamičko kreiranje HTML tabele.
• validate.js – Koristi se za provjeru valjanosti HTML forme.

Pune JavaScript biblioteke nalaze se u direktoriju izvornog stabla: webstax2\ vtss_appl\web\html\lib.

Smjernice za JSON Web dizajn stranice

Ovaj odjeljak vodi kako dizajnirati a web stranica zasnovana na MSCC JavaScript bibliotekama. Koristimo globalno konfigurisano ogledalo web stranica kao bivšiample here. Asinhrona komunikacija je zasnovana na HTTP JSON metodi pristupa i svi globalno konfigurisani parametri su navedeni u jednoj dinamičkoj HTML tabeli.
The web izgled stranice je naveden ispod, a cijeli izvorni kod se nalazi ispod direktorija izvornog stabla: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Da budem tipičniji web stranice reference, pogledajte odjeljak dodatka.

Tabela za konfiguraciju ogledala i ogledala

Slika 5. Example globalno konfigurisane tabele

Uredi Web stranica

HTML zaglavlje
Uključite JS biblioteke koje su potrebne u HTML tag.

Inicijalizirajte resurs dinamičke tablice

• Kada je HTML dokument spreman, pozovite DynamicTable() da inicijalizirate resurs dinamičke tablice.
• DynamicTable() se koristi za kreiranje dinamičke tablice nakon što primi JSON podatke.
• Zatim će pozvati requestUpdate da pokrene tok JSON komandi.

1. window.addEvent('domready', function() {
2. // Kreirajte obrazac sa tijelom tabele za primanje/prenos JSON podataka
3. myDynamicTable = nova DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Zahtjev/odgovor JSON podaci

• Kada je HTML dokument spreman, koristite requestJsonDoc() da pošaljete JSON zahtjev “mirror.config.session.get” da dobijete informacije o konfigurisanim sesijama.
• Nakon što su JSON podaci za “mirror.capabilities.get” primljeni, funkcija povratnog poziva requestUpdate() će se obraditi. Funkcija requestUpdate će tada pozvati “mirror.config.session.get” da dobije trenutnu konfiguraciju. Kada se primi trenutna konfiguracija, poziva se funkcija processUpdate da se napravi tabela koja će biti prikazana.

1. funkcija requestUpdate()
2. {
3. // Vrati sadržaj tabele
4. myDynamicTable.restore();
   5
5. // Ova tabela dva JSON podataka.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Obradite primljene JSON podatke

• Funkcija processUpdate() se koristi za raspored dinamičke tablice nakon primitka JSON podataka.
• addRows() se koristi za dodavanje redova tabele. myDynamicTable.update() raspored
  HTML tabela prema podacima u redovima tabele.

1. funkcija processUpdate(recv_json, ime)
2. {
3. // Zanemari proces ako nema primljenih podataka
4. if (!recv_json) {
5. alert(“Dobijanje dinamičkih podataka nije uspjelo.”);
6. povratak;
7. }
8. // Sačuvajte primljene JSON podatke
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Dodaj redove tablice
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Ažuriraj ovu dinamičku tablicu
15. myDynamicTable.update();
17. // Tajmer za osvježavanje
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (ID tajmera) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Dodajte redove tabele

• U funkciji addRows() koristimo JSON format da popunimo svaki globalno konfigurirani parametar u redu tablice.
• Sva HTML polja su navedena u JSON nizu (“table_rows”), a sintaksa polja tabele je ispod.

sintaksa:
redovi_tabele:[ , , … ] : { , , … }
: {“tip”: , “params”:[ , , …, ]}

• U ovom slučaju, svaki red ima pet polja: “ID sesije”, “Način”, “Tip”, “VLAN ID” i “Reflector Port” npr.ample,

ID sesije (Polje imena: int32_t)	1 (ID sesije ogledala)
Mode (Polje imena: vtss_bool_t)	istina (Što znači da je sesija ogledala omogućena)
Tip (Polje imena: nabrajanje {mirror, rMirrorSource, rMirrorDestination}	RMirror Source (ovo je izvor udaljene sesije ogledala
VLAN ID (Polje imena: uint16_t)	200 (vlan koji se koristi za preslikavanje)
Reflektor Port (Polje imena: vtss_ifindex_t)	Gi 1/1 (Luk na koji se šalje preslikani promet

• MyDynamicTable.addRows() će pretvoriti JSON podatke u HTML format i ispisati HTML tabelu.

1. funkcija addRow(ključ, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Nijedan", none_interface_text = "NONE";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {polja:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + ključ, ključ]},
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. povratak red;
13. }
14. funkcija addRows(recv_json)
15. {
16. var red, prazan_colspan = 7;
17. var table_rows = new Array();
18. // Dodaj zaglavlje tablice
19. addHeader(table_rows);
20. // Dodaj jedan red
21. Object.each(recv_json, funkcija(zapis) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. return table_rows;
25. }

Web stranica pomoći
Za web dizajn stranice pomoći, opis pomoći može se odnositi na JSON specifikaciju, da tekst opisa može biti u skladu s JSON izlazom i pomaže u smanjenju suvišnih opisa. Prampovdje je preuzeto iz konfiguracije dhcp6 releja.

Hiperlink u izvoru file
Dodijelite pomoć file lokacija u svom izvoru file HTML tag. Fiksno ime varijable “help_page” se koristi za web zadavanje stranice pomoći.

2. // Magija stranice pomoći
3. var help_page = “/help/help_xxx.htm”;

Ažurirajte opis HTML polja iz JSON specifikacije

• Koristi ili HTML tag deklarirati opis HTML tablice i dati jedinstveni ID za tag.
• Kada je HTML dokument spreman, pozovite loadXMLDoc() da biste dobili cijelu JSON specifikaciju ili dobili opis specifične metode pomoću naziva JSON metode “jsonRpc.status.introspection.specific.inventory.get”.
• ProcesTableDesc() se koristi za ažuriranje opisa tablice, a processUpdate() se koristi za ažuriranje opisa parametara tablice.
• U procesuUpdate(), pozovite updateTableParamsDesc() da ažurirate JSON elemente koji odgovaraju specifičnim imenima elemenata.
• Ažurirajte ili tag unutrašnji HTML prema opisu elementa.

2. /* Ažurirajte HTML polja opisa */
3. funkcija processTableDesc(req) {
4. if (!req.responseText) {
5. povratak;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Ažuriraj opis tabele
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Ažuriraj opis parametara HTML tabele */
12. funkcija processUpdate(recv_json) {
13. // Ažuriranje opisa parametara tablice
14. var param_names = [
15. {
16. “alias”: “Interfejs”,
17. “type”: “vtss_ifindex_t”,
18. “name”: “vlanInterface”,
19. "sufiks": "."
20. },
21. {
22. “alias”: “Relay Interface”,
23. “type”: “vtss_ifindex_t”,
24. “name”: “relayVlanInterface”,
25. “sufiks”: “. ID interfejsa koji se koristi za prenošenje.”
26. },
27. {
28. “alias”: “Relay Destination”,
29. “type”: “mesa_ipv6_t”,
30. “name”: “relay_destination”,
31. “sufiks”: “. IPv6 adresa DHCPv6 servera koji zahtjeva će biti proslijeđena. Zadana vrijednost 'ff05::1:3' predstavlja 'bilo koji DHCP server'.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Uzmi JSON specifikaciju */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hiper-link u traci menija

• Izvorni HTML kod trake menija je generisan iz file webstax2\vtss_appl\web\ menu_default.cxx.
• Uredite stavke u ovome file za Web hiperveza stranice.

1. #ako je definirano (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relej,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NAPOMENA
Obratite pažnju na broj razmaka u ITEM(“”), koji se koristi za određivanje nivoa grupe u traci menija. U ovom slučaju, sve web stranice su pod grupom “DHCPv6”.

Slika 6. Primample globalno konfigurisane tabele

Dodatak

Tipično web stranice

Postoji nekoliko tipičnih web stranice se mogu koristiti za referentni dizajn. Jedan dodatni exampOvdje treba prikazati konfiguraciju jedne sesije ogledala koja se nalazi u vtss_appl\mirror\html\mirror.htm.
The web stranica pruža detaljnu konfiguraciju za jednu sesiju ogledala. Svi konfigurisani parametri su navedeni.

• Kliknite na dugme „Sačuvaj“ da primenite trenutnu konfiguraciju.
• Kliknite na dugme „Resetuj“ da resetujete trenutnu konfiguraciju.
• Kliknite na “Otkaži” za povratak na krajview ogledala sesija

Mirror&RMirror konfiguracija

Globalne postavke

Konfiguracija izvornog VLAN-a

Konfiguracija porta

Slika 7. Example detaljne konfiguracije sesije ogledala
Dugmad “Sačuvaj”, “Resetuj” i “Otkaži” dodaje html kod:

JSON tok komande
Ova stranica zahtijeva tok komandi u dva koraka:

• Prvo treba da dobije mogućnosti uređaja metodom “mirror.capabilities.get”. Mogućnosti se ne mijenjaju i moraju se pročitati samo jednom.
• Zatim treba da dobije trenutnu konfiguraciju uređaja koristeći metode “mirror.config.session.get”, “port.status.get” i u slučaju slaganja “topo.config.stacking.get”.

Poziv "mirror.capabilities.get" inicira događaj "domready", a rezultat je konfigurisan da njime rukuje funkcija requestUpdate.
requestUpdate će pokrenuti poziv "mirror.config.session.get",
“port.status.get” iu slučaju slaganja “topo.config.stacking.get” i rezultati ovih poziva su konfigurisani da njima rukuje funkcija readyUpdate.
Funkcija readyUpdate će prikupiti sve rezultate, a tek kada su svi primljeni pozvaće funkciju processUpdate koja će konstruisati tabele koje će biti prikazane na web.

Reference

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

Dokumenti / Resursi

Microsemi AN1256 Web Aplikacija programera [pdf] Korisnički priručnik AN1256, AN1256 Web Aplikacija programera, Web Aplikacija programera, aplikacija

Reference

• Uputstvo za upotrebu