Create A Simple ESP32 Weather Station With BME280

Don�t rely solely on smartphone weather apps or commercial weather stations that provide data from stations located miles away from you. Instead, with this IoT project, you can become your own weather forecaster!

This project uses the ESP32 as the control device, which easily connects to any existing WiFi network and creates a web server. When any connected device accesses this web server, the ESP32 retrieves temperature, humidity, barometric pressure, and altitude data from the BME280 sensor and displays it on the device�s web browser with a user-friendly interface. Excited? Let�s dive in!

BME280 Temperature, Humidity and Pressure Sensor

First, let�s briefly discuss the BME280 module.

The BME280 is a next-generation digital temperature, humidity, and pressure sensor, manufactured by Bosch. It serves as a successor to sensors such as the BMP180, BMP085, and BMP183.

BME280 Temperature Humidity Pressure Altitude Sensor Specifications

The BME280 module operates within a voltage range of 3.3V to 5V, making it ideal for interfacing with 3.3V microcontrollers like the ESP32.

The module features a simple two-wire I2C interface for communication. The default I2C address for the BME280 module is 0x76, but it can be easily modified to 0x77 following a simple procedure.

Wiring BME280 Sensor to ESP32

Connections are fairly simple. Begin by connecting the VIN pin on the BME280 module to the 3.3V output on the ESP32, and the GND pin to the ground.

Next, link the SCL pin on the BME280 module to the D22 pin (I2C clock) on the ESP32, and the SDA pin to the D21 pin (I2C data).

The following table lists the pin connections:

BME280 Sensor		ESP32
VCC		3.3V
GND		GND
SCL		D22
SDA		D21

The following diagram shows you how to wire everything.

Fritzing Wiring ESP32 BME280 Temperature Humidity Pressure Sensor

Preparing the Arduino IDE

There�s an add-on available for the Arduino IDE that enables you to program the ESP32 within the Arduino IDE. If you haven�t set it up yet, follow the tutorial below to prepare your Arduino IDE to work with the ESP32.

Tutorial of Programming ESP32 in Arduino IDE

Installing ESP32 Board in the Arduino IDE

There are several development platforms available for programming the ESP32. You can go with: Arduino IDE � intended for those who are familiar with ArduinoEspruino...

Installing Library For BME280

Communicating with a BME280 module can be a bit complex, but fortunately, the Adafruit BME280 Library was created to abstract away these complexities, allowing us to issue simple commands to read temperature, relative humidity, and barometric pressure data.

To install this library, go to Arduino IDE > Sketch > Include Library > Manage Libraries� Wait for the Library Manager to download the library index and update the list of installed libraries.

To find the library, filter your search by typing �bme280�. You should see a couple of entries. Look for Adafruit BME280 Library by Adafruit and click on that entry, then select Install.

Installing BME280 Library In Arduino IDE

It�s worth noting that the BME280 sensor library relies on the Adafruit Sensor support backend. In the library manager, search for Adafruit Unified Sensor and install it as well.

Adafruit Unified Sensor Library Installation

Displaying Temperature, Humidity, Pressure & Altitude On ESP32 Web Server

Now, let�s configure the ESP32 to operate in Station (STA) mode (connect to the existing WiFi network) and create a web server. This server will deliver web pages to any client connected to the existing network.

If you�re interested in learning how to create a web server with ESP32 in AP/STA mode, refer to this tutorial.

Creating Simple ESP32 Webserver in Arduino IDE using Access Point & Station mode

Create A Simple ESP32 Web Server In Arduino IDE

The ESP32, the newly released successor to the ESP8266, has been a rising star in IoT or WiFi-related projects. It�s a low-cost WiFi module that...

Before uploading the sketch, there is one essential modification you need to make. Update the following two variables with your network credentials. This ensures that the ESP32 can connect to the existing network.

const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

After making these changes, go ahead and try out the sketch.

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

WebServer server(80);             
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  bme.begin(0x76);   

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {
  server.handleClient();
}

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>ESP32 Weather Station</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP32 Weather Station</h1>\n";
  ptr +="<p>Temperature: ";
  ptr +=temperature;
  ptr +="&deg;C</p>";
  ptr +="<p>Humidity: ";
  ptr +=humidity;
  ptr +="%</p>";
  ptr +="<p>Pressure: ";
  ptr +=pressure;
  ptr +="hPa</p>";
  ptr +="<p>Altitude: ";
  ptr +=altitude;
  ptr +="m</p>";
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Accessing the Web Server

After uploading the sketch, open the Serial Monitor and set the baud rate to 115200. Then, press the EN button on the ESP32. It will display the dynamic IP address obtained from your router along with the �HTTP server started� message.

ESP32 Station Mode Web Server IP Address On Serial Monitor

Next, open a browser and navigate to the IP address displayed on the Serial Monitor. The ESP32 should serve a web page displaying temperature, humidity, pressure, and altitude data from the BME280 sensor.

Detailed Code Explanation

The sketch begins by including the following libraries:

WiFi.h: offers ESP32-specific WiFi methods we use to connect to the network.
WebServer.h: offers methods for setting up a server and handling incoming HTTP requests.

Wire.h: allows communication with any I2C device, not just the BME280.
Adafruit_BME280.h and Adafruit_Sensor.h: are hardware-specific libraries that handle lower-level functions.

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Next, an object of the sensor is created along with variables to store temperature, humidity, pressure, and altitude data.

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

Since we are configuring the ESP32 in Station (STA) mode, it will connect to the existing WiFi network. Therefore, we need to specify the network�s SSID and password. Then, we start the web server on port 80.

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

WebServer server(80);

Inside Setup() Function

In the setup() function, we configure our HTTP server.

First of all, we initialize serial communication with the PC and initialize the BME object using the begin() function. This function initializes the I2C interface with the given I2C address (0x76) and verifies the chip ID. It then resets the chip via a soft reset and waits for sensor calibration after wake-up.

Serial.begin(115200);
delay(100);

bme.begin(0x76);

The ESP32 then attempts to join the WiFi network using the WiFi.begin() function, which accepts the SSID (Network Name) and password as arguments.

Serial.println("Connecting to ");
Serial.println(ssid);

//connect to your local wi-fi network
WiFi.begin(ssid, password);

While the ESP32 attempts to connect to the network, we can check the connectivity status using the WiFi.status() function.

//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
}

Once the ESP32 is successfully connected to the network, the sketch prints the ESP32�s IP address to the Serial Monitor using the WiFi.localIP() method.

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

To handle incoming HTTP requests, we need to specify which code to execute when a URL is accessed. We use the server.on() method for this purpose. This method requires two parameters: the URL path and the name of the function to execute when that URL is accessed.

The code below indicates that when the server receives an HTTP request on the root (/) path, it triggers the handle_OnConnect function. Note that the specified URL is a relative path.

server.on("/", handle_OnConnect);

In case the server receives a request for a URL that wasn�t specified with server.on(), it should respond with an HTTP status 404 (Not Found) and a message for the user. For this purpose, we use server.onNotFound() method.

server.onNotFound(handle_NotFound);

Finally, to start our server, we call the begin() method on the server object.

server.begin();
Serial.println("HTTP server started");

Inside Loop() Function

To handle the actual incoming HTTP requests, we must invoke the handleClient() method on the server object.

server.handleClient();

Next, we need to create a function that we�ve associated with the root (/) URL using server.on.

At the beginning of this function, we retrieve the temperature, humidity, pressure, and altitude readings from the sensor. To respond to the HTTP request, we use the send() method. While this method can accept various arguments, its most basic form includes the HTTP response code, the content type, and the content itself.

In our case, we are sending the code 200 (one of the HTTP status codes), which corresponds to the OK response. We then specify the content type as �text/html.� Finally, we call the custom SendHTML() function, which generates a dynamic HTML page that contains the temperature, humidity, pressure, and altitude data.

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

Similarly, we need to create a function for handling the 404 Error page.

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

Displaying the HTML Web Page

The SendHTML() function is responsible for generating a web page whenever the ESP32 web server receives a request from a web client. This function accepts temperature, humidity, pressure, and altitude readings as parameters and returns HTML content in the form of a long string to the server.send() function discussed earlier.

Every HTML document begins with the <!DOCTYPE> declaration.

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html> <html>\n";

Next, the <meta> viewport element ensures that the web page is responsive across various browsers, while the title tag sets the page�s title.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP32 Weather Station</title>\n";

Styling the Web Page

Next, we use CSS to style the appearance of the web page. We select the Helvetica font and specify that the content be displayed as an inline-block, center-aligned.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

The code below changes the color, font, and margin around the body, H1, and p tags.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

Setting the Web Page Heading

Following this, we set the page header; you can change this text to whatever suits your application.

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP32 Weather Station</h1>\n";

Displaying Readings on Web Page

To dynamically display temperature, humidity, pressure, and altitude readings, we place these values within paragraph tags. To display the degree symbol, we use the HTML entity °.

ptr +="<p>Temperature: ";
ptr +=temperature;
ptr +="&deg;C</p>";
ptr +="<p>Humidity: ";
ptr +=humidity;
ptr +="%</p>";
ptr +="<p>Pressure: ";
ptr +=pressure;
ptr +="hPa</p>";
ptr +="<p>Altitude: ";
ptr +=altitude;
ptr +="m</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Styling Web Page to Look More Professional

Makers, like us, often don�t pay much attention to design, but with a bit of effort, we can make our web pages look more attractive and professional. The screenshot below provides a glimpse of what we aim to achieve.

BME280 Readings on ESP32 Web Server Professional Look

Isn�t it amazing? Without further delay, let�s add some style to our previous HTML page. Just replace the SendHTML() function in the previous sketch with the code provided below.

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP32 Weather Station</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP32 Weather Station</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

If you compare this function to the previous one, you will notice that they are similar except for these differences.

We�ve used the Google-commissioned Open Sans web font for our page. Note that without an active internet connection on the device, you won�t see the Google font as it�s loaded dynamically.

ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";

The icons used to represent temperature, humidity, pressure, and altitude readings are Scalable Vector Graphics (SVG) defined within <svg> tags. Creating SVG graphics doesn�t require any special programming skills. You can use the Canva SVG Editor to create graphics for your page. We have used these SVG icons.

Improvement to the Code � Auto Page Refresh

One improvement for our code is to refresh the page automatically to update sensor values. By adding a single meta tag to your HTML document, you can instruct the browser to reload the page at specified intervals.

<meta http-equiv="refresh" content="2" >

Place this code within the <head> tag of your document. This meta tag will instruct the browser to refresh the page every two seconds. Quite handy!

Dynamically load Sensor Data with AJAX

Refreshing a web page frequently may not be practical for heavy web pages. A more efficient approach is to use Asynchronous JavaScript and XML (AJAX) to request data from the server without the need to refresh the entire page.

The XMLHttpRequest object in JavaScript is commonly employed for AJAX requests on web pages. It performs silent GET requests to the server and updates elements on the page. AJAX is not a new technology or a separate language, just existing technologies used in new ways. Additionally, AJAX enables you to:

Request data from a server after the page has loaded
Receive data from a server after the page has loaded

Send data to a server in the background

Here�s the AJAX script we�ll be using. Place this script just before closing the <head> tag.

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

The script begins with the <script> tag, as the AJAX script is essentially JavaScript and needs to be enclosed in <script> tags. To repeatedly call a function, we�ll use the JavaScript setInterval() function, which requires two parameters: the function to execute and the time interval (in milliseconds) for its execution.

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";

The core of this script is the loadDoc() function, inside which an XMLHttpRequest() object is created. This object is used to request data from the web server.

ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";

The xhttp.onreadystatechange() function is called every time the readyState changes. The readyState property holds the status of the XMLHttpRequest, with values from 0 to 4 indicating various stages of the request process.

0: request not initialized

1: server connection established
2: request received
3: processing request

4: request finished and response is ready

The status property, on the other hand, indicates the status of the XMLHttpRequest object, taking one of these values:

200: �OK�

403: �Forbidden�
404: �Page not found�

When readyState is 4 and the status is 200, it signifies that the response is ready. At this point, the content of the <body> is updated.

ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
The HTTP request is then initiated via the open() and send() functions.
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";