Microsemi AN1256 Web Aplicativo para programadores

Introdução

JSON (JavaScript Object Notation) é um padrão aberto file formato que usa texto legível para troca de dados. É um formato de dados comum usado para comunicação assíncrona entre navegador/servidor.
Para o novo web design de página, o formato JSON pode substituir o estilo AJAX original. Compare com AJAX, usar JSON torna o Web implementação mais fácil e simples. O desenvolvedor só precisa se concentrar em web design da página e o Web a implementação do manipulador pode ser omitida, pois o método de acesso JSON já é suportado em cada WebMódulos de software StaX.
Este documento apresenta o guia do programador para o engenheiro de software que precisa desenvolver o Web página via JSON. Os procedimentos detalhados e examparquivos também incluídos nas seções seguintes.

Fluxo de acesso a dados JSON

Sobreview
Aqui está o fluxo de acesso a dados JSON no qual uma conexão HTTP é iniciada no cliente (navegador). A tabela HTML é criada dinamicamente de acordo com os dados JOSN recebidos do lado do servidor (DUT).

Figura 1. O fluxo de acesso entre cliente e servidor

Dados JSON de solicitação/resposta
O pacote de solicitação JSON é baseado no método de postagem de solicitação HTTP e o conteúdo deve seguir o formato MSCC JSON.

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

Os instantâneos a seguir mostram o conteúdo JSON entre o navegador e o DUT.

Figura 2. Instantâneo da solicitação HTTP do cliente

Figura 3. Instantâneo da resposta HTTP do servidor

Especificação MSCC JSON
Para obter as informações completas do JSON, incluindo método, parâmetro, descrição e etc. Digite “http:// /json_spec” na barra de endereço do seu navegador. Existe outro método de acesso via nome de método JSON “jsonRpc.status.introspection.specific.inventory.get”, ele é usado para um método específico.

Figura 4. Instantâneo da especificação JSON web página

Web estrutura

O Web quadro em WebO software StaX é baseado em MooTools de código aberto. É uma coleção de utilitários JavaScript com licença MIT. (http://mootools.net/license.txt) A barra de menu e a maior parte web as páginas são baseadas na estrutura. Os algoritmos AJAX e JSON já estão integrados em seus utilitários.
Além do mais, WebO software StaX fornece outros utilitários que são úteis para o JSON web desenho da página.

• json.js – Use for para transmitir/receber dados dinâmicos com sintaxe JSON.
• dynforms.js – Use para criar a tabela HTML dinamicamente.
• validar.js – Use para a validação do formulário HTML.

As bibliotecas JavaScript completas estão localizadas no diretório da árvore de origem: webstax2\vtss_appl\web\html\lib.

Diretriz para JSON Web design de página

Esta seção orienta como projetar um web página baseada em bibliotecas MSCC JavaScript. Usamos o Mirror global configurado web página como o example aqui. A comunicação assíncrona é baseada no método de acesso HTTP JSON e todos os parâmetros globais configurados são listados em uma tabela HTML dinâmica.
O web o layout da página está listado abaixo e o código-fonte completo está localizado no diretório da árvore de origem: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Para ficar mais típico web referência de páginas, consulte a seção de apêndice.

Tabela de configuração Mirror& RMirror

Figura 5. Examparquivo da tabela configurada global

Editar Web página

Cabeçalho HTML
Incluir as bibliotecas JS necessárias no HTML tag.

Inicialize o recurso de tabela dinâmica

• Quando o documento HTML estiver pronto, chame DynamicTable() para inicializar o recurso de tabela dinâmica.
• O DynamicTable() é usado para criar a tabela dinâmica após receber os dados JSON.
• Em seguida, ele chamará requestUpdate para iniciar o fluxo de comando JSON.

1. window.addEvent('domready', function() {
2. // Cria um formulário com corpo de tabela para receber/transmitir dados JSON
3. minhaDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Dados JSON de solicitação/resposta

• Quando o documento HTML estiver pronto, use requestJsonDoc() para enviar a solicitação JSON “mirror.config.session.get” para obter informações sobre as sessões configuradas.
• Depois que os dados JSON para “mirror.capabilities.get” forem recebidos, a função de retorno de chamada requestUpdate() será processada. A função requestUpdate irá então chamar “mirror.config.session.get” para obter a configuração atual. Quando a configuração atual é recebida, a função processUpdate é chamada para construir a tabela a ser mostrada.

1. função requestUpdate()
2. {
3. //Restaura o conteúdo da tabela
4. minhaDynamicTable.restore();
   5
5. // Esta tabela contém dois dados JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Processe os dados JSON recebidos

• A função processUpdate() é usada para fazer o layout da tabela dinâmica após receber os dados JSON.
• O addRows() é usado para adicionar linhas da tabela. myDynamicTable.update() layout do
  Tabela HTML de acordo com os dados nas linhas da tabela.

1. função processUpdate (recv_json, nome)
2. {
3. // Ignora o processo se nenhum dado for recebido
4. se (!recv_json){
5. alert(“Falha na obtenção de dados dinâmicos.”);
6. retornar;
7. }
8. //Salva os dados JSON recebidos
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. //Adiciona linhas da tabela
11. var tabela_rows = addRows(recv_json);
12. minhaDynamicTable.addRows(tabela_rows);
14. //Atualiza esta tabela dinâmica
15. minhaDynamicTable.update();
17. //Atualiza o temporizador
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. }

Adicionar linhas da tabela

• Na função addRows(), usamos o formato JSON para preencher cada parâmetro global configurado na linha da tabela.
• Todos os campos HTML estão listados na matriz JSON (“table_rows”) e a sintaxe do campo da tabela está abaixo.

Sintaxe:
linhas_tabela:[ , ,… ] : { , ,… }
: {"tipo": , “parâmetros”:[ , , …, ]}

• Neste caso, cada linha possui cinco campos: “Session ID”, “Mode”, “Type”, “VLAN ID” e “Reflector Port” Por ex.ampele,

ID da sessão (Campo nome: int32_t)	1 (Id da sessão de espelho)
Modo (Campo nome: vtss_bool_t)	verdadeiro (Significa que a sessão de espelho está habilitada)
Tipo (Campo de nome: enumeração {espelho, rMirrorSource, rMirrorDestination}	Fonte RMirror (esta é a fonte de uma sessão de espelho remoto
ID da VLAN (Campo nome: uint16_t)	200 (a vlan usada para espelhamento)
Porta Refletor (Campo nome: vtss_ifindex_t)	Gi 1/1 (A porta para a qual o tráfego espelhado é enviado

• O myDynamicTable.addRows() converterá os dados JSON para o formato HTML e gerará a tabela HTML.

1. função addRow(chave, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Nenhum”, none_interface_text = “NONE”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ”(” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var linha = {campos:[
6. {tipo:”link”, params:[“cr”, “mirror.htm?session_id=” + chave, chave]},
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.Type == “espelho” ? “-“:
   val.RMirrorVlan, “c”]},
10. {tipo:”texto”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. linha de retorno;
13. }
14. função addRows(recv_json)
15. {
16. var linha, vazio_colspan = 7;
17. var linhas_tabela = new Array();
18. //Adiciona cabeçalho da tabela
19. addHeader(linhas_tabela);
20. //Adiciona uma única linha
21. Object.each(recv_json, function(registro) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. retornar linhas_tabela;
25. }

Web página de ajuda
Para o web design da página de ajuda, a descrição da ajuda pode referir-se à especificação JSON, que o texto da descrição pode ser consistente com a saída JSON e ajuda a reduzir as descrições redundantes. ExampO arquivo aqui foi retirado da configuração do relé dhcp6.

Hiperlink na fonte file
Atribuir a ajuda file localização em sua fonte file HTML tag. O nome da variável fixa “help_page” é usado para o web atribuição da página de ajuda.

2. // Magia da página de ajuda
3. var help_page = “/help/help_xxx.htm”;

Atualizar a descrição do campo HTML da especificação JSON

• Usar ou HTML tag para declarar a descrição da tabela HTML e receber um ID exclusivo para o tag.
• Quando o documento HTML estiver pronto, chame loadXMLDoc() para obter toda a especificação JSON ou obter a descrição do método específico pelo nome do método JSON “jsonRpc.status.introspection.specific.inventory.get”.
• O processTableDesc() é usado para atualizar a descrição da tabela e processUpdate() é usado para atualizar a descrição dos parâmetros da tabela.
• Em processUpdate(), chame updateTableParamsDesc() para atualizar os elementos JSON que correspondem aos nomes dos elementos específicos.
• Atualize o ou tag HTML interno de acordo com a descrição do elemento.

2. /* Atualizar campos de descrição HTML */
3. função processTableDesc(req) {
4. if (!req.responseText) {
5. retornar;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. //Atualiza a descrição da tabela
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “grupos”, “dhcp6_relay.config.vlan”).descrição;
10. }
11. /* Atualizar a descrição do parâmetro da tabela HTML */
12. função processUpdate (recv_json) {
13. //Atualiza a descrição dos parâmetros da tabela
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. “nome”: “relayVlanInterface”,
25. “sufixo”: “. O ID da interface usada para retransmissão.”
26. },
27. {
28. “alias”: “Destino de retransmissão”,
29. “tipo”: “mesa_ipv6_t”,
30. “nome”: “destino_relé”,
31. “sufixo”: “. O endereço IPv6 do servidor DHCPv6 para o qual as solicitações serão retransmitidas. O valor padrão 'ff05::1:3' equivale a 'qualquer servidor DHCP'.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Obtém a especificação JSON */
37. window.addEvent('domready', function() {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hiperlink na barra de menu

• O código-fonte HTML da barra de menu é gerado a partir de file webstax2\vtss_appl\web\menu_default.cxx.
• Edite os itens neste file para o Web hiperlink da página.

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

OBSERVAÇÃO
Observe o número de caracteres de espaço em ITEM (“”), que é usado para decidir o nível do grupo na barra de menu. Neste caso, todos web as páginas estão no grupo “DHCPv6”.

Figura 6. Examparquivo da tabela configurada global

Apêndice

Típico web páginas

Existem vários típicos web páginas podem ser usadas para o design de referência. Um ex adicionalampO que será mostrado aqui é a configuração de uma única sessão de espelho encontrada em vtss_appl\mirror\html\mirror.htm.
O web fornece a configuração detalhada para uma única sessão de espelho. Todos os parâmetros configurados são listados.

• Clique no botão “Salvar” para aplicar a configuração atual.
• Clique no botão “Redefinir” para redefinir a configuração atual.
• Clique em “Cancelar” para retornar ao finalview de sessões de espelho

Configuração de espelho e RMirror

Configurações globais

Configuração de VLAN(s) de origem

Configuração da porta

Figura 7. Examparquivo de configuração detalhada da sessão de espelho
Os botões “Salvar”, “Redefinir” e “Cancelar” são adicionados pelo código html:

Fluxo de comando JSON
Esta página requer um fluxo de comando em duas etapas:

• Primeiro ele precisa obter as capacidades do dispositivo com o método “mirror.capabilities.get”. Os recursos não mudam e só precisam ser lidos uma vez.
• Em seguida, é necessário obter a configuração atual do dispositivo utilizando os métodos “mirror.config.session.get”, “port.status.get” e em caso de empilhamento “topo.config.stacking.get”.

A chamada de “mirror.capabilities.get” é iniciada pelo evento “domready” e o resultado é configurado para ser tratado pela função requestUpdate.
O requestUpdate iniciará a chamada de “mirror.config.session.get”,
“port.status.get” e em caso de empilhamento “topo.config.stacking.get” e os resultados dessas chamadas são configurados para serem tratados pela função prepareUpdate.
A função prepareUpdate coletará todos os resultados, e somente quando todos forem recebidos chamará a função processUpdate que construirá as tabelas a serem mostradas no web.

Referências

1. JavaScript da Wikipédia https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Documentos / Recursos

Microsemi AN1256 Web Aplicativo para programadores [pdf] Guia do Usuário AN1256, AN1256 Web Aplicativo para programadores, Web Aplicativo para programadores, aplicativo

Referências

• Manual do usuário