- Co to jest AJAX?
- Jak działa AJAX?
- Składniki wymagane do zbudowania serwera internetowego opartego na technologii AJAX i ESP8266
- Serwer sieciowy Ajax i ESP8266 - schemat obwodu
- Kod serwera WWW oparty na technologii AJAX dla ESP8266
W wielu aplikacjach IoT zdarzają się sytuacje, w których dane z czujników muszą być monitorowane w sposób ciągły, a najprostszym sposobem na to jest włączenie serwera sieciowego ESP8266, który obsługuje stronę internetową HTML; ale problem z tą metodologią polega na tym, że przeglądarka internetowa musi być odświeżana co pewien czas, aby uzyskać zaktualizowane dane czujnika. Jest to nie tylko nieefektywne, ale wymaga wielu cykli zegara, podczas których można wykonać inne zadania. Rozwiązanie tego problemu jest znane jako „Asynchroniczny JavaScript i XML” lub w skrócie AJAX. Korzystając z AJAX, możemy monitorować dane w czasie rzeczywistym bez odświeżania całej strony internetowej, co nie tylko oszczędza czas, ale także oszczędza cenne cykle zegara. Śledź dalej, aw tym artykule dowiesz się, jak wdrożyć serwer sieciowy oparty na AJAX na ESP8266.
Co to jest AJAX?
Jak omówiliśmy wcześniej, AJAX to skrót od „Asynchronous JavaScript and XML”, którego można użyć do zaktualizowania części strony internetowej bez ponownego ładowania strony docelowej. Czyni to spontanicznie żądając i odbierając dane z serwera. Funkcja AJAX polega na asynchronicznej aktualizacji treści WWW. Oznacza to, że przeglądarka internetowa użytkownika nie musi odświeżać całej strony internetowej, gdy tylko część zawartości strony wymaga aktualizacji.
Codziennym przykładem AJAX będzie funkcja sugestii Google, gdy piszemy w pasku wyszukiwania Google, Google zaczyna sugerować powiązane ciągi wyszukiwania. Podczas tego procesu strona internetowa nie ładuje się ponownie, ale informacje, które wymagają zmiany, są aktualizowane w tle za pomocą technologii AJAX.
Jak działa AJAX?
AJAX po prostu używa kombinacji -
- XML (Extensible Markup Language)
- JavaScript i HTML
- XML (Extensible Markup Language):
XML to język znaczników. XML jest najczęściej używany do odbierania danych z serwera w określonym formacie. Chociaż może odbierać dane w postaci zwykłego tekstu. Kiedy użytkownik odwiedza stronę internetową i zachodzi zdarzenie, w naszym przypadku jest to „naciśnięcie przycisku”, JavaScript tworzy obiekt XMLHttpRequest, który następnie przesyła informacje w formacie XML między przeglądarką internetową a serwerem WWW. Obiekt XMLHttpRequest wysyła żądanie zaktualizowanych danych strony do serwera WWW, serwer przetwarza żądanie, odpowiedź jest tworzona po stronie serwera i odsyłana z powrotem do przeglądarki, która następnie używa JavaScript do przetworzenia odpowiedzi i wyświetlenia jej na stronie internetowej.
- JavaScript i HTML:
JavaScript wykonuje proces aktualizacji w AJAX. Żądanie zaktualizowanej treści jest sformatowane w XML, aby było zrozumiałe, a JavaScript odświeża zawartość dla użytkownika przeglądającego zaktualizowaną stronę.
AJAX działa:
Jak pokazano na powyższym diagramie, dla żądania AJAX przeglądarka wysyła XMLHttpRequest do serwera przy użyciu javascript. Ten obiekt zawiera dane, które informują serwer o żądaniu. W odpowiedzi serwer podaje tylko te dane, których zażądano po stronie klienta. Następnie przeglądarka otrzymuje dane, aktualizuje tylko część strony, która wymaga aktualizacji, zamiast przeładowywać całą stronę.
Składniki wymagane do zbudowania serwera internetowego opartego na technologii AJAX i ESP8266
Ponieważ tworzymy projekt, aby zademonstrować zdolność esp8266 do obsługi AJAX, wymagania dotyczące komponentów są bardzo małe, większość z nich można znaleźć w lokalnym sklepie hobbystycznym.
- NodeMCU X 1
- LM35 Czujnik temperatury X 1
- LED X 1
- Płytka prototypowa X 1
- Swetry X 4
- Kabel do programowania X 1
Serwer sieciowy Ajax i ESP8266 - schemat obwodu
Schemat obwodu serwera WWW opartego na technologii AJAX przedstawiono poniżej.
Ponieważ obwód jest bardzo prosty, nie ma wiele do wyjaśnienia. Podłączyliśmy diodę LED z rezystorem ograniczającym prąd 150 omów do pinu D0 ESP8266, jak zobaczysz, możemy ją przełączać za pomocą serwera internetowego. Następnie mamy czujnik temperatury LM35, za pomocą którego będziemy odczytywać wartość temperatury i aktualizować ją na stronie internetowej. Czujnik temperatury zasilany jest z szyny 3,3V, a ponieważ LM35 jest czujnikiem analogowym, do pomiaru danych wykorzystaliśmy pin A0 płytki ESP8266. jeśli po raz pierwszy natrafiłeś na czujnik temperatury LM35 lub jeśli chcesz dowiedzieć się więcej o tym bardzo fajnym, małym czujniku, możesz sprawdzić nasz poprzedni post na temat termometru cyfrowego za pomocą NodeMCU i LM35, w którym omawialiśmy działanie tego czujnika w Szczegół.
Kod serwera WWW oparty na technologii AJAX dla ESP8266
Zanim przejdziemy dalej, przejdźmy bezpośrednio do programu, aby zrozumieć, jak będzie działał nasz serwer sieciowy NodeMCU. Ale wcześniej upewnij się, że masz konfigurację Arduino IDE dla ESP8266.Jeśli nie masz konfiguracji, możesz przejść do następnej części, w przeciwnym razie możesz po prostu pominąć tę część. Jeśli chcesz dowiedzieć się więcej o serwerach internetowych i projektach opartych na IoT, możesz zapoznać się z naszym poprzednim postem, w którym omówiliśmy