In this project we are going to control our electronic components using our mobile phones. We are going to use the NodeMCU ESP8266 Web Server and create an AJAX enabled page so as to make our page responsive. This will remove the flickering and the page refresh needed using XMLHttpRequest and Javascript.

Please see the following demo.

I have created a step by step description on how I created my project in the following link https://www.donskytech.com/esp8266-nodemcu-web-server-control-components-from-your-mobile-phone/

I have added additional explanation on how to create the project.

The code is available at my github account https://github.com/donskytech/esp-projects/tree/master/esp8266-nodemcu-webserver-ajax

We used the Arduino IDE in programming the NodeMCU ESP8266 Web Server by using the ESP8266 Core Addon project.

Asynchronous Telemetry: The ESP8266 AJAX Web Server

A standard Arduino web server forces an entire page reload every time you want to check a button state. The ESP8266 AJAX Web Server solves this by leveraging Asynchronous JavaScript and XML (AJAX). When you open the web page, it loads once. From that point on, JavaScript running in your browser can send requests to the ESP8266 in the background to update data or send commands, without ever needing to reload the entire page. This creates a smooth, responsive, and modern user experience.

Structuring the SPIFFS File System

You cannot realistically write hundreds of lines of complex HTML, CSS, and JavaScript inside an Arduino String variable. This is where the ESP8266 SPIFFS (SPI Flash File System) comes in. SPIFFS allows you to store the web page files (like index.html, style.css, script.js) directly on the ESP8266's flash memory, separate from the program code.

1. You create your index.html file with all its HTML, CSS, and JavaScript.
2. The JavaScript uses the XMLHttpRequest object to communicate asynchronously with the server.

For example, the following JavaScript snippet polls the server every 2 seconds to get a sensor reading:

setInterval(function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Update the webpage element with the new data
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  // Send a GET request to the '/readTemp' endpoint on the ESP8266
  xhttp.open("GET", "/readTemp", true);
  xhttp.send();
}, 2000); // Poll every 2000 milliseconds

Parsing the Exact GET Request

On the Arduino (C++) side, the code sets up a web server that listens for these specific requests. Key libraries include:

• #include <ESP8266WiFi.h> for network connectivity.
• #include <ESP8266WebServer.h> to handle HTTP requests.

You then define handler functions for each URL endpoint. For the JavaScript example above, you would define a handler for the /readTemp path:

server.on("/readTemp", [](){
  int sensorValue = analogRead(A0); // Read from a sensor
  server.send(200, "text/plain", String(sensorValue));
});

This function is triggered whenever the ESP8266 receives a GET request for /readTemp. It reads the sensor, converts the value to a String, and sends it back as a plain text response, which is then received by the JavaScript XMLHttpRequest object.

Hardware and Skills Required

• NodeMCU ESP8266 or ESP32 (The microcontroller that hosts the web server).
• HTML, CSS, JS Frontend Expertise (To design the responsive user interface that runs in the browser).
• A Standard DHT11 / Potentiometer Sensor (Example components to control or read data from).