Во многих приложениях Интернета вещей возникают ситуации, когда требуется непрерывный мониторинг данных датчиков, и самый простой способ сделать это — использовать ESP8266. Webсервер для предоставленияHTMLвеб-сервис。Но проблема этого подхода в том, что,Веб-браузер необходимо обновлять через определенные промежутки времени для получения обновленных данных датчиков. Это не только неэффективно,И для выполнения других задач требуется много тактов.。Решение этой проблемы называется“Asynchronous JavaScript and XML или сокращенно AJAX. Используя технологию AJAX, мы можем отслеживать данные в реальном времени, не обновляя всю веб-страницу, что не только экономит время, но и экономит драгоценные тактовые циклы. Из этой статьи вы узнаете, как реализовать сеть на основе AJAX. Сервер ESP8266. Что такое АЯКС?

Как упоминалось ранее, AJAX означает «Асинхронный JavaScript и XML» и может использоваться для обновления частей веб-страницы без перезагрузки необходимой страницы. Это достигается путем спонтанного запроса и получения данных с сервера. Функция AJAX — асинхронное обновление веб-контента. Это означает, что веб-браузеру пользователя не нужно обновлять всю страницу, если необходимо обновить только часть страницы.

Повседневным примером AJAX является функция предложений Google: когда мы вводим текст в строку поиска Google, Google начинает предлагать соответствующие строки поиска. Во время этого процесса веб-страница не перезагружается, а информация, которую необходимо изменить, обновляется в фоновом режиме с помощью AJAX.

Как работает AJAX?

AJAX использует комбинацию двух методов: XML (расширяемый язык разметки) и JavaScript и HTML.

XML (Extensible Markup Language)

XML — это язык разметки. XML в основном используется для получения данных сервера в определенном формате. Хотя он может получать данные и в текстовом виде. Когда пользователь посещает веб-страницу и происходит событие (в нашем случае «нажатие кнопки»), JavaScript создает объект XMLHttpRequest, который затем передает информацию между веб-браузером и веб-сервером в формате XML. Объект XMLHttpRequest отправляет запрос обновленных данных страницы на веб-сервер, сервер обрабатывает запрос, создает ответ на стороне сервера и отправляет его обратно браузеру, который затем использует JavaScript для обработки ответа и отображения его на веб-сервере. веб-страница выше.

JavaScript и HTML

JavaScript выполняет процесс обновления в AJAX. Запрос на обновленное содержимое форматируется в XML, чтобы его было легко понять, а JavaScript обновляет содержимое, чтобы пользователь мог просмотреть обновленную страницу.

Рабочий процесс AJAX

Как показано на рисунке выше, для запросов AJAX браузер использует JavaScript для отправки XMLHttpRequest на сервер. Этот объект содержит данные, которые сообщают серверу, что запрашивается. Сервер отвечает только на данные, запрошенные у клиента. Затем браузер получает данные и обновляет только те части страницы, которые нуждаются в обновлении, а не перезагружает всю веб-страницу.

Компоненты, необходимые для создания веб-сервера на базе AJAX и ESP8266.

Поскольку мы создаем проект для демонстрации возможностей esp8266 по работе с AJAX, требования к компонентам очень минимальны.

● Плата разработки NodeMCU.

● Датчик температуры LM35.

● Светодиодный индикатор

● Макет

● Перемычка

Принципиальная схема веб-сервера Ajax и ESP8266

Принципиальная схема веб-сервера на базе AJAX показана ниже.

Поскольку схема очень проста, дополнительных пояснений не требуется. У нас есть светодиод, подключенный к выводу D0 ESP8266 через токоограничивающий резистор сопротивлением 150 Ом, и, как вы можете видеть, мы можем прошить его с помощью веб-сервера. Далее мы используем датчик температуры LM35, с помощью которого будем считывать значение температуры и обновлять его на веб-странице. Датчик температуры питается от источника питания 3,3 В, а поскольку LM35 является аналоговым датчиком, для измерения данных мы используем вывод A0 платы ESP8266.

Код веб-сервера на основе AJAX

Прежде чем двигаться дальше, давайте углубимся в программу, чтобы понять, как будет работать веб-сервер NodeMCU. Но перед этим убедитесь, что вы настроили Arduino IDE для ESP8266, если нет, то можете переходить к следующей части, в противном случае можете пропустить эту часть.

Установите код загрузки NodeMCU

Если вы впервые загружаете код в nodeMCU, вам необходимо сначала включить плату в Arduino IDE, выполнив следующие действия.

Чтобы загрузить код в NodeMCU, выполните следующие действия:

1. Открыть Ардуино IDE,тогда иди вFile–>;Preferences–>Settings 。

1. существовать"Additional Board Manager URL "Введите в полеhttps://arduino.esp8266.com/stable/package_esp8266com_index.json,Затем нажмите ОК.

1. Сейчас,Перейти к“Tool”>“ Board”>“ Boards Менеджер» и откройте «Доски Менеджер». Введите ESP8266 в поле поиска, выберите последнюю версию платы разработки и нажмите «Установить».

1. После завершения установки перейдите в «Инструменты». ->Boardи выберитеNodeMCU 1.0 (модуль ESP-12E). Теперь вы можете использовать Arduino IDE-программирование NodeMCU.

После завершения вышеуказанных настроек программирования для NodeMCU вам необходимо загрузить полный код в NodeMCU. Сначала включите в свой код все необходимые библиотеки.

Создание файлов заголовков для HTML-страниц.

Сначала HTML-страницу, используемую для отображения значений датчиков и кнопок управления светодиодами, необходимо преобразовать в заголовочный файл (файл .h), который будет включен в наш основной код. Это чисто для удобства. HTML-код всей веб-страницы выглядит следующим образом:

const char webpage[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<style type="text/css">
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
</style>
<body style="background-color: #f9e79f ">
<center>
<div>
<h1>AJAX BASED ESP8266 WEBSERVER</h1>
  <button class="button" onclick="send(1)">LED ON</button>
  <button class="button" onclick="send(0)">LED OFF</button><BR>
</div>
 <br>
<div><h2>
  Temp(C): <span id="adc_val">0</span><br><br>
  LED State: <span id="state">NA</span>
</h2>
</div>
<script>
function send(led_sts) 
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("state").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "led_set?state="+led_sts, true);
  xhttp.send();
}
setInterval(function() 
{
  getData();
}, 2000); 
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("adc_val").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "adcread", true);
  xhttp.send();
}
</script>
</center>
</body>
</html>
)=====";

Сначала создайте новый файл с помощью Блокнота и сохраните его с расширением .h. Назовите файл заголовка «index.h», скопируйте и вставьте приведенный выше код в созданный файл заголовка.

Вышеуказанная часть кода отвечает за настройку всех визуальных частей веб-страницы.

Загрузите код в модуль NodeMCU.

Сначала мы подключаем все необходимые файлы заголовков, сюда мы включаем файлы заголовков «ESP8266WiFi.h», «WiFiClient.h» и «ESP8266WebServer.h».

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

Затем мы включаем ранее написанный заголовочный файл. Не забудьте сохранить файл в папке ESP8266 Code.

#include "index.h"

Теперь укажите сетевые учетные данные, то есть SSID и пароль. NodeMCU должен быть подключен к Интернету.

const char* ssid = "admin";
const char* password = "12345678";

Затем мы определяем объект ESP8266WebServer с сервером имен и номером порта по умолчанию 80.

ESP8266WebServer server(80);

определенныйhandleRoot() Функция для обработки веб-страниц HTML и отправки всей веб-страницы клиенту по запросу.

void handleRoot() 
{
 String s = webpage;
 server.send(200, "text/html", s);
}

sensor_data() Функция считывает данные датчика температуры и отправляет их на веб-страницу после выполнения необходимых преобразований.

void sensor_data() 
{
 int a = analogRead(A0);
 int temp= a/4.35;
 String sensor_value = String(temp);
 server.send(200, "text/plane", sensor_value);
}

В функцииled_control информация с веб-страницы принимается и сравнивается для управления состоянием светодиода, как показано ниже.

void led_control() 
{
 String state = "OFF";
 String act_state = server.arg("state");
 if(act_state == "1")
 {
  digitalWrite(LED,HIGH); //LED ON
  state = "ON";
 }
 else
 {
  digitalWrite(LED,LOW); //LED OFF
  state = "OFF";
 }
 server.send(200, "text/plane", state);
}

Затем, чтобы подключить NodeMCU к Интернету, мы вызываем функцию WiFi.begin() и передаем SSID и пароль сети в качестве ее параметров. Используйте WiFi.status(), чтобы проверить успешность сетевого подключения. После успешного подключения напечатайте сообщение на последовательном мониторе, показывающее IP-адрес подключенного устройства.

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
  {
    Serial.print("Connecting...");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

Затем, чтобы вызвать определенные функции, такие как «handleRoot», «led_control» и «sensor_data», когда клиент запрашивает URL-адреса с индексами «/», «/led_set» и «/adcread», определяется следующий фрагмент кода.

server.on("/", handleRoot);
  server.on("/led_set", led_control);
  server.on("/adcread", sensor_data);
  server.begin();

После загрузки кода пришло время протестировать проект. Сначала убедитесь, что ваша точка доступа включена. Затем проверьте соединения перед подключением цепи. Затем подайте питание на цепь. В этом примере мы используем USB для питания проекта, но также возможно обеспечить внешний источник питания 5 В постоянного тока для NodeMCU.

После включения пришло время получить IP-адрес nodeMCU. Его можно найти с помощью последовательного монитора Arduino IDE. Откройте последовательный монитор и нажмите кнопку «Сброс» на NodeMCU. IP-адрес NodeMCU должен быть напечатан на последовательном мониторе. Запишите IP-адрес и вставьте его в адресную строку вашего веб-браузера.

Обратите внимание, что ваше устройство должно быть подключено к той же сети, что и Nodemcu. После ввода IP в адресную строку вы получите веб-страницу в браузере. После загрузки веб-страницы вы теперь можете отслеживать здесь значения датчиков, а также контролировать состояние светодиодных индикаторов из браузера.

Справочная статья: https://www.yiboard.com/thread-1559-1-1.html.