Hello,

This project came out of a discussion I had with Yves Bourdon, here on the RNT Lab forum, on how to implement an updated web interface to control an ESP32, without the need to reload the entire page. In other words, the idea here is to perform asynchronous requests from the client browser to query the microcontroller on the status of the data to be displayed, and then to perform local updates of the user interface as soon as the data provided by the ESP32 is received.

There are several techniques to achieve this, including the use of WebSockets, which I much prefer to traditional methods that rely on AJAX. Nevertheless, Yves wanted to understand how to implement this technique with AJAX. This is the purpose of this project. Another one will follow to illustrate how to proceed with WebSockets…

I propose two techniques to implement asynchronous exchanges between the client browser and the web server running on the ESP32:

– a classical method that uses the XMLHttpRequest object of Javascript
– a more modern method that uses the Async/Await protocol of Javascript

So you have the choice to use one or the other.
The first is the one used by Rui and Sara in their tutorials.

The full project is available on GitHub.

I have carefully commented on the entire code to make it easier for you to understand. Don’t hesitate to come back and ask questions by answering this post dedicated to the project.

Here’s a glimpse of what’s in store for you:

Each time the current temperature reading is taken, the interface is updated in a totally transparent way, without the need to reload the page. And the temperature display automatically adapts to the situation by changing colour to indicate if everything is fine or if you’re out of the permitted range. A reading error on the sensor can also occur. The display will take this into account: