📰 📕 📹 कैश + jQuery। जल्दी शुरू करो 👨🏻‍🎓 🤹 🖕🏻

लेख से पता चलता है कि कैशे डेटाबेस के साथ काम करने के लिए jQuery का उपयोग कैसे किया जाता है, जिसके परिणामस्वरूप अंजैक्स वेब एप्लिकेशन में डेटा डालने और हटाने के लिए सरल कार्यक्षमता होती है।

यह माना जाता है कि पाठक को एचटीएमएल, सीएसएस और जावास्क्रिप्ट के ज्ञान का औसत स्तर है और इंटेरसिस्टम कैश के साथ न्यूनतम अनुभव है। Caché का नवीनतम संस्करण यहाँ डाउनलोड करें । कैच के साथ एक प्रारंभिक अनुभव यहां पाया जा सकता है ।

CSP एप्लिकेशन में jQuery की आवश्यकता क्यों है?

CSP (ज़ेन) Caché द्वारा पेश की जाने वाली अंतर्निहित तकनीक है जो जल्दी से ajax वेब अनुप्रयोगों को बनाने के लिए है जो Caché डेटाबेस के साथ काम करते हैं।
JQuery आपके CSP (ZEN) एप्लिकेशन की मदद कैसे कर सकता है?

1. html पृष्ठ के किसी भी तत्व के लिए सुविधाजनक पहुँच

JQuery फ्रेमवर्क आपको सीएसएस चयनकर्ता सिंटैक्स का उपयोग करके तत्वों को एक्सेस करने की अनुमति देता है, इस कार्यक्षमता को प्रत्येक ब्राउज़र के लिए सबसे पसंदीदा तरीके से लागू करता है।

2. क्रॉस-ब्राउज़र संगतता

क्रॉस-ब्राउज़र संगतता आधुनिक वेब एप्लिकेशन के लिए एक आवश्यक आवश्यकता है। फ्रेमवर्क के डेवलपर्स का दावा है कि jQuery का उपयोग करके विकसित कोड ब्राउज़रों में उसी तरह काम करेगा - IE 6.0+, FF 3.6+, Safari 5.0+, ओपेरा, क्रोम।

प्लग-इन

jQuery प्लगइन्स के साथ अपनी कार्यक्षमता बढ़ाने के लिए एक सुविधाजनक तरीका प्रदान करता है। फ्रेमवर्क के निर्माण के बाद से (2006 में), कुछ नहीं लिखा गया है। JQueryUI क्लाइंट इंटरफ़ेस लाइब्रेरी विशेष उल्लेख के योग्य है।

JQuery को अपने CSP (ZEN) पेज से कैसे कनेक्ट करें?

आधिकारिक साइट से लाइब्रेरी के संकुचित संस्करण को डाउनलोड करें , इसे एप्लिकेशन की सीएसपी निर्देशिका में डालें, csp (zen) पृष्ठ पर निर्दिष्ट करें कि एक विशिष्ट संस्करण jQuery फ़ाइल का उपयोग किया जाएगा।

उदाहरण के लिए:
सीएसपी

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

ZEN

Parameter JSINCLUDES As STRING="jquery-1.7.1.min.js"

सीएलएस

 w "<script type='text/javascript' src='jquery-1.7.1.min.js'></script>"

Cach में सर्वर पेज बनाने के लिए CSP, ZEN और CLS तीन दृष्टिकोण हैं।
प्रत्येक CSP पृष्ठ, जब संकलित किया जाता है , तो मानक Cache वर्ग में बदल जाता है -% CSP.Page - CSP वर्ग का वंशज। दूसरी विधि इस प्रकार है - कोड-आधारित, कैशे कक्षाओं का उपयोग करके पृष्ठ के प्रारंभिक विकास को मानता है,% CSP.Page वर्ग के वंशज - सीएलएस दृष्टिकोण। यहां मतभेदों के बारे में अधिक देखें।
तीसरी विधि - ज़ेन का उपयोग करके विकास इन दो विधियों को जोड़ती है - ज़ेन टैग और ऑब्जेक्ट कोड दोनों का उपयोग करना। दिए गए उदाहरणों में, संकेतन CSP, CLS, ZEN, उस पृष्ठ को विकसित करने के तरीकों को दर्शाता है जिसका उपयोग उदाहरण बनाने के लिए किया गया था

इंटरनेट अनुप्रयोगों के लिए, सामग्री वितरण नेटवर्क (CDN) का उपयोग करने का पसंदीदा तरीका होगा। इस स्थिति में, jQuery फ़ाइल सूचीबद्ध नेटवर्क में से एक के सर्वर पर स्थित होगी। CDN का उपयोग करके कनेक्शन उदाहरण:

 CSP: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> ZEN: Parameter JSINCLUDES As STRING="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; CLS: &html< <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> >

JQuery का उपयोग करना

सबसे अधिक इस्तेमाल किया जाने वाला jQuery फ़ंक्शन jQuery () कहलाता है, लेकिन अधिक बार इसके पर्यायवाची शब्द का उपयोग किया जाता है - $ () इस फ़ंक्शन का परिणाम पारित किए गए तर्कों के प्रकार और संख्या पर निर्भर करेगा। इस फ़ंक्शन को कॉल करने के लिए मुख्य विकल्प:
1. स्ट्रिंग को एक तर्क के रूप में पारित किया जाता है:
विधि स्ट्रिंग को या तो jQuery (CSS) चयनकर्ता या HTML कोड के रूप में मानने की कोशिश करेगी:

 $( "div#1973" ) //   div   1973 $( ".doc td" ) //   <td>        doc $( "<div>Write less, do more</div>" ) // *

2. पृष्ठ तत्व को एक तर्क के रूप में पारित किया जाता है:

 $( document.body ) //  body  «»   jQuery $( document.forms[0] ) //      «»   jQuery

3. फ़ंक्शन को एक तर्क के रूप में पारित किया जाता है:

 function loadHandler() { alert( " " ); } $( loadHandler );

या अनाम फ़ंक्शन:

 $( function (){ alert( " " ); } );

हस्तांतरित फ़ंक्शन को दस्तावेज़ लोड करने की घटना पर निष्पादित किया जाएगा। इसके बजाय ऐसे कॉल का उपयोग किया जा सकता है:

 <body onload="loadHandler">

एक पृष्ठ पर तत्वों को खोजने के अलावा, jQuery में उन्हें हेरफेर करने के तरीके भी शामिल हैं। आमतौर पर उपयोग किए जाने वाले कार्यों की सूची:

 html()    html- . val()       (input,select) attr()       append(), appendTo()    ,       remove()   bind(), unbind() ,   .     bind()    click(), keypress(), hover()  .. addClass(), removeClass(), toggleClass() , ,  ()  css()      show(), hide() ,   parents(),parent() children()

* कार्यों की पूरी सूची यहां पाई जा सकती है।

यह jQuery में लागू कुछ नियमों को ध्यान में रखा जाना चाहिए:
- क्वेरी परिणाम एक jQuery वस्तु में पैक किया गया है;
- अधिकांश फ़ंक्शन कॉल संदर्भ देते हैं।

इन नियमों का अनुपालन कोड को "विनीत" बनाता है और "चेन" सिंटैक्स के उपयोग की अनुमति देता है। नमूना jQuery का उपयोग करके जो एक तत्व की खोज करता है और इसके मूल्य को प्रतिस्थापित करता है:

 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $( ".age38" ) //      age38 .val( "Write less, do more" ) //      .css( "font-size", "110%" ) //      .click( function(){ $(this).val(""); } ) //    //  «»     . }); </script>

"विनीतता" यह है कि उपरोक्त कोड के लिए, यदि पृष्ठ पर आयु 38 वर्ग के साथ कोई तत्व नहीं हैं, तो रनटाइम त्रुटि नहीं होती है और कोड निष्पादन बाधित नहीं होता है

नीचे एक उदाहरण है, इसी तरह की कार्यक्षमता के साथ जावास्क्रिप्ट, लेकिन बिना jQuery के

 <script type="text/javascript"> //          //  ""   window var page={}; // window.page=new Object(); //        //       page.getByClass=(document.getElementsByClassName) ? function(clnm){ // IE9, FireFox 3, Opera 9.5, Safari 3.1    return document.getElementsByClassName(clnm); } : function(clnm){ /// IE 6.0-IE 8.0    var arr=[]; ///        ///      var scanDown=function(obj,handler){ for (var child=obj.firstChild;child;child=child.nextSibling){ if (typeof(handler)=="function") handler(child); scanDown(child,handler); } }; ///       ///          var rgxp=new RegExp("(\\s|^)" + clnm + "(\\s|$)"); ///   var classSelect=function( obj ){ if ( ( !obj ) || ( !obj.className )) return; var cls=obj.className; if (!cls.match( rgxp )) return; arr[arr.length]=obj; /// -  }; scanDown( document, classSelect ); //  return arr; } ///  “”    page.bind=(page.ie)? function(obj,evt,func){ obj.attachEvent("on"+evt,func); } : function(obj,evt,func){ obj.addEventListener(evt,func); }; ///      page.main=function(obj){ if (!obj) return; if (obj.nodeType!=1) return; //     obj.value="Write less, do more"; var FS="110%"; if (obj.style) { obj.style.fontSize=FS; } else { obj.style="font-size:"+FS; } page.bind(obj,"click",function(){ obj.value=""; }); }; ///    page.bind( window, "load", function() { var arr=page.getByClass("age38"); //  for (var i in arr){ page.main(arr[i]); //    } }); </script>

परिणामी कोड jQuery लाइब्रेरी से छोटा है, लेकिन इतना सार्वभौमिक नहीं है और इसे बनाने और बनाए रखने के लिए डेवलपर से बहुत प्रयास की आवश्यकता होती है।

कैश + jquery

CSP पृष्ठ पर jQuery का उपयोग करना

न्यूनतम कार्यक्षमता और निम्न इंटरफ़ेस के साथ एक छोटे चैट कार्यान्वयन उदाहरण पर विचार करें:

उदाहरण की विशेषताएं:
- इंटरफ़ेस jQuery का उपयोग करके पूरी तरह से कॉन्फ़िगर किया गया है
- एसिंक्रोनस सर्वर कॉल #call () # का उपयोग किया जाता है, जो क्लाइंट पर एक फ़ंक्शन कॉल के माध्यम से प्रतिक्रिया देता है
- डेटा वैश्विक में संग्रहीत किया जाता है

पृष्ठ स्रोत:

 <!DOCTYPE html> <html><head><title> jqChaté </title> <style type="text/css">.msg span {padding: 0px 0px 0px 5px}</style> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $( function(){ var USERNAME="#($USERNAME)#" //    Cache , box=$( "<div/>" ).css("overflow","auto") // ,   .css("border","1px solid #ccc").width( 340 ).height( 280 ) // .appendTo( $(document.body) ) //    ; box.parent() //     body //  body input,      .append( $("<input />").css( "width",200 ) .attr("maxlength",50).before( USERNAME+": ") ) .append( //  $("<button/>").text( "Send" ) //     .click( function(){ //    #call(..Add($(this).prev().val()))#; //    (input) $("input").val("").focus(); //textbox ,      }) ); var drawMsg=function(/*[id,time,user,msg]*/ array ){ //  var USER=2, MSG=3, SOFT="#999", BRIGHT="#339" // , msg = $( "<div><span>" + array.join("</span><span>") + "</span></div>") //html  .appendTo( box ).hide() //   -    .addClass("msg") //  .children(":first").hide() //id -   .next().css("color", SOFT) //time //  .next().css("color", (USERNAME==array[USER]) ? SOFT : BRIGHT ).append(": ") .parent() //      msg ; if (array[MSG]!=="") { //    msg.show(); // var div=msg.get(0); //    html- if (div) div.scrollIntoView(); //    } }; //drawMsg window.chat=function(array){ //  if ( $.isArray(array) ) drawMsg( array ); //  -   //     -  ? setTimeout( //     jQuery function(){ #call(..GetNext($(".msg:last span:first").text()))# } , #($get(^chatSettings("timeout"),300))# ); //    }; //window.chat chat(); //  - }); </script><body></body></html> <script runat="server" method="Add" arguments="msg:%String" language="cache"> #;    s ^chat($increment(^chat))=$listbuild( $zt( $now() ), $USERNAME, msg ) </script> <script runat="server" method="GetNext" arguments="lastMsg:%String" language="cache"> #;  c   set lastMsg=$get(lastMsg), prevMsg=$order( ^chat(lastMsg),-1 ), isNewUser=( lastMsg = "" ) set callBack="window.parent.chat(" ; set isNewChat=( isNewUser && (prevMsg="") ) if ( isNewChat ) write callBack,")" Quit if ( isNewUser ) write callBack,"[", prevMsg, ",'','',''])" Quit ; set nextMsg=$order( ^chat( lastMsg ) ) if ( nextMsg="" ) write callBack,")" Quit set stored=$get(^chat(nextMsg)) ;  write callBack,"[",nextMsg,", ", ..QuoteJS( $listget(stored,1) ) , ",", ..QuoteJS( $listget(stored,2) ) , ",", ..QuoteJS( ..EscapeHTML( $listget(stored,3 ))) , "])" </script>

एक उदाहरण खेलने के लिए, किसी भी क्षेत्र में स्टूडियो खोलें, एक नया सीएसपी-पेज बनाएं, उदाहरण से पृष्ठ से कॉपी किए गए कोड को पेस्ट करें। पृष्ठ को किसी भी नाम से सहेजें - उसी समय किसी भी मौजूदा सीएसपी-एप्लिकेशन का चयन करें। फिर पेज संकलित करें (Ctrl + F7) और इसे एक ब्राउज़र (F5) में खोलें।

एक जेन पेज पर jQuery का उपयोग करना

ज़ेन पृष्ठ पर jQuery का उपयोग करना पूरी तरह से CSP (तत्वों को खोजना और संशोधित करना) में इसका उपयोग करने के समान है, लेकिन यह देखते हुए कि ज़ेन एक क्लाइंट-सर्वर फ्रेमवर्क है जो ब्राउज़र में और कैश सर्वर पर समान ऑब्जेक्ट मॉडल का समर्थन करता है। इसलिए, निम्नलिखित बिंदुओं पर विचार किया जाना चाहिए:
- पेज लोड घटना के बाद ज़ेन पेज मॉडल बनना शुरू हो जाता है।
- पेज मॉडल को बदलने के लिए ज़ेन विधियों का उपयोग करना बेहतर है।
- ज़ेन अतिरिक्त छिपे हुए तत्वों का उपयोग करके मार्कअप बनाता है

केस स्टडी कैश + jQuery
निम्नलिखित इंटरफ़ेस के साथ संग्रहीत वर्ग की वस्तुओं को बनाने और हटाने के लिए jQuery का उपयोग करके एक और अधिक जटिल उदाहरण है:
उदाहरण की विशेषताएं:
- उदाहरण कैश संस्करण 2010 और उच्चतर पर काम करता है।
- डायनामिक ईवेंट बाइंडिंग का उपयोग किया जाता है, सभी जावास्क्रिप्ट कोड को एक अलग जावास्क्रिप्ट फ़ाइल में ले जाया जाता है
- पेज कंटेंट का एक हिस्सा सीधे ब्राउजर में जेनरेट होता है
- "हाइपर" घटनाओं और "गतिशील" (मक्खी पर उत्पन्न) विधि पृष्ठों का उपयोग नहीं किया जाता है
- सर्वर अनुरोध तर्कों के आधार पर विभिन्न डेटा प्रारूपों में प्रतिक्रियाएं उत्पन्न करता है
-% XML का उपयोग करके XML फॉर्मेट में सर्वर ऑब्जेक्ट के आउटपुट को दिखाता है। jQuery का उपयोग करते हुए क्लाइंट साइड पर XML फॉर्मेट में सर्वर रिस्पांस और पार्सिंग को पार्स करना

1. परीक्षण डेटा के साथ उपयोगकर्ता क्षेत्र में एक संग्रहीत वर्ग बनाएं

///
Class test.data Extends (%Persistent, %Populate, %XML.Adaptor) {
///
Property code As %String;
///
Property name As %String;
/// "",
Method %OnNew(ByRef args as %String="") As %Status [ Private, ServerOnly = 1 ] {
s ..code=$g(args("code",1)), ..name=$g(args("name",1))
Quit $$$OK
}
}

2. Cache टर्मिनल से क्लास विधि कॉल निष्पादित करके test.data में परीक्षण डेटा बनाएं।
USER>d ##class(test.data).Populate()

3. एक पृष्ठ वर्ग बनाएँ:
/// पेज test.data के उदाहरणों के साथ काम करने के लिए

 Class wui.testData Extends %CSP.Page { ///   Parameter CHARSET="utf-8"; ///     ClassMethod OnPage() As %Status { #;       #; 1.   #; 2.    #; 3.    #;       <var>oper</var> m args=%request.Data ;     if $d(args("oper")){ //   oper s oper=$g(args("oper",1)) //   Q:oper="add" ..Add(.args) //        Q:oper="del" ..Del(.args) //    } #;       &html<<html><head><title> test.data</title> <!--     CSS --> <style type="text/css"> table {border-collapse: collapse; border: 1px solid #777;} td, th {border: 1px solid #777;} td {padding: 2px;} th {font-weight: normal; color:#fff;background-color:#aaa;} </style> </head> <body> <table><caption>  test.data</caption> <thead><tr><th>ID</th><th>code</th><th>name</th><th><!----></th></tr></thead> <tbody>> #;       s sql="Select ID,code,name From test.data" s rs=##class(%SQL.Statement).%ExecDirect(.stm, sql) ;    Cache > 2009 ? while rs.%Next() { w !,"<tr id='",rs.ID,"'>" , "<th>",rs.ID,"</th>" ;   , "<td>",rs.code,"</td>" , "<td>",rs.name,"</td>" , "</tr>" } &html<</tbody></table> <!-- jQuery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!—      --> <script src="wui.testData.js"></script> </body></html>> Quit $$$OK } ///          XML ClassMethod Add(ByRef args as %String="") as %Status{ #;     s obj=##class(test.data).%New(.args), sc=obj.%Save() #;         xml s wr=##class(%XML.Writer).%New() ;  xml d wr.RootElement("response") ; <response , wr.WriteAttribute("id",obj.%Id()) ; id='' #;    xml d wr.Object(obj) ; ><data><code>123</code><name>Name</name></data> if $$$ISERR(sc) { d wr.Element("error") ;<error> d wr.WriteChars($system.Status.GetOneErrorText(sc)) ;errorText d wr.EndElement() ;</error> } d wr.EndRootElement() ;</response> Q $$$OK } ///           ClassMethod Del(ByRef args as %String="") as %Status{ s id=$g(args("id",1)), sc=##class(test.data).%DeleteId(id) w $CASE(sc ,1: 1 , : $system.Status.GetOneErrorText(sc) ) Q $$$OK } }

निम्नलिखित wui.testData.js फ़ाइल में प्रदान किया गया जावास्क्रिप्ट कोड है। फ़ाइल csp अनुप्रयोग की निर्देशिका में होनी चाहिए। USER क्षेत्र के लिए, निर्देशिका [कैश इंस्टॉलेशन निर्देशिका] \ CSP \ USER \ में स्थित है।

 $(function(){ // document.ready //       var footer=[ //      "<tfoot><tr>" ,"<th>*</th>" // " " ,"<th><input /></th>" // "" ,"<th><input /></th>" // "" ,"<th><button> + </button></th>" //    ,"</tr></tfoot>" ].join( "" ); //   (   ) //     $( footer ).appendTo( $( "table" ) ); //     //        $( "tfoot button" ).click( callAdd ); //     //  tr  tbody (   test.Data)    $("tbody tr").each( addDelBtn ); //   //        function addDelBtn (){ //       var $tr=$(this); //  (tr  tbody)  jQuery $( "<th><button class='bDel'></button></th>" ) //  .appendTo( $tr ) //        .children( ".bDel" ) //   c  bDel .html( "X" ) //   .attr( "title", " " ) //   .css( "color", "#f00" ) //     .click( callDel ) //       ; }; //        function callDel(){ //  -   var $btnDel=$( this ).hide(); //       var $row=$button.parents( "tr" ); //   tr var id=$row.attr( "id" ); //   //        //  $.ajax- http://api.jquery.com/jQuery.ajax/ $.ajax({ //ajax options url: window.location //   - wui.testData.cls ,data: "oper=del&id="+id //  ,dataType: "text" //    text ,success: function(txt){ //    if ( txt!="1" ) { //    $btnDel.show(); //    alert(txt); //  return; } $row.remove(); //    } }); //ajax() }; //      function callAdd(){ var values = [] //         , $inputs = $( "tfoot input" ) //   //     .each( function(){ values.push( //    $( this ).val() // input ) } //function ) //each ; //var //,    -  if ( values.join( "" ) == "" ){ alert( "    " ); return; }; //        var $addRow = $( "tfoot tr" ).hide(); //         // $.ajax- http://api.jquery.com/jQuery.ajax/ $.ajax( { //   url: window.location // - wui.testData.cls //,async: true //      , type: "POST" //   - POST  GET , data: { //       oper: "add" //  , code: values[0] //  , name: values[1] //  } , dataType: 'text' //    . //    , success: function( text ){ //  c    XML   // <response id='newid'> // <data><code>Code</code><name>Name</name></data> // <error>Error Text</error> // </response> //      jQuery var xml=$.parseXML(text) , $xml=$( xml ) //   jQuery , error=$xml .find("error") // node   .text() //   ; if ( error!=="" ){ //  alert(error); //  return; } //     var id=$xml.find("response").attr("id") , code=$xml.find("code").text() , name=$xml.find("name").text(); var tr=[ //     "<tr id='",id,"'>" , "<th>",id,"</th>" , "<td>",code,"</td>" , "<td>",name,"</td>" ,"</tr>" ].join( "" ); $( tr ) .appendTo( $("table tbody") ) //    //        .each( addDelBtn ) ; $inputs.val( "" ) //   .focus() //  ; } //success , error: function(err){ //     alert("Error: "+err); } // ,   success  error , complete: function(){ $addRow.show(); //    } } // ); //$.ajax }; //callAdd }); //document.ready

कुछ परिणाम:

JQuery लाइब्रेरी का उपयोग करना वेब इंटरफ़ेस के विकास को सरल करता है;
jQuery आपको पृष्ठ की गतिशील और स्थिर सामग्री को आसानी से अलग करने की अनुमति देता है;
jQuery में, इंटरफ़ेस तर्क के अधिकांश को ब्राउज़र की तरफ धकेलना आसान है, जिससे Caché सर्वर पर लोड कम हो जाता है।

कैश + jQuery। जल्दी शुरू करो