Microsemi-LGOO

Microsemi AN1256 Web Aplikasi Programmer

Microsemi-AN1256-Web-Programmer-Aplikasi-PRO

Pambuka

JSON (JavaScript Object Notation) minangka standar mbukak file format sing nggunakake teks sing bisa diwaca manungsa kanggo ijol-ijolan data. Iki minangka format data umum sing digunakake kanggo komunikasi browser/server asinkron.
Kanggo anyar web desain kaca, format JSON bisa dadi panggantos kanggo gaya AJAX asli. Dibandhingake karo AJAX, nggunakake JSON ndadekake Web implementasine luwih gampang lan prasaja. Pangembang mung kudu fokus web desain kaca lan Web implementasi handler bisa diilangi amarga metode akses JSON wis didhukung ing saben Webmodul piranti lunak StaX.
Dokumen iki nyatakake pandhuan programer kanggo insinyur piranti lunak sing kudu ngembangake Web kaca liwat JSON. Prosedur rinci lan examples uga kalebu ing bagean ngisor.

aliran akses data JSON

Swaraview
Iki minangka aliran akses data JSON sing sambungan HTTP diwiwiti saka klien (browser). Tabel HTML digawe kanthi dinamis miturut data JOSN sing ditampa saka sisih server(DUT).Microsemi-AN1256-Web-Programmer-Aplikasi-Gambar 1

Gambar 1. Aliran akses antarane klien lan server

Panjaluk / Respon data JSON
Paket panyuwunan JSON adhedhasar metode kirim panjalukan HTTP lan konten kudu ngetutake format MSCC JSON.

  • Panjaluk sintaks JSON:{"metode":" ","params":[ ], "id:"jsonrpc"}
  • Tanggapan sintaks JSON: {"kesalahan": "asil": , "id:"jsonrpc"}

Gambar ing ngisor iki nuduhake konten JSON ing antarane browser lan DUT.Microsemi-AN1256-Web-Programmer-Aplikasi-Gambar 2

Gambar 2. Gambar panjalukan HTTP saka klienMicrosemi-AN1256-Web-Programmer-Aplikasi-Gambar 3

Gambar 3. Snapshot respon HTTP saka server

Spesifikasi MSCC JSON
Kanggo entuk informasi JSON lengkap kalebu metode, parameter, deskripsi lan liya-liyane. Ketik "http: // /json_spec" ing bilah alamat browser sampeyan. Ana cara akses liyane liwat jeneng cara JSON "jsonRpc.status.introspection.specific.inventory.get", digunakake kanggo cara tartamtu.Microsemi-AN1256-Web-Programmer-Aplikasi-Gambar 4

Gambar 4. Gambar saka spesifikasi JSON web kaca

Web kerangka

Ing Web kerangka ing WebPiranti lunak StaX adhedhasar MooTools sumber terbuka. Iki minangka koleksi utilitas JavaScript kanthi lisensi MIT. (http://mootools.net/license.txt) Bar menu lan paling saka web kaca adhedhasar framework. Algoritma AJAX lan JSON wis terintegrasi ing utilitas.
Kajaba iku, WebPiranti lunak StaX nyedhiyakake utilitas liyane sing migunani kanggo JSON web desain kaca.

  • json.js – Gunakake kanggo ngirim / nampa data dinamis karo sintaks JSON.
  • dynforms.js – Gunakake kanggo nggawe tabel HTML kanthi dinamis.
  • validate.js – Gunakake kanggo validasi formulir HTML.

Pustaka JavaScript lengkap ana ing sangisore direktori wit sumber: webstax2\ vtss_appl\web\html\lib.

Pedoman kanggo JSON Web desain kaca

Bagean iki nuntun carane ngrancang a web kaca adhedhasar perpustakaan JavaScript MSCC. Kita nggunakake Mirror global diatur web kaca minangka mantanample kene. Komunikasi asinkron adhedhasar metode akses HTTP JSON lan kabeh parameter sing dikonfigurasi global didaftar ing siji tabel HTML dinamis.
Ing web tata letak kaca kapacak ing ngisor iki lan kode sumber lengkap ana ing sangisore direktori wit sumber: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Kanggo entuk luwih khas web referensi kaca, deleng bagean lampiran.

Tabel Konfikurasi Mirror& RMirrorMicrosemi-AN1256-Web-Programmer-Aplikasi-Gambar 5

Gambar 5. Example saka tabel konfigurasi global

Sunting Web kaca

header HTML
Kalebu perpustakaan JS sing dibutuhake ing HTML tag.

Miwiti sumber daya tabel dinamis

  • Nalika document HTML siap, nelpon DynamicTable () kanggo initialize sumber tabel dinamis.
  • DynamicTable () digunakake kanggo nggawe tabel dinamis sawise nampa data JSON.
  • Banjur bakal nelpon requestUpdate kanggo miwiti aliran printah JSON.
  1. window.addEvent('domready', function() {
  2. // Nggawe formulir karo awak meja kanggo nampa / ngirim data JSON
  3. myDynamicTable = new DynamicTable("myTableContent", "config", "plusRowCtrlBar");
    4
  4. requestUpdate();
  5. });

Panjaluk / Respon data JSON

  • Nalika document HTML siap, nggunakake requestJsonDoc () kanggo ngirim request JSON "mirror.config.session.get" kanggo njaluk informasi bab mau diatur.
  • Sawise data JSON kanggo "mirror.capabilities.get" ditampa, requestUpdate fungsi callback () bakal diproses. Fungsi requestUpdate bakal nelpon "mirror.config.session.get" kanggo njaluk konfigurasi saiki. Nalika konfigurasi saiki ditampa, diarani processUpdate fungsi kanggo mbangun tabel sing bakal ditampilake.
  1. fungsi requestUpdate()
  2. {
  3. // Mulihake isi tabel
  4. myDynamicTable.restore();
    5
  5. // Tabel iki loro data JSON.
  6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
  7. }

Proses data JSON sing ditampa

  • Fungsi processUpdate () digunakake kanggo tata letak tabel dinamis sawise nampa data JSON.
  • AddRows () digunakake kanggo nambah baris tabel. myDynamicTable.update () tata letak ing
    Tabel HTML miturut data ing baris tabel.
  1. fungsi processUpdate(recv_json, jeneng)
  2. {
  3. // Nglirwakake proses yen ora ana data sing ditampa
  4. yen (!recv_json) {
  5. alert("Entuk data dinamis gagal.");
  6. bali;
  7. }
  8. // Simpen data JSON sing ditampa
  9. myDynamicTable.saveRecvJson("config", recv_json);
  10. // Tambah baris tabel
  11. var table_rows = addRows(recv_json);
  12. myDynamicTable.addRows(table_rows);
  13. // Nganyari tabel dinamis iki
  14. myDynamicTable.update();
  15. // Refresh timer
  16. var autorefresh = document.getElementById("autorefresh");
  17. yen (autorefresh && autorefresh.checked) {
  18. yen (timerID) {
  19. clearTimeout(timerID);
  20. }
  21. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
  22. }
  23. }

Tambah baris tabel

  • Ing addRows () fungsi, kita nggunakake format JSON kanggo isi saben parameter global diatur ing baris meja.
  • Kabeh kolom HTML kadhaptar ing array JSON ("table_rows") lan sintaks kolom tabel ing ngisor iki.

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

  • Ing kasus iki, saben baris duwe limang kolom: "ID Sesi", "Mode", "Jenis", "ID VLAN" lan "Port Reflektor" Kanggo example,
ID Sesi (Jeneng kolom: int32_t) 1 (Id saka sesi pangilon)
Mode (Jeneng kolom: vtss_bool_t) bener (Tegese sesi pangilon diaktifake)
Jinis (Nama kolom: enumeration

{pangilon, rMirrorSource, rMirrorDestination}

Sumber RMirror (iki sumber sesi pangilon remot
ID VLAN (Jeneng kolom: uint16_t) 200 (vlan sing digunakake kanggo mirroring)
Port Reflektor Kab (Kolom Jeneng: vtss_ifindex_t) Gi 1/1 (Port sing dikirimake lalu lintas cermin
  • myDynamicTable.addRows () bakal ngowahi data JSON menyang format HTML lan output tabel HTML.
  1. fungsi addRow(key, val)
  2. {
  3. var none_map_val = 0xFFFFFFFF, none_map_text = "Ora ana", none_interface_text = "NONE";
  4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
  5. var baris = {kolom:[
  6. {type:”link”, params:[“cr”, “mirror.htm?session_id="+key, key]},
  7. {tipe:”teks”, 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. {jinis:"teks", params: [val.Type == "rMirrorSource"?
    val.ReflectorPort : “-” , “c”]}
  11. ]};
  12. baris bali;
  13. }
  14. fungsi addRows(recv_json)
  15. {
  16. var baris, empty_colspan = 7;
  17. var table_rows = Array anyar ();
  18. // Tambah header tabel
  19. addHeader(table_rows);
  20. // Tambah baris siji
  21. Object.each(recv_json, function(record) {
  22. table_rows.push(addRow(record.key, record.val));
  23. });
  24. bali table_rows;
  25. }

Web kaca bantuan
Kanggo web desain kaca bantuan, katrangan bantuan bisa ngarujuk marang spesifikasi JSON, manawa teks deskripsi bisa konsisten karo output JSON lan mbantu nyuda deskripsi sing berlebihan. Example kene dijupuk saka dhcp6 konfigurasi relay.

Hyper-link ing sumber file
Menehi pitulungan file lokasi ing sumber file HTML tag. Jeneng variabel tetep "help_page" digunakake kanggo web tugas kaca bantuan.

  1. // Help page magic
  2. var help_page = "/help/help_xxx.htm";

Nganyari katrangan lapangan HTML saka spesifikasi JSON

  • Gunakake utawa HTML tag kanggo ngumumake katrangan tabel HTML lan diwenehi ID unik kanggo tag.
  • Nalika dokumen HTML wis siyap, nelpon loadXMLDoc () kanggo njaluk kabeh specification JSON utawa njaluk katrangan cara tartamtu dening jeneng metode JSON "jsonRpc.status.introspection.specific.inventory.get".
  • ProcessTableDesc () digunakake kanggo nganyari gambaran Tabel lan processUpdate () digunakake kanggo nganyari katrangan parameter Tabel.
  • Ing processUpdate (), nelpon updateTableParamsDesc () kanggo nganyari unsur JSON sing cocog karo jeneng unsur tartamtu.
  • Nganyari ing utawa tag HTML batin miturut katrangan unsur.
  1. /* Update kolom deskripsi HTML */
  2. function processTableDesc(req) {
  3. yen (!req.responseText) {
  4. bali;
  5. }
  6. var json_spec = JSON.decode(req.responseText);
  7. // Nganyari katrangan tabel
  8. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "grup", "dhcp6_relay.config.vlan").deskripsi;
  9. }
  10. /* Nganyari katrangan parameter tabel HTML */
  11. function processUpdate(recv_json) {
  12. // Nganyari katrangan parameter tabel
  13. var param_name = [
  14. {
  15. "alias": "Antarmuka",
  16. "jinis": "vtss_ifindex_t",
  17. "jeneng": "vlanInterface",
  18. "sufiks": "."
  19. },
  20. {
  21. "alias": "Antarmuka Relay",
  22. "jinis": "vtss_ifindex_t",
  23. "jeneng": "relayVlanInterface",
  24. "sufiks": ". Id antarmuka sing digunakake kanggo relaying.
  25. },
  26. {
  27. "alias": "Tujuan Relay",
  28. "jinis": "mesa_ipv6_t",
  29. "jeneng": "relay_destination",
  30. "sufiks": ". Alamat IPv6 saka server DHCPv6 sing dijaluk bakal dikirim menyang. Nilai standar 'ff05::1:3' mans 'sembarang server DHCP'.
  31. }
  32. ];
  33. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
  34. }
  35. /* Entuk spesifikasi JSON */
  36. window.addEvent('domready', function() {
  37. loadXMLDoc(“/json_spec”, processTableDesc);
  38. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
  39. });

Hyper-link ing garis menu

  • Kode sumber HTML bar menu digawe saka file webstax2\vtss_appl\web\ menu_default.cxx.
  • Sunting item ing iki file kanggo Web kaca hyper-link.
  1. #yen ditetepake(VTSS_SW_OPTION_DHCP6_RELAY)
  2. ITEM("Relay,dhcp6_relay.htm");
  3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

CATETAN
Wigati yen jumlah karakter spasi ing ITEM (""), sing digunakake kanggo mutusake level grup ing garis menu. Ing kasus iki, kabeh web kaca ana ing grup "DHCPv6".Microsemi-AN1256-Web-Programmer-Aplikasi-Gambar 6

Gambar 6. Example saka tabel konfigurasi global

Lampiran

khas web kaca

Ana sawetara khas web kaca bisa digunakake kanggo desain referensi. Ex tambahan sijiample kanggo nuduhake kene konfigurasi saka sesi mirror siji ditemokaké ing vtss_appl\mirror\html\mirror.htm.
Ing web kaca nyedhiyakake konfigurasi rinci kanggo sesi pangilon siji. Kabeh parameter sing dikonfigurasi didaftar.

  • Klik tombol "Simpen" kanggo ngetrapake konfigurasi saiki.
  • Klik tombol "Reset" kanggo ngreset konfigurasi saiki.
  • Klik "Batal" kanggo bali menyang liwatview saka sesi pangilon
Pangilon & Konfigurasi Pangilon

Setelan GlobalMicrosemi-AN1256-Web-Programmer-Aplikasi-Gambar 7

Konfigurasi VLAN SumberMicrosemi-AN1256-Web-Programmer-Aplikasi-Gambar 8

Konfigurasi PortMicrosemi-AN1256-Web-Programmer-Aplikasi-Gambar 9

Gambar 7. Example konfigurasi rinci saka sesi pangilon
Tombol "Simpen", "Reset" lan "Batal" ditambahake dening kode html:

Aliran Perintah JSON
Kaca iki mbutuhake aliran printah rong langkah:

  • Pisanan kudu entuk kemampuan piranti kanthi metode "mirror.capabilities.get". Kapabilitas ora owah lan mung kudu diwaca sapisan.
  • Banjur perlu kanggo njaluk konfigurasi saiki piranti nggunakake cara "mirror.config.session.get", "port.status.get" lan ing cilik saka numpuk "topo.config.stacking.get".

Telpon saka "mirror.capabilities.get" diwiwiti dening acara "domready" lan asil diatur kanggo ditangani dening requestUpdate fungsi.
RequestUpdate bakal miwiti telpon "mirror.config.session.get",
"port.status.get" lan ing cilik saka numpuk "topo.config.stacking.get" lan asil saka telpon iki diatur kanggo ditangani dening fungsi prepareUpdate.
Fungsi prepareUpdate bakal ngumpulake kabeh asil, lan mung yen kabeh wis ditampa bakal nelpon fungsi processUpdate sing bakal mbangun tabel sing bakal ditampilake ing web.

Referensi

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

Dokumen / Sumber Daya

Microsemi AN1256 Web Aplikasi Programmer [pdf] Pandhuan pangguna
AN1256, AN1256 Web Aplikasi Programmer, Web Aplikasi Programmer, Aplikasi

Referensi

Ninggalake komentar

Alamat email sampeyan ora bakal diterbitake. Kolom sing dibutuhake ditandhani *