Ajax с esp8266: динамично актуализиране на уеб страница без презареждане

В много IoT приложения има ситуации, при които данните на сензора трябва да се наблюдават непрекъснато и най-простият начин да се направи това е чрез активиране на уеб сървър ESP8266, който обслужва HTML страница; но проблемът с тази методология е, че уеб браузърът трябва да се опреснява в определен интервал от време, за да получи актуализирани данни от сензора. Това е не само неефективно, но отнема много цикли на часовника, където могат да се изпълняват други задачи. Решението на този проблем е известно като „Асинхронен JavaScript и XML“ или накратко AJAX. Използвайки AJAX, можем да наблюдаваме данни в реално време, без да опресняваме цялата уеб страница, това не само спестява време, но и спестява ценни цикли на часовника. Следвайте и в тази статия ще научите как да внедрите базиран на AJAX уеб сървър на ESP8266.

Какво е AJAX?

Както обсъждахме по-рано, AJAX означава „Асинхронен JavaScript и XML“, който може да се използва за актуализиране на част от уеб страницата, без да се презарежда общата страница. Прави това, като иска и получава данни от сървъра спонтанно. Функцията на AJAX е да актуализира уеб съдържанието асинхронно. Това означава, че уеб браузърът на потребителя не трябва да обновява цяла уеб страница, когато трябва да се актуализира само част от съдържанието на страницата.

Ежедневен пример за AJAX ще бъде функцията за предложения на Google, докато въвеждаме в лентата за търсене на Google, Google започва да предлага свързани низове за търсене. По време на този процес уеб страницата не се презарежда, но информацията, която трябва да бъде променена, се актуализира във фонов режим с помощта на AJAX.

Как работи AJAX?

AJAX просто използва комбинация от-

1. XML (разширяем език за маркиране)
2. 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
• LED X 1
• Макет X 1
• Джъмпери X 4
• Кабел за програмиране X 1

Ajax и ESP8266 уеб сървър - електрическа схема

Схемата на веригата за базиран на AJAX уеб сървър е показана по-долу.

Тъй като веригата е много проста, няма какво много да се обясни за нея. Свързахме светодиод с 150 ома ограничител на тока към резистора D0 на ESP8266, както ще видите, можем да го превключваме с помощта на уеб сървъра. След това имаме нашия температурен сензор LM35, чрез който ще отчитаме температурната стойност и ще я актуализираме на уеб страницата. Температурният сензор се захранва от 3.3V релса и тъй като LM35 е аналогов сензор, използвахме A0 щифт на платката ESP8266 за измерване на данните. ако сте срещнали температурния сензор LM35 за първи път или ако искате да научите повече за този много страхотен малък сензор, можете да проверите предишната ни публикация за Цифров термометър с помощта на NodeMCU и LM35, където обсъдихме работата на този сензор в детайл.

Код на уеб сървър, базиран на AJAX за ESP8266

Преди да продължим по-нататък, нека се потопим направо в програмата, за да разберем как ще работи нашият уеб сървър NodeMCU. Но преди това, моля, уверете се, че имате настройката на Arduino IDE за ESP8266. Ако нямате настройка, можете да следвате следващата част, в противен случай можете просто да пропуснете тази част. Ако се интересувате да научите повече за уеб сървъра и проектите, базирани на IoT, можете да разгледате предишната ни публикация, където обсъдихме