Buenas. Yo hice lo que estas queriendo hacer y se por experiencia la información y desinforamcion sobre estos temas. Como ya habras investigado bastante te mando el código y la pagina que hice yo. Si tenes alguna pregunta especifica no dudes en consultarme.
A mi me sirvieron mucho unas aplicaciones de Android que enseñan estos protocolos XML Ajax HTML.
Pagina web con ajax alojada en SD de Ethernet
CODIGO ARDUINO (hay códigos que son para comparación de tiempo calendario, que no tienen q ver con la web y también lee el estado de variables de un archivo VAR tambien alojado en la SD)
#include <Time.h>
#include <SD.h>
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
IPAddress ip(192, 168, 1, 77);
EthernetServer servidor(80);
IPAddress timeServer(132, 163, 4, 101); // time-a.timefreq.bldrdoc.gov
const int LED1=0;
String url;
byte led1;
File varfile;
File webfile;
EthernetUDP Udp;
void setup() {
pinMode(13, OUTPUT);
pinMode(53, OUTPUT);
Ethernet.begin(mac, ip);
servidor.begin();
Udp.begin(8888);
SD.begin(4);
varfile = SD.open("var/var.txt");
if (varfile) {
varfile.seek(LED1);
led1 =(varfile.read());
varfile.close();
}
}
void loop() {
EthernetClient cliente = servidor.available();
if (cliente) {
while (cliente.connected()) {
if (cliente.available()) {
char c = cliente.read();//Leemos la petición HTTP carácter por carácter
url.concat(c);//Unimos el String 'url' con la petición HTTP (c). De esta manera convertimos la petición HTTP a un String
if (url.substring(url.indexOf("led1=")) == "led1=off") {led1 = 0;guardar_variable(LED1,led1);}
if (url.substring(url.indexOf("led1=")) == "led1=on") {led1 = 1;guardar_variable(LED1,led1);}
if (url.substring(url.indexOf("led1=")) == "led1=par") {led1 = 2;guardar_variable(LED1,led1);}
if (url.substring(url.indexOf("act_hora"))=="act_hora") {setSyncProvider(getNtpTime);} //sincroniza la hora con servidor NTP
if (c == '\n') {
cliente.println("HTTP/1.1 200 OK");
if (url.indexOf("req") > 0) {
cliente.println("Content-Type: text/xml");
cliente.println("Connection: keep-alive");
cliente.println();//Página Web en XML
XML_response(cliente);
}
else {
cliente.println("Content-Type: text/html");
cliente.println("Connection: keep-alive");
cliente.println(); //Página Web en HTML
// Abrimos la página de la SD y la enviamos
webfile = SD.open("web/ajax1.htm");
if (webfile) {
while (webfile.available()) {
cliente.write(webfile.read());
}
webfile.close();
}
}
cliente.stop();
url = "";
}
}
}
}
if (led1 == 0) {digitalWrite(13, LOW);}
if (led1 == 1) {digitalWrite(13, HIGH);}
if (led1 == 2) {digitalWrite(13, HIGH);delay(100);digitalWrite(13, LOW);delay(100);}
}
void XML_response(EthernetClient cl) {
cl.print("<?xml version = \"1.0\" ?>");
cl.print("<inputs>");
cl.print("<LED>");
if (led1 == 0) {cl.print("off");}
if (led1 == 1) {cl.print("on");}
if (led1 == 2) {cl.print("parpadeando");}
cl.println("</LED>");
cl.print("<DATE>");
if (hour()<10){cl.print("0");}
cl.print(hour());
cl.print(":");
if (minute()<10){cl.print("0");}
cl.print(minute());
cl.print(":");
if (second()<10){cl.print("0");}
cl.print(second());
cl.print(" ");
cl.print(dayStr(weekday()));
cl.print(" ");
if (day()<10){cl.print("0");}
cl.print(day());
cl.print("/");
if (month()<10){cl.print("0");}
cl.print(month());
cl.print("/");
cl.println(year());
cl.println("</DATE>");
cl.print("</inputs>");
}
void guardar_variable(int linea,int variable){
varfile = SD.open("var/var.txt", FILE_WRITE);
if (varfile) {
varfile.seek(linea);
varfile.write(variable);
varfile.close();
}
}
/*-------- NTP code ----------*/
byte packetBuffer[48];
time_t getNtpTime()//carga la hora al arduino
{
while (Udp.parsePacket() > 0) ;
sendNTPpacket(timeServer);
uint32_t beginWait = millis();
while (millis() - beginWait < 1500) {
int size = Udp.parsePacket();
if (size >= 48) {
Udp.read(packetBuffer, 48);
unsigned long secsSince1900;
secsSince1900 = (unsigned long)packetBuffer[40] << 24;
secsSince1900 |= (unsigned long)packetBuffer[41] << 16;
secsSince1900 |= (unsigned long)packetBuffer[42] << 8;
secsSince1900 |= (unsigned long)packetBuffer[43];
return secsSince1900 - 2208988800UL + (-3) * SECS_PER_HOUR;//(-3)=gmt (argentina)
}
}
return 0;
}
// send an NTP request to the time server at the given address
void sendNTPpacket(IPAddress &address)
{
memset(packetBuffer, 0, 48);
packetBuffer[0] = 0b11100011;
packetBuffer[1] = 0;
packetBuffer[2] = 6;
packetBuffer[3] = 0xEC;
packetBuffer[12] = 49;
packetBuffer[13] = 0x4E;
packetBuffer[14] = 49;
packetBuffer[15] = 52;
Udp.beginPacket(address, 123);
Udp.write(packetBuffer, 48);
Udp.endPacket();
}
PAGINA WEB ALOJADA EN SD.
<title>Arduino Ajax I/O</title>
<script>
function GetArduinoIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "on") {
document.getElementById("LED").innerHTML = "LED is ON";
}
if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "off"){
document.getElementById("LED").innerHTML = "LED is OFF";
}
if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "parpadeando"){
document.getElementById("LED").innerHTML = "LED is PARPADEANDO ";
}
document.getElementById("DATE").innerHTML =this.responseXML.getElementsByTagName('DATE')[0].childNodes[0].nodeValue;
}
}
}
}
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 1000);
}
</script>
</head>
<body width=100% height=100% onload="GetArduinoIO()">
<center>
<h1>CONTROL DE LAMPARA</h1>
<p id="DATE">...</p>
<p id="LED">...</p>
<input type=submit value=ON style=width:200px;height:75px onClick=location.href='./?LED=T'>
<input type=submit value=OFF style=width:200px;height:75px onClick=location.href='./?LED=F'>
<input type=submit value=PARPADEO style=width:200px;height:75px onClick=location.href='./?LED=P'>
<input type=submit value=ACT.HORA style=width:200px;height:75px onClick=location.href='./?LED=S'>
</center>
</body>
</body>
</html>