Mikrosemi AN1256 Web Aplikacja dla programistów

Wstęp

JSON (JavaScript Object Notation) jest otwartym standardem file formacie, w którym do wymiany danych wykorzystuje się tekst czytelny dla człowieka. Jest to powszechny format danych używany do asynchronicznej komunikacji przeglądarka/serwer.
Dla nowego web projektu strony, format JSON może zastąpić oryginalny styl AJAX. W porównaniu z AJAX, użycie JSON sprawia, że Web wdrożenie łatwiejsze i prostsze. Deweloper musi się tylko skupić web projekt strony i Web Implementację modułu obsługi można pominąć, ponieważ metoda dostępu JSON jest już obsługiwana w każdym z nich WebModuły oprogramowania StaX.
Dokument ten stanowi przewodnik programisty dla inżyniera oprogramowania, który musi opracować oprogramowanie Web stronę za pośrednictwem JSON. Szczegółowe procedury i npamppliki są również zawarte w poniższych sekcjach.

Przepływ dostępu do danych JSON

Nadview
Oto przepływ dostępu do danych JSON, podczas którego połączenie HTTP jest inicjowane z klienta (przeglądarki). Tabela HTML tworzona jest dynamicznie na podstawie otrzymanych danych JOSN ze strony serwera (DUT).

Rysunek 1. Przepływ dostępu między klientem a serwerem

Dane JSON żądania/odpowiedzi
Pakiet żądania JSON jest oparty na metodzie wysyłania żądania HTTP, a zawartość musi być zgodna z formatem MSCC JSON.

• Poproś o składnię JSON:{"metoda":" ”,„parametry”:[ ], „id:”jsonrpc”}
• Składnia JSON odpowiedzi: {"błąd": ,"wynik": , „id:”jsonrpc”}

Poniższe migawki przedstawiają zawartość JSON między przeglądarką a urządzeniem DUT.

Rysunek 2. Migawka żądania HTTP od klienta

Rysunek 3. Migawka odpowiedzi HTTP z serwera

Specyfikacja MSCC JSON
Aby uzyskać pełne informacje JSON, w tym metodę, parametr, opis itp. Wpisz „http:// /json_spec” na pasku adresu przeglądarki. Istnieje inna metoda dostępu poprzez metodę JSON o nazwie „jsonRpc.status.introspection.specific.inventory.get”, jest ona używana dla konkretnej metody.

Rysunek 4. Migawka specyfikacji JSON web strona

Web struktura

Ten Web ramy w WebOprogramowanie StaX oparte jest na otwartym kodzie źródłowym MooTools. Jest to zbiór narzędzi JavaScript z licencją MIT. (http://mootools.net/license.txt) Pasek menu i większość web strony oparte są na frameworku. Zarówno algorytmy AJAX, jak i JSON są już zintegrowane z jego narzędziami.
Oprócz, WebOprogramowanie StaX zapewnia inne narzędzia przydatne dla JSON web projekt strony.

• json.js – Użyj for do przesyłania/odbierania danych dynamicznych przy użyciu składni JSON.
• dyforms.js – Służy do dynamicznego tworzenia tabeli HTML.
• zatwierdź.js – Służy do sprawdzania poprawności formularza HTML.

Pełne biblioteki JavaScript znajdują się w katalogu drzewa źródłowego: webstax2\ vtss_appl\web\html\lib.

Wytyczne dotyczące JSON Web projekt strony

W tej sekcji opisano, jak zaprojektować a web strona oparta na bibliotekach JavaScript MSCC. Używamy globalnej konfiguracji Mirror web strona jako example tutaj. Komunikacja asynchroniczna opiera się na metodzie dostępu HTTP JSON, a wszystkie globalnie skonfigurowane parametry są wymienione w jednej dynamicznej tabeli HTML.
Ten web układ strony jest wymieniony poniżej, a pełny kod źródłowy znajduje się w katalogu drzewa źródłowego: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Aby uzyskać bardziej typowe web odniesienia do stron, zobacz sekcję w załączniku.

Tabela konfiguracji lustrzanych i RMirror

Rysunek 5. Exampplik globalnie skonfigurowanej tabeli

Redagować Web strona

Nagłówek HTML
Dołącz potrzebne biblioteki JS do kodu HTML tag.

Zainicjuj zasób tabeli dynamicznej

• Gdy dokument HTML będzie gotowy, wywołaj funkcję DynamicTable(), aby zainicjować zasób tabeli dynamicznej.
• Funkcja DynamicTable() służy do tworzenia tabeli dynamicznej po otrzymaniu danych JSON.
• Następnie wywoła requestUpdate w celu zainicjowania przepływu poleceń JSON.

1. window.addEvent('domready', funkcja() {
2. // Utwórz formularz z treścią tabeli do odbierania/przesyłania danych JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. żądanieAktualizacji();
5. });

Dane JSON żądania/odpowiedzi

• Gdy dokument HTML będzie gotowy, użyj requestJsonDoc() w celu wysłania żądania JSON „mirror.config.session.get” w celu uzyskania informacji o skonfigurowanych sesjach.
• Po odebraniu danych JSON dla „mirror.capabilities.get” zostanie przetworzona funkcja wywołania zwrotnego requestUpdate(). Funkcja requestUpdate wywoła następnie „mirror.config.session.get”, aby uzyskać bieżącą konfigurację. Po odebraniu bieżącej konfiguracji wywoływana jest funkcja ProcessUpdate w celu zbudowania tabeli do wyświetlenia.

1. funkcja requestUpdate()
2. {
3. // Przywróć zawartość tabeli
4. moja tabela dynamiczna.restore();
   5
5. // Ta tabela zawiera dwa dane JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, ProcessUpdate, “config”);
7. }

Przetwórz otrzymane dane JSON

• Funkcja ProcessUpdate() służy do układania tabeli dynamicznej po otrzymaniu danych JSON.
• Funkcja addRows() służy do dodawania wierszy tabeli. układ myDynamicTable.update()
  Tabela HTML według danych w wierszach tabeli.

1. funkcja procesUpdate(recv_json, nazwa)
2. {
3. // Zignoruj ​​proces, jeśli nie zostaną odebrane żadne dane
4. jeśli (!recv_json) {
5. alert(„Pobieranie danych dynamicznych nie powiodło się.”);
6. powrót;
7. }
8. // Zapisz otrzymane dane JSON
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Dodaj wiersze tabeli
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(wiersze_tabeli);
14. // Zaktualizuj tę dynamiczną tabelę
15. myDynamicTable.update();
17. // Odśwież licznik czasu
18. var autorefresh = document.getElementById(“autorefresh”);
19. if (autorefresh && autorefresh.checked) {
20. jeśli (ID timera) {
21. clearTimeout(ID timera);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Dodaj wiersze tabeli

• W funkcji addRows() używamy formatu JSON do wypełnienia każdego globalnie skonfigurowanego parametru w wierszu tabeli.
• Wszystkie pola HTML są wymienione w tablicy JSON („table_rows”), a składnia pola tabeli znajduje się poniżej.

Składnia:
wiersze_tabeli:[ , ,… ] : { , ,… }
: {"typ": , „parametry”:[ , , …, ]}

• W tym przypadku w każdym wierszu znajduje się pięć pól: „ID sesji”, „Tryb”, „Typ”, „ID VLAN” i „Port reflektora”. Np.ampLe,

Identyfikator sesji (Pole nazwy: int32_t)	1 (Identyfikator sesji lustrzanej)
Tryb (Pole nazwy: vtss_bool_t)	PRAWDA (Oznacza to, że sesja lustrzana jest włączona)
Typ (Pole nazwy: wyliczenie {mirror, rMirrorSource, rMirrorDestination}	Źródło RMirror (jest to źródło zdalnej sesji lustrzanej
Identyfikator sieci VLAN (Pole nazwy: uint16_t)	200 (VLAN używany do tworzenia kopii lustrzanych)
Port reflektora (Pole nazwy: vtss_ifindex_t)	Gi 1/1 (Port, do którego wysyłany jest ruch lustrzany

• Funkcja myDynamicTable.addRows() przekonwertuje dane JSON na format HTML i wygeneruje tabelę HTML.

1. funkcja addRow(klucz, wartość)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = „Brak”, none_interface_text = „Brak”;
4. var tunel_mode_suffix = val.TunnelMode == „useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + „)” : „”;
5. var wiersz = {pola:[
6. {type:”link”, params:[„cr”, „mirror.htm?session_id=” + klucz, klucz]},
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 == „lustro” ? „-”:
   val.RMirrorVlan, „c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    wartośćReflectorPort: „-”, „c”]}
11. ]};
12. powrót wiersz;
13. }
14. funkcja addRows(recv_json)
15. {
16. var wiersz, pusty_colspan = 7;
17. var table_rows = nowa tablica();
18. // Dodaj nagłówek tabeli
19. addHeader(tabela_wierszy);
20. // Dodaj pojedynczy wiersz
21. Obiekt.each(recv_json, funkcja(rekord) {
22. table_rows.push(addRow(rekord.klucz, rekord.wartość));
23. });
24. zwróć wiersze_tabeli;
25. }

Web strona pomocy
Dla web projekt strony pomocy, opis pomocy może odnosić się do specyfikacji JSON, aby tekst opisu był zgodny z danymi wyjściowymi JSON i pomaga zredukować zbędne opisy. ByłyampPlik tutaj pochodzi z konfiguracji przekaźnika dhcp6.

Hiperłącze w źródle file
Przypisz pomoc file miejsce w źródle file HTML tag. Stała nazwa zmiennej „help_page” jest używana dla web przypisanie strony pomocy.

2. // Magia strony pomocy
3. var help_page = „/help/help_xxx.htm”;

Zaktualizuj opis pola HTML ze specyfikacji JSON

• Używać Lub HTML tag zadeklarować opis tabeli HTML i nadać mu unikalny identyfikator tag.
• Gdy dokument HTML będzie gotowy, wywołaj funkcję LoadXMLDoc(), aby uzyskać całą specyfikację JSON lub uzyskać opis konkretnej metody według nazwy metody JSON „jsonRpc.status.introspection.specific.inventory.get”.
• Metoda ProcessTableDesc() służy do aktualizacji opisu tabeli, a ProcessUpdate() służy do aktualizacji opisu parametrów tabeli.
• W procesie ProcessUpdate() wywołaj updateTableParamsDesc(), aby zaktualizować elementy JSON, które odpowiadają konkretnym nazwom elementów.
• Zaktualizuj Lub tag wewnętrzny HTML zgodnie z opisem elementu.

2. /* Aktualizuj pola opisu HTML */
3. funkcja ProcessTableDesc(req) {
4. if (!req.responseText) {
5. powrót;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Zaktualizuj opis tabeli
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Aktualizuj opis parametrów tabeli HTML */
12. funkcja procesUpdate(recv_json) {
13. // Zaktualizuj opis parametrów tabeli
14. var param_names = [
15. {
16. „alias”: „Interfejs”,
17. „typ”: „vtss_ifindex_t”,
18. „nazwa”: „interfejs vlan”,
19. „przyrostek”: „.”
20. },
21. {
22. „alias”: „Interfejs przekaźnikowy”,
23. „typ”: „vtss_ifindex_t”,
24. „nazwa”: „interfejs przekaźnikaVlan”,
25. „przyrostek”: „. Identyfikator interfejsu używanego do przekazywania.”
26. },
27. {
28. „alias”: „Miejsce docelowe przekaźnika”,
29. „typ”: „mesa_ipv6_t”,
30. „nazwa”: „miejsce docelowe_przekaźnika”,
31. „przyrostek”: „. Adres IPv6 serwera DHCPv6, do którego będą przekazywane żądania. Wartość domyślna „ff05::1:3” obsługuje „dowolny serwer DHCP”.
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Uzyskaj specyfikację JSON */
37. window.addEvent('domready', funkcja () {
38. loadingXMLDoc(“/json_spec”, ProcessTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, ProcessUpdate);
40. });

Hiperłącze na pasku menu

• Z pliku generowany jest kod źródłowy HTML paska menu file webstax2\vtss_appl\web\ menu_default.cxx.
• Edytuj elementy w tym file dla Web hiperłącze do strony.

1. #jeśli zdefiniowano (VTSS_SW_OPTION_DHCP6_RELAY)
2. ELEMENT(”Przekaźnik,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTATKA
Zwróć uwagę, że liczba znaków spacji w ELEMENT(„”), która służy do określenia poziomu grupy na pasku menu. W tym przypadku wszystkie web strony znajdują się w grupie „DHCPv6”.

Rysunek 6. Exampplik globalnie skonfigurowanej tabeli

Załącznik

Typowy web strony

Jest kilka typowych web strony można wykorzystać do projektu referencyjnego. Jeden dodatkowy npampPlik, który należy tutaj pokazać, to konfiguracja pojedynczej sesji lustrzanej znaleziona w pliku vtss_appl\mirror\html\mirror.htm.
Ten web strona zawiera szczegółową konfigurację pojedynczej sesji lustrzanej. Wyświetlone zostaną wszystkie skonfigurowane parametry.

• Kliknij przycisk „Zapisz”, aby zastosować bieżącą konfigurację.
• Kliknij przycisk „Resetuj”, aby zresetować bieżącą konfigurację.
• Kliknij „Anuluj”, aby powrócić do poprzedniego etapuview sesji lustrzanych

Konfiguracja kopii lustrzanej i RMirror

Ustawienia globalne

Konfiguracja źródłowych sieci VLAN

Konfiguracja portu

Rysunek 7. Exampplik szczegółowej konfiguracji sesji lustrzanej
Przyciski „Zapisz”, „Resetuj” i „Anuluj” dodaje kod HTML:

Przepływ poleceń JSON
Ta strona wymaga dwuetapowego przepływu poleceń:

• Najpierw musi uzyskać możliwości urządzenia metodą „mirror.capabilities.get”. Możliwości się nie zmieniają i należy je przeczytać tylko raz.
• Następnie należy pobrać aktualną konfigurację urządzenia metodami „mirror.config.session.get”, „port.status.get” oraz w przypadku stackowania „topo.config.stacking.get”.

Wywołanie „mirror.capabilities.get” jest inicjowane przez zdarzenie „domready”, a wynik jest skonfigurowany do obsługi przez funkcję requestUpdate.
requestUpdate zainicjuje wywołanie „mirror.config.session.get”,
„port.status.get” oraz w przypadku stosu „topo.config.stacking.get”, a wyniki tych wywołań są skonfigurowane tak, aby były obsługiwane przez funkcję przygotowaniaUpdate.
Funkcja przygotowaniaUpdate zbierze wszystkie wyniki i dopiero po ich otrzymaniu wywoła funkcję ProcessUpdate, która skonstruuje tabele, które zostaną pokazane na web.

Odniesienia

1. JavaScript w Wikipedii https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. KsiężycNarzędzia https://mootools.net/

Dokumenty / Zasoby

Mikrosemi AN1256 Web Aplikacja dla programistów [plik PDF] Instrukcja użytkownika AN1256, AN1256 Web Aplikacja dla programistów, Web Aplikacja dla programistów, aplikacja

Odniesienia

• Instrukcja obsługi