Mikrosemi AN1256 Web Aplikasi Pengaturcara

pengenalan

JSON (JavaScript Object Notation) ialah standard terbuka file format yang menggunakan teks yang boleh dibaca manusia untuk pertukaran data. Ia adalah format data biasa yang digunakan untuk komunikasi penyemak imbas/pelayan tak segerak.
Untuk yang baru web reka bentuk halaman, format JSON boleh menjadi pengganti gaya AJAX asal. Bandingkan dengan AJAX, menggunakan JSON membuat Web pelaksanaan lebih mudah dan ringkas. Pembangun hanya perlu fokus web reka bentuk halaman dan Web pelaksanaan pengendali boleh ditinggalkan kerana kaedah akses JSON sudah disokong dalam setiap satu WebModul perisian StaX.
Dokumen ini menyatakan panduan pengaturcara untuk jurutera perisian yang perlu membangunkan Web halaman melalui JSON. Prosedur terperinci dan examples juga termasuk dalam bahagian berikut.

aliran akses data JSON

Berakhirview
Berikut ialah aliran akses data JSON yang sambungan HTTP dimulakan daripada klien(pelayar). Jadual HTML dibuat secara dinamik mengikut data JOSN yang diterima dari sisi pelayan(DUT).

Rajah 1. Aliran akses antara klien dan pelayan

Permintaan/Balas data JSON
Paket permintaan JSON adalah berdasarkan kaedah siaran permintaan HTTP dan kandungannya perlu mengikut format MSCC JSON.

• Minta sintaks JSON:{“kaedah”:” ”,”params”:[ ], “id:”jsonrpc”}
• Sintaks JSON respons: {“ralat”: ,"hasil": , “id:”jsonrpc”}

Gambar berikut menunjukkan kandungan JSON antara penyemak imbas dan DUT.

Rajah 2. Gambar permintaan HTTP daripada klien

Rajah 3. Gambar respons HTTP daripada pelayan

Spesifikasi MSCC JSON
Untuk mendapatkan maklumat JSON penuh termasuk kaedah, parameter, penerangan dan lain-lain. Taip “http:// /json_spec” pada bar alamat penyemak imbas anda. Terdapat satu lagi kaedah akses melalui nama kaedah JSON "jsonRpc.status.introspection.specific.inventory.get", ia digunakan untuk kaedah tertentu.

Rajah 4. Gambar spesifikasi JSON web muka surat

Web rangka kerja

The Web rangka kerja dalam WebPerisian StaX adalah berdasarkan sumber terbuka MooTools. Ia adalah koleksi utiliti JavaScript dengan lesen MIT. (http://mootools.net/license.txt) Bar menu dan kebanyakan web halaman adalah berdasarkan rangka kerja. Kedua-dua algoritma AJAX dan JSON telah pun disepadukan dalam utilitinya.
selain itu, WebPerisian StaX menyediakan utiliti lain yang berguna untuk JSON web reka bentuk halaman.

• json.js – Gunakan untuk menghantar/menerima data dinamik dengan sintaks JSON.
• dynforms.js – Gunakan untuk mencipta jadual HTML secara dinamik.
• validate.js – Gunakan untuk pengesahan borang HTML.

Perpustakaan JavaScript penuh terletak di bawah direktori pokok sumber: webstax2\ vtss_appl\web\html\lib.

Garis panduan untuk JSON Web reka bentuk halaman

Bahagian ini membimbing cara mereka bentuk a web halaman berdasarkan perpustakaan JavaScript MSCC. Kami menggunakan Mirror global yang dikonfigurasikan web halaman sebagai bekasample sini. Komunikasi tak segerak adalah berdasarkan kaedah capaian HTTP JSON dan semua parameter yang dikonfigurasikan global disenaraikan dalam satu jadual HTML dinamik.
The web susun atur halaman disenaraikan di bawah dan kod sumber penuh terletak di bawah direktori pepohon sumber: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Untuk mendapatkan lebih tipikal web rujukan halaman, lihat bahagian lampiran.

Cermin& RMirror Confiquration Table

Rajah 5. Example daripada jadual terkonfigurasi global

Sunting Web muka surat

Pengepala HTML
Sertakan perpustakaan JS yang diperlukan dalam HTML tag.

Mulakan sumber jadual dinamik

• Apabila dokumen HTML sedia, panggil DynamicTable() untuk memulakan sumber jadual dinamik.
• DynamicTable() digunakan untuk mencipta jadual dinamik selepas menerima data JSON.
• Ia kemudiannya akan memanggil requestUpdate untuk memulakan aliran arahan JSON.

1. window.addEvent('domready', function() {
2. // Cipta borang dengan badan jadual untuk menerima/menghantar data JSON
3. myDynamicTable = DynamicTable baharu(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

Permintaan/Balas data JSON

• Apabila dokumen HTML sedia, gunakan requestJsonDoc() untuk menghantar permintaan JSON "mirror.config.session.get" untuk mendapatkan maklumat tentang sesi yang dikonfigurasikan.
• Selepas data JSON untuk "mirror.capabilities.get" diterima, fungsi panggil balik requestUpdate() akan diproses. Fungsi requestUpdate kemudiannya akan memanggil "mirror.config.session.get" untuk mendapatkan konfigurasi semasa. Apabila konfigurasi semasa diterima, fungsi processUpdate dipanggil untuk membina jadual untuk ditunjukkan.

1. fungsi requestUpdate()
2. {
3. // Pulihkan kandungan jadual
4. myDynamicTable.restore();
   5
5. // Data JSON jadual dua ini.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Memproses data JSON yang diterima

• Fungsi processUpdate() digunakan untuk susun atur jadual dinamik selepas menerima data JSON.
• AddRows() digunakan untuk menambah baris jadual. myDynamicTable.update() susun atur
  Jadual HTML mengikut data dalam baris jadual.

1. fungsi processUpdate(recv_json, nama)
2. {
3. // Abaikan proses jika tiada data diterima
4. jika (!recv_json) {
5. alert("Dapatkan data dinamik gagal.");
6. kembali;
7. }
8. // Simpan data JSON yang diterima
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Tambah baris jadual
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Kemas kini jadual dinamik ini
15. myDynamicTable.update();
17. // Muat semula pemasa
18. var autorefresh = document.getElementById("autorefresh");
19. if (autorefresh && autorefresh.checked) {
20. jika (ID pemasa) {
21. clearTimeout(ID pemasa);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Tambah baris jadual

• Dalam fungsi addRows(), kami menggunakan format JSON untuk mengisi setiap parameter yang dikonfigurasikan global dalam baris jadual.
• Semua medan HTML disenaraikan dalam tatasusunan JSON (“table_rows”) dan sintaks medan jadual adalah di bawah.

Sintaks:
table_rows:[ , ,… ] : { , ,… }
: {“jenis”: , “params”:[ , , …, ]}

• Dalam kes ini, setiap baris mempunyai lima medan: "ID Sesi", "Mod", "Jenis", "ID VLAN" dan "Port Reflektor" Untuk example,

ID Sesi (Nama medan: int32_t)	1 (Id sesi cermin)
Mod (Nama medan: vtss_bool_t)	benar (Bermaksud sesi cermin didayakan)
taip (Nama medan: enumeration {cermin, rMirrorSource, rMirrorDestination}	Sumber RMirror (ini adalah sumber sesi cermin jauh
ID VLAN (Nama medan: uint16_t)	200 (vlan yang digunakan untuk pencerminan)
Pelabuhan Reflektor (Medan nama: vtss_ifindex_t)	Gi 1/1 (Pelabuhan tempat trafik bercermin dihantar

• myDynamicTable.addRows() akan menukar data JSON kepada format HTML dan mengeluarkan jadual HTML.

1. fungsi addRow(kunci, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Tiada", none_interface_text = "TIADA";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. baris var = {medan:[
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 = new Array();
18. // Tambah pengepala jadual
19. addHeader(table_rows);
20. // Tambah satu baris
21. Object.each(recv_json, function(rekod) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. kembalikan table_rows;
25. }

Web halaman bantuan
Untuk web reka bentuk halaman bantuan, penerangan bantuan boleh merujuk kepada spesifikasi JSON, bahawa teks penerangan boleh konsisten dengan output JSON dan membantu mengurangkan penerangan yang berlebihan. CthampDi sini diambil daripada konfigurasi geganti dhcp6.

Pautan hiper dalam sumber file
Berikan bantuan file lokasi di sumbernya file HTML tag. Nama pembolehubah tetap "help_page" digunakan untuk web tugasan halaman bantuan.

2. // Bantuan halaman ajaib
3. var help_page = “/help/help_xxx.htm”;

Kemas kini perihalan medan HTML daripada spesifikasi JSON

• guna atau HTML tag untuk mengisytiharkan penerangan jadual HTML dan diberi ID unik untuk tag.
• Apabila dokumen HTML sedia, panggil loadXMLDoc() untuk mendapatkan keseluruhan spesifikasi JSON atau dapatkan penerangan kaedah khusus dengan nama kaedah JSON "jsonRpc.status.introspection.specific.inventory.get".
• ProcessTableDesc() digunakan untuk mengemas kini perihalan jadual dan processUpdate() digunakan untuk mengemas kini perihalan parameter jadual.
• Dalam processUpdate(), panggil updateTableParamsDesc() untuk mengemas kini elemen JSON yang dipadankan dengan nama elemen tertentu.
• Kemas kini atau tag HTML dalaman mengikut penerangan elemen.

2. /* Kemas kini medan penerangan HTML */
3. function processTableDesc(req) {
4. jika (!req.responseText) {
5. kembali;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Kemas kini penerangan jadual
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Kemas kini perihalan parameter jadual HTML */
12. function processUpdate(recv_json) {
13. // Kemas kini perihalan parameter jadual
14. var param_names = [
15. {
16. “alias”: “Antara muka”,
17. "jenis": "vtss_ifindex_t",
18. "nama": "vlanInterface",
19. “akhiran”: “.”
20. },
21. {
22. “alias”: “Antara Muka Geganti”,
23. "jenis": "vtss_ifindex_t",
24. "nama": "relayVlanInterface",
25. “akhiran”: “. Id antara muka yang digunakan untuk menyampaikan.”
26. },
27. {
28. “alias”: “Destinasi Relay”,
29. "jenis": "mesa_ipv6_t",
30. "nama": "destinasi_geganti",
31. “akhiran”: “. Alamat IPv6 pelayan DHCPv6 yang diminta hendaklah disampaikan kepada. Nilai lalai 'ff05::1:3' mengandungi 'mana-mana pelayan DHCP'.”
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Dapatkan spesifikasi JSON */
37. window.addEvent('domready', function () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Pautan hiper dalam bar menu

• Kod sumber HTML bar menu dijana daripada file webstax2\vtss_appl\web\ menu_default.cxx.
• Edit item dalam ini file untuk Web pautan hiper halaman.

1. #jika ditakrifkan(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Perhatikan bahawa bilangan aksara ruang dalam ITEM(“”), yang digunakan untuk menentukan tahap kumpulan dalam bar menu. Dalam kes ini, semua web halaman berada di bawah kumpulan "DHCPv6".

Rajah 6. Cthample daripada jadual terkonfigurasi global

Lampiran

tipikal web muka surat

Terdapat beberapa tipikal web halaman boleh digunakan untuk reka bentuk rujukan. Satu bekas tambahanampYang akan ditunjukkan di sini ialah konfigurasi sesi cermin tunggal yang terdapat dalam vtss_appl\mirror\html\mirror.htm.
The web halaman menyediakan konfigurasi terperinci untuk satu sesi cermin. Semua parameter yang dikonfigurasikan disenaraikan.

• Klik butang "Simpan" untuk menggunakan konfigurasi semasa.
• Klik butang "Reset" untuk menetapkan semula konfigurasi semasa.
• Klik "Batal" untuk kembali ke tamatview sesi cermin

Konfigurasi Cermin&RMirror

Tetapan Global

Konfigurasi VLAN Sumber

Konfigurasi Pelabuhan

Rajah 7. Example konfigurasi terperinci sesi cermin
Butang "Simpan", "Tetapkan Semula" dan "Batal" ditambah dengan kod html:

Aliran Perintah JSON
Halaman ini memerlukan aliran arahan dua langkah:

• Mula-mula ia perlu mendapatkan keupayaan peranti dengan kaedah "mirror.capabilities.get". Keupayaan tidak berubah dan hanya perlu dibaca sekali.
• Kemudian ia perlu mendapatkan konfigurasi semasa peranti menggunakan kaedah "mirror.config.session.get", "port.status.get" dan dalam kes menyusun "topo.config.stacking.get".

Panggilan "mirror.capabilities.get" dimulakan oleh acara "domready" dan hasilnya dikonfigurasikan untuk dikendalikan oleh fungsi requestUpdate.
RequestUpdate akan memulakan panggilan "mirror.config.session.get",
“port.status.get” dan dalam kes susun “topo.config.stacking.get” dan keputusan panggilan ini dikonfigurasikan untuk dikendalikan oleh fungsi prepareUpdate.
Fungsi prepareUpdate akan mengumpulkan semua keputusan, dan hanya apabila semuanya telah diterima, ia akan memanggil fungsi processUpdate yang akan membina jadual untuk ditunjukkan pada web.

Rujukan

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

Dokumen / Sumber

Mikrosemi AN1256 Web Aplikasi Pengaturcara [pdf] Panduan Pengguna AN1256, AN1256 Web Aplikasi Pengaturcara, Web Aplikasi Pengaturcara, Aplikasi

Rujukan

• Manual Pengguna