цифровая электроника
вычислительная техника
встраиваемые системы

 
» » » ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки



ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

Автор: Mike(admin) от 3-12-2020, 23:55

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


ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

Это не только неэффективно, но и занимает много тактов, когда могут выполняться другие задачи. Решение этой проблемы известно как «Асинхронный javascript и XML» или для краткости AJAX. Используя AJAX, мы можем отслеживать данные в реальном времени без обновления всей веб-страницы, это не только экономит время, но и экономит драгоценные тактовые циклы. В этой статье вы узнаете, как реализовать веб-сервер на основе ESP8266 с AJAX.


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


Обычным примером использования AJAX будет функция подсказок Google. Когда мы вводим текст в строке поиска Google, Google начинает предлагать похожие поисковые строки. Во время этого процесса веб-страница не перезагружается, но информация, которую необходимо изменить, обновляется в фоновом режиме с использованием AJAX. AJAX просто использует комбинацию XML (расширяемый язык разметки), javascript и HTML.


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


ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

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


Так как мы создаем проект, чтобы продемонстрировать способность ESP8266 обрабатывать AJAX, требования к компонентам очень незначительны, вы можете найти большинство из них в местном магазине электроники или товаров для хобби. Принципиальная схема веб-сервера на основе ESP8266 с возможностями AJAX показана далее.


ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

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


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



const char webpage[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<style type="text/css">
.button {
  background-color: #4CAF50;
  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», скопируйте приведенный выше код и вставьте в созданный заголовочный файл. Теперь сам код для ESP8266, написанный в Arduino IDE.



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

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

ESP8266WebServer server(80);

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

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

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);
}

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());

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

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


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


ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

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


ESP8266 и AJAX: динамическое обновление веб-страницы без перезагрузки

Если веб-страница запущена и работает, это означает, что все было сделано правильно.




© digitrode.ru


Теги: ESP8266, JavaScript




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий
Цитата
  • Группа: Гости
  • ICQ:
  • Регистрация: --
  • Статус:
  • Комментариев: 0
  • Публикаций: 0
^
Подправьте код . Скопировали не все строки . Не компилируется

https://circuitdigest.com/microcontroller-projects/ajax-with-esp8266-dynamic-web
-page-update-without-reloading

Скопируйте еще раз ...
Цитата
  • baran2k

  • 19 января 2022 12:40
  • Группа: Гости
  • ICQ:
  • Регистрация: --
  • Статус:
  • Комментариев: 0
  • Публикаций: 0
^
ИСПРАВЛЕННЫЙ КОД НИЖЕ

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include "index.h"

const char *ssid = "ИМЯ WIFI СЕТИ";
const char *password = "ПАРОЛЬ СЕТИ";

#define LED LED_BUILTIN // ПИН ДИОДА

ESP8266WebServer server(80);

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

void sensor_data()
{
String sensor_value = String(random(200));
server.send(200, "text/plane", sensor_value);
}

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);
}
void setup()
{
Serial.begin(115200);
pinMode(LED,OUTPUT);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
Serial.print(".");
delay(100);
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

server.on("/", handleRoot);
server.on("/led_set", led_control);
server.on("/adcread", sensor_data);
server.begin();
}
void loop()
{
server.handleClient();
}
Цитата
  • Группа: Гости
  • ICQ:
  • Регистрация: --
  • Статус:
  • Комментариев: 0
  • Публикаций: 0
^
Как изменить цвет текста и фона страницы в index?