ESP8266 Community Forum

Posted: **Wed Jun 27, 2018 8:17 am**

Hi.
I have a simple server that sends an AJAX request when a button is clicked.
Everything works but I am getting multiple requests:

Code: Select all

String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
 
String html_1 = R"=====(
<!DOCTYPE html>
<html>
 <head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
  <meta charset='utf-8'>
  <style>
    body {font-size:140%;} 
    #main {display: table; margin: auto;  padding: 0 10px 0 10px; } 
    h2 {text-align:center; } 
    #LED_button { padding:10px 10px 10px 10px; width:100%;  background-color: #4CAF50; font-size: 120%;}
    </style>
 
  <script>
    function switchLED() 
  {
       var button_text = document.getElementById("LED_button").value;
     if (button_text=="Turn on the LED")
     {
       document.getElementById("LED_button").value = "Turn off the LED";
       ajaxLoad('LEDON'); 
     }
     else
     {
       document.getElementById("LED_button").value = "Turn on the LED";
       ajaxLoad('LEDOFF');
     }
    }
 
var ajaxRequest = null;
if (window.XMLHttpRequest)  { ajaxRequest =new XMLHttpRequest(); }
else                        { ajaxRequest =new ActiveXObject("Microsoft.XMLHTTP"); }
 
 
function ajaxLoad(ajaxURL)
{
  if(!ajaxRequest){ alert("AJAX is not supported."); return; }
 
  ajaxRequest.open("GET",ajaxURL,true);
  ajaxRequest.onreadystatechange = function()
  {
    if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
    {
      var ajaxResult = ajaxRequest.responseText;
    }
  }
  ajaxRequest.send();
}
 
</script>
 
  <title>LED Control</title>
 </head>
 
 <body>
  <div id='main'>
   <h2>LED Control</h2>
   <input type="button" id = "LED_button" onclick="switchLED()" value="Turn on the LED"  /> 
  </div>
 
 </body>
</html>
)=====";
 
 
#include <ESP8266WiFi.h> 
#include <ESP8266WebServer.h>
#include <WiFiManager.h>
#include <ESP8266mDNS.h>
 
WiFiServer server(80);
 
String request = "";
int LED_Pin = D1;
 
void setup() 
{
      pinMode(LED_Pin, OUTPUT); 
 
      Serial.begin(115200);
      delay(500);
      Serial.println(F("Serial started at 115200"));
      Serial.println();
 
      WiFiManager wifiManager;
 
      WiFi.setAutoReconnect(true);
      wifiManager.autoConnect("ESP8266","password");

      // if you get here you have connected to the WiFi
      Serial.println("Connected.");
 
      if (!MDNS.begin("esp8266"))   {  Serial.println("Error setting up MDNS responder!");  }
      else                                       {  Serial.println("mDNS responder started");  }
 
      // start a server
      server.begin();
      Serial.println("Server started");
 
} // void setup()
  
 
void loop() 
{
    WiFiClient client = server.available();
 
    if (client)
    {
          // Read the first line of the request
          request = client.readStringUntil('\r');
 
          Serial.print("request: ");  Serial.println(request);
 
          // If we have a control code we just need to switch the LED. Do not need to resend the HTML
          if         ( request.indexOf("LEDON") > 0 )   { digitalWrite(LED_Pin, HIGH);    }
          else if  ( request.indexOf("LEDOFF") > 0 ) { digitalWrite(LED_Pin, LOW);    }
 
          // No control code (or unknown code) so send the HTML
          else
          {
            client.flush();
            client.print( header );
            client.print( html_1 );    
            delay(5);          
          }
 
         // The client will actually be disconnected when the function returns and the client object is detroyed
    }
 
 
} // void loop()

Serial monitor:

Code: Select all

request: GET / HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDON HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1
request: GET /LEDOFF HTTP/1.1

Each button click results in up to 10 requests being printed.

Posted: **Wed Jun 27, 2018 9:01 am**

This seems to be an issue with Android Firefox. If I use chrome it works as expected.

Or, am I doing something wrong and Firefox is correct and chrome is ignoring the issue?

ESP8266 Community Forum

AJAX request. Getting multiple requests.

AJAX request. Getting multiple requests.

Re: AJAX request. Getting multiple requests.