Ajax ar esp8266: dinamisks tīmekļa lapas atjauninājums bez pārlādēšanas

Daudzās IoT lietojumprogrammās ir situācijas, kad sensora dati ir nepārtraukti jāuzrauga, un vienkāršākais veids, kā to izdarīt, ir iespējot ESP8266 tīmekļa serveri, kas apkalpo HTML vietni; bet šīs metodikas problēma ir tā, ka tīmekļa pārlūkprogramma ir jāatsvaidzina noteiktā laika intervālā, lai iegūtu atjauninātus sensora datus. Tas ir ne tikai neefektīvi, bet prasa daudz pulksteņa ciklu, kur var veikt citus uzdevumus. Šīs problēmas risinājums ir saukts par “asinhrono JavaScript un XML” jeb AJAX. Izmantojot AJAX, mēs varam kontrolēt reāllaika datus, neatsvaidzinot visu vietni, tas ietaupa ne tikai laiku, bet arī dārgo pulksteņu ciklus. Sekojiet līdzi, un šajā rakstā jūs uzzināsiet, kā ESP8266 ieviest AJAX balstītu tīmekļa serveri.

Kas ir AJAX?

Kā mēs jau iepriekš apspriedām, AJAX ir saīsinājums no “Asynchronous JavaScript and XML”, kurus var izmantot, lai atjauninātu tīmekļa vietnes daļu, nepārlādējot saistīto lapu. Tas tiek darīts, spontāni pieprasot un saņemot datus no servera. AJAX funkcija ir asinhroni atjaunināt tīmekļa saturu. Tas nozīmē, ka lietotāja tīmekļa pārlūkprogrammai nav jāatsvaidzina visa tīmekļa lapa, kad jāatjaunina tikai daļa no lapas satura.

Ikdienas AJAX piemērs būs Google ieteikumu funkcija, jo, ierakstot Google meklēšanas joslā, Google sāk ieteikt saistītās meklēšanas virknes. Šī procesa laikā vietne netiek atkārtoti ielādēta, bet informācija, kas jāmaina, tiek atjaunināta fonā, izmantojot AJAX.

Kā darbojas AJAX?

AJAX vienkārši izmanto kombināciju

1. XML (paplašināmā iezīmēšanas valoda)
2. JavaScript un HTML

• XML (paplašināmā iezīmēšanas valoda):

XML ir iezīmēšanas valoda. XML lielākoties izmanto servera datu saņemšanai ar noteiktu formātu. Lai gan tas var saņemt datus vienkārša teksta veidā. Kad lietotājs apmeklē tīmekļa lapu un notiek notikums, mūsu gadījumā tas ir “Pogas nospiešana”, JavaScript izveido objektu XMLHttpRequest, kas pēc tam informāciju XML formātā pārsūta starp tīmekļa pārlūkprogrammu un tīmekļa serveri. XMLHttpRequest objekts nosūta atjauninātu lapas datu pieprasījumu tīmekļa serverim, serveris apstrādā pieprasījumu, servera pusē tiek izveidota atbilde un nosūtīta atpakaļ pārlūkprogrammai, kas pēc tam izmanto JavaScript, lai apstrādātu atbildi un parādītu to tīmekļa lapā.

• JavaScript un HTML:

JavaScript veic atjaunināšanas procesu AJAX. Atjaunināta satura pieprasījums ir formatēts XML, lai tas būtu saprotams, un JavaScript atsvaidzina saturu lietotājam, kurš skata atjaunināto lapu.

AJAX strādā:

Kā parādīts iepriekšējā diagrammā, AJAX pieprasījumam pārlūks nosūta serverim XMLHttpRequest, izmantojot javascript. Šis objekts ietver datus, kas serverim norāda, kas tiek pieprasīts. Serveris atbild tikai ar datiem, kas tika pieprasīti no klienta puses. Pēc tam pārlūkprogramma saņem datus, atjaunina tikai to lapas daļu, kas jāatjaunina, nevis pārlādē visu vietni.

Komponenti, kas nepieciešami, lai izveidotu AJAX un ESP8266 balstītu tīmekļa serveri

Tā kā mēs veidojam projektu, lai parādītu esp8266 spēju apstrādāt AJAX, komponentu prasības ir ļoti mazas, lielāko daļu no tām varat atrast savā vietējā hobiju veikalā.

• MezglsMCU X 1
• LM35 temperatūras sensors X 1
• LED X 1
• Maizes dēlis X 1
• Džemperi X 4
• Programmēšanas kabelis X 1

Ajax un ESP8266 tīmekļa serveris - shēmas shēma

Zemāk ir parādīta AJAX bāzes servera shēma.

Tā kā ķēde ir ļoti vienkārša, par to nav daudz ko izskaidrot. ESP8266 tapai D0 mēs esam pievienojuši gaismas diodi ar 150 omu strāvas ierobežojošo rezistoru, kā redzēsit, mēs to varam pārslēgt, izmantojot tīmekļa serveri. Pēc tam mums ir mūsu LM35 temperatūras sensors, caur kuru mēs nolasīsim temperatūras vērtību un atjaunināsim to tīmekļa lapā. Temperatūras sensors tiek darbināts no 3,3 V sliedes, un, tā kā LM35 ir analogais sensors, datu mērīšanai mēs izmantojām ESP8266 plāksnes A0 tapu. ja pirmo reizi esat saskāries ar LM35 temperatūras sensoru vai vēlaties uzzināt vairāk par šo ļoti foršo mazo sensoru, varat apskatīt mūsu iepriekšējo ziņu par digitālo termometru, izmantojot NodeMCU un LM35, kur mēs apspriedām šī sensora darbību detaļa.

AJAX bāzes servera kods ESP8266

Pirms turpināt darbu, ienirsim tieši programmā, lai saprastu, kā darbosies mūsu NodeMCU tīmekļa serveris. Bet pirms tam, lūdzu, pārliecinieties, vai jums ir Arduino IDE iestatīšana ESP8266. Ja jums nav iestatīšanas, varat sekot nākamajai daļai, pretējā gadījumā jūs varat vienkārši izlaist šo daļu. Ja jūs interesē uzzināt vairāk par tīmekļa servera un IoT balstītiem projektiem, varat apskatīt mūsu iepriekšējo ziņu, kurā mēs esam apsprieduši