- Što je AJAX?
- Kako AJAX radi?
- Komponente potrebne za izgradnju web poslužitelja temeljenog na AJAX-u i ESP8266
- Ajax i ESP8266 web poslužitelj - shema spojeva
- Kôd web poslužitelja zasnovan na AJAX-u za ESP8266
U mnogim IoT aplikacijama postoje situacije u kojima se podaci senzora trebaju kontinuirano nadzirati, a najjednostavniji način za to je omogućavanje web servera ESP8266 koji služi HTML web stranici; ali problem ove metodologije je taj što se web preglednik treba osvježavati u određenom vremenskom intervalu kako bi se dobili ažurirani podaci senzora. To nije samo neučinkovito, već zahtijeva puno ciklusa takta u kojima se mogu obavljati drugi zadaci. Rješenje ovog problema poznato je pod nazivom "Asinkroni JavaScript i XML" ili AJAX ukratko. Korištenjem AJAX-a možemo pratiti podatke u stvarnom vremenu bez osvježavanja cijele web stranice, što ne samo da štedi vrijeme, već štedi i dragocjene cikluse sata. Slijedite i u ovom ćete članku naučiti kako implementirati web poslužitelj zasnovan na AJAX-u na ESP8266.
Što je AJAX?
Kao što smo ranije razgovarali, AJAX je kratica od „Asinkroni JavaScript i XML“ koji se mogu koristiti za ažuriranje dijela web stranice bez ponovnog učitavanja entil stranice. To čini tako što spontano traži i prima podatke s poslužitelja. Funkcija AJAX-a je ažuriranje web sadržaja asinkrono. To znači da korisnikov web preglednik ne treba osvježavati cijelu web stranicu kada treba ažurirati samo dio sadržaja na stranici.
Svakodnevni primjer AJAX-a bit će značajka Googleove sugestije, dok dok tipkamo u Googleovu traku za pretraživanje, Google počinje predlagati povezane nizove pretraživanja. Tijekom ovog postupka web stranica se ne ponovno učitava, ali informacije koje treba promijeniti ažuriraju se u pozadini pomoću AJAX-a.
Kako AJAX radi?
AJAX samo koristi kombinaciju-
- XML (proširivi jezik za označavanje)
- JavaScript i HTML
- XML (proširivi označni jezik):
XML je označni jezik. XML se uglavnom koristi za primanje podataka poslužitelja s određenim formatom. Iako može primati podatke u obliku običnog teksta. Kada korisnik posjeti web stranicu i dogodi se događaj, u našem slučaju to je "Pritisak gumba", JavaScript stvara objekt XMLHttpRequest, koji zatim prenosi podatke u XML formatu između web preglednika i web poslužitelja. XMLHttpRequest objekt šalje zahtjev za ažuriranim podacima stranice web poslužitelju, poslužitelj obrađuje zahtjev, odgovor se kreira na strani poslužitelja i šalje natrag pregledniku, koji zatim koristi JavaScript za obradu odgovora i prikaz na web stranici.
- JavaScript i HTML:
JavaScript vrši postupak ažuriranja u AJAX-u. Zahtjev za ažuriranim sadržajem formatiran je u XML-u kako bi bio razumljiv, a JavaScript osvježava sadržaj za korisnika koji pregledava ažuriranu stranicu.
AJAX radi:
Kao što je prikazano na gornjem dijagramu, za AJAX zahtjev preglednik šalje XMLHttpRequest poslužitelju pomoću javascripta. Ovaj objekt uključuje podatke koji govore poslužitelju što se traži. Poslužitelj odgovara samo podacima koji su zatraženi od strane klijenta. Tada preglednik prima podatke, ažurira samo dio stranice koji treba ažurirati umjesto ponovnog učitavanja cijele web stranice.
Komponente potrebne za izgradnju web poslužitelja temeljenog na AJAX-u i ESP8266
Kako gradimo projekt kako bismo demonstrirali sposobnost esp8266 za rukovanje AJAX-om, zahtjev za komponentama je vrlo mali, većinu možete pronaći u vašoj lokalnoj hobi trgovini.
- NodeMCU X 1
- LM35 Senzor temperature X 1
- LED X 1
- Znamenitosti X 1
- Skakači X 4
- Kabel za programiranje X 1
Ajax i ESP8266 web poslužitelj - shema spojeva
Dijagram sklopa za web poslužitelj zasnovan na AJAX prikazan je u nastavku.
Kako je sklop vrlo jednostavan, o njemu se nema što puno objasniti. Spojili smo LED s otpornikom za ograničavanje struje od 150 Ohma na pin D0 ESP8266, kao što ćete vidjeti, možemo ga uključiti pomoću web poslužitelja. Dalje, imamo svoj temperaturni senzor LM35 kroz koji ćemo očitavati temperaturnu vrijednost i ažurirati je na web stranicu. Osjetnik temperature napaja se s 3.3V tračnice, a kako je LM35 analogni senzor, za mjerenje podataka koristili smo pin A0 ploče ESP8266. ako ste prvi put susreli temperaturni senzor LM35 ili ako želite saznati više o ovom vrlo cool malom senzoru, možete provjeriti naš prethodni post o Digitalnom termometru pomoću NodeMCU i LM35 gdje smo razgovarali o radu ovog senzora u detalj.
Kôd web poslužitelja zasnovan na AJAX-u za ESP8266
Prije nego što nastavimo dalje, zaronimo ravno u program kako bismo shvatili kako će raditi naš web poslužitelj NodeMCU. Ali prije toga, provjerite imate li Arduino IDE postavke za ESP8266. Ako nemate postavke, možete slijediti sljedeći dio, inače možete samo preskočiti ovaj dio. Ako vas zanima više o web poslužitelju i projektima temeljenim na IoT-u, možete pogledati naš prethodni post u kojem smo razgovarali