Mikrosemi AN1256 Web Programcı Uygulaması

giriiş

JSON (JavaScript Nesne Gösterimi) açık bir standarttır file veri alışverişi için insan tarafından okunabilir metin kullanan biçim. Eşzamansız tarayıcı/sunucu iletişimi için kullanılan yaygın bir veri biçimidir.
Yeni için web sayfa tasarımı, JSON formatı orijinal AJAX stilinin yerine kullanılabilir. AJAX ile karşılaştırıldığında, JSON kullanımı Web uygulanması daha kolay ve basit. Geliştiricinin yalnızca odaklanması gereken şey web sayfa tasarımı ve Web JSON erişim yöntemi her birinde zaten desteklendiğinden işleyici uygulaması atlanabilir WebStaX yazılım modülleri.
Bu belge, yazılım mühendislerinin yazılım geliştirmesi için programcı kılavuzunu belirtir. Web sayfa JSON üzerinden. Ayrıntılı prosedürler ve eskiampBunlar ayrıca aşağıdaki bölümlerde de yer almaktadır.

JSON veri erişim akışı

Üzerindeview
İşte istemciden(tarayıcıdan) HTTP bağlantısının başlatıldığı JSON veri erişim akışı. HTML tablosu, sunucu(DUT) tarafından alınan JOSN verilerine göre dinamik olarak oluşturulur.

Şekil 1. İstemci ve sunucu arasındaki erişim akışı

İstek/Yanıt JSON verileri
JSON istek paketi HTTP istek gönderme yöntemine dayanmaktadır ve içeriğin MSCC JSON formatını takip etmesi gerekmektedir.

• İstek JSON sözdizimi:{“yöntem”:” ”,”parametreler”:[ ], “kimlik:”jsonrpc”}
• Yanıt JSON sözdizimi: {"hata": ,"sonuç": , “kimlik:”jsonrpc”}

Aşağıdaki anlık görüntüler tarayıcı ile DUT arasındaki JSON içeriğini göstermektedir.

Şekil 2. İstemciden gelen HTTP isteğinin anlık görüntüsü

Şekil 3. Sunucudan gelen HTTP yanıtının anlık görüntüsü

MSCC JSON spesifikasyonu
Yöntem, parametre, açıklama vb. dahil olmak üzere tam JSON bilgisini almak için “http://” yazın. Tarayıcınızın adres çubuğundaki "/json_spec". JSON yöntem adı "jsonRpc.status.introspection.specific.inventory.get" üzerinden başka bir erişim yöntemi daha vardır, belirli bir yöntem için kullanılır.

Şekil 4. JSON spesifikasyonunun anlık görüntüsü web sayfa

Web çerçeve

The Web çerçeve WebStaX yazılımı açık kaynaklı MooTools'a dayanmaktadır. MIT lisansına sahip bir JavaScript yardımcı programları koleksiyonudur.http://mootools.net/license.txt) Menü çubuğu ve çoğu web sayfalar çerçeveye dayanmaktadır. Hem AJAX hem de JSON algoritması yardımcı programlarına zaten entegre edilmiştir.
Ayrıca, WebStaX yazılımı, JSON için yararlı olan diğer yardımcı programları sağlar web sayfa tasarımı.

• json.js – Dinamik verileri JSON sözdizimiyle iletmek/almak için kullanılır.
• dynforms.js – HTML tablosunu dinamik olarak oluşturmak için kullanılır.
• doğrula.js – HTML formunun doğrulanması için kullanılır.

Tam JavaScript kütüphaneleri kaynak ağacı dizininin altında bulunur: webstax2\ vtss_uygulaması\web\html\lib.

JSON için kılavuz Web sayfa tasarımı

Bu bölüm, bir tasarımın nasıl yapılacağına dair rehberlik eder web sayfa MSCC JavaScript kütüphanelerine dayanmaktadır. Mirror global yapılandırılmışını kullanıyoruz web sayfa eski olarakampBurada. Asenkron iletişim HTTP JSON erişim yöntemine dayanmaktadır ve tüm global yapılandırılmış parametreler tek bir dinamik HTML tablosunda listelenmiştir.
The web Sayfa düzeni aşağıda listelenmiştir ve tam kaynak kodu kaynak ağacı dizininin altında bulunmaktadır: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Daha tipik hale getirmek için web Sayfa referansları için ekler bölümüne bakınız.

Ayna& R Ayna Yapılandırma Tablosu

Şekil 5. Exampküresel yapılandırılmış tablonun le'si

Düzenlemek Web sayfa

HTML başlığı
HTML'de ihtiyaç duyulan JS kitaplıklarını ekleyin tag.

Dinamik tablo kaynağını başlatın

• HTML belgesi hazır olduğunda, dinamik tablo kaynağını başlatmak için DynamicTable()'ı çağırın.
• DynamicTable(), JSON verisi alındıktan sonra dinamik tabloyu oluşturmak için kullanılır.
• Daha sonra JSON komut akışını başlatmak için requestUpdate'i çağıracaktır.

1. pencere.addEvent('domready', fonksiyon() {
2. // JSON verilerini almak/iletmek için tablo gövdesine sahip bir form oluşturun
3. myDynamicTable = yeni DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. istekGüncelleme();
5. });

İstek/Yanıt JSON verileri

• HTML dokümanı hazır olduğunda, yapılandırılmış oturumlar hakkında bilgi almak için requestJsonDoc() metodunu kullanarak “mirror.config.session.get” JSON isteğini gönderin.
• “mirror.capabilities.get” için JSON verisi alındıktan sonra, geri çağırma işlevi requestUpdate() işlenecektir. requestUpdate işlevi daha sonra geçerli yapılandırmayı almak için “mirror.config.session.get”i çağıracaktır. Geçerli yapılandırma alındığında, gösterilecek tabloyu oluşturmak için processUpdate işlevi çağrılır.

1. fonksiyon requestUpdate()
2. {
3. // Tablo içeriğini geri yükle
4. myDynamicTable.geri yükle();
   5
5. // Bu tablo iki JSON verisinden oluşuyor.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Alınan JSON verilerini işleyin

• processUpdate() fonksiyonu JSON verisi alındıktan sonra dinamik tablonun düzenini belirlemek için kullanılır.
• addRows() tablo satırları eklemek için kullanılır. myDynamicTable.update() düzeni
  Tablo satırlarındaki verilere göre HTML tablosu.

1. processUpdate(recv_json, name) işlevi
2. {
3. // Veri alınmazsa işlemi yoksay
4. eğer (!recv_json) {
5. alert(“Dinamik veri alma işlemi başarısız oldu.”);
6. geri dönmek;
7. }
8. // Alınan JSON verilerini kaydedin
9. myDynamicTable.saveRecvJson(“yapılandırma”, recv_json);
10. // Tablo satırlarını ekle
11. var tablo_satırları = satır_ekle(recv_json);
12. myDynamicTable.addRows(tablo_satırları);
14. // Bu dinamik tabloyu güncelle
15. myDynamicTable.güncelle();
17. // Yenileme zamanlayıcısı
18. var autorefresh = document.getElementById(“otomatik yenileme”);
19. eğer (otomatik yenileme ve otomatik yenileme.işaretlendi) {
20. eğer (zamanlayıcıKimliği) {
21. clearTimeout(zamanlayıcıKimliği);
22. }
23. timerID = setTimeout('requestUpdate()', ayarlarYenilemeAralığı());
24. }
25. }

Tablo satırları ekle

• addRows() fonksiyonunda, tablo satırındaki her global yapılandırılmış parametreyi doldurmak için JSON formatını kullanırız.
• Tüm HTML alanları JSON dizisinde (“table_rows”) listelenmiştir ve tablo alanının sözdizimi aşağıdadır.

Sözdizimi:
tablo_satırları:[ , , … ] : { , , … }
: {"tip": , “parametreler”:[ , , …, ]}

• Bu durumda her satırda beş alan vardır: “Oturum Kimliği”, “Mod”, “Tür”, “VLAN Kimliği” ve “Yansıtıcı Bağlantı Noktası” Örneğinampley,

Oturum Kimliği (Ad alanı: int32_t)	1 (Ayna oturumunun kimliği)
Mod (Ad alanı: vtss_bool_t)	doğru (Ayna oturumunun etkinleştirildiği anlamına gelir)
Tip (Ad alanı: numaralandırma {ayna, rAynaKaynağı, rAynaHedefi}	RMirror Kaynağı (bu uzak bir ayna oturumunun kaynağıdır
VLAN Kimliği (Ad alanı: uint16_t)	200 (yansıtma için kullanılan vlan)
Reflektör Bağlantı Noktası (Ad alanı: vtss_ifindex_t)	1/1 Gi (Yansıtılmış trafiğin gönderildiği port

• myDynamicTable.addRows() JSON verisini HTML formatına dönüştürecek ve HTML tablosunu çıktı olarak verecektir.

1. addRow(anahtar, val) işlevi
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Hiçbiri”, none_interface_text = “HİÇBİRİ”;
4. var tünel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var satır = {alanlar:[
6. {type:”link”, parametreler:[“cr”, “mirror.htm?session_id=” + anahtar, anahtar]},
7. {tür:”metin”, parametreler:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {tür:”metin”, parametreler:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, parametreler:[val.Type == “ayna” ? “-“:
   val.RMirrorVlan, “c”]},
10. {type:”text”, parametreler:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. satır döndür;
13. }
14. addRows(recv_json) işlevi
15. {
16. var satır, boş_sütungen = 7;
17. var tablo_satırları = yeni Dizi();
18. // Tablo başlığı ekle
19. addHeader(tablo_satırları);
20. // Tek satır ekle
21. Nesne.each(recv_json, fonksiyon(kayıt) {
22. table_rows.push(addRow(kayıt.anahtar, kayıt.val));
23. });
24. tablo_satırlarını döndür;
25. }

Web yardım sayfası
İçin web yardım sayfası tasarımı, yardım açıklaması JSON spesifikasyonuna başvurabilir, açıklama metni JSON çıktısıyla tutarlı olabilir ve gereksiz açıklamaları azaltmaya yardımcı olur. Örn.ampBurada dhcp6 röle konfigürasyonundan alınmıştır.

Kaynaktaki köprü metni file
Yardımı atayın file kaynağında yer file HTML tagSabit değişken adı “help_page” şu amaçlar için kullanılır: web yardım sayfası ödevi.

2. // Yardım sayfası büyüsü
3. var yardım_sayfası = “/yardım/yardım_xxx.htm”;

HTML alan açıklamasını JSON spesifikasyonundan güncelle

• Kullanmak veya HTML tag HTML tablo açıklamasını bildirmek ve benzersiz bir kimlik vermek için tag.
• HTML dokümanı hazır olduğunda, tüm JSON spesifikasyonunu almak için loadXMLDoc()'u çağırın veya JSON metot adı olan "jsonRpc.status.introspection.specific.inventory.get" ile belirli metot açıklamasını alın.
• processTableDesc() tablo açıklamasını güncellemek için kullanılır ve processUpdate() tablo parametre açıklamasını güncellemek için kullanılır.
• processUpdate()'te, belirli eleman adlarıyla eşleşen JSON elemanlarını güncellemek için updateTableParamsDesc()'i çağırın.
• Güncelle veya tag eleman açıklamasına göre iç HTML.

2. /* HTML açıklama alanlarını güncelle */
3. işlev processTableDesc(req) {
4. eğer (!req.responseText) {
5. geri dönmek;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Tablo açıklamasını güncelle
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “gruplar”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* HTML tablo parametre açıklamasını güncelle */
12. işlev processUpdate(recv_json) {
13. // Tablo parametre açıklamasını güncelle
14. var parametre_adları = [
15. {
16. “takma ad”: “Arayüz”,
17. “tür”: “vtss_ifindex_t”,
18. “isim”: “vlanArayüz”,
19. “ek”: “.”
20. },
21. {
22. “takma ad”: “Röle Arayüzü”,
23. “tür”: “vtss_ifindex_t”,
24. “isim”: “relayVlanInterface”,
25. “sonek”: “. Aktarma için kullanılan arayüzün kimliği.”
26. },
27. {
28. “alias”: “Röle Hedefi”,
29. “tür”: “mesa_ipv6_t”,
30. “isim”: “röle_hedefi”,
31. “sonek”: “. İsteklerin iletileceği DHCPv6 sunucusunun IPv6 adresi. Varsayılan değer 'ff05::1:3' 'herhangi bir DHCP sunucusunu' ifade eder.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* JSON spesifikasyonunu al */
37. pencere.addEvent('domready', fonksiyon () {
38. loadXMLDoc(“/json_spec”, TabloAçıklama işlemini gerçekleştir);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, işlemGüncellemesi);
40. });

Menü çubuğundaki köprü metni

• Menü çubuğunun HTML kaynak kodu şu şekilde üretilir: file webstax2\vtss_uygulaması\web\ menu_default.cxx.
• Bu bölümdeki öğeleri düzenleyin file için Web sayfa hiper bağlantısı.

1. #eğer tanımlanmışsa(VTSS_SW_OPTION_DHCP6_RELAY)
2. ÖĞE(”Röle,dhcp6_relay.htm”);
3. #endif //VTSS_SW_SEÇENEĞİ_DHCP6_RÖLE

NOT
Menü çubuğundaki grup seviyesini belirlemek için kullanılan ITEM(“”) içindeki boşluk karakteri sayısına dikkat edin. Bu durumda, tüm web sayfalar “DHCPv6” grubu altındadır.

Şekil 6. Örampküresel yapılandırılmış tablonun le'si

Ek

Tipik web sayfalar

Birkaç tipik durum var web sayfalar referans tasarımı için kullanılabilir. Bir ek örnekampBurada gösterilecek olan, vtss_appl\mirror\html\mirror.htm'de bulunan tek bir mirror oturumunun yapılandırmasıdır.
The web sayfa tek bir ayna oturumu için ayrıntılı yapılandırmayı sağlar. Tüm yapılandırılmış parametreler listelenir.

• Mevcut yapılandırmayı uygulamak için “Kaydet” butonuna tıklayın.
• Mevcut yapılandırmayı sıfırlamak için “Sıfırla” butonuna tıklayın.
• Geri dönmek için "İptal"e tıklayınview ayna seansları

Mirror&RMirror Yapılandırması

Küresel Ayarlar

Kaynak VLAN(lar) Yapılandırması

Port Yapılandırması

Şekil 7. Exampayna oturumunun ayrıntılı yapılandırmasının dosyası
“Kaydet”, “Sıfırla” ve “İptal” butonları html koduyla eklenmiştir:

JSON Komut akışı
Bu sayfa iki adımlı bir komut akışı gerektiriyor:

• Öncelikle cihazın yeteneklerini “mirror.capabilities.get” metoduyla alması gerekiyor. Yetenekler değişmez ve sadece bir kez okunması gerekir.
• Daha sonra “mirror.config.session.get”, “port.status.get” ve yığınlama durumunda “topo.config.stacking.get” yöntemlerini kullanarak cihazın güncel yapılandırmasını alması gerekir.

“mirror.capabilities.get” çağrısı “domready” olayı tarafından başlatılır ve sonuç requestUpdate fonksiyonu tarafından işlenecek şekilde yapılandırılır.
requestUpdate, “mirror.config.session.get” çağrısını başlatacaktır.
“port.status.get” ve yığınlama durumunda “topo.config.stacking.get” çağrıları yapılır ve bu çağrıların sonuçları prepareUpdate fonksiyonu tarafından işlenecek şekilde yapılandırılır.
prepareUpdate fonksiyonu tüm sonuçları toplayacak ve yalnızca hepsi alındığında, gösterilecek tabloları oluşturacak olan processUpdate fonksiyonunu çağıracaktır. web.

Referanslar

1. Vikipedi JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. AyAraçları https://mootools.net/

Belgeler / Kaynaklar

Mikrosemi AN1256 Web Programcı Uygulaması [pdf] Kullanıcı Kılavuzu AN1256, AN1256 Web Programcı Uygulaması, Web Programcı Uygulaması, Uygulama

Referanslar

• Kullanıcı Kılavuzu