WordPress AJAX Tutorial using jQuery

WordPress AJAX Tutorial using jQuery – पिछले Section के Discussion के अनुसार हम जानते हैं कि WordPress द्वारा Dynamically Generate होने वाले Page/Post में प्रकार से JavaScript Codes को Include किया जा सकता है। इसलिए अब हम इस स्थिति में हैं कि इस बात को समझ सकें WordPress में AJAX Requests को किस प्रकार से Handle किया जाता है।

Basics of AJAX in WordPress

जैसाकि हम जानते हैं कि AJAX एक ऐसी प्रक्रिया है, जिसमें Web Browser में Currently Loaded Web Page के Reload हुए बिना केवल वह Content Update होता है, जिसके लिए Asynchronously Request किया जाता है। इसलिए WordPress में इस प्रक्रिया को हम निम्न चित्र द्वारा ज्यादा बेहतर तरीके से समझ सकते हैं:

चूंकि WordPress विभिन्न प्रकार की AJAX Handling के लिए jQuery Framework को Core Level पर Support करता है, इसलिए हम भी बडी ही आसानी से jQuery Framework द्वारा AJAX Requests Perform कर सकते हैं व विभिन्न प्रकार की AJAX Related जरूरतों को पूरा करने के लिए jQuery Framework को आसानी से Use कर सकते हैं।

यदि आपको AJAX के बारे में ज्यादा जानकारी नहीं है, तो आपके लिए बेहतर यही होगा कि आप “Advance JavaScript in Hindi” व “jQuery in Hindi” पुस्तक पढ़ें, जिसमें AJAX तकनीक के बारे में काफी विस्तार से Discuss किया गया है।

For Client Side: Send AJAX Request, Receive Response

जब Client-Side Event Trigger होते हैं, जैसे कि किसी Element पर Click करने पर या Time Complete होने पर या Form को Submit करने पर] तब हम उन Data को Process व Collect करते हैं, जिन्हें हमें AJAX Request में Send करना होता है। जैसे:

var data = {
	action: 'myplugin_do_ajax_request',
	some_var: 'some value',
	other_var: 'other value'
};

यहां action Parameter एक महत्वपूर्ण Parameter है, जिसे आगे Use किया जाएगा, क्योंकि इसी के माध्‍यम से WordPress में AJAX Request Perform होता है।

jQuery का प्रयोग करते हुए POST Method के माध्‍यम से AJAX Request Send करने व Server से आने वाले Response के पूरी तरह से Receive हो जाने के हेतु Wait करने जैसे दोनों कामों को एक Single Function Call द्वारा Perform किया जाता है, जिसमें हम admin-ajax.php URL को Data Pass करते हैं और फिर उसके Response को Callback Function में Retrieve करते हैं। जैसे:

jQuery.post( 'http://example.com/wp-admin/admin-ajax.php', data, function( response ) {
	/*
	1. process response object ‘response’
	2. update part of page
	*/
});

इस AJAX Request के अनुसार हमने jQuery.post() Method को Use किया है और पहले Parameter के रूप में admin-ajax.php File का URL Specify किया है, क्योंकि यही File WordPress की सभी प्रकार की AJAX Requests को Handle करता है।

यानी WordPress में सभी AJAX Requests, admin-ajax.php Page पर ही Send की जाती हैं, जो कि wp-admin Directory में Exist होता है। यही वह File है, जो WordPress के Admin Area या Public Pages/Posts से Send होने वाली Requests को Logged-In व Anonymous Users के लिए Handle करता है।

दूसरे Parameter के रूप में हमें वह Data Specify करना होता है, जिसे Process करने के लिए हम पहले Parameter के रूप में Specified admin-ajax.php File पर Pass किया जाता है तथा तीसरे Parameter के रूप में उस Callback Function को Specify किया जाता है, जो AJAX Call के कारण admin-ajax.php File से Return होने वाले Response को Manage करने का काम करता है।

For Server Side: Receive AJAX Request, Send Response

Client-Side Part में JavaScript Data को admin-ajax.php File पर Post करता है, जिसके साथ “action” नाम का एक Parameter भी Included होता है, जिसमें myplugin_do_ajax_request Value होता है। WordPress System में इस Value का Unique होना जरूरी होता है।

action Parameter इस बात को Specify करता है कि WordPress में Defined किसी Function को निम्नानुसार Discussed दो में से किसी एक wp_ajax_ Actions के माध्‍यम से AJAX Request के साथ कैसे Connect करना है:

• wp_ajax_$action Hook, Callback Function से तब Attach होता है, जब User Logged-In होता है। जबकि
• wp_ajax_nopriv_$action Hook, Callback Function से तब Attach होता है, जब User Logged-In नहीं होता न ही उसके पास कोई Privilege होता है।

यानी यदि Logged-In User कोई AJAX Request करे, तो Return होने वाले Response को Handle करने के लिए Define किया जाने वाला Callback Function तब Execute होता है, जब wp_ajax_$action Hook Fire होता है। जबकि यदि कोई Logged-Out or Anonymous User या कोई ऐसा User कोई AJAX Request करे, जिसके पास कोई Privileges न हो, तो उस स्थिति में Return होने वाले Response को Handle करने के लिए Define किया जाने वाला Callback Function तब Execute होता है, जब wp_ajax_nopriv_$action Hook Fire होता है।

उदाहरण के लिए हम हमारे Plugin में निम्नानुसार तरीके से एक Action Hook को Specify कर सकते हैं:

    add_action( ‘wp_ajax_myplugin_do_ajax_request‘, ‘myplugin_process_ajax‘ );

इस Action Hook को Specify करने के बाद जब कोई Logged-In User कोई AJAX Request Perform करता है, तो उस AJAX Request से Return होने वाले Response को Handle करने के लिए हमें वह Callback Function Define करना होता है, जिसे उपरोक्तानुसार Action Hook के Fire होने पर Execute होना होता है, जो कि हमारे Current Example में “myplugin_process_ajax()” है। जैसे:

// Process Ajax data and send response
function myplugin_process_ajax() {
	// Check authority and permissions: current_user_can()
	// Check intention: wp_verify_nonce()
	// Process data sent by the Ajax request
	// Echo data response that the Ajax function callback will process
	die();
}

जरूरत के अनुसार किसी Specific Situation में हमें User Permissions को भी Check करने की जरूरत पड सकती है, जिसके बारे में हमने इस पुस्तक के Plugin Security Management Section में काफी Detail से Discussion किया है। Security Checks Perform होने के बाद हमारा Function $_POST Array से Data की Processing कर सकता है, Results को Echo यानी Print कर सकता है व अन्त में die() API Function द्वारा AJAX Request/Response Cycle का अन्त कर सकता है।

WordPress AJAX के अन्तर्गत एक और ध्‍यान देने वाली बात ये है कि क्योंकि Client-Side व Server-Side सभी प्रकार की AJAX Requests को admin-ajax.php द्वारा ही Handle किया जाता है, इसलिए यदि .htaccess Password जैसे किसी Lower Level द्वारा इस File की Directory को Protect किया गया हो, तो उस स्थिति में ये File Anonymous Users के लिए Accessible नहीं होती। परिणामस्वरूप Anonymous User के लिए AJAX Requests Fail हो जाती है।

WordPress AJAX Request – The Simple Example

किसी भी विषय को बेहतर तरीके से समझने का Simple तरीका यही है कि एक Example Program द्वारा Concept को Step-by-Step Clear किया जाए। तो चलिए, एक Simple Example Program द्वारा WordPress AJAX को उपयोग में लेने के बारे में समझने की कोशिश करते हैं।

हम जानते हैं कि WordPress में हम <!–more–> Tag द्वारा Content को एक से ज्यादा हिस्सों में विभाजित कर सकते हैं। इसी Concept को Use करते हुए हम एक ऐसा Plugin Create कर सकते हैं, जिसमें User को Break के बाद का Content Ajax के माध्‍यम से तभी दिखाई दे, जब User Read more… Link पर Click करे।

हमारे इस AJAX Based Read More Plugin की विभिन्न जरूरतों को सरल तरीके से निम्नानुसार Specify किया जा सकता है:

• हमें एक ऐसा Script Insert करना होगा, जो WordPress Page/Post पर स्थित “Read more…” Link को Click किए जाने के लिए Monitor करता रहे।
• इस Script को केवल तभी Current WordPress Page/Post पर Insert किया जाना चाहिए, जबकि उस पर “Read more…” Link Exist हो।
• “Read more…” Link को Click किए जाने के बाद WordPress Page/Post के उस Content को Dynamically Display किया जाना चाहिए,

तो चलिए, इन सभी Steps को Follow करते हुए हम एक WordPress AJAX Based Plugin Create करते हैं व समझने की कोशिश करते हैं कि AJAX को WordPress के साथ jQuery के माध्‍यम से कैसे Use किया जा सकता है।

Read more …

• Inserting JavaScript
• Client-Side Ajax Requesting
• Server-Side Ajax Processing