AJAX microcontroller request – update the displayed data in background

If you use http server for displaying the data in your IOT projects using e.g.
ESP8266 or Arduino with an Ethernet shield take a look on AJAX request. The main advantage of an AJAX request is:
it runs in background and you will don’t need to refresh the website manually. First of all prepare on your
microcontroller an get output. In the following example we are going to return 3 values if the microcontroller
receives a get request on getvalues.cgi

The Output page, lets call it just output.html shall contain 3 ID-tagged fields with following ID’s:
value0,value1,value2.
Example hot to output the data:

Temperature:

Humidity:

Atmospheric pressure:

Your getvalues.cgi shall return 3 string values which are separated by “;”.

Request:
GET /getvalues.cgi?

Return:
21;54;997

Now you output.html will need following: include this javascript AJAX request script inside your HEAD-Tags:


This script is sending request to getvalues.cgi? separates the response into 3 Values
and changes the content of the id fields value1, value2, value3. The script makes also a
self call after 1500ms. To make a first run or in other words to initiate the script execution call this after your Tag:

Thats it, now you will be able to see auto-updated values.

Click to rate this post!
[Total: 1 Average: 5]

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.