Ajax az esp8266-tal: dinamikus weboldalfrissítés újratöltés nélkül

Számos IoT-alkalmazásban vannak olyan helyzetek, amikor az érzékelő adatait folyamatosan monitorozni kell, és ennek legegyszerűbb módja az, ha engedélyeznek egy HTML weboldalt kiszolgáló ESP8266 webszervert; de ennek a módszertannak az a problémája, hogy a webböngészőt bizonyos időközönként frissíteni kell, hogy friss érzékelőadatokat kapjon. Ez nem csak nem hatékony, de sok óraciklust igényel, ahol más feladatokat is el lehet végezni. A probléma megoldása „Asynchronous JavaScript and XML” vagy röviden AJAX néven ismert. Az AJAX használatával valós idejű adatokat figyelhetünk meg a teljes weboldal frissítése nélkül, ez nemcsak időt takarít meg, hanem értékes óraciklusokat is. Kövesse ezt a cikket, és ebben a cikkben megtudhatja, hogyan lehet az AJAX alapú webszervert az ESP8266-ra telepíteni.

Mi az AJAX?

Amint arról korábban tárgyaltunk, az AJAX az „Asynchronous JavaScript and XML” rövidítést jelenti, amely a weboldal egy részének frissítésére használható a járulékos oldal újratöltése nélkül. Teszi ezt úgy, hogy spontán adatokat kér és fogad a szervertől. Az AJAX feladata a webtartalom aszinkron frissítése. Ez azt jelenti, hogy a felhasználó webböngészőjének nem kell frissítenie egy teljes weboldalt, amikor az oldal tartalmának csak egy részét kell frissíteni.

Az AJAX mindennapos példája a Google javaslati szolgáltatása lesz, mivel amikor beírjuk a Google keresősávját, a Google elkezd javasolni kapcsolódó keresési karakterláncokat. A folyamat során a weboldal nem töltődik be újra, de a módosítandó információkat a háttérben frissítik az AJAX használatával.

Hogyan működik az AJAX?

Az AJAX csak a következők kombinációját használja:

1. XML (kiterjeszthető jelölőnyelv)
2. JavaScript és HTML

• XML (kiterjeszthető jelölési nyelv):

Az XML egy jelölő nyelv. Az XML-t leginkább kiszolgálói adatok fogadására használják egy meghatározott formátummal. Bár sima szöveg formájában is képes adatokat fogadni. Amikor egy felhasználó meglátogat egy weboldalt, és egy esemény bekövetkezik, esetünkben ez egy „gombnyomás”, a JavaScript létrehoz egy XMLHttpRequest objektumot, amely ezt követően információkat továbbít XML formátumban egy webböngésző és egy webszerver között. Az XMLHttpRequest objektum frissített oldaladatok iránti kérelmet küld a webszervernek, a kiszolgáló feldolgozza a kérést, a szerver oldalon létrehoznak egy választ, és visszaküldik a böngészőnek, amely ezt követően a JavaScript használatával dolgozza fel a választ és jeleníti meg a weboldalon..

• JavaScript és HTML:

A JavaScript elvégzi az AJAX frissítési folyamatát. A frissített tartalom iránti kérelem érthetővé tétele érdekében XML formátumban van megadva, és a JavaScript frissíti a tartalmat a frissített oldalt megtekintő felhasználó számára.

AJAX működő:

Amint a fenti ábra mutatja, AJAX kérés esetén a böngésző egy XMLHttpRequest küld a szervernek javascript segítségével. Ez az objektum olyan adatokat tartalmaz, amelyek megmondják a szervernek, hogy mire van szükség. A szerver csak az ügyféloldaltól kért adatokkal válaszol. Ezután a böngésző megkapja az adatokat, és csak az oldal azon részét frissíti, amelyet frissíteni kell a teljes weboldal újratöltése helyett.

Az AJAX és ESP8266 alapú webkiszolgáló felépítéséhez szükséges alkatrészek

Mivel az esp8266 AJAX kezelésére való képességének bemutatására építjük a projektet, az alkatrészigény nagyon csekély, a legtöbbet megtalálhatja a helyi hobbiboltban.

• CsomópontMCU X 1
• LM35 Hőmérséklet-érzékelő X 1
• LED X 1
• Kenyérlap X 1
• Jumpers X 4
• Programozó kábel X 1

Ajax és ESP8266 webkiszolgáló - áramköri ábra

Az AJAX-alapú webszerver kapcsolási rajza az alábbiakban látható.

Mivel az áramkör nagyon egyszerű, nincs sok magyarázat rá. Csatlakoztattunk egy 150 Ohmos áramkorlátozó ellenállással rendelkező LED-et az ESP8266 D0 érintkezőjéhez, amint látni fogja, a webszerver segítségével átválthatjuk. Ezután megvan az LM35 hőmérséklet-érzékelőnk, amelyen keresztül leolvassuk a hőmérsékleti értéket, és frissítjük azt a weboldalra. A hőmérséklet-érzékelőt a 3,3 V-os sínről táplálják, és mivel az LM35 analóg érzékelő, az adatok méréséhez az ESP8266 kártya A0-tűjét használtuk. ha először találkozott az LM35 hőmérséklet-érzékelővel, vagy ha többet szeretne megtudni erről a nagyon klassz kis érzékelőről, megnézheti az előző bejegyzésünket a Digitális hőmérő NodeMCU és LM35 használatával kapcsolatban, ahol az érzékelő működéséről beszélgettünk Részlet.

AJAX alapú webszerver kód az ESP8266 számára

Mielőtt tovább folytatnánk, merüljünk egyenesen a programba, hogy megértsük, hogyan fog működni a NodeMCU webszerverünk. De előtte kérjük, győződjön meg arról, hogy rendelkezik-e az Arduino IDE beállítással az ESP8266-hoz. Ha még nem rendelkezik a beállítással, akkor kövesse a következő részt, máskülönben ezt a részt kihagyhatja. Ha többet szeretne megtudni a webszerverről és az IoT-alapú projektekről, megnézheti előző bejegyzésünket, ahol megbeszéltük