Microsemi AN1256 Web Ohjelmoijasovellus

Johdanto

JSON (JavaScript Object Notation) on avoin standardi file muoto, joka käyttää ihmisten luettavaa tekstiä tietojen vaihtamiseen. Se on yleinen tietomuoto, jota käytetään asynkroniseen selain/palvelinviestintään.
Uuden puolesta web sivusuunnittelu, JSON-muoto voi korvata alkuperäisen AJAX-tyylin. Vertaa AJAX:iin, käyttämällä JSONia Web toteuttaminen on helpompaa ja yksinkertaisempaa. Kehittäjän tarvitsee vain keskittyä web sivun suunnittelu ja Web Käsittelijän toteutus voidaan jättää pois, koska JSON-käyttötapa on jo tuettu jokaisessa WebStaX ohjelmistomoduulit.
Tämä asiakirja sisältää ohjelmoijaoppaan ohjelmistosuunnittelijoille, joiden on kehitettävä Web sivu JSONin kautta. Yksityiskohtaiset menettelyt ja esimampne sisältyvät myös seuraaviin osioihin.

JSON-tietojen käyttökulku

Yliview
Tässä on JSON-tietojen käyttökulku, jonka HTTP-yhteys käynnistetään asiakkaalta (selaimelta). HTML-taulukko luodaan dynaamisesti palvelimen (DUT) puolelta vastaanotettujen JOSN-tietojen mukaan.

Kuva 1. Pääsykulku asiakkaan ja palvelimen välillä

Pyydä/vastaa JSON-tietoja
JSON-pyyntöpaketti perustuu HTTP-pyyntöpostitusmenetelmään ja sisällön on noudatettava MSCC JSON -muotoa.

• Pyydä JSON-syntaksia:{"menetelmä":" ","params":[ ], "id:"jsonrpc"}
• Vastauksen JSON-syntaksi: {"virhe": ,"tulos": , "id:"jsonrpc"}

Seuraavat tilannekuvat näyttävät JSON-sisällön selaimen ja DUT:n välillä.

Kuva 2. Tilannekuva asiakkaan HTTP-pyynnöstä

Kuva 3. Tilannekuva palvelimen HTTP-vastauksesta

MSCC JSON -spesifikaatio
Saat täydelliset JSON-tiedot, mukaan lukien menetelmän, parametrin, kuvauksen jne. Kirjoita "http:// /json_spec" selaimen osoiteriville. On olemassa toinen pääsytapa JSON-menetelmän nimellä "jsonRpc.status.introspection.specific.inventory.get", jota käytetään tietylle menetelmälle.

Kuva 4. Tilannekuva JSON-määrityksestä web sivu

Web puitteet

The Web puitteet sisään WebStaX-ohjelmisto perustuu avoimen lähdekoodin MooToolsiin. Se on kokoelma JavaScript-apuohjelmia MIT-lisenssillä. (http://mootools.net/license.txt) Valikkopalkki ja useimmat web sivut perustuvat puitteisiin. Sekä AJAX- että JSON-algoritmi on jo integroitu sen apuohjelmiin.
Lisäksi, WebStaX-ohjelmisto tarjoaa muita apuohjelmia, jotka ovat hyödyllisiä JSON:lle web sivun suunnittelu.

• json.js – Käytä dynaamisen tiedon lähettämiseen/vastaanottamiseen JSON-syntaksilla.
• dynforms.js – Käytä HTML-taulukon luomiseen dynaamisesti.
• validate.js – Käytä HTML-lomakkeen validointiin.

Täydelliset JavaScript-kirjastot sijaitsevat lähdepuuhakemiston alla: webstax2\ vtss_appl\web\html\lib.

JSON-ohje Web sivun suunnittelu

Tämä osio opastaa suunnittelemaan a web sivu perustuu MSCC JavaScript -kirjastoihin. Käytämme Mirror Global -konfiguraatiota web sivu entisenäample täällä. Asynkroninen viestintä perustuu HTTP JSON -käyttötapaan, ja kaikki globaalit konfiguroidut parametrit on lueteltu yhdessä dynaamisessa HTML-taulukossa.
The web sivun asettelu on lueteltu alla ja koko lähdekoodi sijaitsee lähdepuuhakemiston alla: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Saadaksesi tyypillisempää web sivuviitteet, katso liiteosa.

Mirror & RMirror Confiquration Taulukko

Kuva 5. Exampglobaalin konfiguroidun taulukon le

Muokata Web sivu

HTML-otsikko
Sisällytä tarvittavat JS-kirjastot HTML-koodiin tag.

Alusta dynaaminen taulukkoresurssi

• Kun HTML-dokumentti on valmis, kutsu DynamicTable() alustaaksesi dynaamisen taulukkoresurssin.
• DynamicTable()-funktiota käytetään dynaamisen taulukon luomiseen JSON-tietojen vastaanottamisen jälkeen.
• Sitten se kutsuu requestUpdatea käynnistääkseen JSON-komentovirran.

1. window.addEvent('domready', function() {
2. // Luo lomake taulukon rungolla JSON-tietojen vastaanottamista/lähetystä varten
3. myDynamicTable = uusi DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Pyydä/vastaa JSON-tietoja

• Kun HTML-dokumentti on valmis, käytä requestJsonDoc()-komentoa lähettääksesi JSON-pyynnön “mirror.config.session.get” saadaksesi tietoja määritetyistä istunnoista.
• Kun "mirror.capabilities.get" JSON-tiedot on vastaanotettu, takaisinsoittofunktio requestUpdate() käsitellään. Funktio requestUpdate kutsuu sitten "mirror.config.session.get" saadakseen nykyisen kokoonpanon. Kun nykyinen konfiguraatio vastaanotetaan, toiminto processUpdate kutsutaan muodostamaan näytettävä taulukko.

1. funktio requestUpdate()
2. {
3. // Palauta taulukon sisältö
4. myDynamicTable.restore();
   5
5. // Tämä taulukko kaksi JSON-dataa.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Käsittele vastaanotetut JSON-tiedot

• Funktiota processUpdate() käytetään dynaamisen taulukon asettamiseen JSON-tietojen vastaanottamisen jälkeen.
• AddRows()-komentoa käytetään taulukon rivien lisäämiseen. myDynamicTable.update() -asettelu
  HTML-taulukko taulukon rivien tietojen mukaan.

1. toiminto processUpdate(recv_json, nimi)
2. {
3. // Ohita prosessi, jos tietoja ei vastaanoteta
4. if (!recv_json) {
5. alert("Dynaamisten tietojen saanti epäonnistui.");
6. palata;
7. }
8. // Tallenna vastaanotetut JSON-tiedot
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Lisää taulukon rivejä
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(taulukko_rivit);
14. // Päivitä tämä dynaaminen taulukko
15. myDynamicTable.update();
17. // Päivitä ajastin
18. var autorefresh = document.getElementById("autorefresh");
19. if (autorefresh && autorefresh.checked) {
20. if (ajastintunnus) {
21. clearTimeout(ajastintunnus);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Lisää taulukon rivejä

• AddRows()-funktiossa käytämme JSON-muotoa taulukon rivin jokaisen globaalin määritetyn parametrin täyttämiseen.
• Kaikki HTML-kentät on lueteltu JSON-taulukossa ("table_rows"), ja taulukon kentän syntaksi on alla.

Syntaksi:
table_rows:[ , ,… ] : { , ,… }
: {"tyyppi": , "paramet":[ , ,…, ]}

• Tässä tapauksessa jokaisella rivillä on viisi kenttää: "Session ID", "Mode", "Type", "VLAN ID" ja "Reflector Port" esim.ample,

Istuntotunnus (Nimikenttä: int32_t)	1 (peiliistunnon tunnus)
tila (Nimikenttä: vtss_bool_t)	totta (Tarkoittaa, että peiliistunto on käytössä)
Tyyppi (Nimikenttä: luettelointi {peili, rMirrorSource, rMirrorDestination}	RMirror lähde (tämä on etäpeiliistunnon lähde
VLAN-tunnus (Nimikenttä: uint16_t)	200 (peilaukseen käytetty vlan)
Heijastinportti (Nimikenttä: vtss_ifindex_t)	Gi 1/1 (Portti, johon peilattu liikenne lähetetään

• myDynamicTable.addRows() muuntaa JSON-tiedot HTML-muotoon ja tulostaa HTML-taulukon.

1. funktio addRow(avain, arvo)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Ei mitään", none_interface_text = "EI MITÄÄN";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? " (" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
5. var row = {kentät:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + avain, avain]},
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 == "peili" ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : "-" , "c"]}
11. ]};
12. paluu rivi;
13. }
14. funktio addRows(recv_json)
15. {
16. var rivi, tyhjä_colspan = 7;
17. var table_rows = new Array();
18. // Lisää taulukon otsikko
19. addHeader(taulukon_rivit);
20. // Lisää yksi rivi
21. Object.each(recv_json, function(tietue) {
22. table_rows.push(addRow(tietue.avain, tietue.arvo));
23. });
24. palauttaa taulukon_rivit;
25. }

Web ohjesivu
varten web ohjesivun suunnittelu, ohjekuvaus voi viitata JSON-määritykseen, että kuvausteksti voi olla yhdenmukainen JSON-tulosteen kanssa ja auttaa vähentämään ylimääräisiä kuvauksia. Esimample tässä on otettu dhcp6-relekokoonpanosta.

Hyperlinkki lähteessä file
Määritä apu file sijainti sen lähteessä file HTML tag. Kiinteää muuttujan nimeä "help_page" käytetään web ohjesivun tehtävä.

2. // Ohjesivun taikuutta
3. var help_page = "/help/help_xxx.htm";

Päivitä HTML-kentän kuvaus JSON-määrityksestä

• Käyttää tai HTML tag ilmoittaa HTML-taulukon kuvauksen ja antaa sille yksilöllisen tunnuksen tag.
• Kun HTML-dokumentti on valmis, kutsu loadXMLDoc() saadaksesi koko JSON-spesifikaatiota tai hanki tietyn menetelmän kuvaus JSON-menetelmän nimellä "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc()-komentoa käytetään taulukon kuvauksen päivittämiseen ja processUpdate()-funktiota taulukon parametrien kuvauksen päivittämiseen.
• Soita processUpdate()-funktiossa updateTableParamsDesc() päivittääksesi JSON-elementit, jotka vastaavat tiettyjen elementtien nimiä.
• Päivitä tai tag sisäinen HTML elementin kuvauksen mukaan.

2. /* Päivitä HTML-kuvauskentät */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. palata;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Päivitä taulukon kuvaus
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan").description;
10. }
11. /* Päivitä HTML-taulukon parametrin kuvaus */
12. function processUpdate(recv_json) {
13. // Päivitä taulukon parametrien kuvaus
14. var param_names = [
15. {
16. "alias": "Liitäntä",
17. "tyyppi": "vtss_ifindex_t",
18. "nimi": "vlanInterface",
19. "pääte": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "tyyppi": "vtss_ifindex_t",
24. "nimi": "relayVlanInterface",
25. "pääte": ". Välityksessä käytetyn liitännän tunnus."
26. },
27. {
28. "alias": "Relay Destination",
29. "tyyppi": "mesa_ipv6_t",
30. "nimi": "relay_destination",
31. "pääte": ". Pyynnön lähettäneen DHCPv6-palvelimen IPv6-osoite välitetään. Oletusarvo "ff05::1:3" tarkoittaa "mikä tahansa DHCP-palvelin".
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Hanki JSON-määritys */
37. window.addEvent('domready', function () {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyperlinkki valikkorivillä

• Valikkorivin HTML-lähdekoodi on luotu file webstax2\vtss_appl\web\ menu_default.cxx.
• Muokkaa tämän kohteita file varten Web sivun hyperlinkki.

1. #jos määritetty (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(" Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

HUOM
Huomaa, että ITEM("") välilyönnin määrä, jota käytetään ryhmätason päättämiseen valikkorivillä. Tässä tapauksessa kaikki web sivut ovat DHCPv6-ryhmän alla.

Kuva 6. Esimampglobaalin konfiguroidun taulukon le

Liite

Tyypillinen web sivuja

Tyypillisiä on useita web sivuja voidaan käyttää referenssisuunnittelussa. Yksi ylimääräinen exampTässä näytetään yhden peiliistunnon kokoonpano, joka löytyy tiedostosta vtss_appl\mirror\html\mirror.htm.
The web sivulla on yksityiskohtaiset asetukset yhdelle peiliistunnolle. Kaikki konfiguroidut parametrit näkyvät luettelossa.

• Napsauta "Tallenna" -painiketta ottaaksesi nykyisen kokoonpanon käyttöön.
• Napsauta "Palauta" -painiketta nollataksesi nykyisen kokoonpanon.
• Napsauta "Peruuta" palataksesi loppuunview peiliistunnoista

Mirror & RMirror Configuration

Yleiset asetukset

Lähteen VLAN(ien) määritys

Portin konfigurointi

Kuva 7. Examppeilatun istunnon yksityiskohtaisen konfiguroinnin
Painikkeet "Tallenna", "Palauta" ja "Peruuta" on lisätty html-koodilla:

JSON-komentokulku
Tämä sivu vaatii kaksivaiheisen komentokulun:

• Ensin sen on hankittava laitteen ominaisuudet menetelmällä “mirror.capabilities.get”. Ominaisuudet eivät muutu, ja ne on luettava vain kerran.
• Sitten sen on saatava laitteen nykyinen kokoonpano käyttämällä menetelmiä "mirror.config.session.get", "port.status.get" ja pinoamisen tapauksessa "topo.config.stacking.get".

"Mirror.capabilities.get" -kutsun käynnistää "domready"-tapahtuma, ja tulos on määritetty käsittelemään toiminto requestUpdate.
requestUpdate käynnistää kutsun "mirror.config.session.get",
"port.status.get" ja pinoamisen tapauksessa "topo.config.stacking.get" ja näiden kutsujen tulokset on määritetty käsittelemään funktio preparatUpdate.
Funktio readyUpdate kerää kaikki tulokset, ja vasta kun kaikki on vastaanotettu, se kutsuu funktiota processUpdate, joka muodostaa taulukot näytettäväksi web.

Viitteet

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

Asiakirjat / Resurssit

Microsemi AN1256 Web Ohjelmoijasovellus [pdfKäyttöopas AN1256, AN1256 Web Ohjelmoijasovellus, Web Ohjelmoijasovellus, sovellus

Viitteet

• Käyttöopas