Thanks for your interest in this topic. Here is my code:
#include <SPI.h>
#include <EthernetENC.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x47 };
IPAddress ip(192, 168, 1, 71);
EthernetServer server(6501);
String HTTP_req;
int i = 0;
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
Serial.begin(9600);
}
void loop()
{
EthernetClient client = server.available();
if (client)
{
boolean currentLineIsBlank = true;
while (client.connected())
{
if (client.available())
{
char c = client.read();
HTTP_req += c;
if (c == '\n' && currentLineIsBlank)
{
client.print(F("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nConnection: keep-alive\r\n\r\n"));
if (HTTP_req.indexOf("ajax_switch") > -1)
{
GetSwitchState(client);
}
else
{
client.print(F("<!DOCTYPE html><html><head><title>Arduino Web Page</title <script>"));
client.println("function GetSwitchState() {");
client.println("nocache = \"&nocache=\"\+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("document.getElementById(\"switch_txt\")\.innerHTML = this.responseText;");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_switch\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('GetSwitchState()', 2000);");
client.println("}");
client.print(F("</script></head><body onload=\"GetSwitchState()\"><h1>Arduino AJAX Switch Status</h1><div id=\"switch_txt\">Starting...</div></body></html>"));
}
Serial.print(HTTP_req);
HTTP_req = "";
break;
}
if (c == '\n')
{
currentLineIsBlank = true;
}
else if (c != '\r')
{
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
}
}
void GetSwitchState(EthernetClient cl)
{
i++;
cl.println(i);
}
On each Ajax request the value of "i" should increase by 1 and be refreshed on the webpage. Now I will repeat myself a bit, but hopefully things will be clearer. Like I wrote before, this works after reset. On reset the page is loaded and then Ajax request are issued in regular intervals and the value of "i" is updated and displayed.. Again, the Ajax request looks like this:
GET /ajax_switch&nocache=724877.1695980653 HTTP/1.1
Host: 192.168.1.71:6501
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Accept: */ *
Referer: http://192.168.1.71:6501/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,it;q=0.8,hr;q=0.7
Now, here is what happens when I refresh the page in the browser. From the serial monitor:
GET / HTTP/1.1
Host: 192.168.1.71:6501
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/ *;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-LanGET /ajax_switch&nocache=645568.7831047487 HTTP/1.1
Host: 192.168.1.71:6501
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Accept: */ *
Referer: http://192.168.1.71:6501/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,it;q=0.8,hr;q=0.7
GET /favicon.ico HTTP/1.1
Host: 192.168.1.71:6501
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/ *,*/ *;q=0.8
Referer: http://192.168.1.71:6501/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,it;q=0.8,hr;q=0.7
Note: I inserted some spaces between / and * so they don't look like comments when formatted. Anyway, what you asked before is not a copy-paste error. The request from the browser on refresh is somehow "interrupted" by an Ajax request. It seems to jump right in the middle of it:
...
Accept-Encoding: gzip, deflate
Accept-LanGET /ajax_switch&nocache=645568.7831047487 HTTP/1.1
...
I've been trying to rearrange the code, adding some if-else conditions to differentiate between browser and Ajax requests, but to no avail. The result is always this:
Developer tools:
Indeed, I get the large text twice and the dynamic text doesn't work, it's stuck at the initial text. It seems that the Ajax request that somehow jumps into the browser request on refresh is a problem. I even chose a rather long time between Ajax requests (5 seconds) to make sure that I refresh between them, not at the same time.
What also puzzles me is that I see no difference in the code between me and several, apparently successful, examples online.
