Buon pomeriggio,
sto imparando a creare un server web con Arduino con una pagina web usando Ajax per l'aggiornamento asincrono, ma nel momento in cui eseguo un aggiornamento forzato della pagina non carica la situazione precedente. Come posso fare?
Allego i miei file:
<!DOCTYPE html>
<html>
<head>
<title>Arduino Ajax LED Button Control</title>
<script>
strLED1 = "";
strLED2 = "";
strLED3 = "";
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) {
// XML file received - contains analog values, switch values and LED states
var count;
// LED 1
if (this.responseXML.getElementsByTagName('LED').childNodes[0].nodeValue === "checked") {
document.LED_form.LED1.checked = true;
}
else {
document.LED_form.LED1.checked = false;
}
// LED 2
if (this.responseXML.getElementsByTagName('LED').childNodes[1].nodeValue === "checked") {
document.LED_form.LED2.checked = true;
}
else {
document.LED_form.LED2.checked = false;
}
// LED 3
if (this.responseXML.getElementsByTagName('LED').childNodes[2].nodeValue === "checked") {
document.LED_form.LED3.checked = true;
}
else {
document.LED_form.LED3.checked = false;
}
// Switch 1
document.switch = this.responseXML.getElementsByTagName('Switch1').childNodes[0].nodeValue;
}
}
}
}
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + nocache + "&ajax_switch", true);
request.send(null);
setTimeout('GetArduinoIO()', 1000);
strLED1 = "";
strLED2 = "";
strLED3 = "";
}
// service LEDs when checkbox checked/unchecked
function GetCheck()
{
if (LED_form.LED1.checked) {
strLED1 = "&LED1=1";
}
else {
strLED1 = "&LED1=0";
}
if (LED_form.LED2.checked) {
strLED2 = "&LED2=1";
}
else {
strLED2 = "&LED2=0";
}
if (LED_form.LED3.checked) {
strLED3 = "&LED3=1";
}
else {
strLED3 = "&LED3=0";
}
}
</script>
<style>
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 120px;
}
h1 {
font-size: 120%;
color: blue;
margin: 0 0 10px 0;
}
h2 {
font-size: 85%;
color: #5734E6;
margin: 5px 0 5px 0;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
</style>
</head>
<body onload="GetArduinoIO()">
<h1>Arduino Ajax LED Button Control</h1>
<div class="IO_box">
<h2>LED Using Checkbox</h2>
<form id="check_LEDs" name="LED_form">
<input type="checkbox" name="LED1" value="0" onclick="GetCheck()" />LED 1 (D6)
<input type="checkbox" name="LED2" value="0" onclick="GetCheck()" />LED 2 (D7)
<input type="checkbox" name="LED3" value="0" onclick="GetCheck()" />LED 3 (D7)
</form>
<p name="switch"></p>
</div>
</body>
</html>
Working.ino (9.66 KB)