Ethercard library+ Ajax = HOW

Hi, first i have to admit that I don’t know jack about Ajax programming, but somehow I came across the advantage of using Ajax as the pages on the web server don’t have to reload everytime anything change.
Then I decided to give it a go, but all tutorials I can dig are using Ethernet library.

Here is the basic Ethercard library setup, simply nothing but a text.

#include <EtherCard.h>


static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31};
static byte myip[] = {192,168,1,177};
byte Ethernet::buffer[700];


void setup () {
 
  Serial.begin(57600);
  Serial.println("Demo");

  if (ether.begin(sizeof Ethernet::buffer, mymac) == 0)
    Serial.println( "Failed to access Ethernet controller");
  ether.staticSetup(myip);

  if(!ether.staticSetup(myip))
    Serial.println("Failed to set IP address");

}
  
void loop() {
 
  word len = ether.packetReceive();
  word pos = ether.packetLoop(len);
  
  if(pos) {
        
  
    BufferFiller bfill = ether.tcpOffset();
    bfill.emit_p(PSTR(
      "HTTP/1.0 200 OK\r\n"
      "Content-Type: text/html\r\nPragma: no-cache\r\n\r\n"
      "<html>"
      "<head><title>Arduino WebServer Test</title></head>"
      "<h1>Test</h1>"
      "</html>"      
      ));
      ether.httpServerReply(bfill.position());
    }
}

To start with some basics, I need to how to insert Ajax codes to create a sample button that changes text upon pushing, here are the ajax codes.

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

Obviously, copy and paste the ajax codes into the main codes doesn’t work, it didn’t compile. Please can anyone tell me how to alter the codes so that I can use it properly on ethercard library?

Web pages are nothing but text containing commands that are interpreted by the browser and turned into the web pages that we see. So, to insert Ajax commands you need to send them as text, just like the other text that the example sends.

I would suggest that you use a simple editor, Notepad will do, to create the web page that you need, including the Ajax commands and test it before trying to get the Arduino to send the same text. That way you are only fighting one battle at a time.