Microsemi AN1256 Web Aplicație pentru programatori

Introducere

JSON (JavaScript Object Notation) este un standard deschis file format care utilizează text care poate fi citit de om pentru schimbul de date. Este un format de date obișnuit utilizat pentru comunicarea asincronă browser/server.
Pentru nou web designul paginii, formatul JSON poate fi un înlocuitor pentru stilul original AJAX. Comparați cu AJAX, folosind JSON face Web implementare mai usoara si mai simpla. Dezvoltatorul trebuie doar să se concentreze pe web designul paginii și Web Implementarea handlerului poate fi omisă, deoarece metoda de acces JSON este deja acceptată în fiecare Webmodule software StaX.
Acest document prevede ghidul programatorilor pentru inginerul de software care trebuie să dezvolte Web pagina prin JSON. Procedurile de detaliu și exampfișierele incluse și în următoarele secțiuni.

Flux de acces la date JSON

Pesteview
Iată fluxul de acces la date JSON pe care o conexiune HTTP este inițiată de la client (browser). Tabelul HTML este creat dinamic în funcție de datele JOSN primite din partea serverului (DUT).

Figura 1. Fluxul de acces între client și server

Date JSON de solicitare/răspuns
Pachetul de solicitare JSON se bazează pe metoda de postare a cererii HTTP, iar conținutul trebuie să urmeze formatul MSCC JSON.

• Solicitați sintaxa JSON:{"metodă":" „”,”params”:[ ], „id:”jsonrpc”}
• Sintaxa JSON de răspuns: {"eroare": ,"rezultat": , „id:”jsonrpc”}

Următoarele instantanee arată conținutul JSON dintre browser și DUT.

Figura 2. Instantaneu al solicitării HTTP de la client

Figura 3. Instantaneu al răspunsului HTTP de la server

Specificația MSCC JSON
Pentru a obține informații complete JSON, inclusiv metoda, parametrul, descrierea și etc. Tastați „http:// /json_spec” pe bara de adrese a browserului. Există o altă metodă de acces prin numele metodei JSON „jsonRpc.status.introspection.specific.inventory.get”, este folosită pentru o anumită metodă.

Figura 4. Instantaneu al specificației JSON web pagină

Web cadru

The Web cadru în WebSoftware-ul StaX se bazează pe o sursă deschisă MooTools. Este o colecție de utilitare JavaScript cu licență MIT. (http://mootools.net/license.txt) Bara de meniu și majoritatea web paginile se bazează pe cadru. Atât algoritmul AJAX, cât și JSON sunt deja integrate în utilitățile sale.
In plus, WebSoftware-ul StaX oferă celelalte utilitare care sunt utile pentru JSON web designul paginii.

• json.js – Utilizați pentru a transmite/primi date dinamice cu sintaxa JSON.
• dynforms.js – Utilizați pentru a crea tabelul HTML în mod dinamic.
• validate.js – Utilizați pentru validarea formularului HTML.

Bibliotecile JavaScript complete se află sub directorul arborelui sursă: webstax2\ vtss_appl\web\html\lib.

Ghid pentru JSON Web designul paginii

Această secțiune ghidează modul de proiectare a web pagină bazată pe bibliotecile MSCC JavaScript. Folosim configurația globală Mirror web pagina ca example aici. Comunicarea asincronă se bazează pe metoda de acces HTTP JSON și toți parametrii configurați la nivel global sunt listați într-un tabel HTML dinamic.
The web aspectul paginii este listat mai jos, iar codul sursă complet se află sub directorul arborelui sursă: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Pentru a deveni mai tipic web pagini de referință, vezi secțiunea de anexe.

Tabel de configurare Mirror& RMirror

Figura 5. Exampfișierul tabelului configurat global

Edita Web pagină

Antet HTML
Includeți bibliotecile JS necesare în HTML tag.

Inițializați resursa tabelului dinamic

• Când documentul HTML este gata, apelați DynamicTable() pentru a inițializa resursa tabelului dinamic.
• DynamicTable() este folosit pentru a crea tabelul dinamic după primirea datelor JSON.
• Apoi va apela requestUpdate pentru a iniția fluxul de comandă JSON.

1. window.addEvent('domready', function() {
2. // Creați un formular cu corpul tabelului pentru primirea/transmiterea datelor JSON
3. myDynamicTable = new DynamicTable(„myTableContent”, „config”,”plusRowCtrlBar”);
   4
4. cerereActualizare();
5. });

Date JSON de solicitare/răspuns

• Când documentul HTML este gata, utilizați requestJsonDoc() pentru a trimite cererea JSON „mirror.config.session.get” pentru a obține informații despre sesiunile configurate.
• După ce sunt primite datele JSON pentru „mirror.capabilities.get”, funcția de apel invers requestUpdate() va fi procesată. Funcția requestUpdate va apela apoi „mirror.config.session.get” pentru a obține configurația curentă. Când se primește configurația curentă, funcția processUpdate este apelată pentru a construi tabelul care urmează să fie afișat.

1. funcția requestUpdate()
2. {
3. // Restabiliți conținutul tabelului
4. myDynamicTable.restore();
   5
5. // Acest tabel are două date JSON.
6. requestJsonDoc(„mirror.config.session.get”, null, processUpdate, „config”);
7. }

Procesați datele JSON primite

• Funcția processUpdate() este utilizată pentru a dispune tabelul dinamic după primirea datelor JSON.
• AddRows() este folosit pentru a adăuga rânduri de tabel. myDynamicTable.update() aspectul
  Tabel HTML conform datelor din rândurile tabelului.

1. funcția processUpdate (recv_json, nume)
2. {
3. // Ignorați procesul dacă nu sunt primite date
4. dacă (!recv_json) {
5. alert(„Obținerea datelor dinamice a eșuat.”);
6. reveni;
7. }
8. // Salvați datele JSON primite
9. myDynamicTable.saveRecvJson(„config”, recv_json);
10. // Adăugați rânduri de tabel
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Actualizați acest tabel dinamic
15. myDynamicTable.update();
17. // Reîmprospătați temporizatorul
18. var autorefresh = document.getElementById(“autorefresh”);
19. dacă (autoîmprospătare && autorefresh.checked) {
20. if (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Adăugați rânduri de tabel

• În funcția addRows(), folosim formatul JSON pentru a completa fiecare parametru global configurat din rândul tabelului.
• Toate câmpurile HTML sunt listate în matricea JSON ("table_rows"), iar sintaxa câmpului tabelului este mai jos.

Sintaxă:
table_rows:[ , ,… ] : { , ,… }
: {„tip”: , „params”:[ , , …, ]}

• În acest caz, fiecare rând are cinci câmpuri: „Session ID”, „Mode”, „Type”, „VLAN ID” și „Reflector Port” De exempluample,

ID sesiune (Câmp de nume: int32_t)	1 (Id-ul sesiunii în oglindă)
Modul (Câmp de nume: vtss_bool_t)	adevărat (Însemnând că sesiunea în oglindă este activată)
Tip (Câmp de nume: enumerare {oglindă, rMirrorSource, rMirrorDestination}	Sursa RMirror (aceasta este sursa unei sesiuni de oglindă la distanță
ID VLAN (Câmp de nume: uint16_t)	200 (vlan-ul folosit pentru oglindire)
Port reflector (Câmp de nume: vtss_ifindex_t)	Gi 1/1 (Portul către care este trimis traficul în oglindă

• myDynamicTable.addRows() va converti datele JSON în format HTML și va scoate tabelul HTML.

1. funcția addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = „Niciun”, none_interface_text = „NIMIC”;
4. var tunnel_mode_suffix = val.TunnelMode == „useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {fields:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=" + key, key]},
7. {tip:”text”, parametri:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, parametri:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “oglindă” ? „-“:
   val.RMirrorVlan, „c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: „-” , „c”]}
11. ]};
12. rândul de întoarcere;
13. }
14. funcția addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Adăugați antetul tabelului
19. addHeader(rânduri_tabel);
20. // Adăugați un singur rând
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. returnează table_rows;
25. }

Web pagina de ajutor
Pentru web proiectarea paginii de ajutor, descrierea de ajutor se poate referi la specificația JSON, că textul descrierii poate fi în concordanță cu ieșirea JSON și ajută la reducerea descrierilor redundante. Exampchiul de aici este preluat din configurația releului dhcp6.

Hyper-link în sursă file
Atribuiți ajutorul file locația în sursa sa file HTML tag. Numele variabilei fixe „help_page” este folosit pentru web alocarea paginii de ajutor.

2. // Magia paginii de ajutor
3. var help_page = „/help/help_xxx.htm”;

Actualizați descrierea câmpului HTML din specificația JSON

• Utilizare sau HTML tag pentru a declara descrierea tabelului HTML și a dat un ID unic pentru tag.
• Când documentul HTML este gata, apelați loadXMLDoc() pentru a obține întreaga specificație JSON sau pentru a obține descrierea metodei specifice prin numele metodei JSON „jsonRpc.status.introspection.specific.inventory.get”.
• ProcessTableDesc() este folosit pentru a actualiza descrierea tabelului și processUpdate() este folosit pentru a actualiza descrierea parametrului tabelului.
• În processUpdate(), apelați updateTableParamsDesc() pentru a actualiza elementele JSON care se potrivesc cu numele elementelor specifice.
• Actualizați sau tag HTML interior conform descrierea elementului.

2. /* Actualizați câmpurile de descriere HTML */
3. funcția processTableDesc(req) {
4. dacă (!req.responseText) {
5. reveni;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Actualizați descrierea tabelului
9. $(„TableDesc”).innerHTML = getJsonSpecElement(json_spec, „groups”, „dhcp6_relay.config.vlan”).description;
10. }
11. /* Actualizați descrierea parametrului tabelului HTML */
12. funcția processUpdate(recv_json) {
13. // Actualizați descrierea parametrului tabelului
14. var param_names = [
15. {
16. „alias”: „Interfață”,
17. „tip”: „vtss_ifindex_t”,
18. „nume”: „vlanInterface”,
19. „sufix”: „.”
20. },
21. {
22. „alias”: „Interfață releu”,
23. „tip”: „vtss_ifindex_t”,
24. „nume”: „relayVlanInterface”,
25. „sufix”: „. Id-ul interfeței utilizat pentru retransmitere.”
26. },
27. {
28. „alias”: „Destinație releu”,
29. „tip”: „mesa_ipv6_t”,
30. „nume”: „destinație_releu”,
31. „sufix”: „. Adresa IPv6 a serverului DHCPv6 către care solicitările vor fi transmise. Valoarea implicită „ff05::1:3” are „orice server DHCP”.
32. }
33. ];
34. updateTableParamsDesc(„TableParamsDesc”, recv_json, „dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Obține specificația 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. });

Hyperlink în bara de meniu

• Codul sursă HTML al barei de meniu este generat din file webstax2\vtss_appl\web\ menu_default.cxx.
• Editați elementele din aceasta file pentru Web hyperlink la pagină.

1. #dacă este definit(VTSS_SW_OPTION_DHCP6_RELAY)
2. ARTICOL ("Releu,dhcp6_releu.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Observați că numărul de caractere de spațiu din ARTICOL (""), care este folosit pentru a decide nivelul grupului în bara de meniu. În acest caz, toate web paginile se află în grupul „DHCPv6”.

Figura 6. Exampfișierul tabelului configurat global

Apendice

Tipic web pagini

Există mai multe tipice web paginile pot fi folosite pentru designul de referință. Un ex în plusampfișierul care trebuie afișat aici este configurația unei singure sesiuni oglindă găsită în vtss_appl\mirror\html\mirror.htm.
The web pagina oferă configurația detaliată pentru o singură sesiune în oglindă. Toți parametrii configurați sunt listați.

• Faceți clic pe butonul „Salvare” pentru a aplica configurația curentă.
• Faceți clic pe butonul „Resetare” pentru a reseta configurația curentă.
• Faceți clic pe „Anulare” pentru a reveni la finalview a sesiunilor în oglindă

Configurare oglindă&RMoglindă

Setări globale

Configurație VLAN(e) sursă

Configurare port

Figura 7. Exampfișierul de configurare detaliată a sesiunii oglindă
Butoanele „Salvare”, „Resetare” și „Anulare” sunt adăugate de codul html:

Flux de comandă JSON
Această pagină necesită un flux de comandă în doi pași:

• Mai întâi trebuie să obțină capacitățile dispozitivului cu metoda „mirror.capabilities.get”. Capacitățile nu se modifică și trebuie citite o singură dată.
• Apoi trebuie să obțină configurația curentă a dispozitivului folosind metodele „mirror.config.session.get”, „port.status.get” și în cazul stivuirii „topo.config.stacking.get”.

Apelul „mirror.capabilities.get” este inițiat de evenimentul „domready” și rezultatul este configurat pentru a fi gestionat de funcția requestUpdate.
RequestUpdate va iniția apelul „mirror.config.session.get”,
„port.status.get” și în cazul stivuirii „topo.config.stacking.get” și rezultatele acestor apeluri sunt configurate pentru a fi gestionate de funcția prepareUpdate.
Funcția prepareUpdate va colecta toate rezultatele și numai după ce au fost primite toate va apela funcția processUpdate care va construi tabelele care urmează să fie afișate pe web.

Referințe

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

Documente/Resurse

Microsemi AN1256 Web Aplicație pentru programatori [pdfGhid de utilizare AN1256, AN1256 Web Aplicație pentru programatori, Web Aplicație pentru programatori, aplicație

Referințe

• Manual de utilizare