Microsemi AN1256 Web Aplicación para programadores

Introducción

JSON (Notación de objetos de JavaScript) es un estándar abierto file formato que utiliza texto legible por humanos para el intercambio de datos. Es un formato de datos común utilizado para la comunicación asíncrona entre navegador y servidor.
Para lo nuevo web diseño de página, el formato JSON puede ser un reemplazo para el estilo AJAX original. Compare con AJAX, usar JSON hace que el Web implementación más fácil y sencilla. El desarrollador solo necesita concentrarse en web diseño de página y el Web la implementación del controlador se puede omitir ya que el método de acceso JSON ya es compatible con cada WebMódulos de software StaX.
Este documento establece la guía del programador para el ingeniero de software que necesita desarrollar el Web página a través de JSON. Los procedimientos de detalle y examples también incluidos en las siguientes secciones.

Flujo de acceso a datos JSON

Encimaview
Aquí está el flujo de acceso a datos JSON en el que se inicia una conexión HTTP desde el cliente (navegador). La tabla HTML se crea dinámicamente de acuerdo con los datos JOSN recibidos desde el lado del servidor (DUT).

Figura 1. El flujo de acceso entre cliente y servidor

Solicitud/respuesta de datos JSON
El paquete de solicitud JSON se basa en el método de publicación de solicitud HTTP y el contenido debe seguir el formato MSCC JSON.

• Solicitud de sintaxis JSON:{"método":" ","parámetros":[ ], “id:”jsonrpc”}
• Sintaxis JSON de respuesta: {"error": ,"resultado": , “id:”jsonrpc”}

Las siguientes instantáneas muestran el contenido JSON entre el navegador y el DUT.

Figura 2. Instantánea de la solicitud HTTP del cliente

Figura 3. Instantánea de la respuesta HTTP del servidor

Especificación MSCC JSON
Para obtener la información JSON completa, incluido el método, el parámetro, la descripción, etc., escriba "http:// /json_spec” en la barra de direcciones de su navegador. Hay otro método de acceso a través del nombre de método JSON "jsonRpc.status.introspection.specific.inventory.get", se utiliza para un método específico.

Figura 4. Instantánea de la especificación JSON web página

Web estructura

El Web marco en WebEl software StaX se basa en MooTools de código abierto. Es una colección de utilidades JavaScript con licencia MIT. (http://mootools.net/license.txt) La barra de menús y la mayor parte de web Las páginas se basan en el marco. Tanto el algoritmo AJAX como el JSON ya están integrados en sus utilidades.
Además, WebEl software StaX proporciona otras utilidades que son útiles para JSON web diseño de página

• json.js – Úselo para transmitir/recibir los datos dinámicos con sintaxis JSON.
• dynforms.js – Úselo para crear la tabla HTML dinámicamente.
• validar.js – Se utiliza para la validación de formularios HTML.

Las bibliotecas completas de JavaScript se encuentran en el directorio del árbol de fuentes: webstax2\vtss_appl\web\html\lib.

Directrices para JSON Web Diseño de página

Esta sección guía cómo diseñar un web página basada en bibliotecas MSCC JavaScript. Usamos el Mirror global configurado web página como el exampaquí La comunicación asincrónica se basa en el método de acceso HTTP JSON y todos los parámetros configurados globales se enumeran en una tabla HTML dinámica.
El web el diseño de la página se muestra a continuación y el código fuente completo se encuentra en el directorio del árbol de fuentes: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Para ser más típico web Referencia de páginas, consulte la sección de apéndices.

Tabla de configuración de Mirror y RMirror

Figura 5. Examparchivo de la tabla global configurada

Editar Web página

encabezado HTML
Incluya las bibliotecas JS que necesitaba en el HTML tag.

Inicializar el recurso de tabla dinámica

• Cuando el documento HTML esté listo, llame a DynamicTable() para inicializar el recurso de la tabla dinámica.
• DynamicTable() se usa para crear la tabla dinámica después de recibir los datos JSON.
• Luego llamará a requestUpdate para iniciar el flujo de comandos JSON.

1. ventana.addEvent('domready', function() {
2. // Crear un formulario con cuerpo de tabla para recibir/transmitir datos JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. solicitarActualizar();
5. });

Solicitud/respuesta de datos JSON

• Cuando el documento HTML esté listo, use requestJsonDoc() para enviar la solicitud JSON "mirror.config.session.get" para obtener información sobre las sesiones configuradas.
• Después de recibir los datos JSON para "mirror.capabilities.get", se procesará la función de devolución de llamada requestUpdate(). La función requestUpdate luego llamará a "mirror.config.session.get" para obtener la configuración actual. Cuando se recibe la configuración actual, se llama a la función processUpdate para construir la tabla que se mostrará.

1. solicitud de función Actualizar ()
2. {
3. // Restaurar el contenido de la tabla
4. miTablaDinámica.restore();
   5
5. // Esta tabla dos datos JSON.
6. requestJsonDoc(“mirror.config.session.get”, nulo, ProcessUpdate, “config”);
7. }

Procesar los datos JSON recibidos

• La función processUpdate() se usa para diseñar la tabla dinámica después de recibir los datos JSON.
• El addRows() se usa para agregar filas a la tabla. myDynamicTable.update() diseña el
  Tabla HTML según los datos en las filas de la tabla.

1. función actualizar el proceso (recv_json, nombre)
2. {
3. // Ignorar el proceso si no se reciben datos
4. si (! recv_json) {
5. alert(“Error al obtener datos dinámicos.”);
6. devolver;
7. }
8. // Guardar los datos JSON recibidos
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Añadir filas de tabla
11. var table_rows = addRows(recv_json);
12. miTablaDinámica.addRows(tabla_filas);
14. // Actualizar esta tabla dinámica
15. miTablaDinámica.update();
17. // Temporizador de actualización
18. var autorrefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. si (id del temporizador) {
21. clearTimeout(ID del temporizador);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Añadir filas de tabla

• En la función addRows(), usamos el formato JSON para completar cada parámetro global configurado en la fila de la tabla.
• Todos los campos HTML se enumeran en la matriz JSON ("table_rows") y la sintaxis del campo de la tabla se encuentra a continuación.

Sintaxis:
filas_tabla:[ , , … ] : { , , … }
: {"tipo": , “parámetros”:[ , , …, ]}

• En este caso, cada fila tiene cinco campos: “ID de sesión”, “Modo”, “Tipo”, “ID de VLAN” y “Puerto reflector” Por ej.ampel,

ID de sesión (Campo de nombre: int32_t)	1 (Id de la sesión espejo)
Modo (Campo de nombre: vtss_bool_t)	verdadero (Lo que significa que la sesión espejo está habilitada)
Tipo (Campo de nombre: enumeración {espejo, rMirrorSource, rMirrorDestination}	Fuente RMirror (esta es la fuente de una sesión espejo remota
Identificación de VLAN (Campo de nombre: uint16_t)	200 (la vlan utilizada para duplicar)
Puerto reflector (Campo de nombre: vtss_ifindex_t)	gi 1/1 (El puerto al que se envía el tráfico duplicado

• myDynamicTable.addRows() convertirá los datos JSON a formato HTML y generará la tabla HTML.

1. función añadirFila(clave, valor)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Ninguno”, none_interface_text = “NINGUNO”;
4. var Tunnel_mode_suffix = val.TunnelMode == “useglobal”? ”(” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var fila = {campos:[
6. {tipo:”enlace”, parámetros:[“cr”, “mirror.htm?session_id=” + clave, clave]},
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”, params:[val.Tipo == “espejo” ? “-“:
   val.RMirrorVlan, “c”]},
10. {tipo:”texto”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. fila de retorno;
13. }
14. Función agregar filas (recv_json)
15. {
16. fila var, colspan_vacío = 7;
17. var tabla_filas = nueva matriz();
18. // Agregar encabezado de tabla
19. addHeader(tabla_filas);
20. // Agregar una sola fila
21. Object.each(recv_json, función(registro) {
22. table_rows.push(addRow(registro.clave, registro.val));
23. });
24. volver tabla_filas;
25. }

Web página de ayuda
Para el web diseño de la página de ayuda, la descripción de la ayuda puede hacer referencia a la especificación JSON, que el texto de la descripción puede ser coherente con la salida JSON y ayuda a reducir las descripciones redundantes. ExampEl archivo aquí está tomado de la configuración del relé dhcp6.

Hipervínculo en la fuente file
Asignar la ayuda file ubicación en su fuente file HTML tag. El nombre de variable fija "help_page" se utiliza para el web Asignación de la página de ayuda.

2. // magia de la página de ayuda
3. var página_ayuda = “/ayuda/ayuda_xxx.htm”;

Actualizar la descripción del campo HTML de la especificación JSON

• Usar o HTML tag para declarar la descripción de la tabla HTML y darle un ID único para el tag.
• Cuando el documento HTML esté listo, llame a loadXMLDoc() para obtener la especificación JSON completa u obtenga la descripción del método específico por el nombre del método JSON "jsonRpc.status.introspection.specific.inventory.get".
• El processTableDesc() se usa para actualizar la descripción de la tabla y el processUpdate() se usa para actualizar la descripción del parámetro de la tabla.
• En processUpdate(), llame a updateTableParamsDesc() para actualizar los elementos JSON que coinciden con los nombres de elementos específicos.
• Actualizar el o tag HTML interno según la descripción del elemento.

2. /* Actualizar campos de descripción HTML */
3. función procesarTableDesc (requerido) {
4. si (!req.responseText) {
5. devolver;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Actualizar descripción de la tabla
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).descripción;
10. }
11. /* Actualizar la descripción del parámetro de la tabla HTML */
12. función actualizar el proceso (recv_json) {
13. // Actualizar la descripción del parámetro de la tabla
14. var nombres_param = [
15. {
16. “alias”: “Interfaz”,
17. “tipo”: “vtss_ifindex_t”,
18. "nombre": "interfaz vlan",
19. "sufijo": "."
20. },
21. {
22. “alias”: “Interfaz de relé”,
23. “tipo”: “vtss_ifindex_t”,
24. "nombre": "interfaz Vlan de relé",
25. "sufijo": ". La identificación de la interfaz utilizada para la retransmisión”.
26. },
27. {
28. “alias”: “Destino de retransmisión”,
29. “tipo”: “mesa_ipv6_t”,
30. “nombre”: “destino_retransmisión”,
31. "sufijo": ". La dirección IPv6 del servidor DHCPv6 al que se retransmitirán las solicitudes. El valor predeterminado 'ff05::1:3' sirve para 'cualquier servidor DHCP'”.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Obtener especificación JSON */
37. ventana.addEvent('domready', función () {
38. loadXMLDoc(“/json_spec”, ProcessTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, ProcessUpdate);
40. });

Hipervínculo en la barra de menú

• El código fuente HTML de la barra de menú se genera a partir de file webstax2\vtss_appl\web\menú_predeterminado.cxx.
• Edite los elementos de este file Para el Web hipervínculo de la página.

1. #si está definido (VTSS_SW_OPTION_DHCP6_RELAY)
2. ELEMENTO(” Relé,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Tenga en cuenta que el número de caracteres de espacio en ELEMENTO (""), que se utiliza para decidir el nivel de grupo en la barra de menú. En este caso, todos web las páginas están en el grupo "DHCPv6".

Figura 6. Examparchivo de la tabla global configurada

Apéndice

Típico web páginas

Hay varios típicos web las páginas se pueden utilizar para el diseño de referencia. Un ex adicionalampEl archivo que se mostrará aquí es la configuración de una única sesión de espejo que se encuentra en vtss_appl\mirror\html\mirror.htm.
El web página proporciona la configuración detallada para una sola sesión de espejo. Se enumeran todos los parámetros configurados.

• Haga clic en el botón "Guardar" para aplicar la configuración actual.
• Haga clic en el botón "Restablecer" para restablecer la configuración actual.
• Haga clic en "Cancelar" para volver al anteriorview de sesiones espejo

Configuración de espejo y espejo

Configuración global

Configuración de VLAN de origen

Configuración del puerto

Figura 7. Examparchivo de configuración detallada de la sesión espejo
Los botones “Guardar”, “Restablecer” y “Cancelar” son agregados por el código html:

Flujo de comandos JSON
Esta página requiere un flujo de comando de dos pasos:

• Primero necesita obtener las capacidades del dispositivo con el método "mirror.capabilities.get". Las capacidades no cambian y solo deben leerse una vez.
• Luego necesita obtener la configuración actual del dispositivo usando los métodos “mirror.config.session.get”, “port.status.get” y en caso de apilamiento “topo.config.stacking.get”.

La llamada de “mirror.capabilities.get” es iniciada por el evento “domready” y el resultado está configurado para ser manejado por la función requestUpdate.
El requestUpdate iniciará la llamada de “mirror.config.session.get”,
“port.status.get” y en caso de apilamiento “topo.config.stacking.get” y los resultados de estas llamadas están configurados para ser manejados por la función prepareUpdate.
La función prepareUpdate recopilará todos los resultados, y solo cuando se hayan recibido todos llamará a la función processUpdate que construirá las tablas que se mostrarán en el web.

Referencias

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

Documentos / Recursos

Microsemi AN1256 Web Aplicación para programadores [pdf] Guía del usuario AN1256, AN1256 Web aplicación de programadores, Web Aplicación para programadores, Aplicación

Referencias

• Manual de usuario