- Ano ang AJAX?
- Paano gumagana ang AJAX?
- Kinakailangan ang mga bahagi upang buuin ang AJAX at ESP8266 Batay sa Web Server
- Ajax at ESP8266 Web Server - Circuit Diagram
- AJAX Batay sa Webserver Code para sa ESP8266
Sa maraming mga aplikasyon ng IoT, may mga sitwasyon kung saan ang data ng sensor ay kailangang subaybayan ang patuloy, at ang pinakasimpleng paraan upang gawin iyon ay sa pamamagitan ng pagpapagana ng isang webserver ng ESP8266 na nagsisilbi sa isang webpage ng HTML; ngunit ang problema sa pamamaraang ito ay ang web browser na kailangang i-refresh sa isang tiyak na agwat ng oras upang makakuha ng isang na-update na data ng sensor. Ito ay hindi lamang hindi mabisa ngunit tumatagal ng maraming mga cycle ng orasan kung saan maaaring maisagawa ang iba pang mga gawain. Ang solusyon sa problemang ito ay kilala bilang "Asynchronous JavaScript at XML" o AJAX para sa maikling salita. Gamit ang AJAX, maaari naming subaybayan ang data ng real-time nang hindi nagre-refresh ang buong webpage, hindi lamang ito nakakatipid ng oras, ngunit nakakatipid din ito ng mahahalagang siklo ng orasan. Sundin kasama at sa artikulong ito, malalaman mo kung paano ipatupad ang AJAX based webserver sa ESP8266.
Ano ang AJAX?
Tulad ng tinalakay nang mas maaga, ang AJAX ay nangangahulugang "Asynchronous JavaScript at XML" na maaaring magamit upang mai-update ang isang bahagi ng web page nang hindi na-reload ang pahina ng pagsasama. Ginagawa nito iyon sa pamamagitan ng paghiling at pagtanggap ng data mula sa server nang kusa. Ang pag-andar ng AJAX ay upang i-update ang nilalaman ng web nang hindi magkakasabay. Nangangahulugan ito na ang web browser ng isang gumagamit ay hindi kailangang i-refresh ang isang buong web page kapag bahagi lamang ng nilalaman sa pahina ang kailangang i-update.
Ang isang pang-araw-araw na halimbawa ng AJAX ay magiging tampok na mungkahi ng Google, habang nagta-type kami sa search bar ng Google, nagsisimula ang Google na magmungkahi ng mga kaugnay na mga string ng paghahanap. Sa panahon ng prosesong ito, hindi naglo-load ang webpage, ngunit ang impormasyon na kailangang baguhin ay na-update sa background gamit ang AJAX.
Paano gumagana ang AJAX?
Gumagamit lang ang AJAX ng kombinasyon ng-
- XML (Extensible Markup Language)
- JavaScript at HTML
- XML (Extensible Markup Language):
Ang XML ay isang markup na wika. Kadalasang ginagamit ang XML para sa pagtanggap ng data ng server na may isang tukoy na format. Bagaman maaari itong makatanggap ng data sa anyo ng payak na teksto. Kapag bumisita ang isang gumagamit sa isang web page at nangyari ang isang kaganapan, sa aming kaso, ito ay isang "Button press", lumilikha ang JavaScript ng isang XMLHttpRequest na bagay, na pagkatapos ay naglilipat ng impormasyon sa isang format na XML sa pagitan ng isang web browser at isang web server. Ang bagay na XMLHttpRequest ay nagpapadala ng isang kahilingan para sa na-update na data ng pahina sa web server, pinoproseso ng server ang kahilingan, isang tugon ang nilikha sa server-side at ipinadala pabalik sa browser, na kung saan ay gumagamit ng JavaScript upang maproseso ang tugon at ipakita ito sa webpage.
- JavaScript at HTML:
Ginagawa ng JavaScript ang proseso ng pag-update sa AJAX. Ang kahilingan para sa na-update na nilalaman ay naka-format sa XML upang gawin itong maunawaan, at nai-refresh ng JavaScript ang nilalaman para sa gumagamit na tumitingin sa na-update na pahina.
Nagtatrabaho ang AJAX:
Tulad ng ipinakita sa diagram sa itaas, para sa isang kahilingan sa AJAX, ang browser ay nagpapadala ng isang XMLHttpRequest sa server gamit ang javascript. Kasama sa object na ito ang data na nagsasabi sa server kung ano ang hinihiling. Ang server ay tumutugon sa data lamang na hiniling mula sa client-side. Pagkatapos ay natatanggap ng browser ang data, ina-update lamang ang bahagi ng pahina na kailangang ma-update sa halip na muling mai-reload ang buong webpage.
Kinakailangan ang mga bahagi upang buuin ang AJAX at ESP8266 Batay sa Web Server
Habang binubuo namin ang proyekto upang maipakita ang kakayahan ng esp8266 upang hawakan ang AJAX, ang kinakailangan ng sangkap ay napakaliit, mahahanap mo ang karamihan sa mga nasa iyong lokal na tindahan ng libangan.
- NodeMCU X 1
- LM35 Temperatura sensor X 1
- LED X 1
- Breadboard X 1
- Mga Jumpers X 4
- Programming Cable X 1
Ajax at ESP8266 Web Server - Circuit Diagram
Ang circuit diagram para sa AJAX-based webserver ay ipinapakita sa ibaba.
Tulad ng circuit ay napaka-simple, walang magkano upang ipaliwanag tungkol dito. Nakakonekta namin ang isang LED na may kasalukuyang 150 Ohms na naglilimita ng risistor sa Pin D0 ng ESP8266, tulad ng makikita mo, maaari naming ito i-toggle gamit ang webserver. Susunod, mayroon kaming aming sensor ng temperatura ng LM35 kung saan babasahin namin ang halaga ng temperatura at mai-update iyon sa webpage. Ang sensor ng temperatura ay pinalakas mula sa 3.3V rail, at dahil ang LM35 ay isang analog sensor, ginamit namin ang A0 pin ng board na ESP8266 upang masukat ang data. kung nakatagpo ka ng sensor ng temperatura ng LM35 sa kauna-unahang pagkakataon, o kung nais mong matuto nang higit pa tungkol sa napakalamig na maliit na sensor na ito, maaari mong suriin ang aming nakaraang post sa Digital Thermometer Gamit ang NodeMCU at LM35 kung saan tinalakay namin ang pagtatrabaho ng sensor na ito sa detalye
AJAX Batay sa Webserver Code para sa ESP8266
Bago pa tayo magpatuloy, sumisid muna tayo sa programa upang maunawaan kung paano gagana ang aming NodeMCU web server. Ngunit bago ito, mangyaring tiyakin na mayroon kang pag-set up ng Arduino IDE para sa ESP8266, Kung wala kang pag-set up, maaari mong sundin ang susunod na bahagi, kung hindi maaari mo lamang laktawan ang bahaging ito. Kung interesado kang matuto nang higit pa tungkol sa webserver, at mga proyekto na batay sa IoT, maaari mong suriin ang aming nakaraang post kung saan tinalakay