- Mikä on AJAX?
- Kuinka AJAX toimii?
- AJAX- ja ESP8266-pohjaisen verkkopalvelimen rakentamiseen tarvittavat komponentit
- Ajax ja ESP8266 -verkkopalvelin - piirikaavio
- ESP8266: n AJAX-pohjainen verkkopalvelinkoodi
Monissa IoT-sovelluksissa on tilanteita, joissa anturitietoja on seurattava jatkuvasti, ja yksinkertaisin tapa tehdä se on ottaa käyttöön ESP8266-verkkopalvelin, joka palvelee HTML-verkkosivua; mutta tämän menetelmän ongelmana on, että verkkoselain on päivitettävä tietyllä aikavälillä päivitettyjen anturitietojen saamiseksi. Tämä ei ole vain tehotonta, vaan kestää paljon kellojaksoja, joissa muita tehtäviä voidaan suorittaa. Ratkaisu tähän ongelmaan tunnetaan nimellä "Asynchronous JavaScript and XML" tai AJAX lyhyesti. AJAX: n avulla voimme seurata reaaliaikaista dataa päivittämättä koko verkkosivua. Tämä säästää paitsi aikaa myös arvokkaita kellojaksoja. Seuraa mukana ja tässä artikkelissa opit käyttämään AJAX-pohjaista verkkopalvelinta ESP8266: ssa.
Mikä on AJAX?
Kuten olemme aiemmin keskustelleet, AJAX tarkoittaa "asynkronista JavaScriptiä ja XML: ää", jota voidaan käyttää päivittämään osa verkkosivusta lataamatta uudelleen siihen liittyvää sivua. Se tekee sen pyytämällä ja vastaanottamalla tietoja palvelimelta spontaanisti. AJAX: n tehtävänä on päivittää verkkosisältö asynkronisesti. Tämä tarkoittaa, että käyttäjän verkkoselaimen ei tarvitse päivittää koko verkkosivua, kun vain osa sivun sisällöstä on päivitettävä.
Päivittäinen esimerkki AJAX: stä on Googlen ehdotusominaisuus, kun kirjoitamme Google-hakupalkkiin, Google alkaa ehdottaa aiheeseen liittyviä hakumerkkijonoja. Tämän prosessin aikana verkkosivu ei lataudu uudelleen, mutta muutettavat tiedot päivitetään taustalla AJAX: n avulla.
Kuinka AJAX toimii?
AJAX käyttää vain yhdistelmää
- XML (laajennettava merkintäkieli)
- JavaScript ja HTML
- XML (laajennettava merkintäkieli):
XML on merkintäkieli. XML: ää käytetään enimmäkseen palvelintietojen vastaanottamiseen tietyssä muodossa. Vaikka se voi vastaanottaa tietoja pelkkänä tekstinä. Kun käyttäjä vierailee verkkosivulla ja tapahtuu tapahtuma, meidän tapauksessamme se on "Button Press", JavaScript luo XMLHttpRequest- objektin, joka sitten siirtää tietoja XML-muodossa verkkoselaimen ja web-palvelimen välillä. XMLHttpRequest-objekti lähettää päivitetyn sivutiedon pyynnön verkkopalvelimelle, palvelin käsittelee pyynnön, vastaus luodaan palvelimen puolelle ja lähetetään takaisin selaimelle, joka sitten käyttää JavaScriptiä vastauksen käsittelemiseen ja esittämiseen verkkosivulla.
- JavaScript ja HTML:
JavaScript suorittaa päivitysprosessin AJAX: ssä. Päivitetyn sisällön pyyntö on muotoiltu XML-muodossa, jotta se olisi ymmärrettävä, ja JavaScript päivittää päivitetyn sivun katselevan käyttäjän sisällön.
AJAX työskentelee:
Kuten yllä olevasta kaaviosta käy ilmi, selain lähettää AJAX-pyynnölle XMLHttpRequest- palvelimen javascriptin avulla. Tämä objekti sisältää tietoja, jotka kertovat palvelimelle, mitä pyydetään. Palvelin vastaa vain asiakkaan puolelta pyydetyillä tiedoilla. Sitten selain vastaanottaa tiedot, päivittää vain päivitettävän sivun osan koko verkkosivun lataamisen sijaan.
AJAX- ja ESP8266-pohjaisen verkkopalvelimen rakentamiseen tarvittavat komponentit
Koska rakennamme projektia osoittamaan esp8266: n kykyä käsitellä AJAXia, komponenttivaatimus on hyvin vähäinen, useimmat niistä löytyvät paikallisesta harrastekaupastasi.
- SolmuMCU X 1
- LM35 Lämpötila-anturi X 1
- LED X 1
- Leipälauta X 1
- Puserot X 4
- Ohjelmointikaapeli X 1
Ajax ja ESP8266 -verkkopalvelin - piirikaavio
AJAX-pohjaisen verkkopalvelimen kytkentäkaavio on esitetty alla.
Koska piiri on hyvin yksinkertainen, siinä ei ole mitään selitettävää. Olemme kytkeneet 150 ohmin virranrajoittimella varustetun LEDin ESP8266: n nastaan D0, kuten näette, voimme vaihtaa sen verkkopalvelimen avulla. Seuraavaksi meillä on LM35-lämpötila-anturi, jonka kautta luemme lämpötila-arvon ja päivitämme sen verkkosivulle. Lämpötila-anturi saa virran 3,3 V: n kiskosta, ja koska LM35 on analoginen anturi, tietojen mittaamiseen olemme käyttäneet ESP8266-kortin A0-nastaa. Jos olet törmännyt LM35-lämpötila-anturiin ensimmäistä kertaa tai jos haluat oppia lisää tästä erittäin siististä pienestä anturista, voit tarkistaa edellisen viestimme Digitaalinen lämpömittari NodeMCU: n ja LM35: n avulla, jossa keskustelimme tämän anturin toiminnasta yksityiskohta.
ESP8266: n AJAX-pohjainen verkkopalvelinkoodi
Ennen kuin jatkat, sukelkaamme suoraan ohjelmaan ymmärtämään, miten NodeMCU-verkkopalvelimemme toimii. Mutta ennen sitä, varmista, että sinulla on Arduino IDE -asetus ESP8266: lle. Jos sinulla ei ole määritystä, voit seurata seuraavaa osaa, muuten voit vain ohittaa tämän osan. Jos olet kiinnostunut oppimaan lisää verkkopalvelimesta ja IoT-pohjaisista projekteista, voit tutustua edelliseen viestiimme, josta olemme keskustelleet