Micrimhilseogra AN1256 Web Iarratas Ríomhchláraitheoirí

Réamhrá

Is caighdeán oscailte é JSON (Notaireacht Oibiachta JavaScript). file formáid a úsáideann téacs inléite ag an duine chun sonraí a mhalartú. Is formáid sonraí coitianta é a úsáidtear le haghaidh cumarsáide asincrónach brabhsálaí/freastalaí.
Don nua web dearadh leathanach, is féidir formáid JSON a athsholáthar don bhunstíl AJAX. Déan comparáid le AJAX, ag baint úsáide as JSON déanann an Web cur i bhfeidhm níos éasca agus níos simplí. Ní gá ach díriú ar an bhforbróir web dearadh leathanaigh agus an Web is féidir feidhmiú láimhseálaí a fhágáil ar lár ós rud é go dtacaítear le modh rochtana JSON i ngach ceann acu cheana féin WebModúil bogearraí StaX.
Sonraíonn an doiciméad seo an treoir ríomhchláraitheoirí don innealtóir bogearraí ar gá dóibh forbairt a dhéanamh ar an Web leathanach trí JSON. Na nósanna imeachta mionsonraithe agus seanampníos lú san áireamh freisin sna hailt seo a leanas.

Sreabhadh rochtana sonraí JSON

Tharview
Seo é an sreabhadh rochtana sonraí JSON a thionscnaítear nasc HTTP ón gcliant (brabhsálaí). Cruthaítear an tábla HTML go dinimiciúil de réir na sonraí JOSN a fuarthas ó thaobh an fhreastalaí (DUT).

Fíor 1 . An sreabhadh rochtana idir cliant agus freastalaí

Sonraí Iarratas/Freagra JSON
Tá paicéad iarratais JSON bunaithe ar mhodh postála iarratais HTTP agus caithfidh an t-inneachar formáid MSCC JSON a leanúint.

• Iarr comhréir JSON:{"modh":" ”,”paraimeanna”:[ ], “id:” jsonrpc ”}
• Comhréir JSON Freagra: {"earráid": , “toradh”: , “id:" jsonrpc"}

Taispeánann na pictiúir seo a leanas an t-ábhar JSON idir an brabhsálaí agus DUT.

Fíor 2 . Léiriú ar iarratas HTTP ón gcliant

Fíor 3 . Pictiúr den fhreagra HTTP ón bhfreastalaí

Sonraíocht MSCC JSON
Chun an fhaisnéis iomlán JSON a fháil lena n-áirítear an modh, an paraiméadar, an cur síos agus araile. Cineál “http:// / json_spec” ar bharra seoltaí do bhrabhsálaí. Tá modh rochtana eile ann trí ainm modh JSON “jsonRpc.status.introspection.specific.inventory.get”, úsáidtear é le haghaidh modh ar leith.

Fíor 4 . Léiriú ar shonraíocht JSON web leathanach

Web creatlach

Tá an Web creat i WebTá bogearraí StaX bunaithe ar fhoinse oscailte MooTools. Is bailiúchán d’fhóntais JavaScript é le ceadúnas MIT. (http://mootools.net/license.txt) an barra roghchláir agus an chuid is mó de web tá na leathanaigh bunaithe ar an gcreat. Tá algartam AJAX agus JSON araon comhtháite ina chuid fóntais cheana féin.
Thairis sin, WebSoláthraíonn bogearraí StaX na fóntais eile atá úsáideach don JSON web dearadh leathanaigh.

• json.js - Úsáid chun na sonraí dinimiciúla a tharchur/a fháil le comhréir JSON.
• dynforms.js - Bain úsáid as chun an tábla HTML a chruthú go dinimiciúil.
• bailíochtaigh.js - Úsáid chun foirm HTML a bhailíochtú.

Tá na leabharlanna JavaScript iomlána lonnaithe faoin eolaire crann foinse: webstax2\vtss_appl\web\html\lib.

Treoirlíne do JSON Web dearadh leathanaigh

Treoraíonn an rannán seo conas dearadh a web leathanach bunaithe ar leabharlanna MSCC JavaScript. Bainimid úsáid as an Mirror domhanda cumraithe web leathanach mar an seanample anseo. Tá an chumarsáid asincrónach bunaithe ar mhodh rochtana HTTP JSON agus tá gach paraiméadair cumraithe domhanda liostaithe i dtábla HTML dinimiciúil amháin.
Tá an web Tá leagan amach an leathanaigh liostaithe thíos agus tá an cód foinse iomlán suite faoin eolaire crann foinse: webstax2\vtss_appl\scáthán\html\scáthán_ctrl.htm. Chun a fháil níos tipiciúil web tagairt leathanaigh, féach an t-alt aguisín.

Scáthán& Tábla Cumraíochta Scátháin

Fíor 5 . Example of global configured table

Cuir in eagar Web leathanach

Ceanntásc HTML
Cuir na leabharlanna JS a raibh gá leo san HTML tag.

Tosaigh an acmhainn tábla dinimiciúil

• Nuair a bhíonn an doiciméad HTML réidh, cuir glaoch ar DynamicTable() chun an acmhainn tábla dinimiciúil a thúsú.
• Úsáidtear an DynamicTable() chun an tábla dinimiciúil a chruthú tar éis na sonraí JSON a fháil.
• Glaofaidh sé ar requestUpdate ansin chun an sreabhadh ordaithe JSON a thionscnamh.

1. window.addEvent('domready', feidhm() {
2. // Cruthaigh foirm le corp tábla chun sonraí JSON a fháil/a tharchur
3. myDynamicTable = DinimicTable nua (“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. iarr Nuashonrú();
5. });

Sonraí Iarratas/Freagra JSON

• Nuair atá an doiciméad HTML réidh, bain úsáid as requestJsonDoc() chun an t-iarratas JSON “mirror.config.session.get” a sheoladh chun faisnéis a fháil faoi na seisiúin chumraithe.
• Tar éis na sonraí JSON le haghaidh “mirror.capabilities.get” a fháil, próiseálfar an fheidhm aisghlao requestUpdate(). Glaofaidh “mirror.config.session.get” ar an bhfeidhm requestUpdate chun an chumraíocht reatha a fháil. Nuair a fhaightear an chumraíocht reatha, glaoitear an function processUpdate chun an tábla atá le taispeáint a thógáil.

1. iarratas feidhme Nuashonrú()
2. {
3. // Athchóirigh ábhar tábla
4. myDynamicTable.restore();
   5
5. // Dhá shonraí JSON sa tábla seo.
6. requestJsonDoc (“scáthán.config.session.get”, null, processUpdate, “config”);
7. }

Próiseáil na sonraí JSON a fuarthas

• Úsáidtear an fheidhm processUpdate() chun an tábla dinimiciúil a leagan amach tar éis na sonraí JSON a fháil.
• Úsáidtear an addRows() chun sraitheanna tábla a chur leis. myDynamicTable.update() leagan amach an
  Tábla HTML de réir na sonraí sna sraitheanna tábla.

1. Uasdátú próisis feidhme(recv_json, ainm)
2. {
3. // Déan neamhaird den phróiseas mura bhfaightear aon sonraí
4. má (! recv_json) {
5. foláireamh (“Faigh theip ar shonraí dinimiciúla.”);
6. filleadh ;
7. }
8. // Sábháil na sonraí JSON a fuarthas
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Cuir sraitheanna tábla leis
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Nuashonraigh an tábla dinimiciúil seo
15. myDynamicTable.update();
17. // uaineadóir athnuachan
18. var autorefresh = document.getElementById(“autorefresh”);
19. más rud é (autorefresh && autorefresh.checked) {
20. más rud é (timerID) {
21. ClearTime Out(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Cuir sraitheanna tábla leis

• San fheidhm addRows(), úsáidimid an fhormáid JSON chun gach paraiméadar cumraithe domhanda sa tsraith tábla a líonadh.
• Tá na réimsí HTML go léir liostaithe san eagar JSON (“table_rows”) agus tá comhréir an réimse tábla thíos.

Comhréir:
tábla_sraitheanna:[ , , … ] : { , , … }
: {"cineál": , “paraimeanna”:[ , , …, ]}

• Sa chás seo, tá cúig réimse ag gach sraith: “Aitheantas an tSeisiúin”, “Mód”, “Cineál”, “ID VLAN” agus “Port Frithchaiteoir” Le haghaidh sean.ample,

Aitheantas an tseisiúin (ainm réimse: int32_t)	1 (Aitheantas an tseisiúin scátháin)
Mód (ainm réimse: vtss_bool_t)	fíor (A chiallaíonn go bhfuil an seisiún scátháin cumasaithe)
Cineál (Ainm réimse: áireamh {scáthán, rScáthánSource, rMirrorDestination}	Foinse RMScáthán (is é seo foinse an chiansheisiúin scátháin
ID VLAN (Ainm réimse: uint16_t)	200 (an vlan a úsáidtear le haghaidh scáthánú)
Port Frithchaiteora (Réimse ainm: vtss_ifindex_t)	Gi 1/1 (An calafort a seoltar an trácht scáthánaithe chuige

• Tiontóidh an myDynamicTable.addRows() na sonraí JSON go formáid HTML agus aschuirfear an tábla HTML.

1. feidhm addRow(eochair, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Níl", none_interface_text = "NÍL";
4. var tunnel_mode_suffix = val.TunnelMode == “úsáid dhomhanda” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {réimsí:[
6. {cineál:”nasc”, params:[“cr”, “scáthán.htm?session_id=” + eochair, eochair]},
7. {cineál:”téacs”, paraiméir:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {cineál:”téacs”, paraiméir:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {cineál:"téacs", paraiméir:[val.Type == "scáthán" ? “-“:
   val.RMirrorVlan, “c”]},
10. {cineál:"téacs", paraiméir:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : “-”, , “c”]}
11. ]};
12. sraith fillte;
13. }
14. feidhm addRows(recv_json)
15. {
16. var row, folamh_colspan = 7;
17. var table_rows = Eagar nua();
18. // Cuir ceanntásc leis
19. addHeader(table_rows);
20. // Cuir sraith shingil leis
21. Object.each(recv_json, feidhm(taifead) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. tábla_rows ar ais;
25. }

Web leathanach cabhrach
Chun an web dearadh leathanach cabhrach, is féidir leis an gcur síos cabhrach tagairt do shonraíocht JSON, gur féidir leis an téacs tuairisce a bheith comhsheasmhach le haschur JSON agus go gcuidíonn sé leis na tuairiscí iomarcacha a laghdú. exampTógtar le anseo ó chumraíocht sealaíochta dhcp6.

Hyper-nasc san fhoinse file
Sann an chabhair file suíomh ina fhoinse file HTML tag. Úsáidtear an t-ainm athróg seasta “help_page” le haghaidh an web tasc leathanach cabhrach.

2. // Cabhair draíocht leathanach
3. var help_page = “/help/help_xxx.htm”;

Nuashonraigh cur síos réimse HTML ó shonraíocht JSON

• Úsáid nó HTML tag chun an cur síos tábla HTML a dhearbhú agus aitheantas uathúil tugtha don tag.
• Nuair a bhíonn an doiciméad HTML réidh, cuir glaoch ar loadXMLDoc() chun an tsonraíocht JSON iomlán a fháil nó chun an cur síos ar an modh sonrach a fháil de réir ainm modh JSON “jsonRpc.status.introspection.specific.inventory.get”.
• Úsáidtear an processTableDesc() chun cur síos ar an tábla a nuashonrú agus úsáidtear processUpdate() chun cur síos ar pharaiméadar an tábla a nuashonrú.
• In processUpdate(), cuir glaoch ar updateTableParamsDesc() chun na heilimintí JSON a mheaitseáiltear le hainmneacha na n-eilimintí ar leith a nuashonrú.
• Nuashonraigh an nó tag HTML istigh de réir an tuairisc eiliminte.

2. /* Nuashonraigh réimsí cur síos HTML */
3. feidhm processTableDesc(req) {
4. más rud é (! req.responseText) {
5. filleadh ;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Nuashonraigh cur síos tábla
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).cur síos;
10. }
11. /* Nuashonraigh cur síos ar pharaiméadar tábla HTML */
12. feidhm processUpdate(recv_json) {
13. // Nuashonraigh cur síos paraiméadar tábla
14. var param_names = [
15. {
16. "ailias": "comhéadan",
17. “cineál”: “vtss_ifindex_t”,
18. “ainm”: “vlanInterface”,
19. “iarmhír”: “.”
20. },
21. {
22. "ailias": "Comhéadan Leaschraolacháin",
23. “cineál”: “vtss_ifindex_t”,
24. “ainm”: “relayVlanInterface”,
25. “iarmhír”: “. Aitheantas an chomhéadain a úsáidtear le haghaidh sealaíochta.”
26. },
27. {
28. “ailias”: “Ceann Scríbe Sealaíochta”,
29. “cineál”: “mesa_ipv6_t”,
30. “ainm”: “sealchraoladh_cinn scríbe”,
31. “iarmhír”: “. Seolfar seoladh IPv6 an fhreastalaí DHCPv6 a iarrann sé chuige. Is é an luach réamhshocraithe ‘ff05:: 1: 3’ ná ‘aon fhreastalaí DHCP’.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Faigh sonraíocht JSON */
37. window.addEvent('domready', feidhm () {
38. loadXMLDoc(“/ json_spec”, processTableDesc);
39. requestJsonDoc (“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-nasc sa bharra roghchláir

• Gintear cód foinse HTML an bharra roghchláir ó file webstax2\vtss_appl\web\ menu_default.cxx.
• Cuir na míreanna seo in eagar file le haghaidh an Web hipearnasc leathanaigh.

1. #má shainítear é(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Leaschraolacháin,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NÓTA
Tabhair faoi deara go bhfuil líon na gcarachtar spáis in ITEM(“”), a úsáidtear chun an leibhéal grúpa a shocrú sa bharra roghchláir. Sa chás seo, go léir web tá na leathanaigh faoin ngrúpa “DHCPv6”.

Fíor 6. Example of global configured table

Aguisín

tipiciúil web leathanaigh

Tá roinnt tipiciúil web is féidir leathanaigh a úsáid don dearadh tagartha. Example taispeáint anseo tá cumraíocht seisiún scátháin amháin a aimsítear in vtss_appl\scáthán\html\scáthán.htm.
Tá an web Soláthraíonn leathanach an chumraíocht mhionsonraithe le haghaidh seisiún scátháin amháin. Tá na paraiméadair cumraithe go léir liostaithe.

• Cliceáil an cnaipe "Sábháil" chun an chumraíocht reatha a chur i bhfeidhm.
• Cliceáil ar an gcnaipe "Athshocraigh" chun an chumraíocht reatha a athshocrú.
• Cliceáil "Cealaigh" chun filleadh ar an deireadhview de sheisiúin scátháin

Scáthán&Cumraíocht Scátháin

Socruithe Domhanda

Foinse VLAN(s) Cumraíocht

Cumraíocht Port

Fíor 7 . Example de chumraíocht mhionsonraithe an tseisiúin scátháin
Cuirtear na cnaipí “Sábháil”, “Athshocraigh” agus “Cealaigh” leis an gcód html:

Sreabhadh ordú JSON
Teastaíonn sreabhadh ordaithe dhá chéim ón leathanach seo:

• An Chéad ní mór é a fháil ar na cumais an gléas leis an modh "scáthán.capabilities.get". Ní athraíonn na cumais agus ní gá iad a léamh ach uair amháin.
• Ansin ní mór é a fháil ar an chumraíocht reatha an gléas ag baint úsáide as na modhanna "scáthán.config.session.get", "port.status.get" agus i gcás cruachta "topo.config.stacking.get".

Is é an t-imeacht “domready” a thionscnaíonn an glao “scáthán.capabilities.get” agus tá an toradh cumraithe le láimhseáil ag an bhfeidhm requestUpdate.
Cuirfidh an t-iarratas Nuashonrú tús leis an nglao ar “scáthán.config.session.get”,
“port.status.get” agus i gcás cruachta “topo.config.stacking.get” agus tá torthaí na nglaonna seo cumraithe chun go láimhseálfaidh an fheidhm prepareUpdate.
Baileofar na torthaí go léir leis an bhfeidhm Ullmhaíonn an Nuashonrú, agus go dtí go mbeidh siad go léir faighte ní ghlaofar ar an bróisiúr nuashonraithe feidhme a thógfaidh na táblaí le taispeáint ar an web.

Tagairtí

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

Doiciméid / Acmhainní

Micrimhilseogra AN1256 Web Iarratas Ríomhchláraitheoirí [pdfTreoir Úsáideora AN1256, AN1256 Web Feidhmchlár Ríomhchláraitheoir, Web Ríomhchláraitheoirí Iarratas, Feidhmchlár

Tagairtí

• Lámhleabhar Úsáideora