Microsemi AN1256 Web Aplikasyon sa mga Programmer

Pasiuna

Ang JSON (JavaScript Object Notation) kay open-standard file format nga naggamit sa teksto nga mabasa sa tawo alang sa pagbayloay sa datos. Kini usa ka komon nga format sa datos nga gigamit alang sa asynchronous nga browser/server nga komunikasyon.
Para sa bag-o web disenyo sa panid, ang format sa JSON mahimong kapuli sa orihinal nga istilo sa AJAX. Itandi sa AJAX, gamit ang JSON naghimo sa Web mas sayon ​​ug mas simple ang pagpatuman. Kinahanglan lang nga mag-focus ang developer web disenyo sa panid ug ang Web Ang pagpatuman sa handler mahimong matangtang tungod kay ang pamaagi sa pag-access sa JSON gisuportahan na sa matag usa WebStaX software modules.
Kini nga dokumento nag-ingon nga ang mga programmer giya alang sa software engineer nga kinahanglan sa pagpalambo sa Web panid pinaagi sa JSON. Ang mga pamaagi sa detalye ug examples gilakip usab sa mosunod nga mga seksyon.

JSON data access flow

Tapos naview
Ania ang JSON data access flow diin ang usa ka HTTP nga koneksyon gisugdan gikan sa kliyente(browser). Ang HTML nga lamesa gimugna sa dinamikong paagi sumala sa nadawat nga JOSN data gikan sa server(DUT) nga bahin.

Hulagway 1. Ang agianan sa pag-access tali sa kliyente ug server

Paghangyo/Pagtubag sa datos sa JSON
Ang JSON request packet gibase sa HTTP request post method ug ang content kinahanglang mosunod sa MSCC JSON format.

• Paghangyo ug JSON syntax:{"pamaagi":" ","params":[ ], “id:”jsonrpc”}
• Tubag nga JSON syntax: {“sayup”: "resulta": , “id:”jsonrpc”}

Ang mosunod nga mga snapshot nagpakita sa JSON nga sulod tali sa browser ug DUT.

Hulagway 2. Snapshot sa HTTP nga hangyo gikan sa kliyente

Hulagway 3. Snapshot sa tubag sa HTTP gikan sa server

MSCC JSON espesipikasyon
Aron makuha ang kompleto nga impormasyon sa JSON lakip ang pamaagi, parameter, paghulagway ug uban pa. I-type ang "http:// /json_spec” sa imong browser address bar. Adunay lain nga paagi sa pag-access pinaagi sa ngalan sa JSON nga pamaagi nga "jsonRpc.status.introspection.specific.inventory.get", gigamit kini alang sa usa ka piho nga pamaagi.

Hulagway 4. Snapshot sa detalye sa JSON web panid

Web gambalay

Ang Web balangkas sa WebAng software sa StaX gibase sa usa ka open source nga MooTools. Kini usa ka koleksyon sa mga gamit sa JavaScript nga adunay lisensya sa MIT. (http://mootools.net/license.txt) Ang menu bar ug kadaghanan sa web mga panid gibase sa gambalay. Parehong AJAX ug JSON nga algorithm naa na sa mga gamit niini.
Gawas pa, WebAng StaX software naghatag sa ubang mga utilities nga mapuslanon alang sa JSON web disenyo sa panid.

• json.js – Gamita para sa pagpadala/pagdawat sa dinamikong datos uban sa JSON syntax.
• dynforms.js – Gigamit alang sa paghimo sa HTML nga lamesa nga dinamiko.
• validate.js – Gigamit alang sa pag-validate sa HTML nga porma.

Ang tibuuk nga mga librarya sa JavaScript nahimutang sa ilawom sa direktoryo sa punoan sa gigikanan: webstax2\ vtss_appl\web\html\lib.

Giya alang sa JSON Web disenyo sa panid

Kini nga seksyon naggiya kung giunsa ang pagdesinyo a web panid base sa MSCC JavaScript librarya. Gigamit namo ang Mirror global configured web page kay exampdinhi. Ang asynchronous nga komunikasyon gibase sa HTTP JSON access method ug ang tanang global configured parameters gilista sa usa ka dinamikong HTML table.
Ang web Ang layout sa panid gilista sa ubos ug ang tibuok source code nahimutang ubos sa source tree directory: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Aron mahimong mas tipikal web reference sa mga panid, tan-awa ang seksyon sa apendise.

Mirror ug RMirror Confiquration Table

Hulagway 5. Example sa global configured nga lamesa

Edit Web panid

HTML nga ulohan
Ilakip ang mga librarya sa JS nga gikinahanglan sa HTML tag.

Pagsugod sa dinamikong kapanguhaan sa lamesa

• Kung andam na ang HTML nga dokumento, tawga ang DynamicTable() aron masugdan ang dinamikong kapanguhaan sa lamesa.
• Ang DynamicTable() gigamit sa paghimo sa dinamikong lamesa human makadawat sa JSON data.
• Dayon kini motawag sa requestUpdate aron masugdan ang JSON command flow.

1. window.addEvent('domready', function() {
2. // Paghimo usa ka porma nga adunay lawas sa lamesa alang sa pagdawat / pagpadala sa datos sa JSON
3. myDynamicTable = bag-ong DynamicTable("myTableContent", "config","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Paghangyo/Pagtubag sa datos sa JSON

• Kung andam na ang HTML nga dokumento, gamita ang requestJsonDoc() aron ipadala ang hangyo sa JSON nga "mirror.config.session.get" aron makakuha og impormasyon bahin sa mga na-configure nga sesyon.
• Human madawat ang data sa JSON alang sa "mirror.capabilities.get", ang callback function requestUpdate() iproseso. Ang function requestUpdate unya motawag sa "mirror.config.session.get" aron makuha ang kasamtangan nga configuration. Sa diha nga ang kasamtangan nga configuration nadawat, ang function processUpdate gitawag sa pagtukod sa lamesa nga ipakita.

1. function requestUpdate()
2. {
3. // Iuli ang sulud sa lamesa
4. myDynamicTable.restore();
   5
5. // Kini nga lamesa duha ka JSON data.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Iproseso ang nadawat nga datos sa JSON

• Ang function processUpdate() gigamit sa pag-layout sa dinamikong lamesa human madawat ang JSON data.
• Ang addRows() gigamit sa pagdugang sa mga laray sa lamesa. myDynamicTable.update() layout ang
  HTML nga lamesa sumala sa datos sa mga laray sa lamesa.

1. function processUpdate(recv_json, ngalan)
2. {
3. // Ibaliwala ang proseso kung walay datos nga nadawat
4. kon (!recv_json) {
5. alert("Napakyas ang pagkuha sa dinamikong datos.");
6. pagbalik;
7. }
8. // I-save ang nadawat nga data sa JSON
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Idugang ang mga laray sa lamesa
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // I-update kining dinamikong lamesa
15. myDynamicTable.update();
17. // I-refresh ang timer
18. var autorefresh = document.getElementById("autorefresh");
19. kung (autorefresh && autorefresh.checked) {
20. kon (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Idugang ang mga laray sa lamesa

• Sa addRows() function, among gigamit ang JSON format aron pun-on ang matag global configured parameter sa table row.
• Ang tanang HTML nga mga field gilista sa JSON array (“table_rows”) ug ang syntax sa table field anaa sa ubos.

Syntax:
table_rows:[ , ,… ] : { , ,… }
: {"matang": , “params”:[ , , …, ]}

• Niini nga kaso, ang matag laray adunay lima ka field: "Session ID", "Mode", "Type", "VLAN ID" ug "Reflector Port" Para sa example,

ID sa Sesyon (Ngalan field: int32_t)	1 (Id sa sesyon sa salamin)
Mode (Ngalan field: vtss_bool_t)	tinuod (Nagpasabot nga ang sesyon sa salamin gipalihok)
Type (Ngalan field: enumeration {salamin, rMirrorSource, rMirrorDestination}	Tinubdan sa RMirror (Kini ang gigikanan sa usa ka layo nga sesyon sa salamin
VLAN ID (Ngalan field: uint16_t)	200 (ang vlan nga gigamit sa pagsalamin)
Reflector Port (Ngalan field: vtss_ifindex_t)	Gi 1/1 (Ang pantalan diin ang gisalamin nga trapiko gipadala

• Ang myDynamicTable.addRows() mag-convert sa JSON data ngadto sa HTML format ug magpagawas sa HTML table.

1. function addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Wala", none_interface_text = "WALA";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {mga uma:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=" + key, key]},
7. {type:”text”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “salamin” ? "-":
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. balik nga laray;
13. }
14. function addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = bag-ong Array();
18. // Idugang ang ulohan sa lamesa
19. addHeader(table_rows);
20. // Idugang ang usa ka laray
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. ibalik ang table_rows;
25. }

Web panid sa tabang
Alang sa web disenyo sa panid sa tabang, ang deskripsyon sa tabang mahimong magtumong sa espesipikasyon sa JSON, nga ang teksto sa deskripsyon mahimong mahiuyon sa output sa JSON ug makatabang sa pagpakunhod sa sobra nga mga paghulagway. Example dinhi gikuha gikan sa dhcp6 relay configuration.

Hyper-link sa tinubdan file
I-assign ang tabang file lokasyon sa gigikanan niini file HTML tag. Ang fixed variable nga ngalan nga "help_page" gigamit para sa web tabang page assignment.

2. // Tabang sa panid nga magic
3. var help_page = "/help/help_xxx.htm";

Pag-update sa paghulagway sa uma sa HTML gikan sa detalye sa JSON

• Paggamit o HTML tag aron ideklara ang HTML nga paghulagway sa lamesa ug gihatagan ug talagsaon nga ID para sa tag.
• Kung andam na ang HTML nga dokumento, tawga ang loadXMLDoc() aron makuha ang tibuok JSON nga espesipikasyon o makuha ang espesipikong pamaagi nga paghulagway pinaagi sa ngalan sa JSON nga pamaagi nga "jsonRpc.status.introspection.specific.inventory.get".
• Ang processTableDesc() gigamit sa pag-update sa deskripsyon sa lamesa ug processUpdate() gigamit sa pag-update sa deskripsyon sa parameter sa lamesa.
• Sa processUpdate(), tawga ang updateTableParamsDesc() para i-update ang mga elemento sa JSON nga gipares sa espesipikong mga ngalan sa elemento.
• I-update ang o tag sulod nga HTML sumala sa paghulagway sa elemento.

2. /* I-update ang mga natad sa paghulagway sa HTML */
3. function processTableDesc(req) {
4. kon (!req.responseText) {
5. pagbalik;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Pag-update sa paghulagway sa lamesa
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).deskripsyon;
10. }
11. /* I-update ang HTML table parameter description */
12. function processUpdate(recv_json) {
13. // Pag-update sa paghulagway sa parameter sa lamesa
14. var param_names = [
15. {
16. "alias": "Interface",
17. "type": "vtss_ifindex_t",
18. "ngalan": "vlanInterface",
19. "suffix": "."
20. },
21. {
22. "alias": "Relay Interface",
23. "type": "vtss_ifindex_t",
24. "ngalan": "relayVlanInterface",
25. "suffix": ". Ang id sa interface nga gigamit sa pag-relay.”
26. },
27. {
28. “alias”: “Relay Destination”,
29. "type": "mesa_ipv6_t",
30. "ngalan": "relay_destination",
31. "suffix": ". Ang IPv6 nga adres sa DHCPv6 server nga gihangyo kinahanglan i-relay. Ang default value nga 'ff05::1:3' mans 'bisan unsang DHCP server'."
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Pagkuha og JSON specification */
37. window.addEvent('domready', function () {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyper-link sa menu bar

• Ang HTML source code sa menu bar namugna gikan sa file webstax2\vtss_appl\web\ menu_default.cxx.
• I-edit ang mga butang niini file para sa Web panid hyper-link.

1. #kon gipasabot(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Matikdi nga ang gidaghanon sa space character sa ITEM(“”), nga gigamit sa pagdesisyon sa lebel sa grupo sa menu bar. Sa kini nga kaso, ang tanan web Ang mga panid ubos sa grupo nga "DHCPv6".

Hulagway 6. Example sa global configured nga lamesa

Apendise

Kasagaran web mga panid

Adunay pipila ka mga tipikal web mahimong gamiton ang mga panid alang sa disenyo sa pakisayran. Usa ka dugang nga exampAng ipakita dinhi mao ang configuration sa usa ka sesyon sa salamin nga makita sa vtss_appl\mirror\html\mirror.htm.
Ang web Ang panid naghatag sa detalyado nga pag-configure alang sa usa ka sesyon sa salamin. Ang tanan nga gi-configure nga mga parameter gilista.

• I-klik ang "Save" nga buton aron magamit ang kasamtangan nga configuration.
• I-klik ang "Reset" nga buton aron i-reset ang kasamtangan nga configuration.
• I-klik ang "Cancel" aron mobalik sa ibabawview sa mga sesyon sa salamin

Mirror&RMirror Configuration

Mga Setting sa Kalibutan

Tinubdan nga VLAN(s) Configuration

Pag-configure sa Port

Hulagway 7. Example sa detalyado nga pag-configure sa sesyon sa salamin
Ang mga buton nga "Save", "Reset" ug "Cancel" gidugang sa html code:

JSON Command flow
Kini nga panid nanginahanglan usa ka duha ka lakang nga dagan sa mando:

• Una kinahanglan nga makuha ang mga kapabilidad sa aparato gamit ang pamaagi nga "mirror.capabilities.get". Ang mga kapabilidad dili mausab ug kinahanglan nga basahon lamang kausa.
• Dayon kinahanglan nga makuha ang kasamtangan nga configuration sa device gamit ang mga pamaagi nga "mirror.config.session.get", "port.status.get" ug sa kaso sa stacking "topo.config.stacking.get".

Ang tawag sa "mirror.capabilities.get" gisugdan sa "domready" nga panghitabo ug ang resulta gi-configure aron madumala sa function requestUpdate.
Ang requestUpdate magsugod sa tawag sa "mirror.config.session.get",
"port.status.get" ug sa kaso sa stacking "topo.config.stacking.get" ug ang mga resulta niini nga mga tawag gi-configure aron madumala sa function prepareUpdate.
Ang function prepareUpdate mokolekta sa tanan nga mga resulta, ug lamang sa diha nga ang tanan nadawat nga kini motawag sa function processUpdate nga magtukod sa mga lamesa nga ipakita sa web.

Mga pakisayran

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

Mga Dokumento / Mga Kapanguhaan

Microsemi AN1256 Web Aplikasyon sa mga Programmer [pdf] Giya sa Gumagamit AN1256, AN1256 Web Aplikasyon sa mga Programmer, Web Aplikasyon sa mga Programmer, Aplikasyon

Mga pakisayran

• Manwal sa Gumagamit