Microsemi AN1256 Web Programmētāju lietojumprogramma

Ievads

JSON (JavaScript Object Notation) ir atvērts standarts file formātā, kas datu apmaiņai izmanto cilvēkiem lasāmu tekstu. Tas ir izplatīts datu formāts, ko izmanto asinhronai pārlūkprogrammas/servera saziņai.
Par jauno web lapas dizains, JSON formāts var aizstāt sākotnējo AJAX stilu. Salīdziniet ar AJAX, izmantojot JSON Web vieglāka un vienkāršāka ieviešana. Izstrādātājam jākoncentrējas tikai uz web lapas dizains un Web apdarinātāja ieviešanu var izlaist, jo katrā jau tiek atbalstīta JSON piekļuves metode WebStaX programmatūras moduļi.
Šajā dokumentā ir norādīts programmētāju ceļvedis programmatūras inženierim, kuram ir jāizstrādā Web lapa, izmantojot JSON. Detalizētas procedūras un piemampir iekļauti arī turpmākajās sadaļās.

JSON datu piekļuves plūsma

Beigāsview
Lūk, JSON datu piekļuves plūsma, kurā HTTP savienojums tiek uzsākts no klienta (pārlūka). HTML tabula tiek izveidota dinamiski atbilstoši saņemtajiem JOSN datiem no servera (DUT) puses.

1. attēls. Piekļuves plūsma starp klientu un serveri

Pieprasīt/atbildēt JSON datus
JSON pieprasījuma pakete ir balstīta uz HTTP pieprasījuma publicēšanas metodi, un saturam ir jāatbilst MSCC JSON formātam.

• Pieprasīt JSON sintaksi:{"metode":" ","params":[ ], “id:”jsonrpc”}
• Atbildes JSON sintakse: {"kļūda": "rezultāts": , “id:”jsonrpc”}

Tālāk norādītajos momentuzņēmumos ir parādīts JSON saturs starp pārlūkprogrammu un DUT.

2. attēls. Klienta HTTP pieprasījuma momentuzņēmums

3. attēls. HTTP atbildes momentuzņēmums no servera

MSCC JSON specifikācija
Lai iegūtu pilnu JSON informāciju, tostarp metodi, parametru, aprakstu utt. Ierakstiet “http:// /json_spec” pārlūkprogrammas adreses joslā. Ir vēl viena piekļuves metode, izmantojot JSON metodes nosaukumu “jsonRpc.status.introspection.specific.inventory.get”, tā tiek izmantota noteiktai metodei.

4. attēls. JSON specifikācijas momentuzņēmums web lapā

Web ietvaros

The Web ietvars iekšā WebStaX programmatūras pamatā ir atvērtā koda MooTools. Tā ir JavaScript utilītu kolekcija ar MIT licenci. (http://mootools.net/license.txt) Izvēļņu josla un lielākā daļa web lapas ir balstītas uz ietvaru. Gan AJAX, gan JSON algoritms jau ir integrēts tā utilītprogrammās.
Turklāt WebStaX programmatūra nodrošina citas utilītas, kas ir noderīgas JSON web lapas dizains.

• json.js — Izmantojiet, lai pārsūtītu/saņemtu dinamiskos datus ar JSON sintaksi.
• dynforms.js — Izmantojiet, lai dinamiski izveidotu HTML tabulu.
• validate.js — Izmantojiet HTML veidlapas validācijai.

Pilnas JavaScript bibliotēkas atrodas avota koka direktorijā: webstax2\ vtss_appl\web\html\lib.

Vadlīnijas par JSON Web lapas dizains

Šajā sadaļā ir sniegti norādījumi, kā izstrādāt a web lapa, kuras pamatā ir MSCC JavaScript bibliotēkas. Mēs izmantojam globāli konfigurētu spoguli web lapa kā bijušaisample šeit. Asinhronā komunikācija ir balstīta uz HTTP JSON piekļuves metodi, un visi globālie konfigurētie parametri ir uzskaitīti vienā dinamiskā HTML tabulā.
The web Lapas izkārtojums ir norādīts zemāk, un pilns avota kods atrodas avota koka direktorijā: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Lai kļūtu tipiskāks web lappušu atsauci, skatiet pielikuma sadaļu.

Spoguļu un RMirror konfigurācijas tabula

5. attēls. Exampglobālās konfigurētās tabulas le

Rediģēt Web lapā

HTML galvene
HTML kodā iekļaujiet nepieciešamās JS bibliotēkas tag.

Inicializējiet dinamiskās tabulas resursu

• Kad HTML dokuments ir gatavs, izsauciet DynamicTable(), lai inicializētu dinamiskās tabulas resursu.
• DynamicTable() tiek izmantots, lai izveidotu dinamisko tabulu pēc JSON datu saņemšanas.
• Pēc tam tas izsauks requestUpdate, lai sāktu JSON komandu plūsmu.

1. window.addEvent('domready', function() {
2. // Izveidojiet veidlapu ar tabulas pamattekstu JSON datu saņemšanai/pārsūtīšanai
3. myDynamicTable = jauna dinamiskā tabula ("manas tabulas saturs", "konfigurācija","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Pieprasīt/atbildēt JSON datus

• Kad HTML dokuments ir gatavs, izmantojiet requestJsonDoc(), lai nosūtītu JSON pieprasījumu “mirror.config.session.get”, lai iegūtu informāciju par konfigurētajām sesijām.
• Kad tiks saņemti JSON dati par “mirror.capabilities.get”, tiks apstrādāta atzvanīšanas funkcija requestUpdate(). Pēc tam funkcija requestUpdate izsauks “mirror.config.session.get”, lai iegūtu pašreizējo konfigurāciju. Kad tiek saņemta pašreizējā konfigurācija, tiek izsaukta funkcija processUpdate, lai izveidotu parādāmo tabulu.

1. funkcija requestUpdate()
2. {
3. // Atjaunot tabulas saturu
4. myDynamicTable.restore();
   5
5. // Šajā tabulā ir divi JSON dati.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Apstrādājiet saņemtos JSON datus

• Funkcija processUpdate() tiek izmantota, lai izkārtotu dinamisko tabulu pēc JSON datu saņemšanas.
• AddRows() tiek izmantots, lai pievienotu tabulas rindas. myDynamicTable.update() izkārtojums
  HTML tabula atbilstoši datiem tabulas rindās.

1. funkcija processUpdate(recv_json, nosaukums)
2. {
3. // Ignorēt procesu, ja netiek saņemti dati
4. if (!recv_json) {
5. brīdinājums (“Neizdevās iegūt dinamiskus datus.”);
6. atgriešanās;
7. }
8. // Saglabājiet saņemtos JSON datus
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Pievienojiet tabulas rindas
11. var tabula_rindas = addRows(recv_json);
12. myDynamicTable.addRows(tabula_rindas);
14. // Atjauniniet šo dinamisko tabulu
15. myDynamicTable.update();
17. // Atsvaidzināt taimeri
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. if (taimerID) {
21. clearTimeout(taimerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Pievienojiet tabulas rindas

• Funkcijā addRows() mēs izmantojam JSON formātu, lai aizpildītu katru globāli konfigurēto parametru tabulas rindā.
• Visi HTML lauki ir norādīti JSON masīvā (“table_rows”), un tabulas lauka sintakse ir norādīta tālāk.

Sintakse:
tabulas_rindas:[ , ,… ] : { , ,… }
: {“tips”: , “params”:[ , ,…, ]}

• Šajā gadījumā katrā rindā ir pieci lauki: “Session ID”, “Mode”, “Type”, “VLAN ID” un “Reflector Port”, piemēram,ample,

Sesijas ID (Nosaukuma lauks: int32_t)	1 (Spoguļa sesijas ID)
Režīms (Nosaukuma lauks: vtss_bool_t)	taisnība (Tas nozīmē, ka spoguļsesija ir iespējota)
Tips (Nosaukuma lauks: uzskaitījums {spogulis, rMirrorSource, rMirrorDestination}	RMirror Source (tas ir attālās spoguļa sesijas avots
VLAN ID (Nosaukuma lauks: uint16_t)	200 (vlan, ko izmanto spoguļošanai)
Atstarotāja ports (Nosaukuma lauks: vtss_ifindex_t)	Gi 1/1 (Ports, uz kuru tiek nosūtīta atspoguļotā trafika

• MyDynamicTable.addRows() konvertēs JSON datus HTML formātā un izvadīs HTML tabulu.

1. funkcija addRow(atslēga, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Nav", none_interface_text = "NEVIENS";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal"? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rinda = {lauki:[
6. {type:”link”, params:["cr", "mirror.htm?session_id=" + atslēga, atslēga]},
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 == “spogulis” ? "-":
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource”?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. atgriešanas rinda;
13. }
14. funkcija addRows(recv_json)
15. {
16. var rinda, tukšs_colspan = 7;
17. var tabula_rindas = jauns masīvs();
18. // Pievienot tabulas galveni
19. addHeader(tabula_rindas);
20. // Pievienot vienu rindu
21. Object.each(recv_json, function(ieraksts) {
22. table_rows.push(addRow(ieraksts.atslēga, ieraksts.val));
23. });
24. return table_rows;
25. }

Web palīdzības lapa
Par web palīdzības lapas dizains, palīdzības aprakstā var atsaukties uz JSON specifikāciju, ka apraksta teksts var atbilst JSON izvadei un palīdz samazināt liekos aprakstus. Piemample šeit ir ņemts no dhcp6 releja konfigurācijas.

Hipersaite avotā file
Piešķiriet palīdzību file atrašanās vieta tās avotā file HTML tag. Fiksētais mainīgā nosaukums “help_page” tiek izmantots web palīdzības lapas uzdevums.

2. // Palīdzības lapas maģija
3. var help_page = "/help/help_xxx.htm";

Atjauniniet HTML lauka aprakstu no JSON specifikācijas

• Izmantot vai HTML tag lai deklarētu HTML tabulas aprakstu un piešķirtu unikālu ID tag.
• Kad HTML dokuments ir gatavs, izsauciet loadXMLDoc(), lai iegūtu visu JSON specifikāciju, vai iegūt konkrētās metodes aprakstu ar JSON metodes nosaukumu “jsonRpc.status.introspection.specific.inventory.get”.
• ProcessTableDesc() tiek izmantots, lai atjauninātu tabulas aprakstu, un processUpdate(), lai atjauninātu tabulas parametru aprakstu.
• Procesā processUpdate() izsauciet updateTableParamsDesc(), lai atjauninātu JSON elementus, kas atbilst konkrētajiem elementu nosaukumiem.
• Atjauniniet vai tag iekšējais HTML atbilstoši elementa aprakstam.

2. /* Atjaunināt HTML apraksta laukus */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. atgriešanās;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Atjaunināt tabulas aprakstu
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Atjaunināt HTML tabulas parametra aprakstu */
12. function processUpdate(recv_json) {
13. // Atjaunināt tabulas parametra aprakstu
14. var param_names = [
15. {
16. "alias": "Interfeiss",
17. “tips”: “vtss_ifindex_t”,
18. "nosaukums": "vlanInterface",
19. "sufikss": "."
20. },
21. {
22. "alias": "Releja interfeiss",
23. “tips”: “vtss_ifindex_t”,
24. "nosaukums": "relayVlanInterface",
25. “sufikss”: “. Pārsūtīšanai izmantotās saskarnes ID.
26. },
27. {
28. "alias": "Releja galamērķis",
29. “tips”: “mesa_ipv6_t”,
30. “name”: “relay_destination”,
31. “sufikss”: “. DHCPv6 servera IPv6 adrese, uz kuru tiek nosūtīti pieprasījumi. Noklusējuma vērtība “ff05::1:3” nozīmē “jebkuru DHCP serveri”.
32. }
33. ];
34. updateTableParamsDesc (“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, parametru_nosaukumi);
35. }
36. /* Iegūstiet JSON specifikāciju */
37. window.addEvent('domready', function () {
38. loadXMLDoc (“/json_spec”, processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hipersaite izvēļņu joslā

• Izvēļņu joslas HTML avota kods tiek ģenerēts no file webstax2\vtss_appl\web\ menu_default.cxx.
• Rediģējiet vienumus šajā file priekš Web lapas hipersaite.

1. #ja noteikts (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relejs,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

PIEZĪME
Ņemiet vērā, ka atstarpes rakstzīmes skaits vienumā ITEM (“”), ko izmanto, lai izvēļņu joslā noteiktu grupas līmeni. Šajā gadījumā viss web lapas atrodas grupā “DHCPv6”.

6. attēls. Piemampglobālās konfigurētās tabulas le

Pielikums

Tipiski web lapas

Ir vairāki tipiski web lapas var izmantot atsauces dizainam. Vēl viens bijušaisampŠeit ir jārāda viena spoguļa sesijas konfigurācija, kas atrodama failā vtss_appl\mirror\html\mirror.htm.
The web lapa sniedz detalizētu konfigurāciju vienai spoguļa sesijai. Visi konfigurētie parametri ir uzskaitīti.

• Noklikšķiniet uz pogas “Saglabāt”, lai lietotu pašreizējo konfigurāciju.
• Noklikšķiniet uz pogas “Atiestatīt”, lai atiestatītu pašreizējo konfigurāciju.
• Noklikšķiniet uz "Atcelt", lai atgrieztos pie beigāmview spoguļu sesijām

Spoguļa&RMSpoguļa konfigurācija

Globālie iestatījumi

Avota VLAN(-u) konfigurācija

Porta konfigurācija

7. attēls. Exampdetalizēta spoguļa sesijas konfigurācija
Pogas “Saglabāt”, “Atiestatīt” un “Atcelt” pievieno html kods:

JSON komandu plūsma
Šai lapai nepieciešama divpakāpju komandu plūsma:

• Vispirms ir jāiegūst ierīces iespējas ar metodi “mirror.capabilities.get”. Iespējas nemainās, un tās ir jāizlasa tikai vienu reizi.
• Pēc tam tai jāiegūst pašreizējā ierīces konfigurācija, izmantojot metodes “mirror.config.session.get”, “port.status.get” un sakraušanas gadījumā “topo.config.stacking.get”.

Izsaukumu “mirror.capabilities.get” ierosina notikums “domready”, un rezultāts ir konfigurēts, lai to apstrādātu funkcija requestUpdate.
PieprasījumsUpdate sāks izsaukumu “mirror.config.session.get”,
“port.status.get” un sakraušanas gadījumā “topo.config.stacking.get”, un šo izsaukumu rezultāti ir konfigurēti tā, lai tos apstrādātu funkcija readyUpdate.
Funkcija readyUpdate apkopos visus rezultātus, un tikai tad, kad tie būs saņemti, tā izsauks funkciju processUpdate, kas izveidos tabulas, kas tiks parādītas web.

Atsauces

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

Dokumenti / Resursi

Microsemi AN1256 Web Programmētāju lietojumprogramma [pdfLietotāja rokasgrāmata AN1256, AN1256 Web Programmētāju lietojumprogramma, Web Programmētāju aplikācija, aplikācija

Atsauces

• Lietotāja rokasgrāmata