Microsemi AN1256 Web L'applicazione di i programatori

Introduzione

JSON (JavaScript Object Notation) hè un standard apertu file formatu chì usa testu leggibile da l'omu per u scambiu di dati. Hè un formatu di dati cumuni utilizatu per a cumunicazione asincrona di navigatore / servitore.
Per u novu web u disignu di a pagina, u formatu JSON pò esse un sustitutu per u stilu AJAX originale. Comparare à AJAX, usendu JSON face u Web implementazione più faciule è simplice. U sviluppatore solu bisognu di fucalizza web disignu di pagina è u Web L'implementazione di u gestore pò esse omessa postu chì u metudu di accessu JSON hè digià supportatu in ognunu WebModuli di software StaX.
Stu documentu dichjara a guida di i programatori per l'ingegnere di software chì hà bisognu di sviluppà Web pagina via JSON. I prucedure di dettagliu è exampi inclusi ancu in e sezioni seguenti.

Flussu di accessu à i dati JSON

Overview
Eccu u flussu di accessu à e dati JSON chì una cunnessione HTTP hè iniziata da u cliente (browser). A tavula HTML hè creata dinamicamente secondu i dati JOSN ricevuti da u latu di u servitore (DUT).

Figura 1. U flussu di accessu trà u cliente è u servitore

Richiesta / Risposta dati JSON
U pacchettu di dumanda JSON hè basatu annantu à u metudu di post richiesta HTTP è u cuntenutu deve seguità u formatu MSCC JSON.

• Richiede a sintassi JSON:{"metudu":" ","params":[ ], "id:"jsonrpc"}
• Risposta sintassi JSON: {"errore": ,"risultato": , "id:"jsonrpc"}

I seguenti snapshots mostranu u cuntenutu JSON trà u navigatore è DUT.

Figura 2. Snapshot di a dumanda HTTP da u cliente

Figura 3. Snapshot di a risposta HTTP da u servitore

Specifica MSCC JSON
Per uttene l'infurmazioni JSON cumpletu cumpresi u metudu, i paràmetri, a descrizzione è ecc. Type "http:// /json_spec" in a barra di indirizzu di u vostru navigatore. Ci hè un altru metudu d'accessu via u nome di u metu JSON "jsonRpc.status.introspection.specific.inventory.get", hè utilizatu per un metudu specificu.

Figura 4. Snapshot di a specificazione JSON web pagina

Web quadru

U Web quadru in WebU software StaX hè basatu annantu à un MooTools open source. Hè una cullizzioni di utilità JavaScript cù licenza MIT. (http://mootools.net/license.txt) A barra di menu è a maiò parte di web e pagine sò basate nantu à u quadru. L'algoritmu AJAX è JSON sò digià integrati in i so utilità.
In più, WebU software StaX furnisce l'altri utilità chì sò utili per u JSON web disignu di pagina.

• json.js - Aduprà per trasmette / riceve dati dinamichi cù sintassi JSON.
• dynforms.js - Aduprà per creà a tabella HTML dinamicamente.
• validate.js - Aduprà per a validazione di a forma HTML.

E biblioteche JavaScript cumplete sò situate sottu u cartulare di l'arburu di l'arburu: webstax2\ vtss_appl\web\html\lib.

Linea guida per JSON Web disignu di pagina

Questa sezione guida cumu cuncepisce a web pagina basata nantu à e librerie MSCC JavaScript. Avemu aduprà u Mirror globale cunfiguratu web pagina cum'è l'examplu quì. A cumunicazione asincrona hè basata nantu à u metudu d'accessu HTTP JSON è tutti i paràmetri cunfigurati globale sò listati in una tabella HTML dinamica.
U web A disposizione di a pagina hè listata quì sottu è u codice fonte sanu si trova sottu à l'arburu di l'arburu di a fonte: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Per ottene più tipica web pagine di riferenza, vede a sezione di l'appendice.

Mirror & RMirror Confiquration Table

Figura 5. Example di a tabella cunfigurata globale

Edit Web pagina

Intestazione HTML
Includite e librerie JS chì avianu bisognu in HTML tag.

Inizializza a risorsa di a tabella dinamica

• Quandu u documentu HTML hè prontu, chjamate DynamicTable () per inizializà a risorsa di a tabella dinamica.
• U DynamicTable () hè utilizatu per creà a tabella dinamica dopu avè ricevutu i dati JSON.
• Allora chjamarà requestUpdate per inizià u flussu di cumanda JSON.

1. window.addEvent('domready', funzione () {
2. // Crea una forma cù u corpu di a tabella per riceve / trasmette dati JSON
3. myDynamicTable = new DynamicTable ("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Richiesta / Risposta dati JSON

• Quandu u documentu HTML hè prontu, utilizate requestJsonDoc () per mandà a dumanda JSON "mirror.config.session.get" per uttene infurmazioni nantu à e sessioni cunfigurate.
• Dopu chì i dati JSON per "mirror.capabilities.get" sò ricevuti, a funzione callback requestUpdate () serà processata. A funzione requestUpdate chjamarà "mirror.config.session.get" per uttene a cunfigurazione attuale. Quandu a cunfigurazione attuale hè ricivuta, a funzione processUpdate hè chjamata per custruisce a tabella per esse mostrata.

1. funzione dumanda Update ()
2. {
3. // Ripristina u cuntenutu di a tavola
4. myDynamicTable.restore();
   5
5. // Questa tabella duie dati JSON.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Prucessa i dati JSON ricevuti

• A funzione processUpdate () hè aduprata per layout a tavola dinamica dopu avè ricevutu i dati JSON.
• AddRows() hè utilizatu per aghjunghje file di tavule. myDynamicTable.update() layout u
  Tabella HTML secondu e dati in fila di tabella.

1. funzione processUpdate (recv_json, nome)
2. {
3. // Ignore u prucessu s'ellu ùn hè micca ricevutu dati
4. if (!recv_json) {
5. alert ("Ottene dati dinamichi falluti.");
6. ritornu;
7. }
8. // Salvà i dati JSON ricevuti
9. myDynamicTable.saveRecvJson ("config", recv_json);
10. // Aghjunghjite e file di a tavola
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Aghjurnate sta tabella dinamica
15. myDynamicTable.update();
17. // Refresh timer
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. }

Aghjunghjite e file di tavulinu

• In a funzione addRows (), usemu u formatu JSON per riempie ogni paràmetru cunfiguratu globale in a fila di a tabella.
• Tutti i campi HTML sò listati in l'array JSON ("table_rows") è a sintassi di u campu di a tabella hè sottu.

sintassi:
table_rows:[ , ,… ] : { , ,… }
: {"tipu": , "params":[ , ,…, ]}

• In questu casu, ogni fila hà cinque campi: "Session ID", "Mode", "Type", "VLAN ID" è "Reflector Port".ample,

ID di sessione (Campu di nome: int32_t)	1 (Id di a sessione di specchiu)
Modu (Campu di nome: vtss_bool_t)	veru (Significatu chì a sessione specchiu hè attivata)
Tipu (Campu di nome: enumerazione {mirror, rMirrorSource, rMirrorDestination}	RMiror Source (questu hè a fonte di una sessione di specchiu remota
ID VLAN (Campu di nome: uint16_t)	200 (u vlan utilizatu per mirroring)
Portu riflettore (Campu di nome: vtss_ifindex_t)	Gi 1/1 (U portu à quale u trafficu specchiu hè mandatu

• U myDynamicTable.addRows() cunverterà i dati JSON à u formatu HTML è pruducerà a tabella HTML.

1. funzione addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "None", none_interface_text = "NONE";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? "(" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
5. var fila = {campi:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + chjave, chjave]},
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 == "specchiu" ? "-":
   val.RMirrorVlan, "c"]},
10. {type:"text", params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort: "-", "c"]}
11. ]};
12. fila di ritornu;
13. }
14. funzione addRows (recv_json)
15. {
16. var fila, empty_colspan = 7;
17. var table_rows = new Array ();
18. // Aghjunghjite l'intestazione di a tavola
19. addHeader(table_rows);
20. // Aghjunghjite una sola fila
21. Object.each (recv_json, funzione (record) {
22. table_rows.push (addRow (record.key, record.val));
23. });
24. torna table_rows;
25. }

Web pagina d'aiutu
Per u web u disignu di a pagina d'aiutu, a descrizzione di l'aiutu pò riferite à l'specificazioni JSON, chì u testu di descrizzione pò esse coherente cù l'output JSON è aiuta à riduce e descrizioni redundante. Esample quì hè pigliatu da a cunfigurazione di relé dhcp6.

Hyper-link in a fonte file
Assignà l'aiutu file locu in a so surgente file HTML tag. U nome di variabile fissa "help_page" hè utilizatu per u web assignazione di a pagina di aiutu.

2. // Aiuta a pagina magica
3. var help_page = "/help/help_xxx.htm";

Aghjurnate a descrizzione di u campu HTML da a specificazione JSON

• Aduprà o HTML tag per dichjarà a descrizzione di a tabella HTML è datu un ID unicu per u tag.
• Quandu u documentu HTML hè prontu, chjamate loadXMLDoc () per uttene l'intera specificazione JSON o uttene a descrizzione specifica di u metudu per nome di u metu JSON "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc () hè utilizatu per aghjurnà a descrizzione di a tavula è processUpdate () hè utilizatu per aghjurnà a descrizzione di i paràmetri di a tavola.
• In processUpdate(), chjamate updateTableParamsDesc() per aghjurnà l'elementi JSON chì sò currispondenu à i nomi di elementi specifichi.
• Aghjurnà u o tag HTML internu secondu a descrizzione di l'elementu.

2. /* Aghjurnate i campi di descrizzione HTML */
3. funzione processTableDesc(req) {
4. if (!req.responseText) {
5. ritornu;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // Aghjurnate a descrizzione di a tavola
9. $("TableDesc").innerHTML = getJsonSpecElement (json_spec, "gruppi", "dhcp6_relay.config.vlan").description;
10. }
11. /* Aghjurnate a descrizzione di i paràmetri di a tabella HTML */
12. funzione processUpdate (recv_json) {
13. // Aghjurnate a descrizzione di i paràmetri di a tavola
14. var param_names = [
15. {
16. "alias": "Interfaccia",
17. "type": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "suffissu": "."
20. },
21. {
22. "alias": "Interfaccia di relè",
23. "type": "vtss_ifindex_t",
24. "name": "relayVlanInterface",
25. "suffissu": ". L'id di l'interfaccia utilizata per a trasmissione.
26. },
27. {
28. "alias": "Destinazione di relè",
29. "type": "mesa_ipv6_t",
30. "name": "relay_destination",
31. "suffissu": ". L'indirizzu IPv6 di u servitore DHCPv6 chì a dumanda deve esse trasmessa. U valore predeterminatu "ff05::1:3" hè "qualsiasi servitore DHCP".
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Get specificazione JSON */
37. window.addEvent('domready', funzione () {
38. loadXMLDoc ("/json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyper-link in a barra di menu

• U codice fonte HTML di a barra di menu hè generatu da file webstax2\vtss_appl\web\ menu_default.cxx.
• Edite l'articuli in questu file per u Web pagina hyper-link.

1. #se definitu (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Relè,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Avvisu chì u numeru di caratteru spaziu in ITEM (""), chì hè utilizatu per decide u livellu di u gruppu in a barra di menu. In stu casu, tutti web e pagine sò sottu à u gruppu "DHCPv6".

Figura 6. Esample di a tabella cunfigurata globale

Appendice

Tipica web pagine

Ci sò parechje tipiche web pagine ponu esse aduprate per u disignu di riferimentu. Un altru exampLe per esse mostra quì hè a cunfigurazione di una sola sessione di specchiu truvata in vtss_appl\mirror\html\mirror.htm.
U web pagina furnisce a cunfigurazione dettagliata per una sola sessione di specchiu. Tutti i paràmetri cunfigurati sò listati.

• Cliccate u buttone "Salvà" per applicà a cunfigurazione attuale.
• Cliccate u buttone "Reset" per resettate a cunfigurazione attuale.
• Cliccate "Annulla" per vultà à u sopraview di sessioni specchiu

Mirror & RMirror Configuration

Settings Global

Configurazione VLAN di origine

Cunfigurazione Portu

Figura 7. Example di cunfigurazione dettagliata di sessione mirror
I buttoni "Salvà", "Reset" è "Annullà" sò aghjuntu cù u codice html:

Flussu di cumandamentu JSON
Questa pagina richiede un flussu di cumandamentu in dui passi:

• Prima ci vole à ottene e capacità di u dispusitivu cù u metudu "mirror.capabilities.get". E capacità ùn cambianu micca è deve esse lettu solu una volta.
• Allora ci vole à ottene a cunfigurazione attuale di u dispusitivu cù i metudi "mirror.config.session.get", "port.status.get" è in casu di stacking "topo.config.stacking.get".

A chjama di "mirror.capabilities.get" hè iniziata da l'avvenimentu "domready" è u risultatu hè cunfiguratu per esse trattatu da a funzione requestUpdate.
A dumanda di l'Update inizierà a chjama di "mirror.config.session.get",
"port.status.get" è in casu di stacking "topo.config.stacking.get" è i risultati di sti chjamati sò cunfigurati per esse trattati da a funzione prepareUpdate.
A funzione prepareUpdate cuglierà tutti i risultati, è solu quandu tutti sò stati ricevuti chjamarà a funzione processUpdate chì custruirà e tabelle per vede nantu à u web.

Referenze

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

Documenti / Risorse

Microsemi AN1256 Web L'applicazione di i programatori [pdfGuida di l'utente AN1256, AN1256 Web L'applicazione di i programatori, Web Appiicazioni di prugrammaturi, Applicazioni

Referenze

• Manuale d'usu