Home / Tutorials / ESP8266 Tutorial / NodeMCU Ajax: Dynamic Sensor Data on Web Page
nodemcu ajax dynamic sensor data

NodeMCU Ajax: Dynamic Sensor Data on Web Page

Last time we managed to display sensor data to a NodeMCU web server. The problem with that code is that we need to refresh the page manually in order to update the sensor value. A better method is to use ajax (asynchronous javascript and xml) so that we can request data from the server in the background with no page reloads.

Ajax is a combination of an XMLHttpRequest object and javascript. The XMLHttpRequest object performs the request on the server while the javascript DOM object updates the element on the web page. Besides updating page elements without reload, ajax also makes it possible to a) request data from a server - after the page has loaded; b) receive data from a server - after the page has loaded and c) send data to a server - in the background. W3Schools has a great tutorial on ajax.

We shall now edit the sketch from last time to include ajax script. We will be using the same schematic:

nodemcu ajax sensor

Here is the ajax script that we’ll be using:

The main ajax script is the loadData() function. Inside this function, an XMLHttpRequest() object is created. The server waits for a readystate of 4 (done) and a http status of 200 (OK) before the web page element is updated via callback to updateData(). The request is then initiated via the open() and send() functions. Callback was necessary here to make the requests asynchronous, i.e., make the page still responsive even if there is a pending request.

In order for this function to be repeatedly called, we will be using the javascript setInterval() function. Here the loadData() function is called every second.

There are a couple of ways to get data from the sensor. What I did was save the data to a text file. This text file will then be read by the XMLHttpRequest object and then display its contents to the page element.

Full Code

Video:


 

You can also add CSS to make the web page look nicer. If you want to record the sensor readings, you can send NodeMCU data to Google sheets or save it to a database.

Check Also

nodemcu ajax dynamic sensor data

Log Data with NodeMCU and Google Sheets

Most of the time, the data from a sensor in an IoT application needs to …

18 comments

  1. Great tutorial!

    My NodeMCU crashes though after 30 seconds with this error:

    Exception (29):
    epc1=0x4020dc0c epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000

    ctx: sys
    sp: 3ffffcd0 end: 3fffffb0 offset: 01a0

    ets Jan 8 2013,rst cause:2, boot mode:(1,6)

    ets Jan 8 2013,rst cause:4, boot mode:(1,6)

    wdt reset

    Any ideas how to fix this?

  2. Hi,

    In this tuttorial you put sensor data into text file, where u put the text file? SD card (perhaps)?

    • Hi Sanz,

      There was no SD card. The text file is dynamically created on the NodeMCU server. Like, the file was created when the NodeMCU server was running. When you stop the server, that text file will vanish also.

  3. C Satish kumar

    hlo,
    i have run the code which u have mentioned in the tutorial above,but i m getting the error "stray '\302' in program" so can u tell how to resolve it.do i need to do changes in it???

    • Hi,

      The code compiles on mine with no error. I think there is a stray character on the code you pasted. Try pressing the "toggle plain code" on the upper right of the code above and copy-paste that to your IDE.

  4. Hi,

    Fantastic tuttorial but i found some problem when i try to read 3 sensor using ajax method for my final project.Can you help me with my problem read 3 sensor using ajax method?

    Thank You

    • Hi,

      You can change my example so that the variable "data" is a string that contains three sensor readings. For example,

      data = "Temperature: " + (String)temp_c + " ℃Humidity: " + (String)humidity + " %Pressure: " + (String)pressure + " Pa";

      Here, temperature, humidity and pressure is displayed. Again, change the data variable in my original code from double to string and also remove the (String) modifier in line 33.

      Feel free to ask me questions if there's something you don't understand. Good luck!

      • Hi,

        I try change your example according to your explanation, but I got this error:

        invalid operands of types 'const char [14]' and 'const char [14]' to binary 'operator+'

        For this:

        data = "Air Quality: " + (String)T+ "Temperature: " + (String)T + "Ax: " + (String)Ax + "Ay: " + (String)Ay + "Az: " + (String)Az + "Gx: " + (String)Gx +"Gy: " + (String)Gy +"Gz: " + (String)Gz +;

        I use MQ2 gas sensor and MPU6050 which can detect temperature, acceleration and rotational movement (gyro meter).
        Can you help me to solve this problem?

        Thank you.

  5. hey nice tutorial it worked. But can you tell me how can i decrease the time of update of data on server.

    • Hi,

      You can change the time interval in the setInterval() JS function. In line 39 of my sketch, change 1000 (in milliseconds) to whichever value that suits you.

  6. Hi,
    very great serie of tutorials ; every sketchs are running without porblem ! many thanks for all of theses, they are very helpfull for my project
    My next problem will be to integer a picture on the web page ..

  7. Hi! Thanks for the tutorial.
    I'm trying to do similar, but for show "Voltage" and "Current".
    The problem is that Voltage and Current values I get from SPI communication with Arduino inside of
    void loop(void){} function.

    How can I get this values and show?

  8. How it can do for 2 analog sensors

Leave a Reply

Your email address will not be published. Required fields are marked *