- Что такое AJAX?
- Как работает AJAX?
- Компоненты, необходимые для создания веб-сервера на базе AJAX и ESP8266
- Веб-сервер Ajax и ESP8266 - принципиальная схема
- Код веб-сервера на основе AJAX для ESP8266
Во многих приложениях Интернета вещей бывают ситуации, когда данные датчиков необходимо отслеживать постоянно, и самый простой способ сделать это - включить веб-сервер 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. Если у вас нет настройки, вы можете следовать следующей части, иначе вы можете просто пропустить эту часть. Если вам интересно узнать больше о веб-серверах и проектах на основе Интернета вещей, вы можете ознакомиться с нашим предыдущим постом, в котором мы обсуждали