美高森美 AN1256 Web 程序员应用程序用户指南

内容隐藏

1 美高森美 AN1256 Web 程序员应用

2 介绍

美高森美 AN1256 Web 程序员应用

介绍

JSON（JavaScript Object Notation）是一种开放标准 file 使用人类可读文本进行数据交换的格式。它是用于异步浏览器/服务器通信的通用数据格式。
对于新的 web 页面设计，JSON格式可以替代原来的AJAX风格。与 AJAX 相比，使用 JSON 使得 Web 实施更容易和更简单。开发者只需要专注于 web 页面设计和 Web 处理程序实现可以省略，因为 JSON 访问方法已经在每个 WebStaX 软件模块。
本文档为需要开发 Web 通过 JSON 的页面。详细程序及前amples 也包含在以下部分中。

JSON 数据访问流程

超过view
这是从客户端（浏览器）发起 HTTP 连接的 JSON 数据访问流程。 HTML 表是根据从服务器（DUT）端接收到的 JOSN 数据动态创建的。

图 1. 客户端和服务器之间的访问流程

请求/响应 JSON 数据
JSON 请求包基于 HTTP 请求 post 方法，内容必须遵循 MSCC JSON 格式。

请求 JSON 语法：{“方法”：” ”，“参数”：[ ], “id:”jsonrpc”}
响应 JSON 语法： {“错误”：，“结果”： , “id:”jsonrpc”}

以下快照显示浏览器和 DUT 之间的 JSON 内容。

图 2. 来自客户端的 HTTP 请求快照

图 3. 来自服务器的 HTTP 响应快照

MSCC JSON 规范
要获取完整的 JSON 信息，包括方法、参数、描述等，请输入“http:// /json_spec” 在浏览器地址栏上。还有一种通过JSON方法名“jsonRpc.status.introspection.specific.inventory.get”的访问方法，用于特定的方法。

图 4. JSON规范快照 web 页

Web 框架

这 Web 框架在 WebStaX 软件基于开源的 MooTools。它是一组具有 MIT 许可证的 JavaScript 实用程序。 (http://mootools.net/license.txt) 菜单栏和大部分 web 页面是基于框架的。 AJAX 和 JSON 算法都已集成到其实用程序中。
除了， WebStaX 软件提供了对 JSON 有用的其他实用程序 web 页面设计。

json.js—— 用于使用 JSON 语法传输/接收动态数据。
动态形式.js – 用于动态创建 HTML 表格。
验证.js – 用于验证 HTML 表单。

完整的 JavaScript 库位于源树目录下： webstax2\ vtss_appl\web\html\lib。

JSON 指南 Web 页面设计

本节指导如何设计一个 web 基于 MSCC JavaScript 库的页面。我们使用全局配置的镜像 web 作为前任的页面amp在这里。异步通信基于 HTTP JSON 访问方法，所有全局配置参数都列在一个动态 HTML 表中。
这 web 下面列出了页面布局，完整的源代码位于源代码树目录下： webstax2\vtss_appl\mirror\html\mirror_ctrl.htm。为了获得更典型的 web 页面参考，见附录部分。

Mirror&R镜像配置表

图 5. Examp全局配置表的文件

编辑 Web 页

HTML 标题
在 HTML 中包含所需的 JS 库 tag.

初始化动态表资源

当 HTML 文档准备好后，调用 DynamicTable() 来初始化动态表资源。
DynamicTable() 用于在接收到 JSON 数据后创建动态表。
然后它将调用 requestUpdate 以启动 JSON 命令流。

window.addEvent('domready', function() {
// 创建一个带有表体的表单，用于接收/发送 JSON 数据
myDynamicTable = new DynamicTable(“myTableContent”, “config”, “plusRowCtrlBar”);
4
请求更新（）；
});

请求/响应 JSON 数据

准备好 HTML 文档后，使用 requestJsonDoc() 发送 JSON 请求“mirror.config.session.get”以获取有关已配置会话的信息。
收到“mirror.capabilities.get”的JSON数据后，会处理回调函数requestUpdate()。然后函数 requestUpdate 将调用“mirror.config.session.get”来获取当前配置。收到当前配置后，将调用函数 processUpdate 来构建要显示的表。

功能请求更新（）
{
// 恢复表格内容
myDynamicTable.恢复（）；
5
// 这个表有两个 JSON 数据。
requestJsonDoc（“mirror.config.session.get”，null，processUpdate，“config”）；
}

处理接收到的 JSON 数据

函数 processUpdate() 用于在接收到 JSON 数据后对动态表进行布局。
addRows() 用于添加表格行。 myDynamicTable.update() 布局
根据表行中的数据生成 HTML 表。

函数 processUpdate（recv_json，名称）
{
// 如果没有接收到数据则忽略该过程
如果（！recv_json）{
alert("获取动态数据失败。");
返回;
}
// 保存接收到的JSON数据
myDynamicTable.saveRecvJson（“config”，recv_json）；
// 添加表格行
var table_rows = 添加行（recv_json）;
复制代码
// 更新这个动态表
我的动态表.更新()；
// 刷新定时器
var autorefresh = document.getElementById(“自动刷新”);
如果（自动刷新 && autorefresh.checked）{
如果（计时器 ID）{
清除超时（timerID）；
}
timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
}
}

添加表格行

在 addRows() 函数中，我们使用 JSON 格式填充表格行中的每个全局配置参数。
所有 HTML 字段都列在 JSON 数组（“table_rows”）中，表字段的语法如下。

句法：
表行：[ , , … ] ：{ , , … }
： {“类型”： , “参数”:[ , , …, ]}

在这种情况下，每行有五个字段：“Session ID”、“Mode”、“Type”、“VLAN ID”和“Reflector Port” For examp乐，

会话 ID （名称字段：int32_t）	1 （镜像会话的 ID）
模式（名称字段：vtss_bool_t）	真的（意味着镜像会话已启用）
类型（名称字段：枚举 {镜像，rMirrorSource，rMirrorDestination}	R镜像源（这是远程镜像会话的来源
VLAN 编号（名称字段：uint16_t）	200 （用于镜像的vlan）
反射镜端口（名称字段：vtss_ifindex_t）	吉 1/1 （镜像流量发送到的端口

myDynamicTable.addRows() 会将 JSON 数据转换为 HTML 格式并输出 HTML 表格。

函数 addRow(key, val)
{
var none_map_val = 0xFFFFFFFF, none_map_text = “无”, none_interface_text = “无”;
vartunnel_mode_suffix = val.TunnelMode==“useglobal”？ ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
var 行 = {字段:[
{type:”link”, params:[”cr”, “mirror.htm?session_id=” + key, key]},
{类型：“文本”，参数：[oTMode[oVMode.indexOf(val.Mode)]，“c”]}，
{类型：“text”，参数：[oTType[oVType.indexOf(val.Type)]，“c”]}，
{type:”text”, params:[val.Type == “mirror” ? “-”：
val.RMirrorVlan，“c”]}，
{类型：“文本”，参数：[val.Type ==“rMirrorSource”？
val.ReflectorPort：“-”，“c”]}
]}；
返回行；
}
函数 addRows(recv_json)
{
var 行，empty_colspan = 7；
var table_rows = new Array();
// 添加表头
添加表头（表行）；
// 添加单行
Object.each（recv_json，函数（记录）{
表行.推（addRow（record.key，record.val））；
});
返回表行；
}

Web 帮助页面
对于 web 帮助页面设计，帮助描述可参考JSON规范，描述文本与JSON输出一致，有助于减少冗余描述。前任amp此处的 le 取自 dhcp6 中继配置。

源中的超链接 file
分配帮助 file 在其来源中的位置 file HTML tag. 固定变量名称“help_page”用于 web 帮助页面分配。

// 帮助页面魔法
var help_page = “/help/help_xxx.htm”;

从 JSON 规范更新 HTML 字段描述

使用或者HTML tag 声明 HTML 表格描述并为 tag.
当 HTML 文档准备好后，调用 loadXMLDoc() 获取整个 JSON 规范或通过 JSON 方法名称“jsonRpc.status.introspection.specific.inventory.get”获取具体方法描述。
processTableDesc() 用于更新表描述，processUpdate() 用于更新表参数描述。
在 processUpdate() 中，调用 updateTableParamsDesc() 更新与特定元素名称匹配的 JSON 元素。
更新或者 tag 根据元素描述的内部 HTML。

/* 更新 HTML 描述字段 */
函数 processTableDesc(req) {
如果（！req.responseText）{
返回;
}
var json_spec = JSON.decode(req.responseText);
// 更新表描述
$(“TableDesc”).innerHTML = getJsonSpecElement(json_spec，“groups”，“dhcp6_relay.config.vlan”).description;
}
/* 更新 HTML 表格参数说明 */
函数 processUpdate（recv_json）{
// 更新表参数说明
var 参数名称 = [
{
“别名”：“接口”，
“类型”：“vtss_ifindex_t”，
“名称”：“vlan接口”，
“后缀”： ”。”
},
{
“别名”：“中继接口”，
“类型”：“vtss_ifindex_t”，
“名称”：“relayVlanInterface”，
“后缀”： ”。用于中继的接口的 id。”
},
{
“别名”：“中继目的地”，
“类型”：“mesa_ipv6_t”，
“名称”：“中继目的地”，
“后缀”： ”。请求中继到的 DHCPv6 服务器的 IPv6 地址。默认值 'ff05::1:3' 代表 '任何 DHCP 服务器'。
}
];
updateTableParamsDesc（“TableParamsDesc”，recv_json，“dhcp6_relay.config.vlan.get”，param_names）;
}
/* 获取 JSON 规范 */
window.addEvent('domready', function () {
加载XMLDoc（“/json_spec”，processTableDesc）；
requestJsonDoc(“jsonRpc.status.introspection.special.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
});

菜单栏中的超链接

菜单栏的 HTML 源代码生成自 file webstax2\vtss_appl\web\menu_default.cxx。
编辑这里的项目 file 对于 Web 页面超链接。

#if 已定义（VTSS_SW_OPTION_DHCP6_RELAY）
项目（“中继，dhcp6_relay.htm”）；
#endif //VTSS_SW_OPTION_DHCP6_RELAY

笔记
注意ITEM(“”)中空格字符的个数，用来决定菜单栏中的分组级别。在这种情况下，所有 web 页面在“DHCPv6”组下。

图 6. 前amp全局配置表的文件

附录

典型的 web 页面

有几种典型的 web 页可用于参考设计。一个额外的前任amp此处显示的文件是在 vtss_appl\mirror\html\mirror.htm 中找到的单个镜像会话的配置。
这 web 页面提供单个镜像会话的详细配置。列出所有配置的参数。

单击“保存”按钮应用当前配置。
单击“重置”按钮重置当前配置。
点击“取消”返回上一节view 镜像会话

镜像&R镜像配置

全局设置

源 VLAN 配置

端口配置

图 7. Examp镜像会话详细配置文件
“保存”、“重置”和“取消”按钮由 html 代码添加：

JSON 命令流
此页面需要一个两步命令流：

首先，它需要使用方法“mirror.capabilities.get”获取设备的功能。功能不会改变，只需读取一次。
然后它需要使用方法“mirror.config.session.get”、“port.status.get”和堆叠“topo.config.stacking.get”的方法来获取设备的当前配置。

“mirror.capabilities.get”的调用由“domready”事件发起，结果配置为由函数requestUpdate处理。
requestUpdate会发起“mirror.config.session.get”的调用，
“port.status.get”和堆叠情况下的“topo.config.stacking.get”以及这些调用的结果被配置为由函数 prepareUpdate 处理。
函数 prepareUpdate 将收集所有结果，只有当所有结果都收到后，它才会调用函数 processUpdate 来构建要显示在 web.