Microsemi AN1256 Web Aplikacija za programere

Uvod

JSON (JavaScript Object Notation) je otvoreni standard file format koji za razmjenu podataka koristi tekst čitljiv ljudima. To je uobičajeni format podataka koji se koristi za asinkronu komunikaciju preglednik/poslužitelj.
Za novo web dizajn stranice, JSON format može biti zamjena za originalni AJAX stil. U usporedbi s AJAX-om, korištenje JSON-a čini Web implementacija lakša i jednostavnija. Programer se samo treba usredotočiti na web dizajn stranice i Web implementacija rukovatelja može se izostaviti jer je metoda pristupa JSON već podržana u svakom WebStaX softverski moduli.
Ovaj dokument navodi programerski vodič za softverskog inženjera koji treba razviti Web stranicu putem JSON-a. Detaljni postupci i pramptakođer uključeni u sljedeće odjeljke.

Tijek pristupa JSON podacima

Nadview
Ovdje je tok pristupa JSON podacima koji HTTP vezu pokreće klijent (preglednik). HTML tablica se stvara dinamički prema primljenim JOSN podacima sa strane poslužitelja (DUT).

Slika 1. Tijek pristupa između klijenta i poslužitelja

Podaci zahtjeva/odgovora JSON
JSON paket zahtjeva temelji se na HTTP metodi slanja zahtjeva i sadržaj mora slijediti MSCC JSON format.

• Sintaksa zahtjeva JSON:{“metoda”:” ”,”parametri”:[ ], “id:”jsonrpc”}
• JSON sintaksa odgovora: {“greška”: ,"proizlaziti": , “id:”jsonrpc”}

Sljedeće snimke prikazuju JSON sadržaj između preglednika i DUT-a.

Slika 2. Snimka HTTP zahtjeva klijenta

Slika 3. Snimka HTTP odgovora s poslužitelja

MSCC JSON specifikacija
Za dobivanje potpunih JSON informacija uključujući metodu, parametar, opis itd. Upišite “http:// /json_spec” na adresnoj traci preglednika. Postoji još jedna metoda pristupa putem naziva JSON metode “jsonRpc.status.introspection.specific.inventory.get”, ona se koristi za određenu metodu.

Slika 4. Snimka JSON specifikacije web stranica

Web okvir

The Web okvir u WebStaX softver se temelji na MooToolsu otvorenog koda. To je zbirka JavaScript pomoćnih programa s MIT licencom. (http://mootools.net/license.txt) Traka izbornika i većina web stranice se temelje na okviru. I AJAX i JSON algoritam već su integrirani u njegove uslužne programe.
Osim toga, WebSoftver StaX pruža druge uslužne programe koji su korisni za JSON web dizajn stranice.

• json.js – Koristite za prijenos/primanje dinamičkih podataka s JSON sintaksom.
• dynforms.js – Koristite za dinamičku izradu HTML tablice.
• validate.js – Koristite za provjeru valjanosti HTML obrasca.

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 temeljena na MSCC JavaScript bibliotekama. Koristimo Mirror global konfiguriran web stranicu kao prample ovdje. Asinkrona komunikacija temelji se na HTTP JSON metodi pristupa i svi globalno konfigurirani parametri navedeni su u jednoj dinamičkoj HTML tablici.
The web izgled stranice naveden je ispod, a puni izvorni kod nalazi se ispod direktorija izvornog stabla: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Da budemo tipičniji web stranice, pogledajte odjeljak s dodatkom.

Mirror & RMirror konfiguracijska tablica

Slika 5. Example globalno konfigurirane tablice

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 stvaranje dinamičke tablice nakon primitka JSON podataka.
• Zatim će pozvati requestUpdate za pokretanje JSON naredbenog tijeka.

1. window.addEvent('domready', function() {
2. // Kreirajte obrazac s tijelom tablice za primanje/prijenos JSON podataka
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. zahtjev za ažuriranje ();
5. });

Podaci zahtjeva/odgovora JSON

• Kada je HTML dokument spreman, upotrijebite requestJsonDoc() za slanje JSON zahtjeva “mirror.config.session.get” za dobivanje informacija o konfiguriranim sesijama.
• Nakon što se prime JSON podaci za “mirror.capabilities.get”, obradit će se funkcija povratnog poziva requestUpdate(). Funkcija requestUpdate tada će pozvati “mirror.config.session.get” da dobije trenutnu konfiguraciju. Kada se primi trenutna konfiguracija, poziva se funkcija processUpdate za izradu tablice koja će se prikazati.

1. zahtjev funkcije Update()
2. {
3. // Vraćanje sadržaja tablice
4. myDynamicTable.restore();
   5
5. // Ova tablica dva JSON podataka.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Obradi primljene JSON podatke

• Funkcija processUpdate() koristi se za raspored dinamičke tablice nakon primitka JSON podataka.
• addRows() se koristi za dodavanje redaka u tablicu. myDynamicTable.update() raspored the
  HTML tablica prema podacima u redovima tablice.

1. funkcija processUpdate(recv_json, ime)
2. {
3. // Ignorirajte proces ako nema primljenih podataka
4. if (!recv_json) {
5. upozorenje(“Dohvaćanje dinamičkih podataka nije uspjelo.”);
6. povratak;
7. }
8. // Spremite primljene JSON podatke
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Dodaj retke tablice
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Ažuriraj ovu dinamičku tablicu
15. myDynamicTable.update();
17. // Osvježi mjerač vremena
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. }

Dodajte retke tablice

• U funkciji addRows() koristimo JSON format za ispunjavanje svakog globalno konfiguriranog parametra u retku tablice.
• Sva HTML polja navedena su u JSON polju ("table_rows"), a sintaksa polja tablice je ispod.

Sintaksa:
redovi_tablice:[ , , … ] : { , , … }
: {“tip”: , "parametri":[ , , …, ]}

• U ovom slučaju, svaki red ima pet polja: “Session ID”, “Mode”, “Type”, “VLAN ID” i “Reflector Port” Na primjerample,

ID sesije (Polje imena: int32_t)	1 (ID zrcalne sesije)
Način rada (Polje naziva: vtss_bool_t)	pravi (Što znači da je zrcalna sesija omogućena)
Tip (Polje naziva: nabrajanje {ogledalo, rMirrorSource, rMirrorDestination}	RMirror Izvor (ovo je izvor udaljene zrcalne sesije
VLAN ID (Polje imena: uint16_t)	200 (vlan koji se koristi za zrcaljenje)
Priključak za reflektor (Polje naziva: vtss_ifindex_t)	Gi 1/1 (Priključak na koji se šalje zrcalni promet

• myDynamicTable.addRows() će pretvoriti JSON podatke u HTML format i ispisati HTML tablicu.

1. funkcija addRow(ključ, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Ništa”, none_interface_text = “NIJEDNO”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {fields:[
6. {type:”link”, parametri:[“cr”, “mirror.htm?session_id=” + ključ, ključ]},
7. {type:”text”, parametri:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, parametri:[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. povratni red;
13. }
14. funkcija addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Dodaj zaglavlje tablice
19. addHeader(table_rows);
20. // Dodavanje jednog reda
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. povratak table_redovi;
25. }

Web stranica za pomoć
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. nprampovdje je preuzeto iz konfiguracije releja dhcp6.

Hiperlink u izvoru file
Dodijelite pomoć file mjesto u svom izvorištu file HTML tag. Naziv fiksne varijable "help_page" koristi se za web dodjela stranice pomoći.

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

Ažurirajte HTML opis polja iz JSON specifikacije

• Koristiti ili HTML tag za deklariranje opisa HTML tablice i davanje jedinstvenog ID-a za tag.
• Kada je HTML dokument spreman, pozovite loadXMLDoc() da biste dobili cijelu JSON specifikaciju ili dobili specifični opis metode prema JSON nazivu metode “jsonRpc.status.introspection.specific.inventory.get”.
• ProcessTableDesc() se koristi za ažuriranje opisa tablice, a processUpdate() se koristi za ažuriranje opisa parametara tablice.
• U procesuUpdate(), pozovite updateTableParamsDesc() za ažuriranje JSON elemenata koji se podudaraju s određenim nazivima elemenata.
• Ažurirajte ili tag unutarnji HTML prema opisu elementa.

2. /* Ažuriranje polja opisa HTML-a */
3. funkcija processTableDesc(req) {
4. if (!req.responseText) {
5. povratak;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Ažuriraj opis tablice
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Ažuriraj opis parametra HTML tablice */
12. funkcija processUpdate(recv_json) {
13. // Ažuriraj opis parametra tablice
14. var param_names = [
15. {
16. “alias”: “Sučelje”,
17. “vrsta”: “vtss_ifindex_t”,
18. “ime”: “vlanInterface”,
19. “sufiks”: “.”
20. },
21. {
22. “alias”: “Relejno sučelje”,
23. “vrsta”: “vtss_ifindex_t”,
24. “name”: “relayVlanInterface”,
25. “sufiks”: “. ID sučelja koje se koristi za prijenos."
26. },
27. {
28. “alias”: “Odredište releja”,
29. “tip”: “mesa_ipv6_t”,
30. “name”: “relay_destination”,
31. “sufiks”: “. IPv6 adresa DHCPv6 poslužitelja na koji se zahtjevi prosljeđuju. Zadana vrijednost 'ff05::1:3' je 'bilo koji DHCP poslužitelj'.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Dobivanje JSON specifikacije */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hiperveza na traci izbornika

• Izvorni HTML kod trake izbornika generiran je 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(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

BILJEŠKA
Primijetite da je broj razmaka u stavci ITEM(“”), koji se koristi za određivanje razine grupe u traci izbornika. U ovom slučaju sve web stranice su pod grupom “DHCPv6”.

Slika 6. Primample globalno konfigurirane tablice

Dodatak

Tipično web stranice

Postoji nekoliko tipičnih web stranice se mogu koristiti za referentni dizajn. Još jedan bivšiampOvdje ćemo prikazati konfiguraciju jedne zrcalne sesije koja se nalazi u vtss_appl\mirror\html\mirror.htm.
The web pruža detaljnu konfiguraciju za jednu sesiju ogledala. Navedeni su svi konfigurirani parametri.

• Pritisnite gumb "Spremi" za primjenu trenutne konfiguracije.
• Pritisnite gumb "Reset" za resetiranje trenutne konfiguracije.
• Pritisnite “Odustani” za povratak na krajview zrcalnih sesija

Mirror&RMirror konfiguracija

Globalne postavke

Konfiguracija izvornog VLAN-a

Konfiguracija priključka

Slika 7. Exampdetaljne konfiguracije zrcalne sesije
Gumbi “Spremi”, “Poništi” i “Odustani” dodani su html kodom:

Tijek JSON naredbi
Ova stranica zahtijeva tijek naredbi u dva koraka:

• Prvo treba dobiti mogućnosti uređaja metodom “mirror.capabilities.get”. Mogućnosti se ne mijenjaju i moraju se pročitati samo jednom.
• Zatim treba dobiti 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" pokreće događaj "domready", a rezultat je konfiguriran da njime upravlja funkcija requestUpdate.
ZahtevUpdate će pokrenuti poziv "mirror.config.session.get",
“port.status.get” i u slučaju slaganja “topo.config.stacking.get” i rezultati ovih poziva konfigurirani su da njima rukuje funkcija pripremeUpdate.
Funkcija pripremeUpdate prikupit će sve rezultate i tek kada su svi primljeni, pozvati će funkciju processUpdate koja će konstruirati tablice 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 za programere [pdf] Korisnički priručnik AN1256, AN1256 Web Aplikacija za programere, Web Aplikacija za programere, aplikacija

Reference

• korisnički priručnik