- Що таке AJAX?
- Як працює AJAX?
- Компоненти, необхідні для побудови веб-сервера на основі AJAX та ESP8266
- Веб-сервер Ajax та ESP8266 - принципова схема
- Код веб-сервера на основі AJAX для ESP8266
У багатьох програмах IoT трапляються ситуації, коли дані сенсора повинні постійно контролювати, і найпростіший спосіб це зробити, включивши веб-сервер ESP8266, який обслуговує веб-сторінку HTML; але проблема цієї методології полягає в тому, що веб-браузер потрібно оновлювати через певний проміжок часу, щоб отримати оновлені дані датчика. Це не тільки неефективно, але вимагає багато тактових циклів, де можна виконувати інші завдання. Рішення цієї проблеми відоме як "Асинхронний JavaScript і XML" або коротше AJAX. Використовуючи AJAX, ми можемо відстежувати дані в режимі реального часу, не оновлюючи всю веб-сторінку, це не тільки економить час, але й економить дорогоцінні тактові цикли. Слідуйте далі, і в цій статті ви дізнаєтесь, як впровадити веб-сервер на основі AJAX на ESP8266.
Що таке AJAX?
Як ми вже обговорювали раніше, AJAX розшифровується як "Асинхронний JavaScript і XML", який можна використовувати для оновлення частини веб-сторінки без перезавантаження загальної сторінки. Він робить це, запитуючи та отримуючи дані від сервера мимовільно. Функція AJAX полягає в оновленні веб-вмісту асинхронно. Це означає, що веб-браузеру користувача не потрібно оновлювати всю веб-сторінку, коли потрібно оновити лише частину вмісту на цій сторінці.
Повсякденним прикладом AJAX буде функція підказки Google, оскільки ми вводимо в рядок пошуку Google, Google починає пропонувати відповідні пошукові рядки. Під час цього процесу веб-сторінка не перезавантажується, але інформація, яку потрібно змінити, оновлюється у фоновому режимі за допомогою AJAX.
Як працює AJAX?
AJAX просто використовує комбінацію-
- XML (розширювана мова розмітки)
- JavaScript та HTML
- XML (розширювана мова розмітки):
XML - мова розмітки. XML в основному використовується для отримання даних сервера з певним форматом. Хоча він може отримувати дані у вигляді простого тексту. Коли користувач відвідує веб-сторінку і відбувається подія, в нашому випадку це "натискання кнопки", JavaScript створює об'єкт XMLHttpRequest, який потім передає інформацію у форматі XML між веб-браузером та веб-сервером. Об'єкт XMLHttpRequest надсилає запит на оновлені дані сторінки на веб-сервер, сервер обробляє запит, відповідь створюється на стороні сервера і надсилається назад у браузер, який потім використовує JavaScript для обробки відповіді та відображення її на веб-сторінці.
- JavaScript та HTML:
JavaScript виконує процес оновлення в AJAX. Запит на оновлений вміст відформатовано у форматі XML, щоб зробити його зрозумілим, а JavaScript оновлює вміст для користувача, який переглядає оновлену сторінку.
Робота AJAX:
Як показано на наведеній вище схемі, для запиту AJAX браузер надсилає XMLHttpRequest на сервер за допомогою javascript. Цей об'єкт включає дані, які повідомляють серверу про те, що запитується. Сервер відповідає лише даними, запитаними на стороні клієнта. Потім браузер отримує дані, оновлює лише ту частину сторінки, яку потрібно оновити, замість того, щоб перезавантажувати всю веб-сторінку.
Компоненти, необхідні для побудови веб-сервера на основі AJAX та ESP8266
Оскільки ми будуємо проект, щоб продемонструвати здатність esp8266 обробляти AJAX, вимоги до компонентів дуже незначні, ви можете знайти більшість із них у вашому місцевому магазині хобі.
- NodeMCU X 1
- LM35 Датчик температури X 1
- Світлодіод X 1
- Макет X 1
- Перемички X 4
- Кабель для програмування X 1
Веб-сервер Ajax та ESP8266 - принципова схема
Принципова схема веб-сервера на базі AJAX наведена нижче.
Оскільки схема дуже проста, тут нічого особливо пояснити. Ми підключили світлодіод з обмежувачем струму 150 Ом до контакту D0 ESP8266, як ви побачите, ми можемо перемикати його за допомогою веб-сервера. Далі ми маємо наш датчик температури LM35, за допомогою якого ми будемо зчитувати значення температури та оновлювати це на веб-сторінці. Датчик температури живиться від рейки 3,3 В, і оскільки LM35 є аналоговим датчиком, для вимірювання даних ми використали штифт A0 плати ESP8266. якщо ви вперше зіткнулися з датчиком температури LM35, або якщо ви хочете дізнатись більше про цей дуже крутий маленький датчик, ви можете перевірити наш попередній допис про цифровий термометр за допомогою NodeMCU та LM35, де ми обговорили роботу датчика в деталь.
Код веб-сервера на основі AJAX для ESP8266
Перш ніж продовжувати далі, давайте зануримося прямо в програму, щоб зрозуміти, як буде працювати наш веб-сервер NodeMCU. Але перед цим, будь ласка, переконайтеся, що у вас є налаштування Arduino IDE для ESP8266. Якщо у вас немає налаштувань, ви можете виконати наступну частину, інакше ви можете просто пропустити цю частину. Якщо ви хочете дізнатись більше про веб-сервер та проекти на основі IoT, ви можете ознайомитись із нашим попереднім повідомленням, де ми вже обговорювали