ไมโครเซมิ AN1256 Web ใบสมัครโปรแกรมเมอร์

การแนะนำ

JSON (JavaScript Object Notation) เป็นมาตรฐานเปิด file รูปแบบที่ใช้ข้อความที่มนุษย์อ่านได้ในการแลกเปลี่ยนข้อมูล เป็นรูปแบบข้อมูลทั่วไปที่ใช้สำหรับการสื่อสารเบราว์เซอร์/เซิร์ฟเวอร์แบบอะซิงโครนัส
สำหรับคนใหม่ web การออกแบบหน้ารูปแบบ JSON สามารถแทนที่รูปแบบ AJAX เดิมได้ เปรียบเทียบกับ AJAX โดยใช้ JSON ทำให้ Web การใช้งานง่ายและสะดวกขึ้น ผู้พัฒนาต้องให้ความสำคัญเท่านั้น web การออกแบบเพจและ Web การใช้งานตัวจัดการสามารถละเว้นได้เนื่องจากวิธีการเข้าถึง JSON ได้รับการสนับสนุนในแต่ละวิธีแล้ว Webโมดูลซอฟต์แวร์ StaX
เอกสารนี้ระบุคู่มือโปรแกรมเมอร์สำหรับวิศวกรซอฟต์แวร์ที่ต้องพัฒนา Web หน้าผ่าน JSON ขั้นตอนรายละเอียดและอดีตampไฟล์ยังรวมอยู่ในส่วนต่อไปนี้ด้วย

ขั้นตอนการเข้าถึงข้อมูล JSON

เกินview
นี่คือโฟลว์การเข้าถึงข้อมูล JSON ซึ่งการเชื่อมต่อ HTTP เริ่มต้นจากไคลเอนต์ (เบราว์เซอร์) ตาราง HTML ถูกสร้างขึ้นแบบไดนามิกตามข้อมูล JOSN ที่ได้รับจากฝั่งเซิร์ฟเวอร์ (DUT)

รูปที่ 1. โฟลว์การเข้าถึงระหว่างไคลเอ็นต์และเซิร์ฟเวอร์

ขอ/ตอบกลับข้อมูล JSON
แพ็กเก็ตคำขอ JSON ใช้วิธีการโพสต์คำขอ HTTP และเนื้อหาต้องเป็นไปตามรูปแบบ MSCC JSON

• ขอไวยากรณ์ JSON:{"วิธี":" ”,”พารามิเตอร์”:[ ], “รหัส:”jsonrpc”}
• ไวยากรณ์ JSON ตอบสนอง: {"ข้อผิดพลาด": ,"ผลลัพธ์": , “รหัส:”jsonrpc”}

ภาพรวมต่อไปนี้แสดงเนื้อหา JSON ระหว่างเบราว์เซอร์และ DUT

รูปที่ 2. สแนปชอตของคำขอ HTTP จากลูกค้า

รูปที่ 3. สแนปชอตของการตอบสนอง HTTP จากเซิร์ฟเวอร์

ข้อกำหนด MSCC JSON
หากต้องการรับข้อมูล JSON แบบเต็ม รวมถึงเมธอด พารามิเตอร์ คำอธิบาย และอื่นๆ ให้พิมพ์ “http:// /json_spec” บนแถบที่อยู่ของเบราว์เซอร์ มีวิธีการเข้าถึงอื่นโดยใช้ชื่อวิธี JSON “jsonRpc.status.introspection.specific.inventory.get” ซึ่งใช้สำหรับวิธีเฉพาะ

รูปที่ 4. ภาพรวมของข้อกำหนด JSON web หน้าหนังสือ

Web กรอบ

การ Web กรอบใน Webซอฟต์แวร์ StaX ใช้ MooTools แบบโอเพ่นซอร์ส เป็นชุดของโปรแกรมอรรถประโยชน์ JavaScript พร้อมใบอนุญาต MIT (http://mootools.net/license.txt) แถบเมนูและส่วนใหญ่ web หน้าจะขึ้นอยู่กับกรอบ อัลกอริทึมทั้ง AJAX และ JSON ได้รวมอยู่ในยูทิลิตี้แล้ว
นอกจาก, Webซอฟต์แวร์ StaX มียูทิลิตี้อื่นๆ ที่มีประโยชน์สำหรับ JSON web การออกแบบหน้า

• json.js – ใช้สำหรับการส่ง/รับข้อมูลไดนามิกด้วยไวยากรณ์ JSON
• dynforms.js – ใช้สำหรับสร้างตาราง HTML แบบไดนามิก
• ตรวจสอบ js – ใช้สำหรับตรวจสอบรูปแบบ HTML

ไลบรารี JavaScript แบบเต็มจะอยู่ภายใต้ไดเร็กทอรีแผนผังต้นทาง: webstax2\ vtss_appl\web\html\lib.

แนวทางสำหรับ JSON Web การออกแบบหน้าเพจ

ส่วนนี้จะแนะนำวิธีการออกแบบ web หน้าขึ้นอยู่กับไลบรารี MSCC JavaScript เราใช้ Mirror global ที่กำหนดค่าไว้ web หน้าเป็นแฟนเก่าampที่นี่ การสื่อสารแบบอะซิงโครนัสใช้วิธีการเข้าถึง HTTP JSON และพารามิเตอร์ที่กำหนดค่าส่วนกลางทั้งหมดจะแสดงอยู่ในตาราง HTML ไดนามิกตารางเดียว
การ web เค้าโครงหน้าแสดงอยู่ด้านล่างและซอร์สโค้ดแบบเต็มอยู่ใต้ไดเร็กทอรีแผนผังต้นทาง: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm เพื่อให้เป็นแบบฉบับมากขึ้น web อ้างอิงหน้า ดูส่วนภาคผนวก

ตารางการกำหนดค่า Mirror & RMirror

รูปที่ 5. Example ของตารางที่กำหนดค่าส่วนกลาง

แก้ไข Web หน้าหนังสือ

ส่วนหัวของ HTML
รวมไลบรารี JS ที่จำเป็นใน HTML tag.

เริ่มต้นทรัพยากรตารางแบบไดนามิก

• เมื่อเอกสาร HTML พร้อม ให้เรียก DynamicTable() เพื่อเริ่มต้นทรัพยากรตารางไดนามิก
• DynamicTable() ใช้เพื่อสร้างตารางไดนามิกหลังจากได้รับข้อมูล JSON
• จากนั้นจะเรียก requestUpdate เพื่อเริ่มต้นโฟลว์คำสั่ง JSON

1. window.addEvent ('domready', function () {
2. // สร้างฟอร์มที่มีเนื้อตารางเพื่อรับ/ส่งข้อมูล JSON
3. myDynamicTable = DynamicTable ใหม่ (“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. ขออัพเดท ();
5. -

ขอ/ตอบกลับข้อมูล JSON

• เมื่อเอกสาร HTML พร้อมแล้ว ให้ใช้ requestJsonDoc() เพื่อส่งคำขอ JSON “mirror.config.session.get” เพื่อรับข้อมูลเกี่ยวกับเซสชันที่กำหนดค่า
• หลังจากได้รับข้อมูล JSON สำหรับ “mirror.capabilities.get” แล้ว ฟังก์ชันการเรียกกลับ requestUpdate() จะได้รับการประมวลผล จากนั้นฟังก์ชัน requestUpdate จะเรียก “mirror.config.session.get” เพื่อรับการกำหนดค่าปัจจุบัน เมื่อได้รับการกำหนดค่าปัจจุบัน ฟังก์ชัน processUpdate จะถูกเรียกเพื่อสร้างตารางที่จะแสดง

1. ฟังก์ชัน requestUpdate()
2. {
3. // กู้คืนเนื้อหาตาราง
4. myDynamicTable.restore();
   5
5. // ตารางนี้สองข้อมูล JSON
6. requestJsonDoc (“mirror.config.session.get”, null, processUpdate, “config”);
7. }

ประมวลผลข้อมูล JSON ที่ได้รับ

• ฟังก์ชัน processUpdate() ใช้เพื่อจัดวางตารางไดนามิกหลังจากได้รับข้อมูล JSON
• addRows() ใช้เพื่อเพิ่มแถวของตาราง myDynamicTable.update() เค้าโครง
  ตาราง HTML ตามข้อมูลในแถวตาราง

1. ฟังก์ชัน processUpdate (recv_json, ชื่อ)
2. {
3. // ละเว้นกระบวนการหากไม่มีการรับข้อมูล
4. ถ้า (!recv_json) {
5. alert("การรับข้อมูลไดนามิกล้มเหลว");
6. กลับ;
7. }
8. // บันทึกข้อมูล JSON ที่ได้รับ
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // เพิ่มแถวของตาราง
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // อัปเดตตารางไดนามิกนี้
15. myDynamicTable.update();
17. // รีเฟรชตัวจับเวลา
18. var autorefresh = document.getElementById(“การรีเฟรชอัตโนมัติ”);
19. ถ้า (การรีเฟรชอัตโนมัติ && autorefresh.checked) {
20. ถ้า (timerID) {
21. clearTimeout (ตัวจับเวลา ID);
22. }
23. timerID = setTimeout ('requestUpdate ()', settingsRefreshInterval ());
24. }
25. }

เพิ่มแถวของตาราง

• ในฟังก์ชัน addRows() เราใช้รูปแบบ JSON เพื่อเติมพารามิเตอร์ที่กำหนดค่าส่วนกลางแต่ละตัวในแถวของตาราง
• ฟิลด์ HTML ทั้งหมดแสดงอยู่ในอาร์เรย์ JSON (“table_rows”) และไวยากรณ์ของฟิลด์ตารางอยู่ด้านล่าง

รูปแบบประโยค :
ตาราง_แถว:[ , , … ] : { , , … }
: {"พิมพ์": , “พารามิเตอร์”:[ , , …, ]}

• ในกรณีนี้ แต่ละแถวจะมีห้าฟิลด์: “Session ID”, “Mode”, “Type”, “VLAN ID” และ “Reflector Port” เช่นampเล,

รหัสเซสชั่น (ฟิลด์ชื่อ: int32_t)	1 (รหัสของเซสชันมิเรอร์)
โหมด (ฟิลด์ชื่อ: vtss_bool_t)	จริง (หมายถึงเปิดใช้งานเซสชันมิเรอร์)
พิมพ์ (ฟิลด์ชื่อ: การแจงนับ {มิเรอร์, rMirrorSource, rMirrorDestination}	ที่มา RMirror (นี่คือที่มาของเซสชันมิเรอร์ระยะไกล
รหัส VLAN (ฟิลด์ชื่อ: uint16_t)	200 (vlan ที่ใช้สำหรับการมิเรอร์)
พอร์ตสะท้อนแสง (ฟิลด์ชื่อ: vtss_ifindex_t)	กี1/1 (พอร์ตที่มิเรอร์ทราฟฟิกถูกส่งไป

• myDynamicTable.addRows() จะแปลงข้อมูล JSON เป็นรูปแบบ HTML และส่งออกตาราง HTML

1. ฟังก์ชัน addRow (คีย์ val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “ไม่มี”, none_interface_text = “ไม่มี”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. แถว var = {เขตข้อมูล:[
6. {ประเภท:”ลิงก์”, พารามิเตอร์:[“cr”, “mirror.htm?session_id=” + คีย์, คีย์]},
7. {ประเภท:”ข้อความ”, พารามิเตอร์:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {ประเภท:”ข้อความ”, พารามิเตอร์:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {ประเภท:”text”, พารามิเตอร์:[val.Type == “mirror” ? “-“:
   val.RMirrorVlan, “c”]},
10. {ประเภท:”ข้อความ” พารามิเตอร์:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “ค”]}
11. -
12. แถวกลับ
13. }
14. ฟังก์ชัน addRows(recv_json)
15. {
16. แถว var, blank_colspan = 7;
17. var table_rows = อาร์เรย์ใหม่ ();
18. // เพิ่มส่วนหัวของตาราง
19. addHeader(table_rows);
20. // เพิ่มแถวเดียว
21. Object.each (recv_json, ฟังก์ชัน (บันทึก) {
22. table_rows.push (addRow (record.key, record.val));
23. -
24. กลับ table_rows;
25. }

Web หน้าช่วยเหลือ
สำหรับ web การออกแบบหน้าความช่วยเหลือ คำอธิบายวิธีใช้สามารถอ้างถึงข้อกำหนด JSON ซึ่งข้อความคำอธิบายสามารถสอดคล้องกับเอาต์พุต JSON และช่วยลดคำอธิบายที่ซ้ำซ้อน อดีตample ที่นี่นำมาจากการกำหนดค่ารีเลย์ dhcp6

ไฮเปอร์ลิงก์ในแหล่งที่มา file
มอบหมายความช่วยเหลือ file ที่ตั้งในแหล่งที่มา file HTML tag. ชื่อตัวแปรคงที่ “help_page” ใช้สำหรับ web การกำหนดหน้าช่วยเหลือ

2. // มายากลหน้าช่วยเหลือ
3. var help_page = “/help/help_xxx.htm”;

อัปเดตคำอธิบายฟิลด์ HTML จากข้อกำหนด JSON

• ใช้ หรือ HTML tag เพื่อประกาศคำอธิบายตาราง HTML และให้ ID เฉพาะสำหรับ tag.
• เมื่อเอกสาร HTML พร้อม ให้เรียกใช้ loadXMLDoc() เพื่อรับข้อมูลจำเพาะ JSON ทั้งหมดหรือรับคำอธิบายวิธีการเฉพาะโดยใช้ชื่อวิธี JSON “jsonRpc.status.introspection.specific.inventory.get”
• processTableDesc() ใช้เพื่ออัพเดตคำอธิบายตาราง และ processUpdate() ใช้เพื่ออัพเดตคำอธิบายพารามิเตอร์ของตาราง
• ใน processUpdate() ให้เรียก updateTableParamsDesc() เพื่ออัพเดตองค์ประกอบ JSON ซึ่งตรงกับชื่อองค์ประกอบเฉพาะ
• อัพเดท หรือ tag HTML ภายในตามคำอธิบายองค์ประกอบ

2. /* ปรับปรุงฟิลด์คำอธิบาย HTML */
3. ฟังก์ชัน processTableDesc (ต้องการ) {
4. ถ้า (!req.responseText) {
5. กลับ;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // ปรับปรุงคำอธิบายตาราง
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).คำอธิบาย;
10. }
11. /* อัปเดตคำอธิบายพารามิเตอร์ตาราง HTML */
12. ฟังก์ชัน processUpdate (recv_json) {
13. // อัปเดตคำอธิบายพารามิเตอร์ของตาราง
14. var param_names = [
15. {
16. “นามแฝง”: “อินเทอร์เฟซ”,
17. “ประเภท”: “vtss_ifindex_t”,
18. “ชื่อ”: “vlanInterface”,
19. “คำต่อท้าย”: “.”
20. },
21. {
22. “นามแฝง”: “รีเลย์อินเทอร์เฟซ”,
23. “ประเภท”: “vtss_ifindex_t”,
24. “ชื่อ”: “รีเลย์ VlanInterface”,
25. “คำต่อท้าย”: “. รหัสของอินเทอร์เฟซที่ใช้สำหรับการถ่ายทอด”
26. },
27. {
28. “นามแฝง”: “ปลายทางรีเลย์”,
29. “ประเภท”: “mesa_ipv6_t”,
30. “ชื่อ”: “รีเลย์_ปลายทาง”,
31. “คำต่อท้าย”: “. ที่อยู่ IPv6 ของเซิร์ฟเวอร์ DHCPv6 ที่ร้องขอจะถูกส่งต่อไป ค่าเริ่มต้น 'ff05::1:3' มันหมายถึง 'เซิร์ฟเวอร์ DHCP ใดๆ'”
32. }
33. ];
34. updateTableParamsDesc (“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* รับข้อมูลจำเพาะ JSON */
37. window.addEvent ('domready', ฟังก์ชัน () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc (“jsonRpc.status.introspection. specific.inventory.get”, “dhcp6_relay.config.vlan”, กระบวนการอัปเดต);
40. -

ไฮเปอร์ลิงก์ในแถบเมนู

• ซอร์สโค้ด HTML ของแถบเมนูถูกสร้างขึ้นจาก file webstax2\vtss_appl\web\ เมนู_default.cxx.
• แก้ไขรายการในนี้ file สำหรับ Web ไฮเปอร์ลิงก์หน้า

1. #ถ้ากำหนดไว้(VTSS_SW_OPTION_DHCP6_RELAY)
2. รายการ(”รีเลย์,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

บันทึก
โปรดสังเกตว่าจำนวนอักขระเว้นวรรคใน ITEM("") ซึ่งใช้ในการกำหนดระดับกลุ่มในแถบเมนู ในกรณีนี้ทั้งหมด web หน้าที่อยู่ในกลุ่ม “DHCPv6”

รูปที่ 6 ตัวอย่างample ของตารางที่กำหนดค่าส่วนกลาง

ภาคผนวก

ทั่วไป web หน้า

มีหลายอย่างทั่วไป web หน้าสามารถใช้สำหรับการออกแบบอ้างอิง อดีตเพิ่มเติมหนึ่งampไฟล์ที่จะแสดงนี่คือการกำหนดค่าของเซสชันมิเรอร์เดียวที่พบใน vtss_appl\mirror\html\mirror.htm
การ web หน้าแสดงการกำหนดค่าโดยละเอียดสำหรับเซสชันมิเรอร์เดี่ยว พารามิเตอร์ที่กำหนดค่าทั้งหมดจะแสดงรายการ

• คลิกปุ่ม "บันทึก" เพื่อใช้การกำหนดค่าปัจจุบัน
• คลิกปุ่ม “รีเซ็ต” เพื่อรีเซ็ตการกำหนดค่าปัจจุบัน
• คลิก “ยกเลิก” เพื่อย้อนกลับไปยังจุดจบview ของเซสชันมิเรอร์

การกำหนดค่า Mirror&RMirror

การตั้งค่าทั่วไป

การกำหนดค่า VLAN ต้นทาง

การกำหนดค่าพอร์ต

รูปที่ 7. Exampไฟล์การกำหนดค่าโดยละเอียดของเซสชันมิเรอร์
ปุ่ม "บันทึก" "รีเซ็ต" และ "ยกเลิก" ถูกเพิ่มโดยรหัส html:

ลำดับคำสั่ง JSON
หน้านี้ต้องการโฟลว์คำสั่งสองขั้นตอน:

• ก่อนอื่นต้องได้รับความสามารถของอุปกรณ์ด้วยวิธีการ “mirror.capabilities.get” ความสามารถไม่เปลี่ยนแปลงและต้องอ่านเพียงครั้งเดียว
• จากนั้นจำเป็นต้องได้รับการกำหนดค่าปัจจุบันของอุปกรณ์โดยใช้วิธีการ “mirror.config.session.get”, “port.status.get” และในกรณีของการซ้อน “topo.config.stacking.get”

การเรียกใช้ “mirror.capabilities.get” เริ่มต้นโดยเหตุการณ์ “domready” และผลลัพธ์ได้รับการกำหนดค่าให้จัดการโดยฟังก์ชัน requestUpdate
requestUpdate จะเริ่มต้นการเรียก “mirror.config.session.get”
“port.status.get” และในกรณีของการสแต็ก “topo.config.stacking.get” และผลลัพธ์ของการเรียกใช้เหล่านี้ได้รับการกำหนดค่าให้จัดการโดยฟังก์ชัน prepareUpdate
ฟังก์ชันการเตรียมการอัปเดตจะรวบรวมผลลัพธ์ทั้งหมด และเมื่อได้รับทั้งหมดแล้วเท่านั้นจึงจะเรียกใช้ฟังก์ชัน processUpdate ซึ่งจะสร้างตารางเพื่อแสดงบน web.

อ้างอิง

1. วิกิพีเดียจาวาสคริปต์ https://en.wikipedia.org/wiki/JavaScript
2. เจสัน https://www.json.org/
3. มูนทูลส์ https://mootools.net/

เอกสาร / แหล่งข้อมูล

ไมโครเซมิ AN1256 Web ใบสมัครโปรแกรมเมอร์ [พีดีเอฟ] คู่มือการใช้งาน AN1256, เอเอ็น1256 Web แอปพลิเคชันโปรแกรมเมอร์, Web แอพพลิเคชั่นโปรแกรมเมอร์, แอพพลิเคชั่น

อ้างอิง

• คู่มือการใช้งาน