Saukewa: AN1256 Web Aikace-aikacen masu shirye-shirye

Gabatarwa

JSON (JavaScript Object Notation) buɗaɗɗen mizani ne file tsarin da ke amfani da rubutu mai iya karantawa don musayar bayanai. Sigar bayanai ce ta gama gari da ake amfani da ita don sadarwar mai bincike/sabar sabar asynchronous.
Domin sabuwa web zane na shafi, tsarin JSON na iya zama maye gurbin ainihin salon AJAX. Kwatanta da AJAX, ta yin amfani da JSON yana yin Web aiwatarwa cikin sauki da sauki. Mai haɓakawa kawai yana buƙatar mayar da hankali kan web zanen shafi da kuma Web Ana iya barin aiwatar da mai sarrafa tunda an riga an goyan bayan hanyar samun damar JSON a kowace WebStaX kayan aikin software.
Wannan daftarin aiki ya bayyana jagorar masu shirya shirye-shirye don injiniyan software wanda ke buƙatar haɓakawa Web shafi ta hanyar JSON. Hanyoyin dalla-dalla da kuma examples kuma an haɗa su a cikin sassan masu zuwa.

JSON samun damar bayanai yana gudana

Ƙarsheview
Anan ga hanyar shigar da bayanan JSON wanda haɗin HTTP ke farawa daga abokin ciniki (mai lilo). An ƙirƙiri teburin HTML ɗin da ƙarfi bisa ga bayanan JOSN da aka karɓa daga uwar garken (DUT).

Hoto na 1. Gudun shiga tsakanin abokin ciniki da uwar garken

Nemi/amsa bayanan JSON
Fakitin buƙatar JSON ya dogara ne akan hanyar buƙatun HTTP kuma abun ciki dole ne ya bi tsarin MSCC JSON.

• Nemi JSON syntax:{"hanyar":" "," params":[ ], "id:"jsonrpc"}
• Martani JSON syntax: {"kuskure": "sakamako": , "id:"jsonrpc"}

Hoton hotuna masu zuwa suna nuna abun cikin JSON tsakanin mai lilo da DUT.

Hoto na 2. Hoton buƙatun HTTP daga abokin ciniki

Hoto na 3. Hoton martanin HTTP daga uwar garken

MSCC JSON bayani dalla-dalla
Don samun cikakken bayanin JSON gami da hanyar, siga, kwatance da sauransu. Rubuta “http:// /json_spec" akan adireshin adireshin burauzar ku. Akwai wata hanyar samun dama ta hanyar hanyar JSON suna "jsonRpc.status.introspection.specific.inventory.get", ana amfani da ita don takamaiman hanya.

Hoto na 4. Hoton ƙayyadaddun JSON web shafi

Web tsarin aiki

The Web tsarin cikin WebSoftware na StaX ya dogara ne akan buɗaɗɗen tushen MooTools. Tarin kayan aikin JavaScript ne tare da lasisin MIT. (http://mootools.net/license.txt) Menu bar kuma mafi yawan web shafuka sun dogara ne akan tsarin. Dukansu AJAX da JSON algorithm an riga an haɗa su cikin kayan aikin sa.
Bayan haka, WebSoftware na StaX yana ba da sauran abubuwan amfani waɗanda ke da amfani ga JSON web zanen shafi.

• json.js - Yi amfani da don watsa/karɓan bayanai masu ƙarfi tare da haɗin gwiwar JSON.
• dynforms.js - Yi amfani da ƙirƙira teburin HTML a hankali.
• tabbatar.js - Yi amfani don tabbatar da sigar HTML.

Cikakkun dakunan karatu na JavaScript suna ƙarƙashin tushen tushen directory: webstax2 \ vtss_appl \web\html\lib.

Jagora ga JSON Web zanen shafi

Wannan sashe yana jagorantar yadda ake zana a web shafi bisa dakunan karatu na JavaScript na MSCC. Muna amfani da Mirror duniya da aka saita web shafi a matsayin exampku nan. Sadarwar asynchronous ta dogara ne akan hanyar shiga HTTP JSON kuma an jera duk sigogin da aka tsara na duniya a cikin tebur HTML ɗaya mai ƙarfi.
The web An jera shimfidar shafi a ƙasa kuma cikakken lambar tushe tana ƙarƙashin tushen tushen bishiyar: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Don samun ƙarin al'ada web bayanin shafi, duba sashin shafi.

Teburin Ƙimar Madubi& RMirror

Hoto na 5. Example na duniya daidaita tebur

Gyara Web shafi

HTML header
Haɗa dakunan karatu na JS waɗanda ake buƙata a cikin HTML tag.

Fara albarkatun tebur mai ƙarfi

• Lokacin da takaddar HTML ta shirya, kira DynamicTable() don fara albarkatun tebur mai ƙarfi.
• Ana amfani da DynamicTable() don ƙirƙirar tebur mai ƙarfi bayan an karɓi bayanan JSON.
• Sannan zai kira requestUpdate don fara kwararar umarnin JSON.

1. window.addEvent ('domready', aiki() {
2. // Ƙirƙiri fom tare da jikin tebur don karɓa/ watsa bayanan JSON
3. myDynamicTable = sabon DynamicTable ("myTableContent", "config","daRowCtrlBar");
   4
4. requestUpdate ();
5. });

Nemi/amsa bayanan JSON

• Lokacin da takaddun HTML ya shirya, yi amfani da requestJsonDoc() don aika buƙatar JSON "mirror.config.session.get" don samun bayani game da abubuwan da aka tsara.
• Bayan an karɓi bayanan JSON na “mirror.capabilities.get”, za a aiwatar da buƙatar aikin sake kiraUpdate(). Aiki requestUpdate daga nan zai kira "mirror.config.session.get" don samun daidaitawar halin yanzu. Lokacin da aka karɓi saitin na yanzu, ana kiran tsarin aikinUpdate don gina teburin da za a nuna.

1. Neman aikiUpdate()
2. {
3. // Mayar da abun ciki na tebur
4. myDynamicTable.restore();
   5
5. // Wannan tebur biyu JSON bayanai.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Gudanar da bayanan JSON da aka karɓa

• Ana amfani da tsarin aikinUpdate() don tsara tebur mai ƙarfi bayan an karɓi bayanan JSON.
• Ana amfani da addRows() don ƙara layuka na tebur. myDynamicTable.update() tsara tsarin
  Teburin HTML bisa ga bayanan da ke cikin layuka na tebur.

1. Tsarin aikiUpdate (recv_json, suna)
2. {
3. // Yi watsi da tsarin idan ba a karɓi bayanai ba
4. idan (!recv_json) {
5. faɗakarwa ("Samu ƙwaƙƙwaran bayanai sun kasa.");
6. dawowa;
7. }
8. // Ajiye bayanan JSON da aka karɓa
9. myDynamicTable.saveRecvJson ("config", recv_json);
10. // Ƙara layuka na tebur
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(tebur_rows);
14. // Sabunta wannan tebur mai ƙarfi
15. myDynamicTable.update();
17. // Sabunta mai ƙidayar lokaci
18. var autorefresh = document.getElementById("autorefresh");
19. idan (autorefresh && autorefresh.checked) {
20. idan (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = saitaTimeout ('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Ƙara layuka na tebur

• A cikin aikin addRows(), muna amfani da tsarin JSON don cika kowace siga da aka daidaita ta duniya a cikin jeren tebur.
• Ana jera dukkan filayen HTML a cikin tsararrun JSON ("tabura_rows") kuma tsarin layin tebur yana ƙasa.

Daidaitawa:
layuka:[ , ,… ] : { , ,… }
: {"nau'i": , "params":[ , ,…, ]}

• A wannan yanayin, kowane layi yana da filayen biyar: "ID ɗin Zama", "Yanayin", "Nau'i", "VLAN ID" da "Port Reflector" For ex.ample,

ID na Zama (Filin suna: int32_t)	1 (Id na zaman madubi)
Yanayin (Filin suna: vtss_bool_t)	gaskiya (Ma'ana an kunna zaman madubi)
Nau'in (Filin suna: ƙidaya {mirror, rMirrorSource, rMirrorDestination}	RMirror Source (wannan shine tushen zaman madubi mai nisa
VLAN ID (Filin suna: uint16_t)	200 (Vlan da ake amfani da shi don mirroring)
Port Reflector (Filin suna: vtss_ifindex_t)	Gi 1/1 (Tashar tashar da ake aika zirga-zirgar madubi zuwa gare ta

• MyDynamicTable.addRows() zai canza bayanan JSON zuwa tsarin HTML kuma ya fitar da teburin HTML.

1. aikin addRow (maɓalli, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Babu", babu_interface_text = "BABU";
4. var tunnel_mode_suffix = val.TunnelMode == "amfani duniya" ? " (" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
5. var jere = {filaye:[
6. {nau'in:”mahaɗi”, params:[“cr”, “mirror.htm?session_id=” + key, key]},
7. {nau'in:”rubutu”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {nau'in:”rubutu”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {nau'in:”rubutu”, params:[val.Type == “ madubi” ? "-":
   val.RMirrorVlan, “c”]},
10. {nau'in:”rubutu”, params:[val.Type == “rMirrorSource”?
    val.ReflectorPort: "-" , "c"]}
11. ]};
12. layin dawowa;
13. }
14. aikin addRows (recv_json)
15. {
16. var jere, empty_colspan = 7;
17. var table_rows = sabon Array();
18. // Ƙara taken tebur
19. addHeader (tebur_rows);
20. // Ƙara jere guda ɗaya
21. Object.each (recv_json, aiki (rikodi) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. dawo da layuka;
25. }

Web shafin taimako
Domin web ƙirar shafi na taimako, bayanin taimako na iya komawa zuwa ƙayyadaddun JSON, cewa rubutun bayanin zai iya dacewa da fitowar JSON kuma yana taimakawa wajen rage yawan kwatancen. Example nan an ɗauko daga dhcp6 relay sanyi.

Hyper-link a cikin tushen file
Sanya taimako file wuri a cikin tushensa file HTML tag. Ana amfani da ƙayyadadden sunan mai suna "help_page" don web aikin shafi na taimako.

2. // Taimakon shafin sihiri
3. var help_page = "/help/help_xxx.htm";

Sabunta bayanin filin HTML daga ƙayyadaddun JSON

• Amfani ko HTML tag don bayyana bayanin tebur na HTML kuma an ba da ID na musamman don tag.
• Lokacin da takaddun HTML ya shirya, kira loadXMLDoc() don samun cikakken bayanin JSON ko samun takamaiman hanyar hanyar sunan hanyar JSON "jsonRpc.status.introspection.specific.inventory.get".
• Ana amfani da tsarinTableDesc() don sabunta bayanin tebur kuma ana amfani da tsariUpdate() don sabunta bayanin sigar tebur.
• A cikin tsariUpdate(), kira updateTableParamsDesc() don sabunta abubuwan JSON waɗanda suka dace da takamaiman sunaye.
• Sabunta da ko tag HTML na ciki bisa ga bayanin kashi.

2. /* Sabunta filayen bayanin HTML */
3. aikin aikiTableDesc(req) {
4. idan (!req.responseText) {
5. dawowa;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Sabunta bayanin tebur
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "kungiyoyi", "dhcp6_relay.config.vlan").bayani;
10. }
11. /* Sabunta bayanin ma'aunin tebur na HTML */
12. Tsarin aikiUpdate(recv_json) {
13. // Sabunta bayanin siga na tebur
14. var param_names = [
15. {
16. "alias": "Interface",
17. "nau'i": "vtss_ifindex_t",
18. "name": "vlanInterface",
19. "suffix": "."
20. },
21. {
22. "alias": "Interface Relay",
23. "nau'i": "vtss_ifindex_t",
24. "suna": "relayVlanInterface",
25. "suffix": ". Id na mahaɗin da aka yi amfani da shi don relaying."
26. },
27. {
28. "alias": "Manufar Relay",
29. "nau'i": "mesa_ipv6_t",
30. "name": "relay_destination",
31. "suffix": ". Adireshin IPv6 na uwar garken DHCPv6 wanda buƙatun za a aika zuwa gare shi. Tsohuwar ƙimar 'ff05 :: 1: 3' tana nufin 'kowane uwar garken DHCP'.
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Samu takamaiman JSON */
37. window.addEvent ('domready', aiki () {
38. loadXMLDoc ("/ json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", tsariUpdate);
40. });

Hyper-link a cikin mashaya menu

• An samar da lambar tushen HTML na mashaya menu daga file webstax2 \vtss_appl\web\ menu_default.cxx.
• Gyara abubuwan da ke cikin wannan file domin Web shafi hyper-link.

1. #idan an ayyana(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(" Relay,dhcp6_relay.htm");
3. # karshen //VTSS_SW_OPTION_DHCP6_RELAY

NOTE
Lura cewa adadin haruffan sarari a cikin ITEM(""), wanda ake amfani da shi don yanke shawarar matakin rukuni a mashaya menu. A wannan yanayin, duk web shafuka suna ƙarƙashin rukunin "DHCPv6".

Hoto 6. Example na duniya daidaita tebur

Karin bayani

Na al'ada web shafuka

Akwai da yawa na al'ada web Ana iya amfani da shafuka don ƙirar tunani. Ɗayan ƙarin exampda za a nuna anan shine tsarin zaman madubi daya da aka samu a vtss_applmirror\htmlmirror.htm.
The web shafi yana ba da cikakken tsari don zaman madubi guda ɗaya. An jera duk sigogin da aka tsara.

• Danna maɓallin "Ajiye" don amfani da tsarin na yanzu.
• Danna maballin "Sake saitin" don sake saita saitin na yanzu.
• Danna "Cancel" don komawa kan abin da ke faruwaview na zaman madubi

Kanfigareshan madubi&RMirror

Saitunan Duniya

Tushen VLAN(s) Kanfigareshan

Kanfigareshan tashar jiragen ruwa

Hoto na 7. Example na cikakken sanyi na zaman madubi
Maɓallan "Ajiye", "Sake saitin" da "Cancel" ana ƙara su ta hanyar lambar HTML:

JSON Command ya kwarara
Wannan shafin yana buƙatar kwararar umarni mataki biyu:

• Da farko yana buƙatar samun damar na'urar tare da hanyar "mirror.capabilities.get". Ƙarfin ba sa canzawa kuma dole ne a karanta sau ɗaya kawai.
• Sannan yana buƙatar samun tsarin na'urar a halin yanzu ta amfani da hanyoyin "mirror.config.session.get", "port.status.get" da kuma idan akwai stacking "topo.config.stacking.get".

Kiran "mirror.capabilities.get" an ƙaddamar da shi ta wurin taron "domready" kuma an saita sakamakon don aiwatar da aikin buƙatunUpdate.
BuƙatunUpdate zai fara kiran “mirror.config.session.get”,
"port.status.get" da kuma idan akwai stacking "topo.config.stacking.get" da kuma sakamakon wadannan kira da aka saita don gudanar da aikin preparedUpdate.
Aikin da aka shiryaUpdate zai tattara duk sakamakon, kuma lokacin da aka karɓi duka kawai zai kira aikin aiwatarwaUpdate wanda zai gina teburin da za a nuna akan web.

Magana

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

Takardu / Albarkatu

Saukewa: AN1256 Web Aikace-aikacen masu shirye-shirye [pdf] Jagorar mai amfani AN1256, AN1256 Web Aikace-aikacen Programmers, Web Aikace-aikacen Programmers, Application

Magana

• Manual mai amfani