Sunday, May 26, 2019

Web Technologies : AJAX Introduction

अजाक्स AJAX यह नाम आपने यथासंभव सुना होगा, यदि आप वेब डेवेलपर के रूप में कार्य कर रहे हैं अथवा वेब साइट को विकसित करने से किसी रूप में जुड़े हैं तो अजाक्स से परिचित ही होंगे। अजाक्स का फुलफॉर्म  Asynchronous javascript And XML है। अब इस के प्रत्येक शब्द पर ध्यान देना जरूरी है। Asynchronous का हिंदी में अर्थ समय से जुड़ा हुआ है। जब कोई घटना एक समय पर होती है और दूसरे समय पर अगली घटना होती है तब ऐसी घटनाओं को Synchronous कहते हैं। इसके विपरीत अगर समय के प्रभाव से रहित एक घटना के बाद तुरंत दूसरी घटना घटित होती है तब उन्हें Asynchronous कहते हैं। असिंक्रोन्स घटना का एक उदाहरण आप गूगल में सर्च के दौरान पाते हैं। जैसे ही आप सर्च बॉक्स में कुछ लेटर्स टाइप करते हैं तब उससे मिलते जुलते सम्भाव्य potential शब्द उजागर होने लगते हैं जिसे आप इंटेलिसेंस के तौर पर पाते हैं। ध्यान देने वाली बात यह है कि बिना पेज को रिफ्रेश किए, बैकग्राउंड में वेबसर्वर पर डेटा भेजकर ब्राउज़र पर यह घटना घटित होती है। इसकी वजह जावा स्क्रीप्ट का कोड है जो xml डाटा को लोकल स्तर पर प्रकट करती है। इस पूरी क्रिया को अजाक्स की सहायता से सम्भव बनाया जाता है। अजाक्स के कारण पेज रिफ़्रेश के बिना ही डेस्कटॉप एप्पलीकेशन जैसा अनुभव वेब एप्लिकेशन में होता है। है न बिलकुल मजेदार बात। अजाक्स अपने इसी विशेषता के कारण वेबसाइट डेवेलोपर का प्रिय बन गया।

अजाक्स को डेप्थ गहराई से समझने के लिए जरुरी है कि हम समझे कि सरल और जटिल वेबसाइट क्या हैं। वेबसाइट का सरलतम रूप html तकनीक से बने वेबसाइट से है। इस तरह के वेबसाइट में केवल html का प्रयोग मानना चाहिए। ऐसे वेबसाइट में किसी प्रकार की डायनामिक गतिविधियों की कल्पना नहीं की जा सकती। कहने का मतलब है कि पेज पर जो दिख रहा है बस उतना ही है। जैसे एक मूर्ति और जीव में फर्क है वैसे ही स्थैतिक और गतिशील वेबसाइट में अंतर होता है। मूर्ति में किसी घटना पर हलचल नहीं होती जबकि इंसान में घटना का प्रभाव होता है। स्थैतिक वेबपेज में केवल सूचनाओं को दर्शाया जाता है। उन सूचनाओं में समय के साथ साथ किसी बदलाव की अपेक्षा यूजर के क्रियाकलापों से नहीं होता। सूचनाओं में परिवर्तन के लिए वेबपेज बनाने वाले को स्वयं हस्तक्षेप करना पड़ता है।

CSS तकनीक का उपयोग कर गत्यात्मक वेबसाइट को बनाया जा सकता है। यूजर की किसी घटना से सूचना का अद्यतन होना सम्भव है। CSS3 तकनीक द्वारा वेबपेज का मुख्यरूप से स्टाइल डिज़ाइन तैयार किया जाता है लेकिन CSS काफी उन्नत तकनीक है और जावा स्क्रिप्ट के बिना कई इवेंट सम्बन्धित कार्यों को वेबपेज पर सम्बद्ध किया जा सकता है। कहने का अभिप्राय यह है कि css तकनीक को html के साथ उपयोग कर एक अच्छी डिजाइन का वेबसाइट बनाया जा सकता है।

अगर हम इससे भी अच्छा वेबसाइट बनाना चाहते हैं तो जावास्क्रिप्ट तकनीक को भी उपयोग करना होगा। जावास्क्रिप्ट के द्वारा ब्राउज़र पर किसी घटना से जुड़े कार्यों को दिखाया जा सकता है। मान लीजिए कि यूजर ने वेबपेज के फॉर्म के किसी टेक्सटबॉक्स में डाटा डालना भूल गया और submit बटन दबा दिया। इस गलती पर ध्यान आकर्षित करने के लिए जावा स्क्रिप्ट का उपयोग कर सकते हैं। विशेष ध्यान देने वाली बात यह है कि जावा स्क्रिप्ट में ब्राउज़र लेवल पर यह कार्य होता है। डाटा की प्रोसेसिंग क्लाइंट साइड हो रही है। डाटा को किसी डाटाबेस में नहीं स्टोर या अपडेट किया जा रहा। इस तरह जावास्क्रिप्ट, css और html में बने वेबसाइट काफी उन्नत होते हैं। डाटा के गत्यात्मक स्वरूप का स्पष्ट बोध यूजर को होता है।

अब हम बात करते हैं ऐसे वेबसाइट का जिनमे डाटा को किसी डाटाबेस सर्वर पर स्टोर रखा जाता है। आज के दौर में आमतौर पर किसी वेबसाइट का किसी न किसी डाटाबेस सर्वर से सम्बंध होता है। इस तरह के वेबसाइट को बनाने के लिए सर्वर साइड लैंगुएज जैसे php का उपयोग करना पड़ता है। डाटा की प्रोसेसिंग सर्वर पर होती है। इसका मतलब है कि ब्राउज़र पर front end में किसी data के add update आदि कार्यों को सम्पन्न करने के लिए data को सर्वर पर भेज दिया जाता है। डाटा भेजने के लिए अलग अलग तरह के प्रोटोकॉल और मेथड्स है। इन प्रोटोकॉल और मेथड से निर्धारित होता है कि डेटा का ट्रांसफर सुरक्षित ढंग से होगा या नहीं, कितनी बड़ी मात्रा में डेटा का ट्रांसफर होगा, डेटा को नेटवर्क पर chunk अर्थात टुकड़ो में भेज दिया जाता है जिसे बाद में reassemble किया जाता है, डेटा खोने या त्रुटिपूर्ण होने पर प्रोटोकॉल बताता है कि क्या किया जाये इत्यादि।

जब डेटा को वेबक्लाइंट से वेबसर्वर पर भेजा जाता है और सर्वर द्वारा डेटा ब्राउज़र क्लाइंट साइड भेज दिया जाता है तो पेज रिफ्रेंस होता है। मतलब ब्राउज़र पर डाटा अपडेटेड हो जाता है। अगर हर बार यूजर कोई छोटा सा भी परिवर्तन पेज पर करता है तो इस घटना के पश्चात डेटा सर्वर पर जाता है और उसके बाद सर्वर से अपडेटेड डेटा ब्राउज़र पर आता है और पेज रिफ़्रेश होता है। पेज रिफ़्रेश होने की प्रक्रिया में समय लगता है अगर नेटवर्क कमजोर है तब तो समय अंतराल और भी बढ़ जाता है जिसके कारण यूजर को ब्राउजिंग अनुभव बुरा लगता है। मान लीजिए आप फेसबुक पर किसी पोस्ट को लाइक करते हैं ऐसा करने पर फेसबुक का पेज रिफ़्रेश नहीं होता परन्तु लाइक बटन दबाने का प्रभाव बिना पेज रिफ़्रेश के हो जाता है। अगर लाइक बटन दबाने पर पेज रिफ़्रेश करना पड़े तो यूजर को कितनी दिक्कत होगी, समझ सकते हैं। अतः इस ब्राउजिंग अनुभव को बेहतर बनाने के लिए अजाक्स तकनीक का आविष्कार किया गया।

अजाक्स कोई प्रोग्रामिंग भाषा नहीं है बल्कि यह एक से अधिक तकनीकों का समूह है जिसके कारण पेज को रेफ्रेश किए बिना बैकग्राउंड में सर्वर पर डेटा भेज दिया जाता है। यह एक बहुत ही उपयोगी बात है जिसके कारण यूजर को वेब एप्लिकेशन को उपयोग करने पर डेस्कटॉप एप्लिकेशन जैसा अनुभव होता है। अजाक्स में मुख्य रूप से जावास्क्रिप्ट और xml तकनीक का उपयोग होता है। जावास्क्रिप्ट एक क्लाइंट पक्षीय प्रोग्रामिंग भाषा है जिसकी सहायता से ब्राउज़र पर इवेंट्स से सम्बंधित क्रियाकलापों को उदघाटित किया जाता है। xml का उपयोग डाटा को ट्रांसपोर्ट करने में किया जाता है। अजाक्स तकनीक के अंतर्गत जब ब्राउज़र पर कोई घटना या इवेंट घटित होती है जैसे यूजर लाइक बटन को क्लिक करता है तो डेटा को अपडेट करने के किए अजाक्स इंजिन का उपयोग किया जाता है। अजाक्स इंजन द्वारा डाटा को क्लाइंट से सर्वर पर ट्रांसपोर्ट किया जाता है इसी प्रकार सर्वर से डेटा को क्लाइंट यानी ब्राउज़र पर प्रकट किया जाता है।

आपने सीखा कि अजाक्स जावा स्क्रिप्ट पर आधारित है। अतः बिना जावा स्क्रिप्ट सीखे अजाक्स सीखना आसान नहीं। अगर आप जावा स्क्रीप्ट में माहिर नहीं हैं तो जावास्क्रिप्ट के फ़्रेमवर्क jquery को यूज कर सकते हैं जिसमे जावास्क्रिप्ट के बने बनाये फंक्शन मिल जाएंगे। आप jquery और javascript दोनो में से किसी एक कि मदद से यह कर सकते हैं। ध्यान देने वाली बात है कि jquery वस्तुतः जावास्क्रिप्ट का एक फ़्रेमवर्क है। फ़्रेमवर्क से अभिप्राय जावास्क्रिप्ट के अनेकों मेथड्स या फंक्शन्स से है जिनको वर्गीकृत कर एक फोल्डर में रख दिया गया है। इसका मतलब यह हुआ कि एक डेवलपर के रूप में आपको ऐसे फंक्शन दुबारा बनाने की जरूरत नहीं है। बने बनाये इन फंक्शन को आप अपने प्रोजेक्ट में यूज कर सकते हैं।

अगला प्रश्न है कि हम इस फ़्रेमवर्क को कहाँ से डाऊनलोड करें और प्रोजेक्ट में इसका यूज कैसे करें?

इस फ़्रेमवर्क को आप इस लिंक से डाऊनलोड कर लीजिए। जो लेटेस्ट फ़्रेमवर्क हो उसे ही डाऊनलोड कीजिए। इस फ़्रेमवर्क को आप अपने प्रोजेक्ट फोल्डर में रख दीजिए और कोई उचित नाम दे दीजिए। इसका by default एक्सटेंशन js है जो यह बताता है कि यह जावास्क्रिप्ट की लाइब्रेरी है।

एक html फ़ाइल बनाये और script टैग के src एट्रिब्यूट में इस लाइब्रेरी फ़ाइल का नाम एक्सटेंशन सहित लिख दे। इस html फ़ाइल में script टैग के भीतर आप jquery के कोड को लिखते हैं। इस html फ़ाइल के स्क्रिप्ट टैग का हिस्सा एक्सएक्यूट होता है और jquery के रिक्वेस्ट को सर्वर पर एक्सएक्यूट करने के लिए भेज दिया जाता है। jquery के syntax को हम W3C के वेबसाइट से सीख सकते हैं।

xmlhttprequest अजाक्स रिक्वेस्ट के द्वारा यह सब होता है। लोकलहोस्ट पर आप http request को यूज नहीं कर सकते हैं। xampp की मदद से आप लोकलसर्वेर बना सकते हैं। html फ़ाइल के अंदर ही हम जावास्क्रिप्ट और jquery यूज करते हैं। विशेष ज्ञान के लिए w3c के वेबसाइट पर विजिट करें।

लेखक अजीत कुमार
अंतिम बार अद्यतन ३/९/२०२१


No comments:

Post a Comment

Hot Topics