AJAX या Ajax अतुल्यकालिक जावास्क्रिप्ट और XML है। इसका उपयोग सर्वर के साथ डेटा का आदान-प्रदान करने और क्लाइंट साइड पर पूरे वेबपेज को फिर से लोड किए बिना वेबपेज के एक हिस्से को अपडेट करने के लिए किया जाता है। डेटा का आदान-प्रदान और अद्यतन करते समय मौजूदा वेबपेज का प्रदर्शन और व्यवहार बिल्कुल भी बाधित नहीं होता है। अजाक्स को प्रौद्योगिकियों का एक समूह भी माना जाता है जिसमें एचटीएमएल, सीएसएस, डोम और जावास्क्रिप्ट होते हैं जिनका उपयोग मार्क अप, स्टाइल और उपयोगकर्ता को वेबपेज पर जानकारी के साथ बातचीत करने की अनुमति देने के लिए किया जाता है। इस लेख में, यह आपको दिखाएगा कि नोटपैड ++ का उपयोग करके अजाक्स चरणों में एक साधारण प्रोग्राम कैसे लिखना है। HTML, DOM, JavaScript और एक स्थानीय वेब सर्वर या दूरस्थ वेब सर्वर का कुछ बुनियादी ज्ञान आवश्यक है। इस लेख में परीक्षण के लिए WampServer का उपयोग किया गया है।
कदम
विधि 1 में से 2: कोडिंग
चरण 1. अजाक्स प्रोग्राम लिखने के लिए एक चित्र तैयार करें।
तस्वीर को उसी फोल्डर में सेव करें जहां आप अजाक्स प्रोग्राम को प्रदर्शित करने वाली अपनी एचटीएमएल और टेक्स्ट फाइलों को सेव करेंगे। इस आलेख में, "ProgramInAjax" निर्देशिका "www" निर्देशिका के अंतर्गत "wamp" फ़ोल्डर के अंदर स्थापित की गई है जहां आपने WampServer स्थापित किया है।
चरण 2. कोई भी टेक्स्ट एडिटर खोलें।
इस लेख में नोटपैड++ का प्रयोग टेक्स्ट एडिटर के रूप में किया गया है।
चरण 3. टेक्स्ट एडिटर में एक नई फाइल बनाएं।
निम्नलिखित टाइप करें:
ओ ओ! पीला फूल कहाँ गया?
आप जो चाहें html टैग के अंदर टाइप कर सकते हैं।
चरण 4. फ़ाइल को “ajax-data.txt.” नाम से टेक्स्ट दस्तावेज़ के रूप में सहेजें।
” वास्तव में, आप जो चाहें फ़ाइल को नाम दे सकते हैं, लेकिन सुनिश्चित करें कि आप इस पंक्ति में कोडिंग के लिए एक ही फ़ाइल नाम दर्ज करें:
xmlhttp.open ("GET", "AJAX-data.txt", सत्य);
हालाँकि, HTML टैग का उपयोग हेडर के लिए किया जाता है ताकि यह बड़ा और अधिक अदृश्य दिखाई दे।
चरण 5. वेबपेज के लिए एक नई फाइल बनाएं।
यह फ़ाइल एक वेब ब्राउज़र में अजाक्स प्रोग्राम को देखने के लिए एक HTML फ़ाइल के लिए है।
चरण 6. निम्नलिखित कोड को कॉपी करें:
मेरे द्वारा मेरा पहला अजाक्स कार्यक्रम नीचे अजाक्स कोड डालें।फूल गायब करने के लिए नीचे दिए गए बटन पर क्लिक करें।
चरण 7. फ़ाइल सहेजें।
मेनू बार पर सेव बटन पर क्लिक करें। एक "इस रूप में सहेजें" बॉक्स खुला है। अपने दस्तावेज़ के लिए एक नाम दर्ज करें। इस आलेख में, फ़ाइल का नाम "अनुक्रमणिका" है।
चरण 8. फ़ाइल एक्सटेंशन चुनने के लिए ड्रॉप डाउन तीर पर क्लिक करें।
"इस प्रकार सहेजें" फ़ील्ड में, फ़ाइल एक्सटेंशन चुनने के लिए ड्रॉप डाउन तीर पर क्लिक करें।
चरण 9. "हाइपर टेक्स्ट मार्कअप लैंग्वेज फाइल" चुनें।
” सुनिश्चित करें कि इसमें कोष्ठक के अंदर "html" है। "एचटीएमएल" का चयन करने के बाद सहेजें पर क्लिक करें।
चरण 10. वेब ब्राउज़र में HTML फ़ाइल का परीक्षण करें।
वेब ब्राउजर में वेबपेज खोलें। शीर्ष मेनू बार पर "रन" पर जाएं। इसे क्लिक करें और "Chrome में लॉन्च करें" या आपके सिस्टम में इंस्टॉल किए जा रहे किसी भी ब्राउज़र का चयन करें। इस लेख में परीक्षण के लिए Google Chrome का उपयोग किया गया है। हो सकता है कि आपके पास Notepad++ में कुछ अन्य ब्राउज़र स्थापित हों। आप अपने पसंदीदा ब्राउज़र का चयन कर सकते हैं। एक अन्य विकल्प, आप स्क्रीन के निचले भाग में टास्कबार पर WampServer आइकन पर क्लिक कर सकते हैं और "लोकलहोस्ट" का चयन कर सकते हैं। आपको वहां अपनी निर्देशिका देखनी चाहिए और अनुक्रमणिका फ़ाइल पर क्लिक करना चाहिए।
चरण 11. स्क्रिप्ट का परीक्षण करने के लिए चित्र के नीचे दिए गए बटन पर क्लिक करें।
चरण 12. आपका अंतिम वेबपेज।
आपके वेबपेज को उस जानकारी से ताज़ा किया जाना चाहिए जिसे आपने शुरुआत में टेक्स्ट फ़ाइल में दर्ज किया था। फूल और हेडर को ओह ओह! पीला फूल कहाँ गया?”
विधि २ का २: कोड स्पष्टीकरण
चरण 1. शरीर खंड।
HTML की बॉडी में "div" सेक्शन और एक बटन होता है। इस खंड का उपयोग सर्वर से लौटाई गई जानकारी को प्रदर्शित करने के लिए किया जाएगा। बटन क्लिक होने पर "loadXMLDoc ()" नामक फ़ंक्शन को कॉल करता है।
मेरे द्वारा मेरा पहला अजाक्स कार्यक्रम अजाक्स कार्यक्रम का परीक्षण करने के लिए एक छवि यहां जाती है।फूल गायब करने के लिए नीचे दिए गए बटन पर क्लिक करें।
एक बटन यहाँ जाता है
चरण 2. सिर अनुभाग।
HTML फ़ाइल के मुख्य भाग में एक स्क्रिप्ट टैग होता है जिसमें "loadXMLDoc ()" फ़ंक्शन होता है।
मेरे द्वारा मेरा पहला अजाक्स कार्यक्रम नीचे अजाक्स कोड डालें।
चरण 3. अधिक स्पष्टीकरण।
अजाक्स की सबसे महत्वपूर्ण चीज XMLHttpRequest ऑब्जेक्ट है। इसका उपयोग सर्वर के साथ डेटा का आदान-प्रदान करने के लिए किया जाता है और सभी आधुनिक ब्राउज़र ऑब्जेक्ट का समर्थन करते हैं।
- XMLHttpRequest () ऑब्जेक्ट बनाने के लिए सिंटैक्स चर = नया XMLHttpRequest (); लेकिन साथ ही साथ ActiveX ऑब्जेक्ट का उपयोग करने वाले Internet Explorer (IE5 और IE6) के पुराने संस्करण बनाने के लिए सिंटैक्स चर = नया ActiveXObject ("Microsoft. XMLHTTP"); है।
- सभी आधुनिक ब्राउज़रों को संभालने के लिए, यह जांचना आवश्यक है कि ब्राउज़र XMLHttpRequest ऑब्जेक्ट का समर्थन करते हैं या नहीं। यदि ऐसा होता है, तो यह XMLHttpRequest ऑब्जेक्ट बनाता है। यदि कोई नहीं करता है, तो वह इसके लिए एक ActiveX ऑब्जेक्ट बनाएगा।
- फिर यह सर्वर को एक अनुरोध भेजेगा। "ओपन ()" और "सेंड ()" नामक XMLHttpRequest ऑब्जेक्ट की विधि का उपयोग किया जाएगा। xmlhttp.open ("GET", "ajax_info.txt", सत्य); xmlhttp.send ();।
टिप्स
- परिणाम का पूर्वावलोकन करने का एक अन्य विकल्प, आप अपना पसंदीदा ब्राउज़र खोल सकते हैं और वेब पेज प्रदर्शित करने के लिए वेब एड्रेस बार में "लोकलहोस्ट / प्रोग्रामइनएजैक्स" टाइप कर सकते हैं। यदि आप अपनी HTML फ़ाइल का नाम “index.html” रखते हैं, तो आपको वेबपेज देखने में सक्षम होना चाहिए।
- अपने काम के दौरान अपनी एचटीएमएल फाइल को अधिक बार सेव करें। विंडो उपयोगकर्ताओं के लिए एक ही समय में Ctrl और S दबाने से अधिक समय की बचत होगी।
- अपनी सहेजी गई HTML फ़ाइल को उसी स्थान पर जोड़ना सुनिश्चित करें जहाँ आपकी छवि और डेटा टेक्स्ट फ़ाइल है।
- जब आप किसी फ़ाइल को नाम देते हैं, तो जब आप उन नामों को कोड में जोड़ते हैं तो यह केस संवेदनशील होता है। उदाहरण के लिए, "myImage" "MyImage" या "myimage" से भिन्न है।
