Microsemi AN1256 Web Aplicacion para programadores

Introdución

JSON (JavaScript Object Notation) é un estándar aberto file formato que utiliza texto lexible por humanos para o intercambio de datos. É un formato de datos común usado para a comunicación asíncrona entre navegador/servidor.
Para o novo web deseño da páxina, o formato JSON pode ser un substituto para o estilo AJAX orixinal. Compare con AJAX, usando JSON fai o Web implementación máis sinxela e sinxela. O desenvolvedor só ten que centrarse web deseño da páxina e o Web A implementación do controlador pódese omitir xa que o método de acceso JSON xa está soportado en cada un WebMódulos de software StaX.
Este documento indica a guía de programadores para o enxeñeiro de software que precisa desenvolver Web páxina a través de JSON. Os procedementos detallados e exampos tamén incluídos nas seguintes seccións.

Fluxo de acceso a datos JSON

Acabadoview
Aquí está o fluxo de acceso a datos JSON que se inicia unha conexión HTTP desde o cliente (navegador). A táboa HTML créase de forma dinámica segundo os datos JOSN recibidos do lado do servidor (DUT).

Figura 1. Fluxo de acceso entre o cliente e o servidor

Solicitude/resposta de datos JSON
O paquete de solicitude JSON baséase no método de publicación de solicitude HTTP e o contido debe seguir o formato JSON de MSCC.

• Solicitar sintaxe JSON:{“método”:” ","params":[ ], "id:"jsonrpc"}
• Sintaxe JSON de resposta: {“erro”: ,"resultado": , "id:"jsonrpc"}

As seguintes instantáneas mostran o contido JSON entre o navegador e DUT.

Figura 2. Instantánea da solicitude HTTP do cliente

Figura 3. Instantánea da resposta HTTP do servidor

Especificación MSCC JSON
Para obter a información JSON completa, incluíndo o método, o parámetro, a descrición, etc. Escriba "http:// /json_spec” na barra de enderezos do teu navegador. Hai outro método de acceso mediante o nome do método JSON "jsonRpc.status.introspection.specific.inventory.get", que se usa para un método específico.

Figura 4. Instantánea da especificación JSON web páxina

Web marco

O Web marco en WebO software StaX baséase nun MooTools de código aberto. É unha colección de utilidades JavaScript con licenza MIT. (http://mootools.net/license.txt) A barra de menús e a maioría web as páxinas baséanse no marco. Tanto o algoritmo AJAX como o JSON xa están integrados nas súas utilidades.
Ademais, WebO software StaX proporciona outras utilidades que son útiles para o JSON web deseño da páxina.

• json.js - Use for para transmitir/recibir datos dinámicos coa sintaxe JSON.
• dynforms.js - Use para crear a táboa HTML de forma dinámica.
• validate.js - Use para validar o formulario HTML.

As bibliotecas JavaScript completas están situadas baixo o directorio da árbore de orixe: webstax2\ vtss_appl\web\html\lib.

Directrices para JSON Web deseño da páxina

Esta sección guía como deseñar a web páxina baseada nas bibliotecas MSCC JavaScript. Usamos o espello global configurado web páxina como o example aquí. A comunicación asíncrona baséase no método de acceso HTTP JSON e todos os parámetros configurados globais están listados nunha táboa HTML dinámica.
O web O deseño da páxina móstrase a continuación e o código fonte completo está situado baixo o directorio da árbore de orixe: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Para ser máis típico web referencia das páxinas, consulte a sección do apéndice.

Táboa de configuración de espellos e RMirror

Figura 5. Example da táboa configurada global

Editar Web páxina

Cabeceira HTML
Incluír as bibliotecas JS necesarias no HTML tag.

Inicializa o recurso da táboa dinámica

• Cando o documento HTML estea listo, chame a DynamicTable() para inicializar o recurso da táboa dinámica.
• DynamicTable() úsase para crear a táboa dinámica despois de recibir os datos JSON.
• A continuación, chamará a requestUpdate para iniciar o fluxo de comandos JSON.

1. window.addEvent('domready', function() {
2. // Crea un formulario co corpo da táboa para recibir/transmitir datos JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Solicitude/resposta de datos JSON

• Cando o documento HTML estea listo, use requestJsonDoc() para enviar a solicitude JSON "mirror.config.session.get" para obter información sobre as sesións configuradas.
• Despois de recibir os datos JSON de "mirror.capabilities.get", procesarase a función de devolución de chamada requestUpdate(). A función requestUpdate chamará entón "mirror.config.session.get" para obter a configuración actual. Cando se recibe a configuración actual, chámase á función processUpdate para construír a táboa que se mostrará.

1. función requestUpdate()
2. {
3. // Restaurar o contido da táboa
4. myDynamicTable.restore();
   5
5. // Esta táboa dous datos JSON.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Procesa os datos JSON recibidos

• A función processUpdate() úsase para elaborar a táboa dinámica despois de recibir os datos JSON.
• O addRows() úsase para engadir filas da táboa. myDynamicTable.update() deseño
  Táboa HTML segundo os datos das filas da táboa.

1. función processUpdate (recv_json, nome)
2. {
3. // Ignora o proceso se non se reciben datos
4. se (!recv_json) {
5. alert("Fallou a obtención de datos dinámicos.");
6. volver;
7. }
8. // Garda os datos JSON recibidos
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Engadir filas da táboa
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(filas_táboa);
14. // Actualiza esta táboa dinámica
15. myDynamicTable.update();
17. // Actualizar o temporizador
18. var autorrefresh = document.getElementById(“autorefresh”);
19. if (actualización automática && actualización automática.comprobada) {
20. if (ID de temporizador) {
21. clearTimeout(ID de temporizador);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Engadir filas da táboa

• Na función addRows(), usamos o formato JSON para cubrir cada parámetro global configurado na fila da táboa.
• Todos os campos HTML están listados na matriz JSON ("table_rows") e a sintaxe do campo da táboa está a continuación.

Sintaxe:
filas_táboa:[ , ,… ] : { , ,… }
: {“tipo”: , "params":[ , ,…, ]}

• Neste caso, cada fila ten cinco campos: "ID de sesión", "Modo", "Tipo", "ID de VLAN" e "Porto reflector".ample,

ID de sesión (Campo de nome: int32_t)	1 (Identificación da sesión espello)
Modo (Campo de nome: vtss_bool_t)	verdade (O que significa que a sesión espello está activada)
Tipo (Campo de nome: enumeración {mirror, rMirrorSource, rMirrorDestination}	Fonte RMirror (esta é a fonte dunha sesión de espello remoto
ID de VLAN (Campo de nome: uint16_t)	200 (o vlan usado para a duplicación)
Porto reflector (Campo de nome: vtss_ifindex_t)	Gi 1/1 (O porto ao que se envía o tráfico reflectido

• myDynamicTable.addRows() converterá os datos JSON a formato HTML e mostrará a táboa HTML.

1. función addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Ningún", none_interface_text = "NINGUNO";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var fila = {campos:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id="+ key, key]},
7. {tipo:”texto”, parámetros:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {tipo:”texto”, parámetros:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {tipo:”texto”, parámetros:[val.Type == “espello” ? “-“:
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. fila de retorno;
13. }
14. función addRows (recv_json)
15. {
16. var fila, empty_colspan = 7;
17. var table_rows = new Array();
18. // Engadir cabeceira da táboa
19. addHeader(filas_táboa);
20. // Engadir unha fila
21. Object.each (recv_json, función (record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. devolver táboas_filas;
25. }

Web páxina de axuda
Para o web deseño da páxina de axuda, a descrición da axuda pode referirse á especificación JSON, que o texto da descrición pode ser compatible coa saída JSON e axuda a reducir as descricións redundantes. Example aquí está tomado da configuración de relé dhcp6.

Hiperligazón na fonte file
Asignar a axuda file localización na súa fonte file HTML tag. O nome da variable fixa "help_page" úsase para o web asignación da páxina de axuda.

2. // Páxina de axuda máxica
3. var help_page = "/help/help_xxx.htm";

Actualiza a descrición do campo HTML a partir da especificación JSON

• Use ou HTML tag para declarar a descrición da táboa HTML e darlle un ID único para o tag.
• Cando o documento HTML estea listo, chame a loadXMLDoc() para obter toda a especificación JSON ou obter a descrición específica do método polo nome do método JSON "jsonRpc.status.introspection.specific.inventory.get".
• O processTableDesc() úsase para actualizar a descrición da táboa e processUpdate() úsase para actualizar a descrición do parámetro da táboa.
• En processUpdate(), chame a updateTableParamsDesc() para actualizar os elementos JSON que coinciden cos nomes de elementos específicos.
• Actualiza o ou tag HTML interno segundo a descrición do elemento.

2. /* Actualizar os campos de descrición HTML */
3. función processTableDesc(req) {
4. se (!req.responseText) {
5. volver;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Actualiza a descrición da táboa
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Actualizar a descrición do parámetro da táboa HTML */
12. función processUpdate (recv_json) {
13. // Actualiza a descrición do parámetro da táboa
14. var param_names = [
15. {
16. “alias”: “Interface”,
17. “tipo”: “vtss_ifindex_t”,
18. “nome”: “vlanInterface”,
19. "sufixo": "."
20. },
21. {
22. “alias”: “Interface de relé”,
23. “tipo”: “vtss_ifindex_t”,
24. “name”: “relayVlanInterface”,
25. "sufixo": ". O ID da interface usada para a retransmisión."
26. },
27. {
28. “alias”: “Destino de retransmisión”,
29. “type”: “mesa_ipv6_t”,
30. “nome”: “destino_relé”,
31. "sufixo": ". O enderezo IPv6 do servidor DHCPv6 ao que se enviará a solicitude. O valor predeterminado "ff05::1:3" é "calquera servidor DHCP".
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Obter especificación JSON */
37. window.addEvent('domready', función () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hiperligazón na barra de menú

• O código fonte HTML da barra de menús é xerado desde file webstax2\vtss_appl\web\ menu_default.cxx.
• Edita os elementos neste file para o Web hiperligazón da páxina.

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

NOTA
Teña en conta que o número de caracteres de espazo en ITEM (""), que se usa para decidir o nivel de grupo na barra de menú. Neste caso, todos web as páxinas están no grupo "DHCPv6".

Figura 6. Example da táboa configurada global

Apéndice

Típico web páxinas

Hai varios típicos web pódense usar páxinas para o deseño de referencia. Un ex adicionalampO ficheiro que se mostrará aquí é a configuración dunha única sesión de réplica que se atopa en vtss_appl\mirror\html\mirror.htm.
O web proporciona a configuración detallada para unha única sesión de espello. Todos os parámetros configurados están listados.

• Fai clic no botón "Gardar" para aplicar a configuración actual.
• Fai clic no botón "Reiniciar" para restablecer a configuración actual.
• Fai clic en "Cancelar" para volver ao finalview de sesións espello

Mirror&RMerror Configuración

Configuración global

Configuración de VLAN(s) de orixe

Configuración de portos

Figura 7. Example de configuración detallada da sesión espello
Os botóns "Gardar", "Reiniciar" e "Cancelar" engádense co código html:

Fluxo de comandos JSON
Esta páxina require un fluxo de comandos en dous pasos:

• Primeiro ten que obter as capacidades do dispositivo co método "mirror.capabilities.get". As capacidades non cambian e só hai que ler unha vez.
• A continuación, necesita obter a configuración actual do dispositivo usando os métodos "mirror.config.session.get", "port.status.get" e en caso de apilar "topo.config.stacking.get".

A chamada de "mirror.capabilities.get" iníciase polo evento "domready" e o resultado está configurado para ser xestionado pola función requestUpdate.
A requestUpdate iniciará a chamada de "mirror.config.session.get",
“port.status.get” e en caso de apilado “topo.config.stacking.get” e os resultados destas chamadas están configurados para ser xestionados pola función prepareUpdate.
A función prepareUpdate recollerá todos os resultados e só cando se recibían todos chamará á función processUpdate que construirá as táboas que se mostrarán no web.

Referencias

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

Documentos/Recursos

Microsemi AN1256 Web Aplicacion para programadores [pdfGuía do usuario AN1256, AN1256 Web Aplicación para programadores, Web Aplicación de programadores, aplicación

Referencias

• Manual de usuario