Esp8266 के साथ अजाक्स: पुन: लोड किए बिना डायनेमिक वेब पेज अपडेट

कई IoT अनुप्रयोगों में, ऐसी परिस्थितियां होती हैं, जहां सेंसर डेटा को लगातार निगरानी करने की आवश्यकता होती है, और ऐसा करने का सबसे सरल तरीका एक ईएसपी 8266 वेबसर्वर को सक्षम करना है जो एक HTML वेबपेज पर कार्य करता है; लेकिन इस पद्धति के साथ समस्या यह है कि वेब ब्राउज़र को एक अद्यतन सेंसर डेटा प्राप्त करने के लिए एक निश्चित समय अंतराल पर ताज़ा करने की आवश्यकता होती है। यह न केवल अक्षम है, बल्कि बहुत सारे घड़ी चक्र लेता है जहां अन्य कार्य किए जा सकते हैं। इस समस्या के समाधान को संक्षिप्त रूप में "अतुल्यकालिक जावास्क्रिप्ट और XML" या AJAX के रूप में जाना जाता है। AJAX का उपयोग करके, हम पूरे वेबपेज को रिफ्रेश किए बिना रियल-टाइम डेटा की निगरानी कर सकते हैं, इससे न केवल समय की बचत होती है, बल्कि यह कीमती घड़ी चक्रों को भी बचाता है। साथ पालन करें और इस लेख में, आप सीखेंगे कि ESP8266 पर AJAX आधारित वेबसर्वर को कैसे लागू किया जाए ।

AJAX क्या है?

जैसा कि हमने पहले चर्चा की है, AJAX का अर्थ "अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल" है, जिसका उपयोग वेब पेज के एक हिस्से को अपडेट करने के लिए किया जा सकता है। यह सर्वर से अनायास अनुरोध और डेटा प्राप्त करके करता है। AJAX का कार्य वेब सामग्री को अतुल्यकालिक रूप से अद्यतन करना है। इसका मतलब है कि उपयोगकर्ता के वेब ब्राउज़र को संपूर्ण वेब पेज को रीफ़्रेश करने की आवश्यकता नहीं होती है जब पृष्ठ पर मौजूद सामग्री के केवल एक हिस्से को अद्यतन करने की आवश्यकता होती है।

AJAX का एक दैनिक उदाहरण Google का सुझाव फीचर होगा, जैसा कि हम Google खोज बार में लिखते हैं, Google संबंधित खोज स्ट्रिंग का सुझाव देना शुरू कर देता है। इस प्रक्रिया के दौरान, वेबपृष्ठ पुनः लोड नहीं होता है, लेकिन जो जानकारी बदली जानी चाहिए, वह AJAX का उपयोग करके पृष्ठभूमि में अपडेट की जाती है।

AJAX कैसे काम करता है?

AJAX सिर्फ के संयोजन का उपयोग करता है-

1. XML (एक्सटेंसिबल मार्कअप लैंग्वेज)
2. जावास्क्रिप्ट और HTML

• XML (एक्स्टेंसिबल मार्कअप भाषा):

XML एक मार्कअप भाषा है। XML का उपयोग ज्यादातर एक विशिष्ट प्रारूप के साथ सर्वर डेटा प्राप्त करने के लिए किया जाता है। यद्यपि यह सादे पाठ के रूप में डेटा प्राप्त कर सकता है। जब कोई उपयोगकर्ता किसी वेब पेज पर जाता है और एक घटना होती है, तो हमारे मामले में, यह एक "बटन प्रेस" है, जावास्क्रिप्ट एक XMLHttpRequest ऑब्जेक्ट बनाता है, जो तब वेब ब्राउज़र और वेब सर्वर के बीच XML प्रारूप में जानकारी स्थानांतरित करता है। XMLHttpRequest ऑब्जेक्ट वेब सर्वर पर अपडेट किए गए पेज डेटा के लिए एक अनुरोध भेजता है, सर्वर अनुरोध को संसाधित करता है, एक प्रतिक्रिया सर्वर-साइड पर बनाई जाती है और ब्राउज़र पर वापस भेजी जाती है, जो तब प्रतिक्रिया को संसाधित करने और वेब पेज पर प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करती है। ।

• जावास्क्रिप्ट और HTML:

जावास्क्रिप्ट AJAX में अद्यतन प्रक्रिया करता है। अद्यतन सामग्री के लिए अनुरोध XML में स्वरूपित किया गया है ताकि इसे समझा जा सके, और जावास्क्रिप्ट अपडेट किए गए पृष्ठ को देखने वाले उपयोगकर्ता के लिए सामग्री को ताज़ा करता है।

AJAX कार्य करना:

जैसा कि ऊपर चित्र में दिखाया गया है, AJAX अनुरोध के लिए, ब्राउज़र jasascript का उपयोग कर सर्वर को XMLHttpRequest भेजता है । इस ऑब्जेक्ट में डेटा शामिल होता है जो सर्वर को बताता है कि क्या अनुरोध किया जा रहा है। सर्वर केवल उस डेटा के साथ प्रतिक्रिया करता है जो क्लाइंट-साइड से अनुरोध किया गया था। तब ब्राउज़र डेटा प्राप्त करता है, केवल पृष्ठ के उस हिस्से को अपडेट करता है जिसे पूरे वेबपेज को फिर से लोड करने के बजाय अपडेट करने की आवश्यकता होती है।

AJAX और ESP8266 आधारित वेब सर्वर के निर्माण के लिए आवश्यक घटक

जैसा कि हम AJAX को संभालने के लिए esp8266 की क्षमता प्रदर्शित करने के लिए परियोजना का निर्माण कर रहे हैं, घटक की आवश्यकता बहुत ही कम है, आप अपने स्थानीय शौक स्टोर में उनमें से अधिकांश पा सकते हैं।

• NodeMCU X १
• LM35 तापमान सेंसर X 1
• एलईडी X १
• ब्रेडबोर्ड x १
• जंपर्स एक्स 4
• प्रोग्रामिंग केबल X १

Ajax और ESP8266 वेब सर्वर - सर्किट आरेख

AJAX आधारित वेबसर्वर के लिए सर्किट आरेख नीचे दिखाया गया है।

जैसा कि सर्किट बहुत सरल है, इसके बारे में समझाने के लिए बहुत कुछ नहीं है। हमने ESP8266 के पिन D0 के लिए 150 ओम वर्तमान अवरोधक के साथ एक एलईडी कनेक्ट किया है, जैसा कि आप देखेंगे, हम इसे वेबसर्वर का उपयोग करके टॉगल कर सकते हैं। अगला, हमारे पास अपना LM35 तापमान सेंसर है, जिसके माध्यम से हम तापमान मान को पढ़ रहे हैं और इसे वेबपेज पर अपडेट करेंगे। तापमान संवेदक 3.3V रेल से संचालित होता है, और जैसा कि LM35 एक एनालॉग सेंसर है, हमने डेटा को मापने के लिए ESP8266 बोर्ड के A0 पिन का उपयोग किया है। यदि आप पहली बार LM35 तापमान सेंसर के पार आए हैं, या यदि आप इस बहुत ही कम छोटे सेंसर के बारे में अधिक जानना चाहते हैं, तो आप हमारे पिछले पोस्ट को NodeMCU और LM35 का उपयोग करते हुए डिजिटल थर्मामीटर पर जांच सकते हैं, जहां हमने इस सेंसर के काम करने पर चर्चा की है। विस्तार से।

ESP8266 के लिए AJAX आधारित वेबसर्वर कोड

इससे पहले कि हम आगे बढ़ते हैं, चलो सीधे कार्यक्रम में गोता लगाते हैं कि यह समझने के लिए कि हमारा NodeMCU वेब सर्वर कैसे काम करेगा। लेकिन इससे पहले, कृपया सुनिश्चित करें कि आपके पास ESP8266 के लिए Arduino IDE सेटअप है, यदि आपके पास सेटअप नहीं है, तो आप अगले भाग का अनुसरण कर सकते हैं, अन्यथा आप इस भाग को छोड़ सकते हैं। यदि आप वेबसर्वर, और IoT आधारित परियोजनाओं के बारे में अधिक जानने में रुचि रखते हैं, तो आप हमारी पिछली पोस्ट की जाँच कर सकते हैं जहाँ हमने चर्चा की है