میکروسمی AN1256 Web برنامه برنامه نویسان

مقدمه

JSON (Notation Object JavaScript) یک استاندارد باز است file قالبی که از متن قابل خواندن برای انسان برای تبادل داده استفاده می کند. این یک فرمت داده رایج است که برای ارتباط ناهمزمان مرورگر/سرور استفاده می شود.
برای جدید web طراحی صفحه، فرمت JSON می تواند جایگزینی برای سبک اصلی AJAX باشد. در مقایسه با AJAX، استفاده از JSON باعث می شود Web پیاده سازی آسان تر و ساده تر توسعه دهنده فقط باید روی آن تمرکز کند web طراحی صفحه و Web پیاده سازی handler را می توان حذف کرد زیرا روش دسترسی 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 منبع باز است. این مجموعه ای از ابزارهای جاوا اسکریپت با مجوز MIT است. (http://mootools.net/license.txt) نوار منو و بسیاری از web صفحات بر اساس چارچوب هستند. هر دو الگوریتم AJAX و JSON در حال حاضر در ابزارهای آن یکپارچه شده اند.
علاوه بر این، Webنرم افزار StaX سایر ابزارهای مفید را برای JSON فراهم می کند web طراحی صفحه

• json.js – برای انتقال/دریافت داده های پویا با نحو JSON استفاده کنید.
• dynforms.js – برای ایجاد جدول HTML به صورت پویا استفاده کنید.
• validate.js – برای اعتبار سنجی فرم HTML استفاده کنید.

کتابخانه های کامل جاوا اسکریپت در زیر فهرست درخت منبع قرار دارند: webstax2\ vtss_appl\web\html\lib.

دستورالعمل برای JSON Web طراحی صفحه

این بخش نحوه طراحی a را راهنمایی می کند web صفحه بر اساس کتابخانه های جاوا اسکریپت MSCC. ما از Mirror global configured استفاده می کنیم web صفحه به عنوان سابقampاینجا ارتباطات ناهمزمان مبتنی بر روش دسترسی HTTP JSON است و تمام پارامترهای پیکربندی جهانی در یک جدول HTML پویا فهرست شده‌اند.
را web طرح‌بندی صفحه در زیر فهرست شده است و کد منبع کامل در زیر فهرست درخت منبع قرار دارد: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. برای اینکه معمولی تر شویم web مرجع صفحات، به بخش پیوست مراجعه کنید.

جدول پیکربندی آینه و RMMirror

شکل 5. Exampاز جدول پیکربندی جهانی

ویرایش کنید Web صفحه

هدر HTML
شامل کتابخانه های JS مورد نیاز در HTML tag.

منبع جدول پویا را راه اندازی کنید

• وقتی سند HTML آماده شد، برای مقداردهی اولیه منبع جدول پویا، DynamicTable() را فراخوانی کنید.
• DynamicTable() برای ایجاد جدول پویا پس از دریافت داده های JSON استفاده می شود.
• سپس درخواست Update را فراخوانی می کند تا جریان دستور 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»، تابع callback 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. هشدار ("دریافت داده های پویا ناموفق بود.");
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 autorfresh = document.getElementById("autorefresh");
19. if (autorefresh && autorfresh.checked) {
20. if (تایمر شناسه) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

سطرهای جدول را اضافه کنید

• در تابع addRows() از فرمت JSON برای پر کردن هر پارامتر پیکربندی جهانی در ردیف جدول استفاده می‌کنیم.
• تمام فیلدهای HTML در آرایه JSON ("table_rows") فهرست شده اند و نحو فیلد جدول در زیر آمده است.

نحو:
ردیف_جدول:[ ، ، … ] : { ، ، … }
: {"نوع": , “params”:[ ، ,…, ]}

• در این مورد، هر ردیف دارای پنج فیلد است: "Session ID"، "Mode"، "Type"، "VLAN ID" و "Reflector Port" برای مثال.ampلی،

شناسه جلسه (فیلد نام: int32_t)	1 (شناسه جلسه آینه)
حالت (فیلد نام: vtss_bool_t)	درست است (یعنی جلسه آینه فعال است)
تایپ کنید (فیلد نام: شمارش {mirror، rMirrorSource، rMirrorDestination}	منبع RMMirror (این منبع یک جلسه آینه از راه دور است
VLAN ID (فیلد نام: uint16_t)	200 (Vlan مورد استفاده برای آینه سازی)
بندر بازتابنده (فیلد نام: vtss_ifindex_t)	Gi 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. {type:"link"، پارامترها:["cr"، "mirror.htm?session_id=" + کلید، کلید]}،
7. {type:"text"، پارامترها:[oTMode[oVMode.indexOf(val.Mode)]، "c"]}،
8. {type:"text"، پارامترها:[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: "-"، "c"]}
11. ]}؛
12. ردیف برگشت؛
13. }
14. تابع addRows(recv_json)
15. {
16. ردیف var، vala_colspan = 7;
17. var table_rows = new Array();
18. // هدر جدول را اضافه کنید
19. addHeader (ردیف_جدول)؛
20. // یک ردیف اضافه کنید
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(record.key، record.val));
23. })؛
24. جدول_ردیف های برگشتی؛
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 و ارائه یک شناسه منحصر به فرد برای tag.
• وقتی سند HTML آماده شد، loadXMLDoc() را فراخوانی کنید تا کل مشخصات JSON را دریافت کنید یا شرح روش خاص را با نام متد JSON "jsonRpc.status.introspection.specific.inventory.get" دریافت کنید.
• از processTableDesc() برای به روز رسانی توضیحات جدول و processUpdate() برای به روز رسانی توضیحات پارامتر جدول استفاده می شود.
• در processUpdate()، updateTableParamsDesc() را برای به روز رسانی عناصر JSON که با نام عناصر خاص مطابقت دارند فراخوانی کنید.
• را به روز کنید یا tag HTML داخلی با توجه به توضیحات عنصر.

2. /* به روز رسانی فیلدهای توضیحات HTML */
3. تابع processTableDesc(req) {
4. if (!req.responseText) {
5. بازگشت؛
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // به روز رسانی توضیحات جدول
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec، "گروه ها"، "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. "name": "relayVlanInterface",
25. "پسوند": ". شناسه رابط مورد استفاده برای رله.
26. },
27. {
28. "نام مستعار": "مقصد رله"،
29. "نوع": "mesa_ipv6_t",
30. “name”: “relay_destination”,
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', 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("رله،dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

توجه
توجه داشته باشید که تعداد کاراکتر فاصله در ITEM("") که برای تعیین سطح گروه در نوار منو استفاده می شود. در این مورد، همه web صفحات زیر گروه "DHCPv6" هستند.

شکل 6. مثالampاز جدول پیکربندی جهانی

ضمیمه

معمولی web صفحات

چند نمونه وجود دارد web صفحات را می توان برای طراحی مرجع استفاده کرد. یک سابق دیگرampدر اینجا پیکربندی یک جلسه آینه ای موجود در vtss_appl\mirror\html\mirror.htm است.
را web صفحه پیکربندی دقیق را برای یک جلسه آینه ارائه می دهد. تمام پارامترهای پیکربندی شده لیست شده است.

• روی دکمه "ذخیره" کلیک کنید تا پیکربندی فعلی اعمال شود.
• برای بازنشانی پیکربندی فعلی روی دکمه "Reset" کلیک کنید.
• برای بازگشت به قسمت بالای صفحه، روی «لغو» کلیک کنید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 مدیریت شود.
درخواست Update فراخوانی "mirror.config.session.get" را آغاز می کند.
"port.status.get" و در صورت انباشتن "topo.config.stacking.get" و نتایج این فراخوان‌ها به گونه‌ای پیکربندی می‌شوند که توسط تابع آماده‌سازی Update مدیریت شوند.
تابع آماده‌سازی به‌روزرسانی همه نتایج را جمع‌آوری می‌کند، و تنها زمانی که همه آنها دریافت شدند، تابع processUpdate را فراخوانی می‌کند که جداول را برای نمایش در جدول می‌سازد. web.

مراجع

1. جاوا اسکریپت ویکی پدیا https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

اسناد / منابع

میکروسمی AN1256 Web برنامه برنامه نویسان [pdfراهنمای کاربر AN1256، AN1256 Web برنامه برنامه نویسان، Web برنامه نویسان برنامه، برنامه

مراجع

• راهنمای کاربر