Kính hiển vi AN1256 Web ứng dụng lập trình viên

Giới thiệu

JSON (JavaScript Object Notation) là một chuẩn mở file định dạng sử dụng văn bản có thể đọc được của con người để trao đổi dữ liệu. Đây là định dạng dữ liệu phổ biến được sử dụng cho giao tiếp máy chủ/trình duyệt không đồng bộ.
Đối với cái mới web thiết kế trang, định dạng JSON có thể thay thế cho phong cách AJAX ban đầu. So với AJAX, sử dụng JSON làm cho Web việc triển khai dễ dàng và đơn giản hơn. Nhà phát triển chỉ cần tập trung vào web thiết kế trang và Web việc triển khai trình xử lý có thể được bỏ qua vì phương thức truy cập JSON đã được hỗ trợ trong mỗi WebMô-đun phần mềm StaX.
Tài liệu này nêu hướng dẫn cho các lập trình viên về kỹ sư phần mềm cần phát triển Web trang qua JSON. Các thủ tục chi tiết và exampcũng được bao gồm trong các phần sau.

Luồng truy cập dữ liệu JSON

Quaview
Đây là luồng truy cập dữ liệu JSON mà kết nối HTTP được khởi tạo từ máy khách (trình duyệt). Bảng HTML được tạo động theo dữ liệu JOSN nhận được từ phía máy chủ (DUT).

Hình 1. Luồng truy cập giữa máy khách và máy chủ

Dữ liệu JSON yêu cầu/phản hồi
Gói yêu cầu JSON dựa trên phương thức gửi yêu cầu HTTP và nội dung phải tuân theo định dạng JSON của MSCC.

• Yêu cầu cú pháp JSON:{"phương pháp":" ”,”tham số”:[ ], “id:”jsonrpc”}
• Cú pháp JSON phản hồi: {"lỗi": ,"kết quả": , “id:”jsonrpc”}

Các ảnh chụp nhanh sau đây hiển thị nội dung JSON giữa trình duyệt và DUT.

Hình 2. Ảnh chụp nhanh yêu cầu HTTP từ máy khách

Hình 3. Ảnh chụp nhanh phản hồi HTTP từ máy chủ

Đặc tả JSON của MSCC
Để có được thông tin JSON đầy đủ bao gồm phương thức, tham số, mô tả, v.v. Nhập “http:// /json_spec” trên thanh địa chỉ trình duyệt của bạn. Có một phương pháp truy cập khác thông qua tên phương pháp JSON “jsonRpc.status.introspection.specific.inventory.get”, nó được sử dụng cho một phương pháp cụ thể.

Hình 4. Ảnh chụp nhanh đặc tả JSON web trang

Web khung

Các Web khuôn khổ trong WebPhần mềm StaX dựa trên MooTools nguồn mở. Đây là tập hợp các tiện ích JavaScript có giấy phép MIT. (http://mootools.net/license.txt) Thanh menu và hầu hết web Các trang dựa trên nền tảng này. Cả thuật toán AJAX và JSON đều đã được tích hợp trong các tiện ích của nó.
Bên cạnh đó, WebPhần mềm StaX cung cấp các tiện ích khác hữu ích cho JSON web thiết kế trang.

• json.js – Sử dụng for để truyền/nhận dữ liệu động với cú pháp JSON.
• dynforms.js – Sử dụng để tạo bảng HTML một cách động.
• xác thực.js – Sử dụng để xác thực biểu mẫu HTML.

Các thư viện JavaScript đầy đủ nằm trong thư mục cây nguồn: webstax2\ vtss_appl\webThư viện html.

Hướng dẫn cho JSON Web thiết kế trang

Phần này hướng dẫn cách thiết kế một web trang dựa trên thư viện JavaScript của MSCC. Chúng tôi sử dụng Mirror được cấu hình toàn cục web trang như cũample ở đây. Giao tiếp không đồng bộ dựa trên phương thức truy cập JSON HTTP và tất cả các tham số được cấu hình toàn cục đều được liệt kê trong một bảng HTML động.
Các web Bố cục trang được liệt kê bên dưới và mã nguồn đầy đủ nằm trong thư mục cây nguồn: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Để có được thông thường hơn web trang tham khảo, xem phần phụ lục.

Bảng cấu hình Mirror & RMirror

Hình 5. Example của bảng được cấu hình toàn cục

Biên tập Web trang

Tiêu đề HTML
Bao gồm các thư viện JS cần thiết trong HTML tag.

Khởi tạo tài nguyên bảng động

• Khi tài liệu HTML đã sẵn sàng, hãy gọi DynamicTable() để khởi tạo tài nguyên bảng động.
• DynamicTable() được sử dụng để tạo bảng động sau khi nhận được dữ liệu JSON.
• Sau đó nó sẽ gọi requestUpdate để bắt đầu luồng lệnh JSON.

1. cửa sổ.addEvent('domready', hàm() {
2. // Tạo một biểu mẫu có thân bảng để nhận/truyền dữ liệu JSON
3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. yêu cầuCập Nhật();
5. });

Dữ liệu JSON yêu cầu/phản hồi

• Khi tài liệu HTML đã sẵn sàng, hãy sử dụng requestJsonDoc() để gửi yêu cầu JSON “mirror.config.session.get” để lấy thông tin về các phiên đã cấu hình.
• Sau khi dữ liệu JSON cho “mirror.capabilities.get” được nhận, hàm gọi lại requestUpdate() sẽ được xử lý. Sau đó, hàm requestUpdate sẽ gọi “mirror.config.session.get” để lấy cấu hình hiện tại. Khi cấu hình hiện tại được nhận, hàm processUpdate được gọi để xây dựng bảng sẽ được hiển thị.

1. hàm requestUpdate()
2. {
3. // Khôi phục nội dung bảng
4. myDynamicTable.restore();
   5
5. // Bảng này có hai dữ liệu JSON.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Xử lý dữ liệu JSON đã nhận

• Hàm processUpdate() được sử dụng để bố trí bảng động sau khi nhận được dữ liệu JSON.
• addRows() được sử dụng để thêm các hàng bảng. myDynamicTable.update() bố trí
  Bảng HTML theo dữ liệu trong các hàng của bảng.

1. chức năng processUpdate(recv_json, tên)
2. {
3. // Bỏ qua quá trình nếu không nhận được dữ liệu
4. nếu (!recv_json) {
5. alert(“Lấy dữ liệu động không thành công.”);
6. trở lại;
7. }
8. // Lưu dữ liệu JSON đã nhận
9. myDynamicTable.saveRecvJson(“cấu hình”, recv_json);
10. // Thêm hàng bảng
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(các_hàng_bảng);
14. // Cập nhật bảng động này
15. myDynamicTable.update();
17. // Làm mới bộ đếm thời gian
18. var autorefresh = document.getElementById(“autorefresh”);
19. nếu (tự động làm mới & tự động làm mới.đã kiểm tra) {
20. nếu (timerID) {
21. xóa thời gian chờ(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Thêm hàng bảng

• Trong hàm addRows(), chúng ta sử dụng định dạng JSON để điền vào từng tham số được cấu hình chung trong hàng của bảng.
• Tất cả các trường HTML được liệt kê trong mảng JSON (“table_rows”) và cú pháp của trường bảng như bên dưới.

Cú pháp:
hàng_bảng:[ , , … ] : { , , … }
: {"kiểu": , “params”:[ , , …, ]}

• Trong trường hợp này, mỗi hàng có năm trường: “Session ID”, “Mode”, “Type”, “VLAN ID” và “Reflector Port” Ví dụ:amplà,

• myDynamicTable.addRows() sẽ chuyển đổi dữ liệu JSON sang định dạng HTML và xuất ra bảng HTML.

1. hàm addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Không có”, none_interface_text = “KHÔNG CÓ”;
4. var Tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {các trường:[
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=" + key, key]},
7. {kiểu:”văn bản”, tham số:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {kiểu:”văn bản”, tham số:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “mirror” ? “-“:
   val.RMirrorVlan, “c”]},
10. {kiểu:”văn bản”, tham số:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. hàng trả về;
13. }
14. hàm addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Thêm tiêu đề bảng
19. thêm Header(các_dòng_bảng);
20. // Thêm một hàng đơn
21. Đối tượng.each(recv_json, hàm(bản ghi) {
22. table_rows.push(addRow(bản ghi.key, bản ghi.val));
23. });
24. trả về table_rows;
25. }

Web trang trợ giúp
Đối với web thiết kế trang trợ giúp, mô tả trợ giúp có thể tham chiếu đến đặc tả JSON, văn bản mô tả có thể nhất quán với đầu ra JSON và giúp giảm các mô tả trùng lặp. Ví dụampThông tin ở đây được lấy từ cấu hình rơle dhcp6.

Siêu liên kết trong nguồn file
Chỉ định trợ giúp file vị trí trong nguồn của nó file HTML tag. Tên biến cố định “help_page” được sử dụng cho web trang trợ giúp bài tập.

2. // Trang trợ giúp ma thuật
3. var help_page = “/help/help_xxx.htm”;

Cập nhật mô tả trường HTML từ thông số kỹ thuật JSON

• Sử dụng hoặc HTML tag để khai báo mô tả bảng HTML và cung cấp một ID duy nhất cho tag.
• Khi tài liệu HTML đã sẵn sàng, hãy gọi loadXMLDoc() để lấy toàn bộ thông số kỹ thuật JSON hoặc lấy mô tả phương thức cụ thể theo tên phương thức JSON “jsonRpc.status.introspection.specific.inventory.get”.
• processTableDesc() được sử dụng để cập nhật mô tả bảng và processUpdate() được sử dụng để cập nhật mô tả tham số bảng.
• Trong processUpdate(), gọi updateTableParamsDesc() để cập nhật các phần tử JSON khớp với tên phần tử cụ thể.
• Cập nhật hoặc tag HTML bên trong theo mô tả phần tử.

2. /* Cập nhật các trường mô tả HTML */
3. hàm processTableDesc(req) {
4. nếu (!req.responseText) {
5. trở lại;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Cập nhật mô tả bảng
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Cập nhật mô tả tham số bảng HTML */
12. chức năng processUpdate(recv_json) {
13. // Cập nhật mô tả tham số bảng
14. var param_names = [
15. {
16. “alias”: “Giao diện”,
17. “kiểu”: “vtss_ifindex_t”,
18. “tên”: “vlanInterface”,
19. “hậu tố”: “.”
20. },
21. {
22. “alias”: “Giao diện chuyển tiếp”,
23. “kiểu”: “vtss_ifindex_t”,
24. “tên”: “relayVlanInterface”,
25. “hậu tố”: “. Id của giao diện được sử dụng để chuyển tiếp.”
26. },
27. {
28. “alias”: “Điểm đến chuyển tiếp”,
29. “kiểu”: “mesa_ipv6_t”,
30. “tên”: “relay_destination”,
31. “hậu tố”: “. Địa chỉ IPv6 của máy chủ DHCPv6 yêu cầu sẽ được chuyển tiếp đến. Giá trị mặc định 'ff05::1:3' mans 'bất kỳ máy chủ DHCP nào'.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Lấy thông số kỹ thuật JSON */
37. cửa sổ.addEvent('domready', hàm () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Siêu liên kết trong thanh menu

• Mã nguồn HTML của thanh menu được tạo ra từ file webstax2\vtss_appl\web\ menu_default.cxx.
• Chỉnh sửa các mục trong này file cho Web siêu liên kết trang.

1. #nếu được xác định(VTSS_SW_OPTION_DHCP6_RELAY)
2. MỤC(” Rơle, dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

GHI CHÚ
Lưu ý rằng số ký tự khoảng trắng trong ITEM(“”), được sử dụng để quyết định cấp độ nhóm trong thanh menu. Trong trường hợp này, tất cả web các trang nằm trong nhóm “DHCPv6”.

Hình 6. Ví dụample của bảng được cấu hình toàn cục

Phụ lục

Đặc trưng web trang

Có một số điển hình web các trang có thể được sử dụng cho thiết kế tham khảo. Một ví dụ bổ sungampNội dung được hiển thị ở đây là cấu hình của một phiên bản phản chiếu duy nhất được tìm thấy trong vtss_appl\mirror\html\mirror.htm.
Các web trang cung cấp cấu hình chi tiết cho một phiên bản phản chiếu duy nhất. Tất cả các tham số được cấu hình đều được liệt kê.

• Nhấp vào nút “Lưu” để áp dụng cấu hình hiện tại.
• Nhấp vào nút “Đặt lại” để đặt lại cấu hình hiện tại.
• Nhấp vào “Hủy” để quay lạiview của các phiên họp phản chiếu

Cấu hình Mirror&RMirror

Cài đặt toàn cầu

Cấu hình VLAN nguồn

Cấu hình cổng

Hình 7. Example của cấu hình chi tiết của phiên bản phản chiếu
Các nút “Lưu”, “Đặt lại” và “Hủy” được thêm vào bằng mã html:

Luồng lệnh JSON
Trang này yêu cầu luồng lệnh gồm hai bước:

• Đầu tiên, nó cần lấy các khả năng của thiết bị bằng phương pháp “mirror.capabilities.get”. Các khả năng không thay đổi và chỉ cần đọc một lần.
• Sau đó, nó cần lấy cấu hình hiện tại của thiết bị bằng các phương pháp “mirror.config.session.get”, “port.status.get” và trong trường hợp xếp chồng thì sử dụng “topo.config.stacking.get”.

Cuộc gọi “mirror.capabilities.get” được khởi tạo bởi sự kiện “domready” và kết quả được cấu hình để xử lý bởi hàm requestUpdate.
requestUpdate sẽ khởi tạo lệnh gọi “mirror.config.session.get”,
“port.status.get” và trong trường hợp xếp chồng “topo.config.stacking.get” và kết quả của các cuộc gọi này được cấu hình để được xử lý bởi hàm prepareUpdate.
Hàm prepareUpdate sẽ thu thập tất cả các kết quả và chỉ khi tất cả đã được nhận thì nó mới gọi hàm processUpdate để xây dựng các bảng được hiển thị trên web.

Tài liệu tham khảo

1. WikipediaJavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. Công cụ mặt trăng https://mootools.net/

Tài liệu / Tài nguyên

Kính hiển vi AN1256 Web ứng dụng lập trình viên [tập tin pdf] Hướng dẫn sử dụng AN1256, AN1256 Web Ứng dụng lập trình viên, Web Ứng dụng lập trình, Ứng dụng

Tài liệu tham khảo

• Hướng dẫn sử dụng