Microsemi AN1256 Web Programmers Application User guide
- Type
- User guide
AN1256 - Web Programmers
Guide via JSON
??;820C8>=">C4
by Peter Chen
%4E$$
>=P34=C80;
& )! )(. (.-
1. Introduction .............................................................................................................. 3
2. JSON data access <ow .............................................................................................. 3
2.1. Overview ........................................................................................................... 3
2.2. Request/Response JSON data ............................................................................ 3
2.3. MSCC JSON speci;cation.................................................................................... 4
3. Web framework ........................................................................................................ 5
4. Guideline for JSON Web page design ........................................................................ 5
4.1. Edit Web page ................................................................................................... 6
4.1.1. HTML header .............................................................................................. 6
4.1.2. Initialize the dynamic table resource .......................................................... 6
4.1.3. Request/Response JSON data ..................................................................... 6
4.1.4. Process the received JSON data.................................................................. 7
4.1.5. Add table rows ............................................................................................ 7
4.2. Web help page................................................................................................... 9
4.2.1. Hyper-link in the source ;le ........................................................................ 9
4.2.2. Update HTML ;eld description from JSON speci;cation ............................ 10
4.3. Hyper-link in menu bar .................................................................................... 12
5. Appendix ................................................................................................................ 12
5.1. Typical web pages............................................................................................ 12
5.1.1. JSON Command <ow ................................................................................. 13
6. References.............................................................................................................. 14
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
(.,)/.$)(
&#" 0E0&2A8?C #1942C ">C0C8>= 8B 0= >?4=BC0=30A3 P;4 5>A<0C C70C DB4B 7D<0=
A40301;4 C4GC 5>A 30C0 4G270=68=6 C 8B 0 2><<>= 30C0 5>A<0C DB43 5>A 0BH=27A>=>DB
1A>FB4AB4AE4A2><<D=820C8>=
>A C74 =4F F41 ?064 34B86= &#" 5>A<0C 20= 14 0 A4?;024<4=C 5>A C74 >A868=0;
+ BCH;4 ><?0A4 C> + DB8=6 &#" <0:4B C74 *41 8<?;4<4=C0C8>= 40B84A 0=3
B8<?;4A '74 34E4;>?4A >=;H =443 C> 5>2DB >= F41 ?064 34B86= 0=3 C74 *41 70=3;4A
8<?;4<4=C0C8>= 20= 14 ><8CC43 B8=24 &#" 0224BB <4C7>3 8B 0;A403H BD??>AC43 8=
4027*41&C0+B>5CF0A4<>3D;4B
'78B 3>2D<4=C BC0C4B C74 ?A>6A0<<4AB 6D834 5>A C74 B>5CF0A4 4=68=44A F7> =443 C>
34E4;>? C74 *41 ?064 E80 &#" '74 34C08; ?A>243DA4B 0=3 4G0<?;4B 0;B> 8=2;D343 8=
C745>;;>F8=6B42C8>=B
. -- 6)1
0 ,0$ 1
4A4LB C74 &#" 30C0 0224BB Q>F F7827 0 ''$ 2>==42C8>= 8B 8=8C80C43 5A>< C74
2;84=C1A>FB4A '74 '! C01;4 8B 2A40C43 3H=0<820;;H 022>A38=6 C> C74 A4248E43
#&"30C05A><C74B4AE4A('B834
Figure 1. The access ,ow between client and server
+/ -. -*)(- .
'74 &#" A4@D4BC ?02:4C 8B 10B43 >= ''$ A4@D4BC ?>BC <4C7>3 0=3 C74 2>=C4=C 70E4
C>5>;;>FC74!&&#"5>A<0C
M %4@D4BC &#" BH=C0G
J<4C7>39B>=/<4C7>3/=0<4?0A0<B,9B>=/?0A0<4C4AB.839B>=A?2K
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
M %4B?>=B4 &#" BH=C0G J4AA>A4AA>A/<4BB064A4BD;C9B>=/A4BD;C
839B>=A?2K
'745>;;>F8=6B=0?B7>CBB7>FC74&#"2>=C4=C14CF44=C741A>FB4A0=3('
HTTP
Client
(Browser)
Request dynamic data (POST/JSON)
HTTP
Server
(DUT)
JSON RPC
Figure 2. Snapshot of HTTP request from client
HTTP
Client
(Browser)
Response dynamic data
(For creating dynamic HTML)
HTTP
Server
(DUT)
JSON RPC
Figure 3. Snapshot of HTTP response from server
-* $5.$)(
'> 64C C74 5D;; &#" 8=5>A<0C8>= 8=2;D38=6 C74 <4C7>3 ?0A0<4C4A 34B2A8?C8>= 0=3
4C2 'H?4 7CC?C0A64C/8?9B>=/B?42 >= H>DA 1A>FB4A 033A4BB 10A '74A4 8B
0=>C74A 0224BB <4C7>3 E80 &#" <4C7>3 =0<4
9B>=%?2BC0CDB8=CA>B?42C8>=B?428P28=E4=C>AH64C8C8BDB435>A0B?428P2<4C7>3
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
Figure 4. Snapshot of JSON speci+cation web page
!,' 1),%
'74 *41 5A0<4F>A: 8= *41&C0+ B>5CF0A4 8B 10B43 >= 0= >?4= B>DA24 !>>'>>;B C 8B 0
2>;;42C8>= >5 0E0&2A8?C DC8;8C84B F8C7 !' ;824=B4 7CC?<>>C>>;B=4C;824=B4CGC '74
<4=D 10A 0=3 <>BC >5 F41 ?064B 0A4 10B43 >= C74 5A0<4F>A: >C7 + 0=3 &#"
0;6>A8C7<0A40;A403H8=C46A0C438=8CBDC8;8C84B
4B834B *41&C0+ B>5CF0A4 ?A>E834B C74 >C74A DC8;8C84B F7827 0A4 DB45D; 5>A C74 &#"
F41?06434B86=
M 9B>=9B(B45>AC>CA0=B<8CA4248E4C743H=0<8230C0F8C7&#"BH=C0G
M 3H=5>A<B9B(B45>A2A40C4C74'! C01;43H=0<820;;H
M E0;830C49B(B45>AC74E0;830C8>=>5'! 5>A<
'74 5D;; 0E0&2A8?C ;81A0A84B 0A4 ;>20C43 D=34A C74 B>DA24 CA44 38A42C>AH F41BC0G-
ECBB/0??;-F41-7C<;-;81
/$ &$( !), *" -$"(
'78B B42C8>= 6D834B 7>F C> 34B86= 0 F41 ?064 10B43 >= !& 0E0&2A8?C ;81A0A84B *4
DB4 C74 !8AA>A 6;>10; 2>=P6DA43 F41 ?064 0B C74 4G0<?;4 74A4 '74 0BH=27A>=>DB
2><<D=820C8>= 0A4 10B43 >= ''$ &#" 0224BB <4C7>3 0=3 0;; 6;>10; 2>=P6DA43
?0A0<4C4AB0A4;8BC438=>=43H=0<82'! C01;4
'74 F41 ?064 ;0H>DC 8B ;8BC43 14;>F 0=3 C74 5D;; B>DA24 2>34 8B ;>20C43 D=34A C74
B>DA24 CA44 38A42C>AH F41BC0G-ECBB/0??;-<8AA>A-7C<;-<8AA>A/2CA;7C< '> 64C <>A4
CH?820;F41?064BA454A4=24B44C740??4=38GB42C8>=
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
Figure 5. Example of global con+gured table
$. *"
# ,
=2;D34C74&;81A0A84BC70C=443438=C74'! 7403C06
($.$&$4 .# 3('$ .& , -)/,
M *74= C74 '! 3>2D<4=C 8B A403H 20;; H=0<82'01;4 C> 8=8C80;8I4 C74 3H=0<82
C01;4A4B>DA24
M '74 H=0<82'01;4 8B DB43 C> 2A40C4 C74 3H=0<82 C01;4 05C4A A4248E43 C74 &#"
30C0
M CF8;;C74=20;;A4@D4BC(?30C4C>8=8C80C4C74&#"2><<0=3Q>F
+/ -. -*)(- .
M *74= C74 '! 3>2D<4=C 8B A403H DB4 A4@D4BCB>=>2 C> B4=3 C74 &#"
A4@D4BC <8AA>A2>=P6B4BB8>=64C C> 64C 8=5>A<0C8>= 01>DC C74 2>=P6DA43
B4BB8>=B
M 5C4A C74 &#" 30C0 5>A <8AA>A20?018;8C84B64C 8B A4248E43 C74 20;;102: 5D=2C8>=
A4@D4BC(?30C4 F8;; 14 ?A>24BB43 '74 5D=2C8>= A4@D4BC(?30C4 F8;; C74= 20;;
<8AA>A2>=P6B4BB8>=64C C> 64C C74 2DAA4=C 2>=P6DA0C8>= *74= C74 2DAA4=C
2>=P6DA0C8>= 8B A4248E43 C74 5D=2C8>= ?A>24BB(?30C4 8B 20;;43 C> 1D8;3 C74 C01;4 C>
14B7>F=
1<headhead>
2<scriptscript type="text/javascript" src="lib/mootools-core.js"></scriptscript>
3<scriptscript type="text/javascript" src="lib/json.js"></scriptscript>
4<scriptscript type="text/javascript" src="lib/dynforms.js"></scriptscript>
5<scriptscript type="text/javascript" src="lib/validate.js"></scriptscript>
6</headhead>
1window.addEvent('domready', function() {
2// Create a form with table body for receive/transmit JSON data
3myDynamicTable = new DynamicTable("myTableContent", "config",
"plusRowCtrlBar");
4
5requestUpdate();
6});
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
,) -- .# , $0 .
M '74 5D=2C8>= ?A>24BB(?30C4 8B DB43 C> ;0H>DC C74 3H=0<82 C01;4 05C4A A4248E43
C74&#"30C0
M '74 033%>FB 8B DB43 C> 033 C01;4 A>FB <HH=0<82'01;4D?30C4 ;0H>DC C74
'! C01;4022>A38=6C7430C08=C01;4A>FB
.& ,)1-
M = C74 033%>FB 5D=2C8>= F4 DB4 C74 &#" 5>A<0C C> P;; 4027 6;>10; 2>=P6DA43
?0A0<4C4A8=C74C01;4A>F
M ;; '! P4;3B 0A4 ;8BC43 8= C74 &#" 0AA0H C01;4/A>FB 0=3 C74 BH=C0G >5 C01;4
P4;38B14;>F
&H=C0G
C01;4/A>FB,A>F/A>F/NA>F/=.
1function requestUpdate()
2{
3// Restore table content
4myDynamicTable.restore();
5
6// This table two JSON data.
7requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
8}
1function processUpdate(recv_json, name)
2{
3// Ignore the process if no data is received
4if (!recv_json) {
5alert("Get dynamic data failed.");
6return;
7}
8
9// Save the received JSON data
10 myDynamicTable.saveRecvJson("config", recv_json);
11
12 // Add table rows
13 var table_rows = addRows(recv_json);
14 myDynamicTable.addRows(table_rows);
15
16 // Update this dynamic table
17 myDynamicTable.update();
18
19 // Refresh timer
20 var autorefresh = document.getElementById("autorefresh");
21 if (autorefresh && autorefresh.checked) {
22 if (timerID) {
23 clearTimeout(timerID);
24 }
25 timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
26 }
27 }
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
A>F/=JP4;3/P4;3/NP4;3/=K
P4;3/= JCH?4CH?4 ?0A0<B,?0A0<B/ ?0A0<B/ N
?0A0<B/=.K
M = C78B 20B4 4027 A>F 70B PE4 P4;3B &4BB8>= !>34 'H?4 ) " 0=3
%4Q42C>A$>AC>A4G0<?;4
"0<4P4;38=C/C 3>5C74<8AA>AB4BB8>=
"0<4P4;3ECBB/1>>;/C !40=8=6C74<8AA>AB4BB8>=8B
4=01;43
"0<4P4;34=D<4A0C8>=
J<8AA>AA!8AA>A&>DA24
A!8AA>A4BC8=0C8>=K
C78B8BC74B>DA24>50
A4<>C4<8AA>AB4BB8>=
"0<4P4;3D8=C/C C74E;0=DB435>A<8AA>A8=6
"0<4P4;3
ECBB/8P=34G/C
'74?>ACC>F7827C74<8AA>A43
CA0O828BB4=C
M '74 <HH=0<82'01;4033%>FB F8;; 2>=E4AC C74 &#" 30C0 C> '! 5>A<0C 0=3
>DC?DCC74'! C01;4
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
# &* *"
>A C74 F41 74;? ?064 34B86= C74 74;? 34B2A8?C8>= 20= A454A C> C74 &#"
B?428P20C8>= C70C C74 34B2A8?C8>= C4GC 20= 2>=B8BC4=C F8C7 &#" >DC?DC 0=3 74;?B
C> A43D24 C74 A43D=30=C 34B2A8?C8>=B G0<?;4 74A4 8B C0:4= 5A>< 372? A4;0H
2>=P6DA0C8>=
3* ,&$(% $( .# -)/, 5&
BB86= C74 74;? P;4 ;>20C8>= 8= 8CB B>DA24 P;4 '! 7403 C06 '74 PG43 E0A801;4
=0<474;?/?0648BDB435>AC74F4174;??0640BB86=<4=C
1function addRow(key, val)
2{
3var none_map_val = 0xFFFFFFFF, none_map_text = "None", none_interface_text =
"NONE";
4var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? " (" +
oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
5
6var row = {fields:[
7{type:"link", params:["cr", "mirror.htm?session_id=" + key,
key]},
8
9{type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
10 {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
11 {type:"text", params:[val.Type == "mirror" ? "-":
val.RMirrorVlan, "c"]},
12 {type:"text", params:[val.Type == "rMirrorSource" ?
val.ReflectorPort : "-" , "c"]}
13 ]};
14
15 return row;
16 }
17
18 function addRows(recv_json)
19 {
20 var row, empty_colspan = 7;
21 var table_rows = new Array();
22
23 // Add table header
24 addHeader(table_rows);
25
26 // Add single row
27 Object.each(recv_json, function(record) {
28 table_rows.push(addRow(record.key, record.val));
29 });
30
31 return table_rows;
32 }
1<headhead>
2// Help page magic
3var help_page = "/help/help_xxx.htm";
4</headhead>
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
*. 5 & -,$*.$)( !,)' -* $5.$)(
M (B4 ? >A 3; '! C06 C> 342;0A4 C74 '! C01;4 34B2A8?C8>= 0=3 68E4= 0
D=8@D45>AC74C06
M *74= C74 '! 3>2D<4=C 8B A403H 20;; ;>03+! >2 C> 64C C74 F7>;4 &#"
B?428P20C8>= >A 64C C74 B?428P2 <4C7>3 34B2A8?C8>= 1H &#" <4C7>3 =0<4
9B>=%?2BC0CDB8=CA>B?42C8>=B?428P28=E4=C>AH64C
M '74 ?A>24BB'01;44B2 8B DB43 C> D?30C4 C74 C01;4 34B2A8?C8>= 0=3
?A>24BB(?30C48BDB43C>D?30C4C74C01;4?0A0<4C4A34B2A8?C8>=
M = ?A>24BB(?30C4 20;; D?30C4'01;4$0A0<B4B2 C> D?30C4 C74 &#" 4;4<4=CB
F78270A4<0C2743C74B?428P24;4<4=C=0<4B
M (?30C4C74?>A3;C068==4A'! 022>A38=6C>C744;4<4=C34B2A8?C8>=
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
1<scriptscript type="text/javascript" language="JavaScript">
2
/* Update HTML description fields */
3functionfunction processTableDesc(req) {
4ifif (!req.responseText) {
5returnreturn;
6}
7
8varvar json_spec =JSON.decode(req.responseText);
9
10
// Update table description
11 $("TableDesc").innerHTML =getJsonSpecElement(json_spec, "groups",
"dhcp6_relay.config.vlan").description;
12 }
13
14
/* Update HTML table parameter description */
15 functionfunction processUpdate(recv_json) {
16
17
// Update table parameter description
18 varvar param_names =[
19 {
20 "alias":"Interface",
21 "type":"vtss_ifindex_t",
22 "name":"vlanInterface",
23 "suffix":"."
24 },
25 {
26 "alias":"Relay Interface",
27 "type":"vtss_ifindex_t",
28 "name":"relayVlanInterface",
29 "suffix":". The id of the interface used for relaying."
30 },
31 {
32 "alias":"Relay Destination",
33 "type":"mesa_ipv6_t",
34 "name":"relay_destination",
35 "suffix":". The IPv6 address of the DHCPv6 server that requests
shall be relayed to. The default value 'ff05::1:3' mans 'any DHCP server'."
36 }
37 ];
38 updateTableParamsDesc("TableParamsDesc", recv_json,
"dhcp6_relay.config.vlan.get", param_names);
39 }
40
41
/* Get JSON specification */
42 window.addEvent('domready',functionfunction () {
43 loadXMLDoc("/json_spec", processTableDesc);
44 requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get",
"dhcp6_relay.config.vlan", processUpdate);
45 });
46 </scriptscript>
47
48 <bodybody>
49 <pp id="TableDesc"></pp>
50 <dldl id="TableParamsDesc"></dldl>
51 </bodybody>
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
3* ,&$(% $( ' (/ ,
M '74 '! B>DA24 2>34 >5 <4=D 10A 8B 64=4A0C43 5A>< P;4 F41BC0G-ECBB/0??;-F41-
<4=D/3450D;C2GG
M 38CC748C4<B8=C78BP;45>AC74*41?0647H?4A;8=:
NOTE
">C824 C70C C74 =D<14A >5 B?024 270A02C4A 8= '! F7827 8B DB43
C> 342834 C74 6A>D? ;4E4; 8= C74 <4=D 10A = C78B 20B4 0;; F41 ?064B
0A4D=34AC74$E6A>D?
Figure 6. Example of global con+gured table
** ($2
3*$& 1 *" -
'74A4 0A4 B4E4A0; CH?820; F41 ?064B 20= 14 DB43 5>A C74 A454A4=24 34B86= #=4
0338C8>=0; 4G0<?;4 C> 14 B7>F 74A4 8B C74 2>=P6DA0C8>= >5 0 B8=6;4 <8AA>A B4BB8>=
5>D=38=ECBB/0??;-<8AA>A-7C<;-<8AA>A7C<
'74 F41 ?064 ?A>E834B C74 34C08;43 2>=P6DA0C8>= 5>A 0 B8=6;4 <8AA>A B4BB8>= ;;
2>=P6DA43?0A0<4C4AB0A4;8BC43
M ;82:&0E41DCC>=C>0??;HC742DAA4=C2>=P6DA0C8>=
M ;82:%4B4C1DCC>=C>A4B4CC742DAA4=C2>=P6DA0C8>=
M ;82:0=24;C>A4CDA=C>C74>E4AE84F>5<8AA>AB4BB8>=B
1#if defined(VTSS_SW_OPTION_DHCP6_RELAY)
2ITEM(" Relay,dhcp6_relay.htm");
3#endif
//VTSS_SW_OPTION_DHCP6_RELAY
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
Figure 7. Example of detailed con+guration of mirror session
'741DCC>=B&0E4%4B4C0=30=24;0A4033431HC747C<;2>34
)''( 6)1
'78B?064A4@D8A4B0CF>BC4?2><<0=3Q>F
M 8ABC 8C =443B C> 64C C74 20?018;8C84B >5 C74 34E824 F8C7 C74 <4C7>3
<8AA>A20?018;8C84B64C '74 20?018;8C84B 3> =>C 270=64 0=3 3> >=;H 70E4 C> 14
A403>=24
M '74= 8C =443B C> 64C C74 2DAA4=C 2>=P6DA0C8>= >5 C74 34E824 DB8=6 C74 <4C7>3B
<8AA>A2>=P6B4BB8>=64C ?>ACBC0CDB64C 0=3 8= 20B4 >5 BC02:8=6
C>?>2>=P6BC02:8=664C
'74 20;; >5 <8AA>A20?018;8C84B64C 8B 8=8C80C43 1H C74 3><A403H 4E4=C 0=3 C74 A4BD;C
8B2>=P6DA43C>1470=3;431HC745D=2C8>=A4@D4BC(?30C4
'74 A4@D4BC(?30C4 F8;; 8=8C80C4 C74 20;; >5 <8AA>A2>=P6B4BB8>=64C
?>ACBC0CDB64C 0=3 8= 20B4 >5 BC02:8=6 C>?>2>=P6BC02:8=664C 0=3 C74 A4BD;CB >5
C74C74B420;;B0A42>=P6DA43C>1470=3;431HC745D=2C8>=?A4?0A4(?30C4
'74 5D=2C8>= ?A4?0A4(?30C4 F8;; 2>;;42C 0;; A4BD;CB 0=3 >=;H F74= C74 70E4 0;; 144=
A4248E43 F8;; 8C 20;; C74 5D=2C8>= ?A>24BB(?30C4 C70C F8;; 2>=BCAD2C C74 C01;4B C> 14
B7>F=>=C74F41
1<input type="button" value="Save" onclick="submitForms();">
2<input type="button" value="Reset" onclick="resetForms();">
3<input type="button" value="Cancel" onclick="clickCancel();">
""*41$A>6A0<<4ABD834E80&#" ??;820C8>=">C4
>=P34=C80; $064>5
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
Microsemi AN1256 Web Programmers Application User guide
- Type
- User guide
Ask a question and I''ll find the answer in the document
Finding information in a document is now easier with AI
Other documents
-
Kofax SignDoc 3.1.0 Developer's Guide
-
-
Novell Identity Manager 4.0.1 Administration Guide
-
-
OBJECTIF LUNE PlanetPress Connect 2021.2 User guide
-
Wiley 978-0-470-10998-4 Datasheet
-
Zebra SB1 Owner's manual
-
Parallels Presence Builder 12.0 Standalone User guide
-
-
