Microsemi AN1256 Web Aplicació de programadors

Introducció

JSON (JavaScript Object Notation) és un estàndard obert file format que utilitza text llegible pels humans per a l'intercanvi de dades. És un format de dades comú utilitzat per a la comunicació asíncrona entre navegador/servidor.
Per al nou web disseny de la pàgina, el format JSON pot substituir l'estil AJAX original. Compareu amb AJAX, l'ús de JSON fa que Web implementació més fàcil i senzilla. El desenvolupador només ha de centrar-se web disseny de la pàgina i el Web La implementació del controlador es pot ometre, ja que el mètode d'accés JSON ja és compatible amb cadascun WebMòduls de programari StaX.
Aquest document indica la guia de programadors per a l'enginyer de programari que necessita desenvolupar el Web pàgina mitjançant JSON. Els procediments detallats i examptambé s'inclouen als apartats següents.

Flux d'accés a dades JSON

Acabatview
Aquí teniu el flux d'accés a les dades JSON que s'inicia una connexió HTTP des del client (navegador). La taula HTML es crea dinàmicament segons les dades JOSN rebudes del costat del servidor (DUT).

Figura 1. Flux d'accés entre client i servidor

Dades JSON de sol·licitud/resposta
El paquet de sol·licitud JSON es basa en el mètode de publicació de la sol·licitud HTTP i el contingut ha de seguir el format MSCC JSON.

• Sol·licita la sintaxi JSON:{“mètode”:” ","params":[ ], "id:"jsonrpc"}
• Sintaxi JSON de resposta: {“error”: ,"resultat": , "id:"jsonrpc"}

Les instantànies següents mostren el contingut JSON entre el navegador i el DUT.

Figura 2. Instantània de la sol·licitud HTTP del client

Figura 3. Instantània de la resposta HTTP del servidor

Especificació MSCC JSON
Per obtenir la informació JSON completa, inclòs el mètode, el paràmetre, la descripció, etc. Escriviu "http:// /json_spec” a la barra d'adreces del navegador. Hi ha un altre mètode d'accés mitjançant el nom del mètode JSON "jsonRpc.status.introspection.specific.inventory.get", que s'utilitza per a un mètode específic.

Figura 4. Instantània de l'especificació JSON web pàgina

Web marc

El Web marc en WebEl programari StaX es basa en un MooTools de codi obert. És una col·lecció d'utilitats JavaScript amb llicència MIT. (http://mootools.net/license.txt) La barra de menús i la majoria web pàgines es basen en el marc. Tant l'algorisme AJAX com el JSON ja estan integrats a les seves utilitats.
A més, WebEl programari StaX proporciona les altres utilitats que són útils per al JSON web disseny de la pàgina.

• json.js - Utilitzeu for per transmetre/rebre les dades dinàmiques amb la sintaxi JSON.
• dynforms.js – Utilitzeu-lo per crear la taula HTML de forma dinàmica.
• validate.js - Utilitzeu-lo per a la validació del formulari HTML.

Les biblioteques de JavaScript completes es troben al directori de l'arbre d'origen: webstax2\vtss_appl\web\html\lib.

Directriu per a JSON Web disseny de la pàgina

Aquesta secció guia com dissenyar a web pàgina basada en biblioteques MSCC JavaScript. Utilitzem el mirall configurat globalment web pàgina com l'exampel aquí. La comunicació asíncrona es basa en el mètode d'accés HTTP JSON i tots els paràmetres globals configurats es mostren en una taula HTML dinàmica.
El web El disseny de la pàgina es mostra a continuació i el codi font complet es troba al directori de l'arbre de fonts: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Per ser més típic web pàgines de referència, vegeu la secció d'apèndix.

Taula de configuració de mirall i RMirror

Figura 5. Exampfitxer de taula configurada global

Edita Web pàgina

Capçalera HTML
Incloeu les biblioteques JS que necessiteu a l'HTML tag.

Inicialitzar el recurs de la taula dinàmica

• Quan el document HTML estigui llest, crideu a DynamicTable() per inicialitzar el recurs de la taula dinàmica.
• La DynamicTable() s'utilitza per crear la taula dinàmica després de rebre les dades JSON.
• A continuació, trucarà a requestUpdate per iniciar el flux d'ordres JSON.

1. window.addEvent('domready', function() {
2. // Creeu un formulari amb el cos de la taula per rebre/transmetre dades JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Dades JSON de sol·licitud/resposta

• Quan el document HTML estigui llest, utilitzeu requestJsonDoc() per enviar la sol·licitud JSON "mirror.config.session.get" per obtenir informació sobre les sessions configurades.
• Després de rebre les dades JSON de "mirror.capabilities.get", es processarà la funció de devolució de trucada requestUpdate(). Aleshores, la funció requestUpdate cridarà "mirror.config.session.get" per obtenir la configuració actual. Quan es rep la configuració actual, es crida a la funció processUpdate per crear la taula que es mostrarà.

1. funció requestUpdate()
2. {
3. // Restaura el contingut de la taula
4. myDynamicTable.restore();
   5
5. // Aquesta taula dues dades JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Processa les dades JSON rebudes

• La funció processUpdate() s'utilitza per dissenyar la taula dinàmica després de rebre les dades JSON.
• AddRows() s'utilitza per afegir files de taula. myDynamicTable.update() disseny el
  Taula HTML segons les dades de les files de la taula.

1. funció processUpdate (recv_json, nom)
2. {
3. // Ignora el procés si no es reben dades
4. si (!recv_json) {
5. alert("Ha fallat l'obtenció de dades dinàmiques.");
6. tornar;
7. }
8. // Desa les dades JSON rebudes
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Afegeix files a la taula
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(files_taula);
14. // Actualitza aquesta taula dinàmica
15. myDynamicTable.update();
17. // Actualitza el temporitzador
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (actualització automàtica i& autorefresh.checked) {
20. if (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Afegiu files de taula

• A la funció addRows(), utilitzem el format JSON per omplir cada paràmetre global configurat a la fila de la taula.
• Tots els camps HTML es mostren a la matriu JSON ("table_rows") i la sintaxi del camp de la taula es mostra a continuació.

Sintaxi:
files_taula:[ , ,… ] : { , ,… }
: {“tipus”: , "params":[ , , …, ]}

• En aquest cas, cada fila té cinc camps: "Session ID", "Mode", "Type", "VLAN ID" i "Reflector Port".ampel,

Identificador de sessió (camp de nom: int32_t)	1 (Identificador de la sessió mirall)
Mode (Camp de nom: vtss_bool_t)	veritat (Vol dir que la sessió mirall està habilitada)
Tipus (Camp de nom: enumeració {mirall, rMirrorSource, rMirrorDestination}	Font de RMirror (aquesta és l'origen d'una sessió de mirall remota
ID de VLAN (Camp de nom: uint16_t)	200 (el vlan utilitzat per a la duplicació)
Port reflector (Camp de nom: vtss_ifindex_t)	Gi 1/1 (El port al qual s'envia el trànsit reflectit

• myDynamicTable.addRows() convertirà les dades JSON a format HTML i sortirà la taula HTML.

1. funció addRow (clau, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Cap”, none_interface_text = “NONE”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ”(” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)”: “”;
5. var fila = {camps:[
6. {tipus:”enllaç”, paràmetres:[“cr”, “mirror.htm?session_id=" + clau, clau]},
7. {tipus:”text”, paràmetres:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {tipus:”text”, paràmetres:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “mirall” ? “-“:
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. fila de retorn;
13. }
14. funció addRows (recv_json)
15. {
16. var fila, empty_colspan = 7;
17. var table_rows = new Array();
18. // Afegeix la capçalera de la taula
19. addHeader(files_taula);
20. // Afegeix una sola fila
21. Object.each (recv_json, funció (registre) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. retornar table_files;
25. }

Web pàgina d'ajuda
Per al web disseny de la pàgina d'ajuda, la descripció d'ajuda pot fer referència a l'especificació JSON, que el text de la descripció pot ser coherent amb la sortida JSON i ajuda a reduir les descripcions redundants. Exampaquí s'ha extret de la configuració del relé dhcp6.

Hiperenllaç a la font file
Assigna l'ajuda file ubicació a la seva font file HTML tag. El nom de variable fixa "help_page" s'utilitza per a web assignació de la pàgina d'ajuda.

2. // Màgia de la pàgina d'ajuda
3. var help_page = "/help/help_xxx.htm";

Actualitza la descripció del camp HTML des de l'especificació JSON

• Ús o HTML tag per declarar la descripció de la taula HTML i donar un identificador únic per al tag.
• Quan el document HTML estigui llest, truqueu a loadXMLDoc() per obtenir tota l'especificació JSON o obtenir la descripció específica del mètode pel nom del mètode JSON "jsonRpc.status.introspection.specific.inventory.get".
• El processTableDesc() s'utilitza per actualitzar la descripció de la taula i processUpdate() s'utilitza per actualitzar la descripció del paràmetre de la taula.
• A processUpdate(), truqueu a updateTableParamsDesc() per actualitzar els elements JSON que coincideixen amb els noms dels elements específics.
• Actualitza el o tag HTML intern segons la descripció de l'element.

2. /* Actualitza els camps de descripció HTML */
3. funció processTableDesc(req) {
4. si (!req.responseText) {
5. tornar;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Actualitza la descripció de la taula
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Actualitza la descripció del paràmetre de la taula HTML */
12. funció processUpdate(recv_json) {
13. // Actualitza la descripció del paràmetre de la taula
14. var param_names = [
15. {
16. “alias”: “Interfície”,
17. "tipus": "vtss_ifindex_t",
18. "nom": "vlanInterface",
19. "sufix": "."
20. },
21. {
22. “alias”: “Interfície de relé”,
23. "tipus": "vtss_ifindex_t",
24. “name”: “relayVlanInterface”,
25. “sufix”: “. L'identificador de la interfície utilitzada per a la retransmissió.
26. },
27. {
28. “alias”: “Destinació de retransmissió”,
29. "tipus": "mesa_ipv6_t",
30. “name”: “relay_destination”,
31. “sufix”: “. L'adreça IPv6 del servidor DHCPv6 al qual s'ha de retransmetre les sol·licituds. El valor predeterminat "ff05::1:3" és "qualsevol servidor DHCP".
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Obteniu l'especificació JSON */
37. window.addEvent('domready', funció () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hiperenllaç a la barra de menús

• El codi font HTML de la barra de menús es genera des file webstax2\vtss_appl\web\ menu_default.cxx.
• Editeu els elements d'aquest file per al Web hiperenllaç de la pàgina.

1. #if definit(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Relé,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Tingueu en compte que el nombre de caràcters d'espai a ITEM (""), que s'utilitza per decidir el nivell de grup a la barra de menús. En aquest cas, tots web les pàgines es troben al grup "DHCPv6".

Figura 6. Exampfitxer de taula configurada global

Apèndix

Típic web pàgines

N'hi ha diversos típics web pàgines es poden utilitzar per al disseny de referència. Un ex mésampEl fitxer que es mostra aquí és la configuració d'una única sessió de rèplica que es troba a vtss_appl\mirror\html\mirror.htm.
El web La pàgina proporciona la configuració detallada per a una única sessió mirall. S'enumeren tots els paràmetres configurats.

• Feu clic al botó "Desa" per aplicar la configuració actual.
• Feu clic al botó "Restablir" per restablir la configuració actual.
• Feu clic a "Cancel·la" per tornar al finalview de sessions mirall

Configuració del mirall i del mirall

Configuració global

Configuració de VLAN d'origen

Configuració del port

Figura 7. Exampfitxer de configuració detallada de la sessió mirall
Els botons "Desa", "Restableix" i "Cancel·la" s'afegeixen al codi html:

Flux d'ordres JSON
Aquesta pàgina requereix un flux d'ordres de dos passos:

• Primer cal obtenir les capacitats del dispositiu amb el mètode "mirror.capabilities.get". Les capacitats no canvien i només s'han de llegir una vegada.
• Aleshores ha d'obtenir la configuració actual del dispositiu mitjançant els mètodes "mirror.config.session.get", "port.status.get" i en cas d'apilament "topo.config.stacking.get".

La crida de "mirror.capabilities.get" s'inicia per l'esdeveniment "domready" i el resultat es configura per ser gestionat per la funció requestUpdate.
La peticióUpdate iniciarà la crida de "mirror.config.session.get",
"port.status.get" i en cas d'apilament "topo.config.stacking.get" i els resultats d'aquestes trucades estan configurats per ser gestionats per la funció prepareUpdate.
La funció prepareUpdate recopilarà tots els resultats, i només quan s'hagin rebut tots, trucarà a la funció processUpdate que construirà les taules que es mostraran al web.

Referències

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

Documents/Recursos

Microsemi AN1256 Web Aplicació de programadors [pdfGuia de l'usuari AN1256, AN1256 Web Aplicació de programadors, Web Aplicació de programadors, aplicació

Referències

• Manual d'usuari