- Was ist AJAX?
- Wie funktioniert AJAX?
- Erforderliche Komponenten zum Erstellen des AJAX- und ESP8266-basierten Webservers
- Ajax und ESP8266 Webserver - Schaltplan
- AJAX-basierter Webserver-Code für ESP8266
In vielen IoT-Anwendungen gibt es Situationen, in denen die Sensordaten kontinuierlich überwacht werden müssen. Der einfachste Weg, dies zu tun, besteht darin, einen ESP8266-Webserver zu aktivieren, der eine HTML-Webseite bereitstellt. Das Problem bei dieser Methode ist jedoch, dass der Webbrowser in einem bestimmten Zeitintervall aktualisiert werden muss, um aktualisierte Sensordaten zu erhalten. Dies ist nicht nur ineffizient, sondern erfordert viele Taktzyklen, in denen andere Aufgaben ausgeführt werden können. Die Lösung für dieses Problem ist als "Asynchrones JavaScript und XML" oder kurz AJAX bekannt. Mit AJAX können wir Echtzeitdaten überwachen, ohne die gesamte Webseite zu aktualisieren. Dies spart nicht nur Zeit, sondern auch wertvolle Taktzyklen. Folgen Sie uns und in diesem Artikel erfahren Sie, wie Sie einen AJAX-basierten Webserver auf ESP8266 implementieren.
Was ist AJAX?
Wie bereits erwähnt, steht AJAX für "Asynchrones JavaScript und XML", mit dem ein Teil der Webseite aktualisiert werden kann, ohne die gesamte Seite neu zu laden. Dies geschieht durch spontanes Anfordern und Empfangen von Daten vom Server. Die Funktion von AJAX besteht darin, Webinhalte asynchron zu aktualisieren. Dies bedeutet, dass der Webbrowser eines Benutzers nicht eine gesamte Webseite aktualisieren muss, wenn nur ein Teil des Inhalts auf der Seite aktualisiert werden muss.
Ein alltägliches Beispiel für AJAX ist die Vorschlagsfunktion von Google. Während wir in die Google-Suchleiste eingeben, schlägt Google verwandte Suchzeichenfolgen vor. Während dieses Vorgangs wird die Webseite nicht neu geladen, aber die Informationen, die geändert werden müssen, werden im Hintergrund mit AJAX aktualisiert.
Wie funktioniert AJAX?
AJAX verwendet nur eine Kombination aus
- XML (Extensible Markup Language)
- JavaScript und HTML
- XML (Extensible Markup Language):
XML ist eine Auszeichnungssprache. XML wird hauptsächlich zum Empfangen von Serverdaten mit einem bestimmten Format verwendet. Obwohl es Daten in Form von Klartext empfangen kann. Wenn ein Benutzer eine Webseite besucht und ein Ereignis eintritt, in unserem Fall ein "Tastendruck", erstellt das JavaScript ein XMLHttpRequest- Objekt, das dann Informationen in einem XML-Format zwischen einem Webbrowser und einem Webserver überträgt. Das XMLHttpRequest-Objekt sendet eine Anforderung für aktualisierte Seitendaten an den Webserver, der Server verarbeitet die Anforderung, eine Antwort wird serverseitig erstellt und an den Browser zurückgesendet, der die Antwort dann mit JavaScript verarbeitet und auf der Webseite anzeigt.
- JavaScript und HTML:
JavaScript führt den Aktualisierungsprozess in AJAX durch. Die Anforderung für aktualisierten Inhalt wird in XML formatiert, um ihn verständlich zu machen, und JavaScript aktualisiert den Inhalt für den Benutzer, der die aktualisierte Seite anzeigt.
AJAX Arbeiten:
Wie im obigen Diagramm gezeigt, sendet der Browser für eine AJAX-Anforderung eine XMLHttpRequest mithilfe von Javascript an den Server. Dieses Objekt enthält Daten, die dem Server mitteilen, was angefordert wird. Der Server antwortet nur mit den Daten, die vom Client angefordert wurden. Dann empfängt der Browser die Daten und aktualisiert nur den Teil der Seite, der aktualisiert werden muss, anstatt die gesamte Webseite neu zu laden.
Erforderliche Komponenten zum Erstellen des AJAX- und ESP8266-basierten Webservers
Während wir das Projekt aufbauen, um die Fähigkeit von esp8266 zu demonstrieren, AJAX zu handhaben, sind die Komponentenanforderungen sehr gering. Die meisten davon finden Sie in Ihrem örtlichen Hobbygeschäft.
- NodeMCU X 1
- LM35 Temperatursensor X 1
- LED X 1
- Steckbrett X 1
- Jumper X 4
- Programmierkabel X 1
Ajax und ESP8266 Webserver - Schaltplan
Das Schaltbild für den AJAX-basierten Webserver ist unten dargestellt.
Da die Schaltung sehr einfach ist, gibt es nicht viel zu erklären. Wir haben eine LED mit einem Strombegrenzungswiderstand von 150 Ohm an den Pin D0 des ESP8266 angeschlossen. Wie Sie sehen werden, können wir sie über den Webserver umschalten. Als nächstes haben wir unseren LM35-Temperatursensor, über den wir den Temperaturwert lesen und diesen auf der Webseite aktualisieren. Der Temperatursensor wird über die 3,3-V-Schiene mit Strom versorgt. Da der LM35 ein analoger Sensor ist, haben wir den A0-Pin der ESP8266-Karte zum Messen der Daten verwendet. Wenn Sie zum ersten Mal auf den LM35-Temperatursensor gestoßen sind oder mehr über diesen sehr coolen kleinen Sensor erfahren möchten, lesen Sie unseren vorherigen Beitrag zum digitalen Thermometer mit NodeMCU und LM35, in dem wir die Funktionsweise dieses Sensors in besprochen haben Detail.
AJAX-basierter Webserver-Code für ESP8266
Bevor wir fortfahren, gehen wir direkt in das Programm ein, um zu verstehen, wie unser NodeMCU-Webserver funktioniert. Stellen Sie jedoch vorher sicher, dass Sie das Arduino IDE-Setup für ESP8266 haben. Wenn Sie das Setup nicht haben, können Sie dem nächsten Teil folgen, andernfalls können Sie diesen Teil einfach überspringen. Wenn Sie mehr über Webserver und IoT-basierte Projekte erfahren möchten, lesen Sie unseren vorherigen Beitrag, in dem wir darüber gesprochen haben