માઇક્રોસેમી AN1256 Web પ્રોગ્રામર્સ એપ્લિકેશન
પરિચય
JSON (જાવાસ્ક્રિપ્ટ ઑબ્જેક્ટ નોટેશન) એ ઓપન-સ્ટાન્ડર્ડ છે file ફોર્મેટ કે જે ડેટાની આપલે માટે માનવ વાંચી શકાય તેવા ટેક્સ્ટનો ઉપયોગ કરે છે. તે અસુમેળ બ્રાઉઝર/સર્વર સંચાર માટે ઉપયોગમાં લેવાતું સામાન્ય ડેટા ફોર્મેટ છે.
નવા માટે web પૃષ્ઠ ડિઝાઇન, JSON ફોર્મેટ મૂળ AJAX શૈલી માટે રિપ્લેસમેન્ટ હોઈ શકે છે. AJAX સાથે સરખામણી કરો, JSON નો ઉપયોગ કરીને બનાવે છે Web અમલીકરણ સરળ અને સરળ. વિકાસકર્તાએ ફક્ત તેના પર ધ્યાન કેન્દ્રિત કરવાની જરૂર છે web પૃષ્ઠ ડિઝાઇન અને Web હેન્ડલર અમલીકરણ અવગણવામાં આવી શકે છે કારણ કે JSON ઍક્સેસ પદ્ધતિ દરેકમાં પહેલેથી જ સપોર્ટેડ છે WebStaX સોફ્ટવેર મોડ્યુલો.
આ દસ્તાવેજ સોફ્ટવેર એન્જિનિયર માટે પ્રોગ્રામર માર્ગદર્શિકા જણાવે છે જેમને વિકાસ કરવાની જરૂર છે Web JSON દ્વારા પૃષ્ઠ. વિગતવાર કાર્યવાહી અને ભૂતપૂર્વamples પણ નીચેના વિભાગોમાં સમાવવામાં આવેલ છે.
JSON ડેટા એક્સેસ ફ્લો
ઉપરview
અહીં JSON ડેટા એક્સેસ ફ્લો છે જે ક્લાયંટ(બ્રાઉઝર) થી HTTP કનેક્શન શરૂ કરવામાં આવે છે. સર્વર(DUT) બાજુથી પ્રાપ્ત JOSN ડેટા અનુસાર HTML કોષ્ટક ગતિશીલ રીતે બનાવવામાં આવે છે.
આકૃતિ 1. ક્લાયંટ અને સર્વર વચ્ચે એક્સેસ ફ્લો
JSON ડેટાની વિનંતી/પ્રતિસાદ
JSON વિનંતી પેકેટ HTTP વિનંતી પોસ્ટ પદ્ધતિ પર આધારિત છે અને સામગ્રીએ MSCC JSON ફોર્મેટને અનુસરવું પડશે.
- JSON સિન્ટેક્સની વિનંતી કરો:{"પદ્ધતિ":" ","પરમ":[ ], “id:”jsonrpc”}
- પ્રતિસાદ JSON વાક્યરચના: {"ભૂલ": ,"પરિણામ": , “id:”jsonrpc”}
નીચેના સ્નેપશોટ બ્રાઉઝર અને DUT વચ્ચે JSON સામગ્રી દર્શાવે છે.
આકૃતિ 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 ફોર્મની માન્યતા માટે ઉપયોગ કરો.
સંપૂર્ણ JavaScript પુસ્તકાલયો સ્ત્રોત વૃક્ષ નિર્દેશિકા હેઠળ સ્થિત છે: 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વૈશ્વિક રૂપરેખાંકિત કોષ્ટકનું le
સંપાદિત કરો Web પૃષ્ઠ
HTML હેડર
HTML માં જરૂરી JS પુસ્તકાલયોનો સમાવેશ કરો tag.
ડાયનેમિક ટેબલ રિસોર્સ શરૂ કરો
- જ્યારે HTML દસ્તાવેજ તૈયાર હોય, ત્યારે ડાયનેમિક ટેબલ સંસાધનને પ્રારંભ કરવા માટે DynamicTable() ને કૉલ કરો.
- DynamicTable() નો ઉપયોગ JSON ડેટા પ્રાપ્ત કર્યા પછી ડાયનેમિક ટેબલ બનાવવા માટે થાય છે.
- તે પછી JSON કમાન્ડ ફ્લો શરૂ કરવા માટે requestUpdate ને કૉલ કરશે.
- window.addEvent('domready', function() {
- // JSON ડેટા પ્રાપ્ત/પ્રસારિત કરવા માટે ટેબલ બોડી સાથે ફોર્મ બનાવો
- myDynamicTable = નવું DynamicTable("myTableContent", "config","plusRowCtrlBar");
4 - requestUpdate();
- });
JSON ડેટાની વિનંતી/પ્રતિસાદ
- જ્યારે HTML દસ્તાવેજ તૈયાર હોય, ત્યારે ગોઠવેલા સત્રો વિશે માહિતી મેળવવા JSON વિનંતી "mirror.config.session.get" મોકલવા માટે requestJsonDoc() નો ઉપયોગ કરો.
- "mirror.capabilities.get" માટે JSON ડેટા પ્રાપ્ત થયા પછી, કૉલબેક ફંક્શન requestUpdate() પર પ્રક્રિયા કરવામાં આવશે. ફંક્શન requestUpdate પછી વર્તમાન રૂપરેખાંકન મેળવવા માટે "mirror.config.session.get" કૉલ કરશે. જ્યારે વર્તમાન રૂપરેખાંકન પ્રાપ્ત થાય છે, ત્યારે બતાવવા માટે કોષ્ટક બનાવવા માટે કાર્ય processUpdate કહેવામાં આવે છે.
- કાર્ય વિનંતી અપડેટ()
- {
- // ટેબલ સામગ્રી પુનઃસ્થાપિત કરો
- myDynamicTable.restore();
5 - // આ કોષ્ટક બે JSON ડેટા.
- requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
- }
પ્રાપ્ત JSON ડેટા પર પ્રક્રિયા કરો
- JSON ડેટા પ્રાપ્ત થયા પછી ડાયનેમિક ટેબલના લેઆઉટ માટે processUpdate() ફંક્શનનો ઉપયોગ થાય છે.
- addRows() નો ઉપયોગ કોષ્ટકની હરોળ ઉમેરવા માટે થાય છે. myDynamicTable.update() લેઆઉટ
કોષ્ટક પંક્તિઓમાં ડેટા અનુસાર HTML કોષ્ટક.
- ફંક્શન પ્રોસેસ અપડેટ(recv_json, નામ)
- {
- // જો કોઈ ડેટા પ્રાપ્ત ન થાય તો પ્રક્રિયાને અવગણો
- જો (!recv_json) {
- ચેતવણી ("ગતિશીલ ડેટા મેળવો નિષ્ફળ.");
- પરત
- }
- // પ્રાપ્ત JSON ડેટા સાચવો
- myDynamicTable.saveRecvJson(“config”, recv_json);
- // કોષ્ટક પંક્તિઓ ઉમેરો
- var table_rows = addRows(recv_json);
- myDynamicTable.addRows(table_rows);
- // આ ડાયનેમિક ટેબલ અપડેટ કરો
- myDynamicTable.update();
- // ટાઈમર તાજું કરો
- var autorefresh = document.getElementById("ઓટોરફ્રેશ");
- જો (autorefresh && autorefresh.checked) {
- જો (ટાઈમરઆઈડી) {
- clearTimeout(ટાઈમરઆઈડી);
- }
- timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
- }
- }
કોષ્ટક પંક્તિઓ ઉમેરો
- addRows() ફંક્શનમાં, અમે કોષ્ટકની હરોળમાં દરેક વૈશ્વિક રૂપરેખાંકિત પેરામીટર ભરવા માટે JSON ફોર્મેટનો ઉપયોગ કરીએ છીએ.
- બધા HTML ફીલ્ડ્સ JSON એરે ("ટેબલ_રો") માં સૂચિબદ્ધ છે અને ટેબલ ફીલ્ડનું સિન્ટેક્સ નીચે છે.
વાક્યરચના:
કોષ્ટક_પંક્તિઓ:[ , ,… ] : { , ,… }
: {"પ્રકાર": , "પરમ":[ , , …, ]}
- આ કિસ્સામાં, દરેક પંક્તિમાં પાંચ ક્ષેત્રો છે: "સત્ર ID", "મોડ", "પ્રકાર", "VLAN ID" અને "રિફ્લેક્ટર પોર્ટ" ભૂતપૂર્વ માટેampલે,
| સત્ર ID (નામ ફીલ્ડ: int32_t) | 1 (મિરર સત્રનું ID) |
| મોડ (નામ ફીલ્ડ: vtss_bool_t) | સાચું (એટલે કે મિરર સત્ર સક્ષમ છે) |
| પ્રકાર (નામ ક્ષેત્ર: ગણતરી
{મિરર, rMirrorSource, rMirrorDestination} |
આરએમરર સ્ત્રોત (આ રિમોટ મિરર સત્રનો સ્ત્રોત છે |
| VLAN ID (નામ ફીલ્ડ: uint16_t) | 200 (મિરરિંગ માટે વપરાયેલ vlan) |
| રિફ્લેક્ટર પોર્ટ (નામ ફીલ્ડ: vtss_ifindex_t) | જી 1/1 (જે પોર્ટ પર મિરર્ડ ટ્રાફિક મોકલવામાં આવે છે |
- myDynamicTable.addRows() JSON ડેટાને HTML ફોર્મેટમાં કન્વર્ટ કરશે અને HTML કોષ્ટકનું આઉટપુટ કરશે.
- ફંક્શન addRow (કી, val)
- {
- var none_map_val = 0xFFFFFFFF, none_map_text = "કોઈ નહિ", none_interface_text = "NONE";
- var tunnel_mode_suffix = val.TunnelMode == "ઉપયોગગ્લોબલ" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
- var પંક્તિ = {ક્ષેત્રો:[
- {પ્રકાર:"લિંક", પરમ:["cr", "mirror.htm?session_id=" + કી, કી]},
- {type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
- {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
- {type:"text", params:[val.Type == "મિરર" ? "-":
val.RMirrorVlan, “c”]}, - {type:"text", params:[val.Type == "rMirrorSource" ?
val.ReflectorPort : “-” , “c”]} - ]};
- પરત પંક્તિ;
- }
- ફંક્શન addRows(recv_json)
- {
- var પંક્તિ, ખાલી_કોલસ્પાન = 7;
- var ટેબલ_રો = નવી એરે();
- // ટેબલ હેડર ઉમેરો
- એડહેડર(ટેબલ_પંક્તિઓ);
- // એક પંક્તિ ઉમેરો
- Object.each(recv_json, ફંક્શન(રેકોર્ડ) {
- table_rows.push(addRow(record.key, record.val));
- });
- ટેબલ_પંક્તિઓ પરત કરો;
- }
Web મદદ પાનું
માટે web હેલ્પ પેજ ડિઝાઇન, મદદ વર્ણન JSON સ્પષ્ટીકરણનો સંદર્ભ લઈ શકે છે, જે વર્ણન ટેક્સ્ટ JSON આઉટપુટ સાથે સુસંગત હોઈ શકે છે અને બિનજરૂરી વર્ણનોને ઘટાડવામાં મદદ કરે છે. ઉદાample અહીં dhcp6 રિલે રૂપરેખાંકનમાંથી લેવામાં આવે છે.
સ્ત્રોતમાં હાઇપર-લિંક file
મદદ સોંપો file તેના સ્ત્રોતમાં સ્થાન file HTML tag. નિશ્ચિત ચલ નામ "help_page" માટે વપરાય છે web સહાય પૃષ્ઠ સોંપણી.
- // મદદ પૃષ્ઠ જાદુ
- var help_page = “/help/help_xxx.htm”;
JSON સ્પષ્ટીકરણમાંથી HTML ફીલ્ડ વર્ણન અપડેટ કરો
- વાપરવુ અથવા HTML tag HTML કોષ્ટક વર્ણન જાહેર કરવા અને માટે અનન્ય ID આપવામાં આવે છે tag.
- જ્યારે HTML દસ્તાવેજ તૈયાર હોય, ત્યારે સમગ્ર JSON સ્પષ્ટીકરણ મેળવવા માટે loadXMLDoc() ને કૉલ કરો અથવા JSON પદ્ધતિ નામ “jsonRpc.status.introspection.specific.inventory.get” દ્વારા વિશિષ્ટ પદ્ધતિનું વર્ણન મેળવો.
- કોષ્ટક વર્ણનને અપડેટ કરવા માટે processTableDesc() નો ઉપયોગ થાય છે અને કોષ્ટક પરિમાણ વર્ણનને અપડેટ કરવા માટે processUpdate() નો ઉપયોગ થાય છે.
- processUpdate(), JSON તત્વોને અપડેટ કરવા માટે updateTableParamsDesc() ને કૉલ કરો જે ચોક્કસ તત્વ નામો સાથે મેળ ખાય છે.
- અપડેટ કરો અથવા tag તત્વ વર્ણન અનુસાર આંતરિક HTML.
- /* HTML વર્ણન ફીલ્ડ અપડેટ કરો */
- ફંક્શન પ્રોસેસટેબલડેસ્ક(req) {
- જો (!req.responseText) {
- પરત
- }
- var json_spec = JSON.decode(req.responseText);
- // કોષ્ટક વર્ણન અપડેટ કરો
- $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “જૂથો”, “dhcp6_relay.config.vlan”).વર્ણન;
- }
- /* HTML કોષ્ટક પરિમાણ વર્ણન અપડેટ કરો */
- કાર્ય પ્રક્રિયા અપડેટ(recv_json) {
- // કોષ્ટક પરિમાણ વર્ણન અપડેટ કરો
- var પરમ_નામો = [
- {
- "ઉર્ફે": "ઇન્ટરફેસ",
- "પ્રકાર": "vtss_ifindex_t",
- "નામ": "vlanInterface",
- "પ્રત્યય": "."
- },
- {
- "ઉર્ફે": "રિલે ઈન્ટરફેસ",
- "પ્રકાર": "vtss_ifindex_t",
- "નામ": "relayVlanInterface",
- "પ્રત્યય": ". રિલે કરવા માટે વપરાતા ઈન્ટરફેસનું આઈડી.
- },
- {
- "ઉર્ફે": "રિલે ડેસ્ટિનેશન",
- "પ્રકાર": "mesa_ipv6_t",
- "નામ": "રિલે_ગંતવ્ય",
- "પ્રત્યય": ". DHCPv6 સર્વરનું IPv6 સરનામું જે વિનંતી કરે છે તેના પર રીલે કરવામાં આવશે. ડિફોલ્ટ મૂલ્ય 'ff05::1:3' મેન્સ 'કોઈપણ DHCP સર્વર'."
- }
- ];
- updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
- }
- /* JSON સ્પષ્ટીકરણ મેળવો */
- window.addEvent('domready', function () {
- loadXMLDoc(“/json_spec”, processTableDesc);
- requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
- });
મેનુ બારમાં હાઇપર-લિંક
- મેનુ બારનો HTML સોર્સ કોડ જનરેટ થાય છે file webstax2\vtss_appl\web\ menu_default.cxx.
- આમાં વસ્તુઓને સંપાદિત કરો file માટે Web પૃષ્ઠ હાયપર-લિંક.
- #જો વ્યાખ્યાયિત કરેલ છે(VTSS_SW_OPTION_DHCP6_RELAY)
- ITEM("રિલે,dhcp6_relay.htm");
- #endif //VTSS_SW_OPTION_DHCP6_RELAY
નોંધ
નોંધ લો કે ITEM(“”) માં જગ્યા અક્ષરની સંખ્યા, જેનો ઉપયોગ મેનુ બારમાં જૂથ સ્તર નક્કી કરવા માટે થાય છે. આ કિસ્સામાં, બધા web પૃષ્ઠો "DHCPv6" જૂથ હેઠળ છે.
આકૃતિ 6. ઉદાampવૈશ્વિક રૂપરેખાંકિત કોષ્ટકનું le
પરિશિષ્ટ
લાક્ષણિક web પૃષ્ઠો
ત્યાં ઘણા લાક્ષણિક છે web પૃષ્ઠોનો સંદર્ભ ડિઝાઇન માટે ઉપયોગ કરી શકાય છે. એક વધારાના ભૂતપૂર્વampvtss_appl\mirror\html\mirror.htm માં મળેલ એક મિરર સત્રનું રૂપરેખાંકન અહીં બતાવવાનું છે.
આ web પૃષ્ઠ એક મિરર સત્ર માટે વિગતવાર રૂપરેખાંકન પૂરું પાડે છે. બધા રૂપરેખાંકિત પરિમાણો સૂચિબદ્ધ છે.
- વર્તમાન રૂપરેખાંકન લાગુ કરવા માટે "સાચવો" બટન પર ક્લિક કરો.
- વર્તમાન રૂપરેખાંકન રીસેટ કરવા માટે "રીસેટ" બટનને ક્લિક કરો.
- ઓવર પર પાછા ફરવા માટે "રદ કરો" પર ક્લિક કરોview મિરર સત્રોનું
મિરર અને આરમિરર રૂપરેખાંકન
વૈશ્વિક સેટિંગ્સ
સ્ત્રોત VLAN(ઓ) રૂપરેખાંકન
પોર્ટ રૂપરેખાંકન
આકૃતિ 7. Exampદર્પણ સત્રની વિગતવાર ગોઠવણી
બટનો "સાચવો", "રીસેટ કરો" અને "રદ કરો" HTML કોડ દ્વારા ઉમેરવામાં આવે છે:
JSON આદેશ પ્રવાહ
આ પૃષ્ઠને બે પગલાના આદેશ પ્રવાહની જરૂર છે:
- પ્રથમ તેને "mirror.capabilities.get" પદ્ધતિ સાથે ઉપકરણની ક્ષમતાઓ મેળવવાની જરૂર છે. ક્ષમતાઓ બદલાતી નથી અને માત્ર એક જ વાર વાંચવી પડે છે.
- પછી તેને "mirror.config.session.get", "port.status.get" અને સ્ટેકીંગના કિસ્સામાં "topo.config.stacking.get" પદ્ધતિઓનો ઉપયોગ કરીને ઉપકરણનું વર્તમાન રૂપરેખાંકન મેળવવાની જરૂર છે.
"mirror.capabilities.get" ની કૉલ "domready" ઇવેન્ટ દ્વારા શરૂ કરવામાં આવે છે અને પરિણામ ફંક્શન requestUpdate દ્વારા નિયંત્રિત કરવા માટે ગોઠવવામાં આવે છે.
રિક્વેસ્ટઅપડેટ "mirror.config.session.get" નો કૉલ શરૂ કરશે,
"port.status.get" અને સ્ટેકીંગના કિસ્સામાં "topo.config.stacking.get" અને આ કોલ્સનાં પરિણામો ફંક્શન readyUpdate દ્વારા હેન્ડલ કરવા માટે ગોઠવવામાં આવે છે.
ફંક્શન તૈયારીઅપડેટ બધા પરિણામો એકત્રિત કરશે, અને જ્યારે બધું પ્રાપ્ત થઈ જશે ત્યારે જ તે ફંક્શન પ્રોસેસઅપડેટને કૉલ કરશે જે કોષ્ટકો બનાવશે web.
સંદર્ભો
- વિકિપીડિયા જાવાસ્ક્રિપ્ટ https://en.wikipedia.org/wiki/JavaScript
- JSON https://www.json.org/
- મૂનટૂલ્સ https://mootools.net/
દસ્તાવેજો / સંસાધનો
 |
માઇક્રોસેમી AN1256 Web પ્રોગ્રામર્સ એપ્લિકેશન [પીડીએફ] વપરાશકર્તા માર્ગદર્શિકા AN1256, AN1256 Web પ્રોગ્રામર્સ એપ્લિકેશન, Web પ્રોગ્રામર્સ એપ્લિકેશન, એપ્લિકેશન |
