ميكروسيمي AN1256 Web تطبيق المبرمجين

مقدمة

JSON (JavaScript Object Notation) هو معيار مفتوح file تنسيق يستخدم نصًا يمكن للبشر قراءته لتبادل البيانات. إنه تنسيق بيانات شائع يستخدم للاتصال غير المتزامن بين المتصفح / الخادم.
للجديد web تصميم الصفحة ، يمكن أن يكون تنسيق JSON بديلاً لنمط AJAX الأصلي. قارن بـ AJAX ، فإن استخدام JSON يجعل الامتداد Web التنفيذ أسهل وأبسط. المطور يحتاج فقط إلى التركيز على web تصميم الصفحة و Web يمكن حذف تنفيذ المعالج نظرًا لأن طريقة الوصول إلى JSON مدعومة بالفعل في كل منها Webوحدات برنامج StaX.
يوضح هذا المستند دليل المبرمجين لمهندس البرمجيات الذي يحتاج إلى تطوير Web عبر JSON. الإجراءات التفصيلية ومثالamples مدرجة أيضًا في الأقسام التالية.

تدفق الوصول إلى بيانات JSON

زيادةview
إليك تدفق الوصول إلى بيانات JSON الذي يتم بدء اتصال HTTP من العميل (المتصفح). يتم إنشاء جدول HTML ديناميكيًا وفقًا لبيانات JOSN المستلمة من جانب الخادم (DUT).

الشكل 1. تدفق الوصول بين العميل والخادم

طلب / استجابة بيانات JSON
تعتمد حزمة طلب JSON على طريقة نشر طلب HTTP ويجب أن يتبع المحتوى تنسيق MSCC JSON.

• طلب بناء جملة JSON:{"طريقة":" "،" بارامس ": [ ] ، "id:" jsonrpc "}
• صيغة JSON للاستجابة: {"خطأ": ،"نتيجة": ، “id:” 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 ديناميكيًا.
• Validate.js - استخدم للتحقق من صحة نموذج HTML.

توجد مكتبات JavaScript الكاملة أسفل دليل شجرة المصدر: webstax2 \ vtss_appl \web\ html \ lib.

الدليل الإرشادي لـ JSON Web تصميم الصفحة

يرشد هذا القسم كيفية تصميم ملف web صفحة تستند إلى مكتبات MSCC JavaScript. نحن نستخدم المرآة العالمية المكونة web الصفحة كالسابقampجنيه هنا. يعتمد الاتصال غير المتزامن على طريقة وصول HTTP JSON ويتم سرد كافة المعلمات التي تم تكوينها بشكل عام في جدول HTML ديناميكي واحد.
ال web تخطيط الصفحة مدرج أدناه وشفرة المصدر الكاملة موجودة أسفل دليل شجرة المصدر: webstax2 \ vtss_appl \ مرآة \ html \ mirror_ctrl.htm. للحصول على نموذجية أكثر web مرجع الصفحات ، راجع قسم الملحق.

طاولة تكوين المرآة و RMirror

الشكل 5. Exampلو للجدول المكون العام

يحرر 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. requestUpdate () ،
5. });

طلب / استجابة بيانات JSON

• عندما يكون مستند HTML جاهزًا ، استخدم requestJsonDoc () لإرسال طلب JSON "mirror.config.session.get" للحصول على معلومات حول الجلسات التي تم تكوينها.
• بعد استلام بيانات JSON لـ “mirror.capabilities.get” ، ستتم معالجة وظيفة رد الاتصال requestUpdate (). ستستدعي الوظيفة requestUpdate "mirror.config.session.get" للحصول على التكوين الحالي. عند استلام التكوين الحالي ، يتم استدعاء عملية تحديث الوظيفة لإنشاء الجدول المراد عرضه.

1. طلب الوظيفةتحديث ()
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. وظيفة عملية التحديث (recv_json ، الاسم)
2. {
3. // تجاهل العملية في حالة عدم تلقي أي بيانات
4. إذا (! recv_json) {
5. تنبيه ("فشل الحصول على البيانات الديناميكية.") ؛
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 (“autorefresh”) ؛
19. إذا (autorefresh && autorefresh.checked) {
20. إذا (معرف الوقت) {
21. clearTimeout (timerID) ،
22. }
23. timerID = setTimeout ('requestUpdate ()'، settingsRefreshInterval ()) ؛
24. }
25. }

أضف صفوف الجدول

• في وظيفة addRows () ، نستخدم تنسيق JSON لملء كل معلمة تم تكوينها عالميًا في صف الجدول.
• يتم سرد جميع حقول HTML في مصفوفة JSON (“table_rows”) وتكون صيغة حقل الجدول أدناه.

بناء الجملة:
صفوف_الجدول:[ , ،… ] : { , ،… }
: {"يكتب": ، "بارامس": [ و ،…، ]}

• في هذه الحالة ، يحتوي كل صف على خمسة حقول: "معرف الجلسة" و "الوضع" و "النوع" و "معرف VLAN" و "منفذ العاكس" على سبيل المثال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 row = {حقول: [
6. {type: ”link”، params: [“cr”، “mirror.htm؟ session_id =” + key، key]}،
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 == "mirror"؟ "-":
   val.RMirrorVlan، “c”]} ،
10. {type: ”text”، params: [val.Type == “rMirrorSource”؟
    val.ReflectorPort: "-"، "ج"]}
11. ]} ؛
12. صف العودة
13. }
14. وظيفة addRows (recv_json)
15. {
16. var row، blank_colspan = 7 ؛
17. var table_rows = new Array () ؛
18. // إضافة رأس الجدول
19. addHeader (table_rows) ؛
20. // إضافة صف واحد
21. Object.each (recv_json ، الوظيفة (سجل) {
22. table_rows.push (addRow (record.key، record.val)) ؛
23. });
24. عودة الجدول_ows ؛
25. }

Web صفحة المساعدة
من اجل web تصميم صفحة المساعدة ، يمكن أن يشير وصف المساعدة إلى مواصفات JSON ، وأن نص الوصف يمكن أن يتوافق مع إخراج JSON ويساعد على تقليل الأوصاف الزائدة عن الحاجة. السابقample هنا مأخوذ من تكوين التتابع dhcp6.

الارتباط التشعبي في المصدر file
عيّن المساعدة file الموقع في مصدره file لغة البرمجة tag. يتم استخدام اسم المتغير الثابت "help_page" للملف web مهمة صفحة المساعدة.

2. // مساعدة سحر الصفحة
3. var help_page = "/help/help_xxx.htm" ؛

تحديث وصف حقل HTML من مواصفات JSON

• يستخدم أو لغة البرمجة tag للإعلان عن وصف جدول HTML وإعطائك معرفًا فريدًا لملف tag.
• عندما يكون مستند HTML جاهزًا ، اتصل بـ loadXMLDoc () للحصول على مواصفات JSON بالكامل أو احصل على وصف الطريقة المحددة بواسطة اسم طريقة JSON "jsonRpc.status.introspection.specific.inventory.get".
• يتم استخدام processTableDesc () لتحديث وصف الجدول ويتم استخدام processUpdate () لتحديث وصف معلمة الجدول.
• في processUpdate () ، قم باستدعاء updateTableParamsDesc () لتحديث عناصر JSON المطابقة لأسماء العناصر المحددة.
• قم بتحديث ملف أو tag داخلي HTML وفقًا لوصف العنصر.

2. / * تحديث حقول وصف HTML * /
3. دالة processTableDesc (req) {
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”). description؛
10. }
11. / * تحديث وصف معلمة جدول HTML * /
12. دالة processUpdate (recv_json) {
13. // تحديث وصف معلمة الجدول
14. فار بارام_أسماء = [
15. {
16. "الاسم المستعار": "الواجهة" ،
17. “type”: “vtss_ifindex_t” ،
18. "الاسم": "vlanInterface" ،
19. "لاحقة": "."
20. },
21. {
22. "الاسم المستعار": "واجهة الترحيل" ،
23. “type”: “vtss_ifindex_t” ،
24. "الاسم": "relayVlanInterface" ،
25. "لاحقة": ". معرّف الواجهة المستخدمة في الترحيل. "
26. },
27. {
28. "الاسم المستعار": "وجهة الترحيل" ،
29. “type”: “mesa_ipv6_t” ،
30. "الاسم": "relay_destination" ،
31. "لاحقة": ". عنوان IPv6 لخادم DHCPv6 الذي سيتم ترحيل الطلبات إليه. القيمة الافتراضية 'ff05 :: 1: 3' mans 'أي خادم DHCP'. "
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc" ، recv_json ، "dhcp6_relay.config.vlan.get" ، param_names) ؛
35. }
36. / * الحصول على مواصفات 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. });

ارتباط تشعبي في شريط القوائم

• يتم إنشاء كود مصدر HTML لشريط القوائم من file webstax2 \ vtss_appl \web\menu_default.cxx.
• قم بتحرير العناصر الموجودة في هذا file من اجل Web الارتباط التشعبي للصفحة.

1. # إذا تم تعريفه (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Relay، dhcp6_relay.htm") ؛
3. #endif // VTSS_SW_OPTION_DHCP6_RELAY

ملحوظة
لاحظ أن عدد حرف المسافة في ITEM ("") ، والذي يتم استخدامه لتحديد مستوى المجموعة في شريط القائمة. في هذه الحالة ، كل شيء web الصفحات موجودة ضمن مجموعة "DHCPv6".

الشكل 6. مثالampلو للجدول المكون العام

زائدة

عادي web الصفحات

هناك عدة نموذجية web يمكن استخدام الصفحات للتصميم المرجعي. مثال إضافي واحدample المراد إظهاره هنا هو تكوين جلسة مرآة واحدة موجودة في vtss_appl \ mirror \ html \ mirror.htm.
ال web توفر الصفحة التكوين التفصيلي لجلسة نسخ متطابقة واحدة. يتم سرد كافة المعلمات التي تم تكوينها.

• انقر فوق الزر "حفظ" لتطبيق التكوين الحالي.
• انقر فوق الزر "إعادة تعيين" لإعادة ضبط التكوين الحالي.
• انقر فوق "إلغاء" للعودة إلى النهايةview من جلسات المرآة

تكوين المرآة و 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" ويتم تكوين نتائج هذه الاستدعاءات ليتم معالجتها بواسطة الوظيفة PreparUpdate.
ستجمع الوظيفة PreparUpdate جميع النتائج ، وفقط عندما يتم استلام جميع النتائج ، ستستدعي الوظيفة processUpdate التي ستنشئ الجداول لعرضها على web.

مراجع

1. ويكيبيديا جافا سكريبت https://en.wikipedia.org/wiki/JavaScript
2. جيسون https://www.json.org/
3. أدوات القمر https://mootools.net/

المستندات / الموارد

ميكروسيمي AN1256 Web تطبيق المبرمجين [بي دي اف] دليل المستخدم AN1256، AN1256 Web تطبيق المبرمجين ، Web تطبيق المبرمجين ، التطبيق

مراجع

• دليل المستخدم