ESP8266 (ajax) update part of web page without refreshing

In this tutorial we receive ADC data and send LED on off data to ESP8266 without refreshing webpage. You can do a lot of things with this. At the end we will see some advance applications of this. To make this possible we need to use javaScript Ajax.

Tools you need

only NodeMCU, Laptop and USB cable

What you will learn?

  1. ESP8266 Ajax web page update without refresh.
  2. Sending data to ESP NodeMCU without page refresh.
  3. Getting data from ESP8266 NodeMCU without page refresh and update it in web page dynamically. such as ADC values or temperature readings.

HTML and Java Script, AJAX basics

AJAX is about updating parts of a web page, without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

How NodeMCU AJAX Works ?

In ESP8266 NodeMCU we create two pages on server. First that loads as normal webpage and second webpage is behind the scene i.e. AJAX.

AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

  • XMLHttpRequest object (to exchange data asynchronously with a server)
  • JavaScript/DOM (to display/interact with the information)
  • CSS (to style the data)
  • XML (often used as the format for transferring data)

Read More on Ajax at https://www.w3schools.com/asp/asp_ajax_intro.asp

ESP ajax example

Create Web Page with AJAX

How to create a web page in ESP and uploading it read this post ?

Make your HTML page and test it in browser. Then make it header file as shown in below code. DON’T JUST CHANGE THE EXTENSION TO .h

Create index.h file near to your final sketch. Copy and paste below code. Program is commented well. You can read more on HTML and AJAX at w3schools.com

index.h File

ESP8266 NodeMCU Main INO file Code

Testing

Make WiFi network configuration changes as per your network. Upload the program and test it. Open serial monitor to observe the IP address and other actions.

In many application you may want to use jQuery and Bigger size HTML, CSS files and images. You can get clear idea from these two advanced posts

  1. SPIFFS (ESP File System) to load webpages in Flash memory
  2. Upload images in ESP8266 and display it in web page
  3. Using jQuery advance web server on ESP8266

ResultsNodeMCU Ajax javascript Example

 

 

4 thoughts on “ESP8266 (ajax) update part of web page without refreshing

  1. If i try to add more function getData() functions , the entire code goes mad , its displays everything everywhere. For example , i tryed to print to the website an uptime counter , and a name tagged to an rfid , i have function getData() for the name and the uptime too. But in the web the uptime goes to the name’s place. Maybe it is because the multiple ” function getData() {}. How can i solve this problem?

  2. Hello, i am having some troubles on my code. I would like to build a wifi thermostat ( temperature controller ) using nodemcu lolin esp8266 12e and i can’t build the following scenario: when i click a button i want that Tref1 to decrese by 0.5 and when i click another button, to rise 0.5. it is like a button without feedback parameter.

    html code:

    P1 0 – 6
    +
    NA

    function getDataTref1() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById(“Tref1Value”).innerHTML =
    this.responseText;
    }
    };
    xhttp.open(“GET”, “readTref1”, true);
    xhttp.send();
    }

    Arduino code:

    void handleRoot() {
    String s = MAIN_page; //Read HTML contents
    server.send(200, “text/html”, s); //Send web page
    }

    void handleTref1() {
    float b = Tref1;
    String Tref1value = String(b);

    server.send(200, “text/plane”, Tref1value); //Send Tref1 value only to client ajax request
    }

Leave a Reply