مائیکروسیمی اے این 1256 Web پروگرامرز کی درخواست

تعارف

JSON (جاوا اسکرپٹ آبجیکٹ نوٹیشن) ایک کھلا معیار ہے۔ file فارمیٹ جو ڈیٹا کے تبادلے کے لیے انسانی پڑھنے کے قابل متن کا استعمال کرتا ہے۔ یہ ایک عام ڈیٹا فارمیٹ ہے جو غیر مطابقت پذیر براؤزر/سرور مواصلات کے لیے استعمال ہوتا ہے۔
نئے کے لیے web صفحہ ڈیزائن، JSON فارمیٹ اصل AJAX طرز کا متبادل ہو سکتا ہے۔ AJAX سے موازنہ کریں، JSON کا استعمال کرتے ہوئے Web عمل درآمد آسان اور آسان۔ ڈویلپر کو صرف توجہ مرکوز کرنے کی ضرورت ہے۔ web صفحہ ڈیزائن اور Web ہینڈلر کے نفاذ کو چھوڑا جا سکتا ہے کیونکہ JSON رسائی کا طریقہ پہلے سے ہی ہر ایک میں تعاون یافتہ ہے۔ WebStaX سافٹ ویئر ماڈیولز۔
اس دستاویز میں سافٹ ویئر انجینئر کے لیے پروگرامرز گائیڈ بیان کیا گیا ہے جن کو تیار کرنے کی ضرورت ہے۔ Web صفحہ JSON کے ذریعے۔ تفصیلی طریقہ کار اور سابقamples بھی درج ذیل حصوں میں شامل ہیں۔

JSON ڈیٹا تک رسائی کا بہاؤ

ختمview
یہاں JSON ڈیٹا تک رسائی کا بہاؤ ہے جو کلائنٹ (براؤزر) سے HTTP کنکشن شروع کیا جاتا ہے۔ HTML ٹیبل متحرک طور پر سرور (DUT) کی طرف سے موصول ہونے والے JOSN ڈیٹا کے مطابق بنایا گیا ہے۔

تصویر 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 میں فریم ورک WebStaX سافٹ ویئر اوپن سورس MooTools پر مبنی ہے۔ یہ MIT لائسنس کے ساتھ JavaScript کی افادیت کا مجموعہ ہے۔ (http://mootools.net/license.txt) مینو بار اور زیادہ تر web صفحات فریم ورک پر مبنی ہیں۔ AJAX اور JSON الگورتھم دونوں پہلے ہی اس کی افادیت میں مربوط ہیں۔
اس کے علاوہ، WebStaX سافٹ ویئر دیگر یوٹیلیٹیز فراہم کرتا ہے جو JSON کے لیے مفید ہیں۔ web صفحہ ڈیزائن.

• json.js - JSON نحو کے ساتھ متحرک ڈیٹا کی ترسیل/ وصول کرنے کے لیے استعمال کریں۔
• dynforms.js - HTML ٹیبل کو متحرک طور پر بنانے کے لیے استعمال کریں۔
• validate.js - HTML فارم کی توثیق کے لیے استعمال کریں۔

جاوا اسکرپٹ کی مکمل لائبریریاں سورس ٹری ڈائرکٹری کے نیچے واقع ہیں: webstax2\ vtss_appl\web\html\lib.

JSON کے لیے گائیڈ لائن Web صفحہ ڈیزائن

یہ سیکشن رہنمائی کرتا ہے کہ کس طرح ڈیزائن کیا جائے۔ web MSCC JavaScript لائبریریوں پر مبنی صفحہ۔ ہم آئینہ گلوبل کنفیگرڈ استعمال کرتے ہیں۔ web صفحہ بطور سابقampلی یہاں غیر مطابقت پذیر مواصلات HTTP JSON تک رسائی کے طریقہ پر مبنی ہیں اور تمام عالمی ترتیب شدہ پیرامیٹرز ایک متحرک HTML ٹیبل میں درج ہیں۔
دی web صفحہ کی ترتیب ذیل میں درج ہے اور مکمل سورس کوڈ سورس ٹری ڈائرکٹری کے نیچے واقع ہے۔ webstax2\vtss_appl\mirror\html\mirror_ctrl.htm۔ زیادہ عام حاصل کرنے کے لیے web صفحات کا حوالہ، ضمیمہ سیکشن دیکھیں۔

آئینہ اور آر ایمرر کنفیکریشن ٹیبل

تصویر 5۔ Exampعالمی ترتیب شدہ ٹیبل کا لی

ترمیم کریں۔ Web صفحہ

HTML ہیڈر
جے ایس لائبریریوں کو شامل کریں جن کی HTML میں ضرورت ہے۔ tag.

ڈائنامک ٹیبل ریسورس کو شروع کریں۔

• جب HTML دستاویز تیار ہو جائے تو، ڈائنامک ٹیبل ریسورس کو شروع کرنے کے لیے DynamicTable() کو کال کریں۔
• DynamicTable() کو JSON ڈیٹا موصول ہونے کے بعد ڈائنامک ٹیبل بنانے کے لیے استعمال کیا جاتا ہے۔
• اس کے بعد یہ JSON کمانڈ فلو کو شروع کرنے کے لیے requestUpdate کو کال کرے گا۔

1. window.addEvent('domready', function() {
2. // JSON ڈیٹا وصول کرنے/ منتقل کرنے کے لیے ٹیبل باڈی کے ساتھ ایک فارم بنائیں
3. myDynamicTable = نیا DynamicTable ("myTableContent"، "config","plusRowCtrlBar")؛
   4
4. درخواست اپ ڈیٹ ()؛
5. });

JSON ڈیٹا کی درخواست/جواب دیں۔

• جب HTML دستاویز تیار ہو جائے، ترتیب شدہ سیشنز کے بارے میں معلومات حاصل کرنے کے لیے JSON کی درخواست "mirror.config.session.get" بھیجنے کے لیے requestJsonDoc() کا استعمال کریں۔
• "mirror.capabilities.get" کے لیے JSON ڈیٹا موصول ہونے کے بعد، کال بیک فنکشن 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. اگر (autorfresh && autorefresh.checked) {
20. اگر (ٹائمر آئی ڈی) {
21. کلیئر ٹائم آؤٹ (ٹائمر آئی ڈی)؛
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

ٹیبل کی قطاریں شامل کریں۔

• addRows() فنکشن میں، ہم جدول کی قطار میں ہر عالمی ترتیب شدہ پیرامیٹر کو بھرنے کے لیے JSON فارمیٹ استعمال کرتے ہیں۔
• تمام HTML فیلڈز JSON صف ("table_rows") میں درج ہیں اور ٹیبل فیلڈ کا نحو نیچے ہے۔

نحو:
table_rows:[ , ،… ] : { , ،… }
: {"قسم": , "params":[ , ، …، ]}

• اس صورت میں، ہر قطار میں پانچ فیلڈز ہیں: "سیشن آئی ڈی"، "موڈ"، "قسم"، "VLAN ID" اور "Reflector Port" سابق کے لیےampلی،

سیشن ID (نام فیلڈ: int32_t)	1 (آئینہ سیشن کی شناخت)
موڈ (نام فیلڈ: vtss_bool_t)	سچ (مطلب آئینہ سیشن فعال ہے)
قسم (نام فیلڈ: گنتی {عکس، rMirrorSource، rMirrorDestination}	آر ایمرر ماخذ (یہ ریموٹ آئینے کے سیشن کا ذریعہ ہے۔
VLAN ID (نام فیلڈ: uint16_t)	200 (آئینہ کرنے کے لیے استعمال ہونے والا vlan)
ریفلیکٹر پورٹ (نام فیلڈ: vtss_ifindex_t)	جی 1/1 (وہ بندرگاہ جس پر آئینہ دار ٹریفک بھیجا جاتا ہے۔

• myDynamicTable.addRows() JSON ڈیٹا کو HTML فارمیٹ میں تبدیل کرے گا اور HTML ٹیبل کو آؤٹ پٹ کرے گا۔

1. فنکشن addRow (کلید، ویل)
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", 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 == "آئینہ"؟ "-":
   val.RMirrorVlan, "c"]}،
10. {type:"text"، params:[val.Type == "rMirrorSource"؟
    val.ReflectorPort : "-" , "c"]}
11. ]}
12. واپسی قطار؛
13. }
14. فنکشن addRows(recv_json)
15. {
16. var قطار، empty_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. واپسی ٹیبل_قطار؛
25. }

Web مدد کا صفحہ
کے لیے web ہیلپ پیج ڈیزائن، مدد کی تفصیل JSON تصریح کا حوالہ دے سکتی ہے، کہ تفصیل کا متن JSON آؤٹ پٹ کے ساتھ مطابقت رکھتا ہے اور بے کار وضاحتوں کو کم کرنے میں مدد کرتا ہے۔ سابقampلی یہاں dhcp6 ریلے کنفیگریشن سے لیا گیا ہے۔

ماخذ میں ہائپر لنک file
مدد تفویض کریں۔ file اس کے ماخذ میں مقام file ایچ ٹی ایم ایل tag. فکسڈ متغیر کا نام "help_page" کے لیے استعمال کیا جاتا ہے۔ web مدد صفحہ تفویض.

2. // مدد صفحہ جادو
3. var help_page = "/help/help_xxx.htm"؛

JSON تفصیلات سے HTML فیلڈ کی تفصیل کو اپ ڈیٹ کریں۔

• استعمال کریں۔ یا ایچ ٹی ایم ایل tag HTML ٹیبل کی تفصیل کا اعلان کرنے کے لیے اور اس کے لیے ایک منفرد ID دی گئی۔ tag.
• جب HTML دستاویز تیار ہو جائے تو، loadXMLDoc() پر کال کریں تاکہ JSON کی پوری تفصیلات حاصل کی جا سکیں یا JSON طریقہ نام "jsonRpc.status.introspection.specific.inventory.get" کے ذریعے مخصوص طریقہ کی تفصیل حاصل کریں۔
• ProcessTableDesc() کا استعمال ٹیبل کی تفصیل کو اپ ڈیٹ کرنے کے لیے کیا جاتا ہے اور processUpdate() کو ٹیبل پیرامیٹر کی تفصیل کو اپ ڈیٹ کرنے کے لیے استعمال کیا جاتا ہے۔
• processUpdate() میں، JSON عناصر کو اپ ڈیٹ کرنے کے لیے updateTableParamsDesc() کو کال کریں جو مخصوص عنصر کے ناموں سے مماثل ہیں۔
• اپ ڈیٹ کریں۔ یا tag عنصر کی تفصیل کے مطابق اندرونی HTML۔

2. /* ایچ ٹی ایم ایل کی تفصیل والے فیلڈز کو اپ ڈیٹ کریں */
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. فنکشن پروسیس اپ ڈیٹ (recv_json) {
13. // جدول پیرامیٹر کی تفصیل کو اپ ڈیٹ کریں۔
14. var param_names = [
15. {
16. "عرف": "انٹرفیس"،
17. "قسم": "vtss_ifindex_t"،
18. "نام": "vlanInterface"،
19. "لاحقہ": "."
20. },
21. {
22. "عرف": "ریلے انٹرفیس"،
23. "قسم": "vtss_ifindex_t"،
24. "نام": "relayVlanInterface"،
25. "لاحقہ": ". ریلے کرنے کے لیے استعمال ہونے والے انٹرفیس کی شناخت۔
26. },
27. {
28. "عرف": "ریلے منزل"،
29. "قسم": "mesa_ipv6_t"،
30. "نام": "ریلے_منزل"،
31. "لاحقہ": ". DHCPv6 سرور کا IPv6 ایڈریس جس پر درخواست کی جائے گی۔ ڈیفالٹ ویلیو '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(" Relay,dhcp6_relay.htm")؛
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

نوٹ
نوٹ کریں کہ ITEM("") میں اسپیس کریکٹر کی تعداد، جو مینو بار میں گروپ لیول کا فیصلہ کرنے کے لیے استعمال ہوتا ہے۔ اس صورت میں، تمام web صفحات "DHCPv6" گروپ کے تحت ہیں۔

شکل 6. سابقampعالمی ترتیب شدہ ٹیبل کا لی

اپینڈکس

عام web صفحات

کئی عام ہیں web صفحات کو حوالہ ڈیزائن کے لیے استعمال کیا جا سکتا ہے۔ ایک اضافی سابقampvtss_appl\mirror\html\mirror.htm میں پائے جانے والے سنگل مرر سیشن کی ترتیب یہاں دکھائی جائے گی۔
دی web صفحہ ایک آئینہ سیشن کے لیے تفصیلی ترتیب فراہم کرتا ہے۔ تمام ترتیب شدہ پیرامیٹرز درج ہیں۔

• موجودہ کنفیگریشن کو لاگو کرنے کے لیے "محفوظ کریں" بٹن پر کلک کریں۔
• موجودہ کنفیگریشن کو ری سیٹ کرنے کے لیے "ری سیٹ" بٹن پر کلک کریں۔
• اوور پر واپس جانے کے لیے "منسوخ کریں" پر کلک کریں۔view آئینے کے سیشنوں کا

آئینہ اور آر ایمرر کنفیگریشن

عالمی ترتیبات

ماخذ VLAN(s) کنفیگریشن

پورٹ کنفیگریشن

تصویر 7۔ Exampآئینہ سیشن کی تفصیلی ترتیب
بٹن "محفوظ کریں"، "ری سیٹ کریں" اور "منسوخ کریں" ایچ ٹی ایم ایل کوڈ کے ذریعہ شامل کیے گئے ہیں:

JSON کمانڈ کا بہاؤ
اس صفحہ کو دو قدمی کمانڈ کے بہاؤ کی ضرورت ہے:

• سب سے پہلے اسے "mirror.capabilities.get" کے طریقہ کار سے ڈیوائس کی صلاحیتیں حاصل کرنے کی ضرورت ہے۔ صلاحیتیں تبدیل نہیں ہوتیں اور انہیں صرف ایک بار پڑھنا پڑتا ہے۔
• پھر اسے "mirror.config.session.get"، "port.status.get" اور "topo.config.stacking.get" کو اسٹیک کرنے کی صورت میں ڈیوائس کی موجودہ کنفیگریشن حاصل کرنے کی ضرورت ہے۔

"mirror.capabilities.get" کی کال "ڈومریڈی" ایونٹ کے ذریعہ شروع کی گئی ہے اور نتیجہ کو فنکشن درخواست اپ ڈیٹ کے ذریعہ سنبھالنے کے لئے ترتیب دیا گیا ہے۔
درخواست اپ ڈیٹ "mirror.config.session.get" کی کال شروع کرے گی،
"port.status.get" اور "topo.config.stacking.get" کو اسٹیک کرنے کی صورت میں اور ان کالز کے نتائج کو اس طرح ترتیب دیا گیا ہے کہ اس کو فنکشن پری اپڈیٹ کے ذریعے ہینڈل کیا جائے۔
فنکشن تیار اپ ڈیٹ تمام نتائج کو جمع کرے گا، اور صرف اس صورت میں جب تمام موصول ہو جائیں گے، یہ فنکشن پروسیس اپڈیٹ کو کال کرے گا جو ٹیبلز بنائے گا web.

حوالہ جات

1. ویکیپیڈیا جاوا اسکرپٹ https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. مون ٹولز https://mootools.net/

دستاویزات / وسائل

مائیکروسیمی اے این 1256 Web پروگرامرز کی درخواست [پی ڈی ایف] یوزر گائیڈ اے این 1256، اے این 1256 Web پروگرامرز کی درخواست، Web پروگرامرز کی درخواست، درخواست

حوالہ جات

• صارف دستی