Microsemi AN1256 Web Programatzaileen aplikazioa

Sarrera

JSON (JavaScript Object Notation) estandar irekia da file Datuak trukatzeko gizakiek irakur daitekeen testua erabiltzen duen formatua. Arakatzaile/zerbitzariaren komunikazio asinkronorako erabiltzen den datu-formatu arrunta da.
Berrirako web orrialdearen diseinua, JSON formatua jatorrizko AJAX estiloaren ordezkoa izan daiteke. Konparatu AJAX-ekin, JSON erabiliz gero Web inplementazioa errazagoa eta errazagoa. Garatzaileak bakarrik arreta jarri behar du web orrialdearen diseinua eta Web kudeatzailea inplementatzea bazter daiteke JSON sarbide-metodoa dagoeneko onartzen baita bakoitzean WebStaX software moduluak.
Dokumentu honek programatzaileen gida adierazten du garatu behar duen software ingeniariarentzat Web orrialdea JSON bidez. Xehetasun prozedurak eta examphurrengo ataletan ere sartuta.

JSON datuetarako sarbide-fluxua

Amaituview
Hona hemen bezeroak (arakatzailea) HTTP konexioa abiarazten duen JSON datuen sarbide-fluxua. HTML taula dinamikoki sortzen da zerbitzariaren (DUT) aldean jasotako JOSN datuen arabera.

1. irudia. Bezeroaren eta zerbitzariaren arteko sarbide-fluxua

Eskatu/erantzun JSON datuak
JSON eskaera paketea HTTP eskaera bidaltzeko metodoan oinarritzen da eta edukiak MSCC JSON formatua jarraitu behar du.

• Eskatu JSON sintaxia:{“metodoa”:” ","params":[ ], "id:"jsonrpc"}
• Erantzun JSON sintaxia: {“errore”: ,"emaitza": , "id:"jsonrpc"}

Ondorengo argazkiek arakatzailearen eta DUTren arteko JSON edukia erakusten dute.

2. irudia. Bezeroaren HTTP eskaeraren argazkia

3. irudia. Zerbitzariaren HTTP erantzunaren argazkia

MSCC JSON zehaztapena
JSON informazio osoa lortzeko metodoa, parametroa, deskribapena eta abar barne. Idatzi "http:// /json_spec” zure arakatzailearen helbide-barran. Beste sarbide metodo bat dago JSON metodoaren izenaren bidez "jsonRpc.status.introspection.specific.inventory.get", metodo zehatz baterako erabiltzen da.

4. irudia. JSON zehaztapenaren argazkia web orrialdea

Web markoa

The Web esparruan WebStaX softwarea kode irekiko MooTools batean oinarritzen da. MIT lizentzia duten JavaScript utilitateen bilduma da. (http://mootools.net/license.txt) Menu-barra eta gehienak web orrialdeak markoan oinarritzen dira. AJAX eta JSON algoritmoak dagoeneko integratuta daude bere utilitateetan.
Gainera, WebStaX softwareak JSONrako erabilgarriak diren beste utilitate batzuk eskaintzen ditu web orrialdearen diseinua.

• json.js - Erabili JSON sintaxiarekin datu dinamikoak transmititzeko/jasotzeko.
• dynforms.js – Erabili HTML taula dinamikoki sortzeko.
• validate.js - Erabili HTML inprimakia baliozkotzeko.

JavaScript liburutegi osoa iturburu-zuhaitzaren direktorioaren azpian dago: webstax2\ vtss_appl\web\html\lib.

JSONrako jarraibideak Web orrialdearen diseinua

Atal honek a diseinatzeko gidatzen du web MSCC JavaScript liburutegietan oinarritutako orria. Ispilu globala konfiguratuta erabiltzen dugu web orrialdea adibidezample hemen. Komunikazio asinkronoa HTTP JSON sarbide metodoan oinarritzen da eta konfiguratutako parametro global guztiak HTML taula dinamiko batean ageri dira.
The web orriaren diseinua behean ageri da eta iturburu-kode osoa iturburu-zuhaitzaren direktorioaren azpian dago: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Tipikoagoa lortzeko web orrialdeen erreferentzia, ikusi eranskinaren atala.

Ispilua& RMirror Konfikuzio Taula

5. irudia. Exampkonfiguratutako taula globalaren fitxategia

Editatu Web orrialdea

HTML goiburua
Sartu HTML-n behar diren JS liburutegiak tag.

Hasieratu taula dinamikoaren baliabidea

• HTML dokumentua prest dagoenean, deitu DynamicTable() taula dinamikoaren baliabidea hasieratzeko.
• DynamicTable() JSON datuak jaso ondoren taula dinamikoa sortzeko erabiltzen da.
• Ondoren, requestUpdate deituko du JSON komando-fluxua abiarazteko.

1. window.addEvent('domready', function() {
2. // Sortu inprimaki bat taula gorputzarekin JSON datuak jasotzeko/bidaltzeko
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. eskaeraEguneratu();
5. });

Eskatu/erantzun JSON datuak

• HTML dokumentua prest dagoenean, erabili requestJsonDoc() JSON eskaera bidaltzeko "mirror.config.session.get" konfiguratutako saioei buruzko informazioa lortzeko.
• "mirror.capabilities.get"-ren JSON datuak jaso ondoren, requestUpdate() itzulera funtzioa prozesatu egingo da. RequestUpdate funtzioak "mirror.config.session.get" deituko du uneko konfigurazioa lortzeko. Uneko konfigurazioa jasotzen denean, processUpdate funtzioari deitzen zaio erakutsiko den taula eraikitzeko.

1. funtzio eskaeraEguneratu()
2. {
3. // Taularen edukia berreskuratu
4. myDynamicTable.restore();
   5
5. // Taula honek bi JSON datu.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Jasotako JSON datuak prozesatu

• processUpdate() funtzioa JSON datuak jaso ondoren taula dinamikoa diseinatzeko erabiltzen da.
• addRows() taulako errenkadak gehitzeko erabiltzen da. myDynamicTable.update() diseinua
  HTML taula taulako errenkadetako datuen arabera.

1. funtzioa processUpdate (recv_json, izena)
2. {
3. // Prozesuari ez ikusi egin daturik jasotzen ez bada
4. bada (!recv_json) {
5. alert("Huts egin du datu dinamikoak eskuratu.");
6. itzuli;
7. }
8. // Jasotako JSON datuak gorde
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Gehitu taulako errenkadak
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(taularen_errendak);
14. // Eguneratu taula dinamiko hau
15. myDynamicTable.eguneratu();
17. // Freskatu tenporizadorea
18. var autorrefresh = document.getElementById(“autorefresh”);
19. if (autofreskatu && autorrefresh.checked) {
20. bada (tenporizadore ID) {
21. clearTimeout(tenporizadore ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Gehitu taulako errenkadak

• addRows() funtzioan, JSON formatua erabiltzen dugu taulako errenkadan konfiguratutako parametro global bakoitza betetzeko.
• HTML eremu guztiak JSON array-n agertzen dira ("table_rows") eta taula eremuaren sintaxia behean dago.

Sintaxia:
taula_errendak:[ , ,… ] : { , ,… }
: {“mota”: , "parametroak":[ , ,…, ]}

• Kasu honetan, errenkada bakoitzak bost eremu ditu: "Saio IDa", "Modua", "Mota", "VLAN IDa" eta "Ataka islatzailea". Adibidezample,

Saioaren ID (Izen eremua: int32_t)	1 (Ispilu saioaren ID)
Modua (Izen eremua: vtss_bool_t)	egia (Ispilu saioa gaituta dagoela esan nahi du)
Mota (Izen-eremua: enumerazioa {ispilua, rMirrorSource, rMirrorDestination}	RMirror iturria (hau urruneko ispilu saio baten iturria da
VLAN ID (Izen-eremua: uint16_t)	200 (ispilurako erabiltzen den vlan)
Erreflector Portua (Izen eremua: vtss_ifindex_t)	Gi 1/1 (Ispilutako trafikoa bidaltzen den ataka

• myDynamicTable.addRows() JSON datuak HTML formatura bihurtuko ditu eta HTML taula aterako du.

1. addRow (gakoa, balio) funtzioa
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Inor ez”, none_interface_text = “INERE”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ”(” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var errenkada = {eremuak:[
6. {mota:”esteka”, params:[“cr”, “mirror.htm?session_id=" + tekla, gakoa]},
7. {mota:”testua”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {mota:”testua”, parametroak:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {mota:”testua”, params:[val.Type == “ispilua” ? “-“:
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. itzuli errenkada;
13. }
14. addRows funtzioa (recv_json)
15. {
16. var errenkada, empty_colspan = 7;
17. var table_rows = new Array();
18. // Gehitu taularen goiburua
19. addHeader(taularen_errendak);
20. // Gehitu errenkada bakarra
21. Object.each (recv_json, funtzioa (erregistroa) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. itzuli taula_errendak;
25. }

Web laguntza orria
rentzat web laguntza-orriaren diseinua, laguntza deskribapenak JSON zehaztapenari erreferentzia egin diezaioke, deskribapen-testua JSON irteerarekin koherentea izan daitekeela eta deskribapen erredundanteak murrizten laguntzen duela. Adibamphemen dhcp6 errele konfiguraziotik hartua da.

Hiperesteka iturrian file
Esleitu laguntza file kokapena bere iturrian file HTML tag. "help_page" aldagai finkoaren izena erabiltzen da web laguntza orria esleitzea.

2. // Laguntza orrialdearen magia
3. var help_page = "/help/help_xxx.htm";

Eguneratu HTML eremuaren deskribapena JSON zehaztapenetik

• Erabili edo HTML tag HTML taularen deskribapena deklaratzeko eta ID bakarra emateko tag.
• HTML dokumentua prest dagoenean, deitu loadXMLDoc() JSON zehaztapen osoa lortzeko edo metodo espezifikoa lortzeko JSON metodoaren izenarekin "jsonRpc.status.introspection.specific.inventory.get".
• processTableDesc() taularen deskribapena eguneratzeko erabiltzen da eta processUpdate() taula parametroaren deskribapena eguneratzeko.
• processUpdate(n), deitu updateTableParamsDesc() elementuen izen zehatzekin bat datozen JSON elementuak eguneratzeko.
• Eguneratu edo tag barneko HTML elementuaren deskribapenaren arabera.

2. /* Eguneratu HTML deskribapen eremuak */
3. funtzio processTableDesc(req) {
4. bada (!req.responseText) {
5. itzuli;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // Taularen deskribapena eguneratu
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “taldeak”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Eguneratu HTML taula parametroaren deskribapena */
12. funtzioa processUpdate(recv_json) {
13. // Taularen parametroaren deskribapena eguneratu
14. var param_izes = [
15. {
16. “alias”: “Interfazea”,
17. "mota": "vtss_ifindex_t",
18. "izena": "vlanInterface",
19. "atzizkia": "."
20. },
21. {
22. “alias”: “Errele Interfazea”,
23. "mota": "vtss_ifindex_t",
24. "izena": "relayVlanInterface",
25. “atzizkia”: “. Erreleborako erabiltzen den interfazearen id.
26. },
27. {
28. “alias”: “Erreleboaren helmuga”,
29. "mota": "mesa_ipv6_t",
30. "izena": "errele_helmuga",
31. “atzizkia”: “. Eskatzen duen DHCPv6 zerbitzariaren IPv6 helbidea helaraziko zaio. 'ff05::1:3' balio lehenetsiak 'edozein DHCP zerbitzaria' da."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Lortu JSON zehaztapena */
37. window.addEvent('domready', funtzioa () {
38. loadXMLDoc ("/json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hiperesteka menu-barran

• Menu-barrako HTML iturri-kodea hemendik sortzen da file webstax2\vtss_appl\web\ menu_default.cxx.
• Editatu honetako elementuak file rentzat Web orrialdearen hiperesteka.

1. # definitzen bada (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Rele,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

OHARRA
Kontuan izan ITEM(“”)-ko zuriune-karaktere kopurua, menu-barran talde-maila erabakitzeko erabiltzen dena. Kasu honetan, dena web orriak "DHCPv6" taldean daude.

6. irudia. Adibampkonfiguratutako taula globalaren fitxategia

eranskina

Tipikoa web orrialdeak

Hainbat tipiko daude web orriak erreferentzia diseinurako erabil daitezke. Adibide gehigarri batampHemen erakutsi beharreko fitxategia vtss_appl\mirror\html\mirror.htm-en aurkitutako ispilu saio bakar baten konfigurazioa da.
The web orrialdeak ispilu saio bakar baten konfigurazio zehatza eskaintzen du. Konfiguratutako parametro guztiak zerrendatzen dira.

• Egin klik "Gorde" botoian uneko konfigurazioa aplikatzeko.
• Egin klik "Berrezarri" botoian uneko konfigurazioa berrezartzeko.
• Egin klik "Utzi"-ra itzultzekoview ispilu saioen

Ispilua&RMIspilua konfigurazioa

Ezarpen orokorrak

Iturburuko VLAN(k) konfigurazioa

Portuaren konfigurazioa

7. irudia. ExampIspilu-saioaren konfigurazio zehatzaren fitxategia
"Gorde", "Berrezarri" eta "Utzi" botoiak html kodearen bidez gehitzen dira:

JSON komando-fluxua
Orri honek bi urratseko komando-fluxua behar du:

• Lehenik eta behin gailuaren gaitasunak lortu behar ditu "mirror.capabilities.get" metodoarekin. Gaitasunak ez dira aldatzen eta behin bakarrik irakurri behar dira.
• Ondoren, gailuaren uneko konfigurazioa lortu behar du "mirror.config.session.get" metodoak erabiliz, "port.status.get" eta pilatuz gero "topo.config.stacking.get".

"mirror.capabilities.get"-ren deia "domready" gertaerak abiarazten du eta emaitza requestUpdate funtzioak kudeatzeko konfiguratuta dago.
Eguneratze eskaerak "mirror.config.session.get"-ren deia hasiko du.
“port.status.get” eta pilatuz gero “topo.config.stacking.get” eta dei horien emaitzak prepareUpdate funtzioak kudeatzeko konfiguratuta daude.
prepareUpdate funtzioak emaitza guztiak bilduko ditu, eta guztiak jaso direnean bakarrik deituko du processUpdate funtzioari, erakutsiko diren taulak eraikiko dituena. web.

Erreferentziak

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

Dokumentuak / Baliabideak

Microsemi AN1256 Web Programatzaileen aplikazioa [pdfErabiltzailearen gida AN1256, AN1256 Web Programatzaileen aplikazioa, Web Programatzaileen Aplikazioa, Aplikazioa

Erreferentziak

• Erabiltzailearen eskuliburua