Deferred Object – The Foundation of jQuery AJAX

jQuery in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

jQuery in Hindi | Page:711 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

What is jQuery Deferred Object: jQuery Library हमें हमारे Web Page पर AJAX Related Features प्राप्त करने के लिए सभी प्रकार के Features व Functionalities Provide करता है। यानी jQuery हमें ऐसे Functions Provide करता है, जिनका प्रयोग करके हम बिना अपने Web Page को Reload किए हुए अपने Web Page में किसी Server Side Script को Run करके अथवा Server से नए Data की Request कर सकते हैं और आने वाले नए Data को अपने Web Page में Load कर सकते हैं।

साथ ही jQuery हमें AJAX Related जो Functions Provide करता है, वे पूरी तरह से Cross-Browser Compatible होने की वजह से सभी Web Browsers में समान रूप से काम करते हैं। इसलिए हमें अलग-अलग Web Browsers के लिए अलग-अलग तरीकों को Use करते हुए अलग-अलग JavaScript Codes लिखने की जरूरत नहीं रहती।

लेकिन चूंकि jQuery में AJAX Functionality को एक Special Object द्वारा Define किया जाता है, जिसे Deferred Object कहते हैं। इसलिए पहले हमें इस Deferred Object को ही ठीक से सना जरूरी है ताकि हम जब AJAX Functionalities के लिए इन Deferred Objects व इनके Methods को Use करें, तो इस बात को बेहतर तरीके से स सकें कि Internally किस प्रकार से Deferred Objects द्वारा AJAX की Functionality को प्राप्त किया जा रहा है।

Promises and Deferred Objects

कई बार Programming के दौरान ऐसी स्थिति पैदा हो जाती है कि किसी एक Function के पूरी तरह से Execute होने के बाद वह Function जो Result Generate करता है, उस Result को Use करने के लिए एक दूसरा Function Call किया जाता है और ये दूसरा Function पूरी तरह से Execute होने के बाद जो Result Generate करता है, उस Result को किसी तीसरे Function में Use करना होता है और ये प्रक्रिया आगे भी जारी रह सकती है।

यानी तीसरा Function तब तक Execute नहीं हो सकता, जब तक कि दूसरा Function Execute होकर Result Generate न कर दे और दूसरा Function तब तक Execute नहीं हो सकता, जब तक कि पहला Function Execute होकर Result Generate न कर दे। इस प्रकार की जरूरत को पूरा करने के लिए सामान्यत: हमें कई Levels तक की Nesting करता हुआ Function Create करना पडता है।

Deferred Object इसी समस्या का समाधान प्रस्तुत करते हैं। Deferred Object ऐसे Codes लिखने की सुविधा प्रदान करते हैं, जो Exactly उसी समय Execute नहीं होते, जिस समय व स्थान पर इन्हें लिखा जाता है बल्कि ये किसी अन्य Specific Situation के Match होने पर Future में Execute होते हैं। Deferred Object की Processing को हम एक उदाहरण द्वारा समझने की कोशिश करते हैं।

मानलो कि आप Infosys Company में Job प्राप्त करने के लिए Apply करते हैं और Company द्वारा आपको Interview के लिए Call किया जाता है। अब Infosys Company वह Function है, जिसमें आपको Perform करना है।

इस Company में आप जो Interview देंगे, उस Interview का एक परिणाम होगा और परिणाम ये होगा कि या तो आपको इस Company में Job मिल जाएगी या फिर आपको Job नहीं मिलेगी।

इन दोनों प्रकार के परिणामों के लिए आप कोई Plan Create करते हैं क्योंकि दोनों ही प्रकार के परिणामों के लिए आपको कुछ न कुछ Plan तो बनाना जरूरी होता है और आप इन Plans को Interview Perform हो जाने के बाद निश्चित नहीं कर सकते।

यानी आपको Interview देने से पहले ये तय करना होता हैं कि यदि आपको Job मिल गयी तो आप क्या करेंगे और यदि आपको इस Company में Job नहीं मिली, तो आप क्या करेंगे।

उदाहरण के लिए यदि आपको Job मिल गयी तो आपको उस शहर में रहने की व्यवस्था देखनी पडेगी, जहां आप तब तक निवास करेंगे, जब तक कि आपको उस Company में Job करना है। जबकि यदि आपको Job नहीं मिलता है, तो उस स्थिति में आपको फिर से अपने Home Town आने के लिए Ticket Book करने की जरूरत पडेगी। या इसी तरह के कुछ और कामों का Plan बनाना पड सकता हैं।

यदि हम उपरोक्त Interview को Programmatically Specify करें, तो हम कुछ निम्नानुसार Code लिख सकते हैं:

candidate.attendInterview().then(
successInterview(){
 //Book Room.
},
failureFunction(){
 //Buy ticket for back to home. 
});

अब इस Code की मुख्‍य विशेषता ये है कि हालांकि हम बिल्कुल नहीं जानते कि attendInterview() Function का परिणाम क्या होगा, फिर भी हम अनुमानित परिणामों का अन्दाजा लगा सकते हैं और उन परिणामों के आधार पर कुछ Specific कामों को पूरा करने के लिए अन्य Functions को Invoke करने का Plan बना सकते हैं।

हम ऐसा इसलिए कर सकते हैं क्योंकि हम जानते हैं कि attendInterview() Function एक “Promise” यानी निश्चित या Predefined Object जरूर Return करेगा।

इस Programming Pattern का एक Interesting Aspect, Promise Resolution Concept है। Promise Resolution तब ?ाटित होता है, जब वह Task वास्तव में Complete होता है, जो कि Promise Return कर रहा है।

इसलिए जब हम attendInterview() Function से Promise Object Return करते हैं, तो Return होने वाले Promise Object को Unresolved कहा जाता है। क्योंकि attendInterview() Function क्या Promise Return करेगा, इसका पता तब चलेगा जब attendInterview() Function Execute होगा और attendInterview() Function के Execute होने के बाद इस Function से Return होने वाले Resolution के आधार पर successFunction या failureFunction Invoke होगा।

Promises का Concept मूल रूप से तीन कारणों से महत्वपूर्ण है:

  • ये हमें Actual Task Invocation से Future Handlers Logics को Decouple यानी अलग करने की सुविधा प्रदान करता है।
  • हम जितने चाहें, उतने Future Handlers Add कर सकते हैं। Function जो Promise Value Return करेगा, उस Value के आधार पर उन सभी Future Handles में से Matching Handler Execute हो जाएगा।
  • यदि हम किसी पहले से Resolve हो चुके Promise के साथ किसी Handler को Add करते हैं, तो Appropriate (Success / Failure) Function तुरन्त Execute हो जाता है।

जब हम Promise Concept को AJAX Request के साथ Use करते हैं, तब हमें Promise Concepts की Advantages का पूरा पता चलता है। क्योंकि AJAX Request Fire होने पर हमें जो Response प्राप्त होता है, वह तुरन्त प्राप्त नहीं होता बल्कि Request पूरी तरह से Perform होने के बाद होता है, यानी RequestResponse के बीच कुछ समय व्यतीत होता है और हमें प्राप्त होने वाला Response किसी Future Point of Time पर प्राप्त होता है जबकि Request Send करने से लेकर Response प्राप्त होने तक के बीच कितना समय व्यतीत होगा, इस बात का हमें कोई भी अन्दाजा नहीं होता।

jQuery का Deferred Object वास्तव में Promise Interface का ही Implementation है। ये Promise के सभी Features तो Provide करता ही है, साथ ही ये हमें नए Deferred Objects Create करने की भी सुविधा देता है और उन Deferred Objects के साथ Future Handlers को Attach करने और उन्हें Programmatically Resolve करने की भी सुविधा देता है।

Deferred Object को हम AJAX Request के माध्‍यम से ज्यादा बेहतर तरीके से व आसानी से समझ कते हैं। jQuery के पुराने Versions में Ajax Request के साथ successfailure Handlers को Attach किया गया था। लेकिन इनके साथ एक समस्या ये थी कि जब हम AJAX Call को Define कर रहे होते थे, तभी हमें successfailure Callback Function को भी Define करना जरूरी होता था। जिसकी वजह से हम एक AJAX Call में केवल एक ही success / failure Handler को Specify कर सकते थे। जैसे:

$.ajax({
 url: "test.html",
 success: function(){
  alert("ajax request successful");
 },
 failure: function(){
  alert("ajax request failed");
 }
});

लेकिन जब jQuery के नए Version में Deferred Object को Introduce किया गया, तो इस Deferred Object के कारण हमें कई नए Methods प्राप्त हुए, जिनका प्रयोग करके हम बडी ही आसानी से एक ही AJAX Call के साथ Multiple Handlers को Attach कर सकते हैं। जैसे:

var myAJAXRequest = $.ajax({ url: "test.html" })
.done( function(data){
 alert("ajax request successful");
})
.fail(function(data){
 alert("ajax request failed");
});

// More Codes Here …
myAJAXRequest.done(function(data){
 $('div.myAjaxContent').html('Ajax Response ' + data);
});

जैसाकि हम उपरोक्त Code द्वारा समझ सकते हैं कि ये Code पहले वाले Code की तुलना में एक ज्यादा बेहतर AJAX Request Code है। जहां done()fail() Functions का प्रयोग AJAX Call द्वारा Return हो रहे Object के साथ Callbacks को Register करने के लिए किया जा रहा है। क्योंकि ये AJAX Call एक Deferred Object Return करता है, जो कि Promise Interface को Implement करता है।

यानी इस AJAX Call से Return होने वाला Deferred Object, Promise Interface के Implementation पर आधारित है। चूंकि ये एक Promise Object है, इसलिए हम इसके साथ ऐसे Handlers Attach कर सकते हैं, जो AJAX Request Complete होने के बाद Return होने वाले Deferred Object के आधार पर Future Handlers Invoke होते हैं।

इतना ही नहीं, जैसाकि हम उपरोक्त Example Code में देख सकते हैं कि हम नए Future Handlers को अपनी जरूरत के आधार पर बाद में भी Add कर सकते हैं, जैसाकि पिछले Code Segment की अन्तिम Line में myAJAXRequest Object के साथ done() Method का प्रयोग करके नए Function को Queued किया गया है।

यदि AJAX Call के Complete होने तक jQuery Interpreter इस Code तक नहीं पहुंचता, तो ये Function बाद में Execute होने के लिए Queued हो जाता। जबकि यदि इस Code तक पहुंचते-पहुंचते AJAX Call Complete हो जाता है, तो उस स्थिति में ये Function तुरन्त Execute हो जाता है। ये Coding Approach हमें ऐसे Codes लिखने के लिए काफी Flexibility Provide करते हैं, जो कि जरूरत या Situation के आधार पर बाद में Execute होते हैं।

Promise एक ऐसा Object होता है जो किसी One-Time Event को Represent करता है और सामान्यत: ये Object AJAX जैसे किसी Asynchronous Task के कारण Create होता है।

पहली नजर में देखें तो “Promise” Object किसी Task की Pending स्थिति को Represent करता है, जिसे बाद में या तो Resolve कर लिया जाता है या फिर Reject कर दिया जाता है।

यदि Task को Resolve कर लिया जाता है, तो इसका मतलब ये है कि Task Complete या Done हो गया है जबकि यदि Task Fail हो जाता है, तो Promise Object को Reject कर दिया जाता है।

जब एक बार Promise Object, Resolve या Reject हो जाता है, तो फिर वह Object उस Web Page में हमेंशा के लिए उसी Resolved या Rejected स्थिति में ही बना रहता है। साथ ही इस Promise Object के Callbacks, Current Web Page की Life Time तक फिर से Fire नहीं होते।

हम किसी Promise Object के साथ किसी Callback Function को भी Attach कर सकते हैं, जो उस समय Fire होता है, जब Promise Object Resolve या Reject होता है।

साथ ही हम इस Promise Object के साथ जब चाहें तब नए Callback Functions को Add कर सकते हैं। फिर भले ही वह Promise Object पहले ही Resolve या Reject क्यों न हो चुका हो।

जबकि Promise Object के Resolve या Reject हो चुके होने की स्थिति में Add किया जाने वाला Callback Function,  Promise Object के Queue में Add होते ही तुरन्त Run भी हो जाता है।

साथ ही हम Promises को Logically अन्य नए Promises के साथ Combine भी कर सकते हैं। जो हमें ऐसे Codes लिखने की सुविधा देते हैं, जो कहते हैं कि

जब ये सभी Specified काम हो जा, तब इस काम को कर देना।

Deferred Object एक Chainable Utility Object होता है, जिसे Create करने के लिए jQuery.Deferred() Function का प्रयोग किया जाता है। ये Object Multiple Callback Functions को Callback Queues में Register कर सकता है, Callback Queues को Invoke कर सकता है और किसी भी Synchronous या Asynchronous Callback Function के Success या Failure State को अन्य Callback Function के लिए Relay कर सकता है।

किसी भी अन्य jQuery Object की तरह ही Deferred Object भी Chainable होता है, लेकिन हर Deferred Object के स्वयं के Methods होते हैं। Deferred Object Create करने के बाद हम विभिन्न प्रकार की Requirements को पूरा करने के लिए विभिन्न प्रकार के Deferred Methods को Chaining के माध्‍यम से अथवा Created Deferred Object के Reference को किसी Variable में Store करके उस Variable के माध्‍यम से Use कर सकते हैं और उस Variable द्वारा एक या एक से ज्यादा Methods को Invoke कर सकते हैं। (What is jQuery Deferred Object)

jQuery Callback Function. The Power of jQuery.
What and how jQuery AJAX deferred Function works?

******

ये पोस्‍ट Useful लगा हो, तो Like कर दीजिए।

jQuery in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

jQuery in Hindi | Page:711 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

Download All Hindi EBooks

सभी हिन्दी EBooks C, C++, Java, C#, ASP.NET, Oracle, Data Structure, VB6, PHP, HTML5, JavaScript, jQuery, WordPress, etc... के DOWNLOAD LINKS प्राप्‍त करें, अपने EMail पर।

Register करके Login करें। इस Popup से छुटकारा पाएें।