„Ajax“ su „esp8266“: dinamiškas tinklalapio atnaujinimas neperkraunant

Daugelyje interneto programų yra situacijų, kai jutiklio duomenis reikia nuolat stebėti, o paprasčiausias būdas tai padaryti yra įgalinti ESP8266 tinklo serverį, kuris aptarnauja HTML tinklalapį; bet šios metodikos problema yra ta, kad norint atnaujinti jutiklio duomenis reikia atnaujinti žiniatinklio naršyklę tam tikru laiko intervalu. Tai ne tik neefektyvu, bet užima daug laiko ciklų, kur galima atlikti kitas užduotis. Šios problemos sprendimas žinomas kaip „Asynchronous JavaScript and XML“ arba AJAX. Naudodami AJAX galime stebėti realaus laiko duomenis neatnaujindami viso tinklalapio. Tai ne tik taupo laiką, bet ir brangius laikrodžio ciklus. Toliau sekite ir šiame straipsnyje sužinosite, kaip įdiegti AJAX pagrįstą interneto serverį ESP8266.

Kas yra AJAX?

Kaip jau aptarėme anksčiau, AJAX reiškia „Asynchronous JavaScript and XML“, kurį galima naudoti atnaujinant dalį tinklalapio neperkraunant atitinkamo puslapio. Tai daro spontaniškai prašydamas ir gaudamas duomenis iš serverio. AJAX funkcija yra asinchroniškai atnaujinti žiniatinklio turinį. Tai reiškia, kad vartotojo žiniatinklio naršyklei nereikia atnaujinti viso tinklalapio, kai reikia atnaujinti tik dalį puslapio turinio.

Kasdienis AJAX pavyzdys bus „Google“ pasiūlymo funkcija, kai įvedame „Google“ paieškos juostą, „Google“ pradeda siūlyti susijusias paieškos eilutes. Vykstant šiam procesui tinklalapis neperkraunamas, tačiau informacija, kurią reikia pakeisti, atnaujinama fone naudojant AJAX.

Kaip veikia AJAX?

AJAX tiesiog naudoja derinį

1. XML (išplėstinė žymėjimo kalba)
2. „JavaScript“ ir HTML

• XML (išplėstinė žymėjimo kalba):

XML yra žymėjimo kalba. XML dažniausiai naudojamas serverio duomenims gauti su tam tikru formatu. Nors jis gali gauti duomenis paprasto teksto pavidalu. Kai vartotojas apsilanko tinklalapyje ir įvykis įvyksta, mūsų atveju tai yra mygtuko paspaudimas, „JavaScript“ sukuria objektą XMLHttpRequest, kuris tada perduoda informaciją XML formatu tarp interneto naršyklės ir žiniatinklio serverio. Objektas XMLHttpRequest siunčia atnaujintų puslapio duomenų užklausą žiniatinklio serveriui, serveris apdoroja užklausą, atsakymas sukuriamas serverio pusėje ir siunčiamas atgal į naršyklę, kuri tada naudoja „JavaScript“, kad apdorotų atsakymą ir pateiktų jį tinklalapyje..

• „JavaScript“ ir HTML:

„JavaScript“ atlieka AJAX atnaujinimo procesą. Atnaujinto turinio užklausa yra suformatuota XML, kad ji būtų suprantama, o „JavaScript“ atnaujina turinį vartotojui, peržiūrinčiam atnaujintą puslapį.

AJAX darbas:

Kaip parodyta pirmiau pateiktoje diagramoje, AJAX užklausai naršyklė siunčia XMLHttpRequest į serverį naudodama „javascript“. Šis objektas apima duomenis, kurie praneša serveriui, ko prašoma. Serveris atsako tik su duomenimis, kurių buvo paprašyta iš kliento pusės. Tada naršyklė gauna duomenis, atnaujina tik tą puslapio dalį, kurią reikia atnaujinti, užuot perkėlus visą tinklalapį.

Komponentai, reikalingi norint sukurti AJAX ir ESP8266 pagrįstą tinklo serverį

Kuriame projektą norėdami parodyti esp8266 galimybes valdyti AJAX, komponentų reikalavimas yra labai menkas, daugumą jų galite rasti savo vietos pomėgių parduotuvėje.

• MazgasMCU X 1
• LM35 temperatūros jutiklis X 1
• LED X 1
• Duonos plokštė X 1
• Džemperiai X 4
• Programavimo kabelis X 1

„Ajax“ ir ESP8266 tinklo serveris - grandinės schema

Žemiau parodyta AJAX pagrįsto tinklo serverio schema.

Kadangi grandinė yra labai paprasta, nėra daug ką paaiškinti. Prie ESP8266 kaiščio D0 prijungėme šviesos diodą su 150 omų srovės ribotuvu, kaip matysite, mes galime jį perjungti naudodami interneto serverį. Tada turime savo LM35 temperatūros jutiklį, per kurį mes nuskaitysime temperatūros vertę ir atnaujinsime ją tinklalapyje. Temperatūros jutiklis maitinamas iš 3,3 V bėgio, o kadangi LM35 yra analoginis jutiklis, duomenims matuoti panaudojome ESP8266 plokštės A0 kaištį. jei pirmą kartą susidūrėte su LM35 temperatūros jutikliu arba norite sužinoti daugiau apie šį labai šaunų mažą jutiklį, galite patikrinti mūsų ankstesnį įrašą apie skaitmeninį termometrą naudojant „NodeMCU“ ir „LM35“, kur aptarėme šio jutiklio veikimą detalė.

ESP8266 AJAX pagrįstas tinklo serverio kodas

Prieš tęsdami toliau, pasinerkime tiesiai į programą, kad suprastume, kaip veiks mūsų „ NodeMCU“ tinklo serveris. Bet prieš tai įsitikinkite, kad turite „ESP8266“ „Arduino IDE“ sąranką. Jei neturite sąrankos, galite sekti kitą dalį, kitaip galite tiesiog praleisti šią dalį. Jei jus domina daugiau sužinoti apie interneto serverį ir daiktais pagrįstus internetinius projektus, galite peržiūrėti mūsų ankstesnį įrašą, kuriame aptarėme