Ајак са есп8266: динамичко ажурирање веб странице без поновног учитавања

У многим ИоТ апликацијама постоје ситуације у којима подаци сензора морају непрекидно да се надгледају, а најједноставнији начин да се то уради је омогућавање веб сервера ЕСП8266 који служи ХТМЛ веб страници; али проблем ове методологије је тај што веб прегледач треба освежавати у одређеном временском интервалу да би добио ажуриране податке сензора. Ово није само неефикасно, већ захтева пуно тактова у којима се могу обављати други задаци. Решење овог проблема познато је под називом „Асинхрони ЈаваСцрипт и КСМЛ“ или АЈАКС за кратко. Коришћењем АЈАКС-а можемо надгледати податке у реалном времену без освежавања целе веб странице, што не само да штеди време, већ штеди и драгоцене циклусе сата. Пратите и у овом чланку ћете научити како да примените АЈАКС веб сервер на ЕСП8266.

Шта је АЈАКС?

Као што смо раније разговарали, АЈАКС је скраћеница од „Асинхрони ЈаваСцрипт и КСМЛ“ који се могу користити за ажурирање дела веб странице без поновног учитавања укупне странице. То чини тако што спонтано захтева и прима податке са сервера. Функција АЈАКС-а је ажурирање веб садржаја асинхроно. То значи да корисников веб прегледач не мора освежавати целу веб страницу када треба ажурирати само део садржаја на страници.

Свакодневни пример АЈАКС-а биће функција Гоогле-ове сугестије, док док куцамо у Гоогле траку за претрагу, Гоогле почиње да предлаже повезане низове претраживања. Током овог процеса, веб страница се не учитава поново, али информације које треба променити ажурирају се у позадини помоћу АЈАКС-а.

Како АЈАКС ради?

АЈАКС само користи комбинацију-

1. КСМЛ (прошириви језик за означавање)
2. ЈаваСцрипт и ХТМЛ

• КСМЛ (прошириви језик за означавање):

КСМЛ је означни језик. КСМЛ се углавном користи за примање података сервера у одређеном формату. Иако може да прима податке у облику обичног текста. Када корисник посети веб страницу и догоди се догађај, у нашем случају то је „Притисак дугмета“, ЈаваСцрипт креира објекат КСМЛХттпРекуест, који затим преноси информације у КСМЛ формату између веб прегледача и веб сервера. Објекат КСМЛХттпРекуест шаље захтев за ажурираним подацима странице веб серверу, сервер обрађује захтев, одговор се креира на страни сервера и шаље назад прегледачу, који затим користи ЈаваСцрипт за обраду одговора и његово приказивање на веб страници.

• ЈаваСцрипт и ХТМЛ:

ЈаваСцрипт врши поступак ажурирања у АЈАКС-у. Захтев за ажурираним садржајем форматиран је у КСМЛ-у како би био разумљив, а ЈаваСцрипт освежава садржај за корисника који прегледава ажурирану страницу.

АЈАКС ради:

Као што је приказано на горњем дијаграму, за АЈАКС захтев прегледач шаље КСМЛХттпРекуест серверу користећи јавасцрипт. Овај објекат укључује податке који говоре серверу шта се тражи. Сервер одговара само подацима који су тражени од стране клијента. Тада прегледач прима податке, ажурира само део странице који треба ажурирати уместо да поново учитава целу веб страницу.

Компоненте потребне за изградњу веб сервера заснованог на АЈАКС-у и ЕСП8266

Како градимо пројекат да бисмо демонстрирали способност есп8266 да рукује АЈАКС-ом, захтев за компонентама је врло мали, већину њих можете пронаћи у вашој локалној хоби продавници.

• НодеМЦУ Кс 1
• ЛМ35 Сензор температуре Кс 1
• ЛЕД Кс 1
• Табла Кс 1
• Скакачи Кс 4
• Кабл за програмирање Кс 1

Ајак и ЕСП8266 веб сервер - спојни дијаграм

Дијаграм кола за веб сервер заснован на АЈАКС-у приказан је испод.

Како је склоп врло једноставан, нема шта пуно да се објасни. Повезали смо ЛЕД са отпорником за ограничавање струје од 150 ома на пин Д0 ЕСП8266, као што ћете видети, можемо га укључити помоћу веб сервера. Даље, имамо свој температурни сензор ЛМ35 кроз који ћемо читати вредност температуре и ажурирати је на веб страницу. Сензор температуре напаја се са 3.3В шине, а како је ЛМ35 аналогни сензор, за мерење података користили смо пин А0 плоче ЕСП8266. ако сте први пут наишли на температурни сензор ЛМ35 или ако желите да сазнате више о овом врло кул малом сензору, можете погледати наш претходни пост о Дигиталном термометру помоћу НодеМЦУ и ЛМ35 где смо разговарали о раду овог сензора у детаљ.

Код веб сервера заснован на АЈАКС-у за ЕСП8266

Пре него што наставимо даље, заронимо право у програм да бисмо разумели како ће радити наш НодеМЦУ веб сервер. Али пре тога, уверите се да имате Ардуино ИДЕ подешавање за ЕСП8266. Ако немате подешавање, можете следити следећи део, иначе можете само прескочити овај део. Ако сте заинтересовани да сазнате више о веб серверу и ИоТ пројектима, можете погледати наш претходни пост у коме смо разговарали