Microsemi AN1256 Web Aplikasi Programmer

Bubuka

JSON (JavaScript Object Notation) mangrupikeun standar terbuka file format anu ngagunakeun téks nu bisa dibaca manusa pikeun tukeur data. Ieu mangrupikeun format data umum anu dianggo pikeun komunikasi browser/server asinkron.
Pikeun nu anyar web desain kaca, format JSON bisa jadi gaganti pikeun gaya AJAX aslina. Bandingkeun AJAX, ngagunakeun JSON ngajadikeun Web palaksanaan leuwih gampang jeung basajan. Pangembang ngan ukur kedah difokuskeun web desain kaca jeung Web palaksanaan Handler bisa disingkahkeun saprak metoda aksés JSON geus dirojong di unggal Webmodul software StaX.
Dokumén ieu nyatakeun pituduh programer pikeun insinyur parangkat lunak anu kedah ngembangkeun éta Web kaca via JSON. Prosedur rinci jeung examples ogé kaasup dina bagian handap.

aliran aksés data JSON

Leuwihview
Ieu mangrupikeun aliran aksés data JSON anu sambungan HTTP dimimitian tina klien (browser). Tabel HTML dijieun dinamis nurutkeun data JOSN narima ti sisi server(DUT).

Gambar 1. Aliran aksés antara klien sareng server

Paménta / Tanggapan data JSON
Paket pamundut JSON dumasar kana metode pos pamundut HTTP sareng eusina kedah nuturkeun format MSCC JSON.

• Menta sintaksis JSON:{"metoda":" ","params":[ ], "id:"jsonrpc"}
• Tanggapan sintaksis JSON: {"kasalahan": "hasil": , "id:"jsonrpc"}

Gambar di handap ieu nunjukkeun eusi JSON antara browser sareng DUT.

Gambar 2. Snapshot pamundut HTTP ti klien

Gambar 3. Snapshot tina respon HTTP ti server

MSCC JSON spésifikasi
Pikeun meunangkeun inpo JSON lengkep kaasup métode, parameter, déskripsi jeung sajabana Ketik "http: // /json_spec" dina palang alamat browser anjeun. Aya metoda aksés sejen via ngaran metoda JSON "jsonRpc.status.introspection.specific.inventory.get", dipaké pikeun metoda husus.

Gambar 4. Snapshot spésifikasi JSON web kaca

Web kerangka

The Web kerangka di WebParangkat lunak StaX dumasar kana sumber terbuka MooTools. Éta mangrupikeun kumpulan utilitas JavaScript sareng lisénsi MIT. (http://mootools.net/license.txt) Bar menu jeung lolobana web kaca dumasar kana kerangka. Duanana algoritma AJAX sareng JSON parantos terintegrasi dina utilitasna.
Salian ti éta, WebParangkat lunak StaX nyayogikeun utilitas sanés anu kapaké pikeun JSON web desain kaca.

• json.js – Anggo pikeun ngirimkeun / nampi data dinamis sareng sintaksis JSON.
• dynforms.js – Paké pikeun nyieun tabel HTML dinamis.
• validate.js - Paké pikeun validasi formulir HTML.

Perpustakaan JavaScript lengkep aya di handapeun diréktori tangkal sumber: webstax2\ vtss_appl\web\html\lib.

Guideline pikeun JSON Web desain kaca

bagian ieu pituduh kumaha mendesain a web kaca dumasar kana MSCC JavaScript perpustakaan. Kami nganggo Eunteung global ngonpigurasi web kaca salaku example dieu. Komunikasi asynchronous dumasar kana métode aksés HTTP JSON jeung sakabéh parameter ngonpigurasi global didaptarkeun dina hiji tabel HTML dinamis.
The web perenah halaman dibéréndélkeun di handap sarta kode sumber lengkepna aya di handapeun diréktori tangkal sumber: webstax2 \ vtss_appl \ eunteung \ html \ mirror_ctrl.htm. Pikeun meunang leuwih has web rujukan kaca, tingali bagian lampiran.

Eunteung & RMirror Confiquration Table

Gambar 5. Example tina tabel ngonpigurasi global

Édit Web kaca

lulugu HTML
Kalebet perpustakaan JS anu diperyogikeun dina HTML tag.

Initialize sumberdaya tabel dinamis

• Nalika dokumen HTML geus siap, nelepon DynamicTable () pikeun initialize sumberdaya tabel dinamis.
• DynamicTable () dipaké pikeun nyieun tabel dinamis sanggeus narima data JSON.
• Ieu lajeng bakal nelepon requestUpdate mun initiate aliran paréntah JSON.

1. window.addEvent ( 'domready', fungsi () {
2. // Jieun formulir kalawan awak tabel pikeun narima / ngirimkeun data JSON
3. myDynamicTable = DynamicTable anyar ("myTableContent", "config", "plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Paménta / Tanggapan data JSON

• Nalika dokumen HTML geus siap, make requestJsonDoc () pikeun ngirim pamundut JSON "mirror.config.session.get" pikeun meunangkeun informasi ngeunaan sesi ngonpigurasi.
• Saatos data JSON pikeun "mirror.capabilities.get" nampi, fungsi callback requestUpdate () bakal diolah. Fungsi requestUpdate lajeng bakal nelepon "mirror.config.session.get" pikeun meunangkeun konfigurasi ayeuna. Nalika konfigurasi ayeuna narima, disebut fungsi processUpdate ngawangun tabel pikeun dipintonkeun.

1. fungsi requestUpdate()
2. {
3. // Mulangkeun eusi méja
4. myDynamicTable.restore ();
   5
5. // Ieu tabel dua data JSON.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Ngolah data JSON anu ditampi

• Fungsi processUpdate () dipaké pikeun perenah tabel dinamis sanggeus narima data JSON.
• AddRows () dipaké pikeun nambahkeun baris tabel. myDynamicTable.update () perenah nu
  tabél HTML nurutkeun data dina baris tabel.

1. fungsi processUpdate(recv_json, ngaran)
2. {
3. // Malire prosés lamun euweuh data narima
4. lamun (!recv_json) {
5. ngageter ("Kéngingkeun data dinamis gagal.");
6. mulang;
7. }
8. // Simpen data JSON anu ditampi
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Tambahkeun baris tabel
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Apdet tabel dinamis ieu
15. myDynamicTable.update ();
17. // Refresh timer
18. var autorefresh = document.getElementById("autorefresh");
19. lamun (autorefresh && autorefresh.checked) {
20. lamun (timerID) {
21. clearTimeout (timerID);
22. }
23. timerID = setTimeout ( 'requestUpdate ()', settingsRefreshInterval ());
24. }
25. }

Tambahkeun baris tabel

• Dina fungsi addRows (), kami nganggo format JSON pikeun ngeusian unggal parameter global ngonpigurasi dina baris tabel.
• Sadaya widang HTML dibéréndélkeun dina Asép Sunandar Sunarya JSON ("table_rows") jeung sintaksis widang tabel di handap.

Sintaksis:
tabel_baris:[ , ,… ] : { , ,… }
: {"tipe": , "params":[ , , …, ]}

• Dina hal ieu, unggal baris boga lima widang: "ID Sesi", "Mode", "Tipe", "ID VLAN" jeung "Port Reflektor" Pikeun ex.ample,

ID sési (Ngaran widang: int32_t)	1 (Id tina sési eunteung)
Modus (Nami widang: vtss_bool_t)	leres (Hartina sési eunteung diaktipkeun)
Tipe (Nami widang: enumeration {eunteung, rMirrorSource, rMirrorDestination}	Sumber RMirror (Ieu sumber sési eunteung jauh
ID VLAN (Ngaran widang: uint16_t)	200 (Vlan dipaké pikeun mirroring)
Port Reflektor (Nami widang: vtss_ifindex_t)	Gi 1/1 (Palabuhan anu dikirimkeun lalu lintas cerminan

• myDynamicTable.addRows () bakal ngarobah data JSON kana format HTML jeung kaluaran tabel HTML.

1. fungsi addRow(konci, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Euweuh", none_interface_text = "Euweuh";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var baris = {widang:[
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 == "mirror" ? "-":
   val.RMirrorVlan, "c"]},
10. {type: "text", params: [val.Type == "rMirrorSource"?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. baris balik;
13. }
14. fungsi addRows(recv_json)
15. {
16. baris var, empty_colspan = 7;
17. var table_rows = Array anyar ();
18. // Tambahkeun lulugu tabel
19. addHeader(table_rows);
20. // Tambahkeun baris tunggal
21. Object.each(recv_json, function(record) {
22. table_rows.push (addRow (record.key, record.val));
23. });
24. balik table_rows;
25. }

Web kaca pitulung
Pikeun web desain kaca pitulung, déskripsi pitulung bisa ningali ka spésifikasi JSON, yén téks déskripsi bisa konsisten kalayan kaluaran JSON tur mantuan pikeun ngurangan déskripsi kaleuleuwihan. Misalample dieu dicokot tina konfigurasi relay dhcp6.

Hyper-link dina sumberna file
Pasihan pitulung file lokasina dina sumberna file HTML tag. Ngaran variabel tetep "help_page" dianggo pikeun web ngerjakeun kaca pitulung.

2. // Pitulung kaca magic
3. var help_page = "/help/help_xxx.htm";

Apdet pedaran widang HTML tina spésifikasi JSON

• Paké atawa HTML tag pikeun ngadéklarasikeun pedaran tabel HTML sarta dibéré ID unik pikeun tag.
• Nalika dokumen HTML geus siap, nelepon loadXMLDoc () pikeun meunangkeun sakabeh spésifikasi JSON atawa meunang pedaran metoda husus ku ngaran metoda JSON "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc () dipaké pikeun ngapdet pedaran tabel sarta processUpdate () dipaké pikeun ngapdet pedaran parameter tabel.
• Dina processUpdate (), nelepon updateTableParamsDesc () pikeun ngamutahirkeun elemen JSON nu loyog jeung ngaran unsur husus.
• Ngamutahirkeun nu atawa tag HTML jero nurutkeun katerangan unsur.

2. /* Apdet widang déskripsi HTML */
3. fungsi processTableDesc(req) {
4. lamun (!req.responseText) {
5. mulang;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Update pedaran tabel
9. $("TableDesc").innerHTML = getJsonSpecElement (json_spec, "grup", "dhcp6_relay.config.vlan").deskripsi;
10. }
11. /* Apdet pedaran parameter tabel HTML */
12. fungsi processUpdate(recv_json) {
13. // Update pedaran parameter tabel
14. var param_names = [
15. {
16. "alias": "Interface",
17. "tipe": "vtss_ifindex_t",
18. "Ngaran": "vlanInterface",
19. "sufiks": "."
20. },
21. {
22. "alias": "Antarmuka Relay",
23. "tipe": "vtss_ifindex_t",
24. "Ngaran": "relayVlanInterface",
25. "sufiks": ". Id antarbeungeut anu dianggo pikeun ngirimkeun.
26. },
27. {
28. "alias": "Tujuan Relay",
29. "tipe": "mesa_ipv6_t",
30. "ngaran": "relay_destination",
31. "sufiks": ". Alamat IPv6 tina server DHCPv6 anu dipénta bakal dikirimkeun. Nilai standar 'ff05::1:3' mans 'sagala server DHCP'.
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Kéngingkeun spésifikasi JSON */
37. window.addEvent( 'domready', fungsi () {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyper-link dina bar ménu

• Kode sumber HTML bar menu dihasilkeun tina file webstax2\vtss_appl\web\ menu_default.cxx.
• Édit item dina ieu file pikeun Web kaca hyper-link.

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

CATETAN
Perhatikeun yén jumlah karakter spasi dina ITEM (""), nu dipaké pikeun mutuskeun tingkat grup dina bar menu. Dina hal ieu, sadaya web kaca aya dina grup "DHCPv6".

Gambar 6. Kelample tina tabel ngonpigurasi global

Lampiran

has web kaca

Aya sababaraha has web kaca bisa dipaké pikeun desain rujukan. Hiji ex tambahanample janten acara didieu nyaeta konfigurasi tina sési eunteung tunggal kapanggih dina vtss_appl \ eunteung \ html \ mirror.htm.
The web kaca nyadiakeun konfigurasi lengkep pikeun sési eunteung tunggal. Sadaya parameter anu dikonpigurasi didaptarkeun.

• Pencét tombol "Simpen" pikeun nerapkeun konfigurasi ayeuna.
• Pencét tombol "Reset" pikeun ngareset konfigurasi ayeuna.
• Klik "Batalkeun" pikeun mulang ka leuwihview tina sesi eunteung

Eunteung&RMirror Konfigurasi

Setélan Global

Sumber VLAN (s) Konfigurasi

Konfigurasi Port

Gambar 7. Example tina konfigurasi detil tina sési eunteung
Tombol "Simpen", "Reset" jeung "Batal" ditambahkeun ku kode html:

Aliran Komando JSON
Halaman ieu butuh aliran paréntah dua léngkah:

• Kahiji perlu meunang kamampuhan alat jeung métode "mirror.capabilities.get". Kamampuhan henteu robih sareng ngan ukur kedah dibaca sakali.
• Mangka perlu meunang konfigurasi ayeuna alat ngagunakeun métode "mirror.config.session.get", "port.status.get" jeung bisi tina stacking "topo.config.stacking.get".

Telepon "mirror.capabilities.get" diprakarsai ku acara "domready" sareng hasilna dikonpigurasikeun ku fungsi requestUpdate.
RequestUpdate bakal ngamimitian panggero "mirror.config.session.get",
"port.status.get" jeung bisi tina stacking "topo.config.stacking.get" jeung hasil tina panggero ieu ngonpigurasi pikeun diatur ku fungsi prepareUpdate.
Fungsi prepareUpdate bakal ngumpulkeun sakabeh hasil, sarta ngan lamun geus sagala geus narima bakal nelepon fungsi processUpdate nu bakal ngawangun tabel pikeun dipintonkeun dina web.

Rujukan

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

Dokumén / Sumberdaya

Microsemi AN1256 Web Aplikasi Programmer [pdf] Pituduh pamaké AN1256, AN1256 Web Aplikasi Programmer, Web Aplikasi Programmer, Aplikasi

Rujukan

• Manual pamaké