microAJAX для Ардуино

OlegM
Offline
Зарегистрирован: 14.06.2016

пустые переменные зачем передавать, тип d1=& этого ненадо, там по коду много вопросов, но шлифуй и потом поймешь что лишнее

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Пустая, потому что в php скрипте проверка если пусто то не записывать

OlegM
Offline
Зарегистрирован: 14.06.2016

в пхп проверяет и записывает где не пусто, а если пусто - оставляет прежнее.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
if (di=='diod1'){
x.open("GET", "text.php?di1="+st, true);
x.send(null);
}else{
x.open("GET", "text.php?di2="+st, true);
x.send(null);
}

Вот так мождно наверное

OlegM
Offline
Зарегистрирован: 14.06.2016

да, так, но если передать ид хоть вася, то запишет в д2, т.е 5 строку сделай else if, а да и r передавай, а то на кеш можешь нарватся.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

А смысл делать проверку, если я точно значю что будет передаваться, и ничего лишнего туда не передать, всё ж будет только дома, в домашней сети

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Подскажите что можно оптимизировать,исправить.

setTimeout("dR()"1000);

При значении менее "500" скрипт тормозит.

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>Кнопки</title>
<script>
var lam1;
var lam2;
var invla1;
var invla2;
var o=new XMLHttpRequest();
var x = new XMLHttpRequest();
//Начало.Приём.

function dR() {
o.open("GET","temp.txt?r="+Math.random(),1);
o.onload=function(){
var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g);
for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {};
lam1 = document.getElementById("di1").innerText;//Загружаем из файла состояние (true/false) первого диода.
lam2 = document.getElementById("di2").innerText;//Загружаем из файла состояние (true/false) второго диода.
document.getElementById("la1").src=lam1+'.png';//Картинка первого диода(лампочка).
document.getElementById("la2").src=lam2+'.png';//Картинка второго диода(лампочка).
//Создаём картинку первой кнопки, инвертировав её значение(если true, при нажатии будет false,и наоборот)
//Создаём картинку второй кнопки, инвертировав её значение(если true, при нажатии будет false,и наоборот)
invla1 = (lam1=='true') ? false : true;
invla2 = (lam2=='true') ? false : true;
document.getElementById('kn1').innerHTML='<img src="k'+lam1+'.png" onclick="onoff(\'diod1\','+invla1+',\'kn1\')">';
document.getElementById('kn2').innerHTML='<img src="k'+lam2+'.png" onclick="onoff(\'diod2\','+invla2+',\'kn2\')">';
setTimeout("dR()", 1000);
}
o.send();
}
//Конец.Приём.

//Начало. Записываем состяние кнопок.	
function onoff(di,st,vb) {
document.getElementById(di).innerHTML=st;//Записываем состояние нажатой кнопки в блок 'Клиент'
//Инвертируем состояние нажатой кнопки
document.getElementById(vb).innerHTML='<img src="k'+st+'.png" onclick="onoff(\''+di+'\','+!st+',\''+vb+'\')">';
//Записываем состояние наждатой кнопки в temp.txt
if (di=='diod1'){
x.open("GET", "text.php?di1="+st+"&r="+Math.random(), true);
x.send(null);
}else{
x.open("GET", "text.php?di2="+st+"&r="+Math.random(), true);
x.send(null);
}
}
//Конец. Функция записи состояния кнопок	


</script>
</head>
<body onload="dR()">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" width="70">Свет в</br>зале</td>
<td rowspan="2" width="85"><span id="kn1"></span></td>
<td rowspan="2" width="37"><img src="false.png" id="la1"></td>
<td width="100">Клиент:<span id="diod1"></span></td>
</tr>
<tr><td>Сервер:<span id="di1"></span></td></tr>
<tr>
<td colspan="4">&nbsp;</td>
</tr>

<tr>
<td rowspan="2" width="70">Свет на</br>кухне</td>
<td rowspan="2" width="85"><span id="kn2"></span></td>
<td rowspan="2" width="37"><img src="false.png" id="la2"></td>
<td width="100">Клиент:<span id="diod2"></span></td>
</tr>
<tr><td>Сервер:<span id="di2"></span></td></tr>
</table>




</body>
</html>

text.php

<?php
$arr = file('temp.txt');
if(!empty($_GET['di1'])) $arr[0] = 'di1=' . $_GET['di1']  . "\r\n";
if(!empty($_GET['di2'])) $arr[1] = 'di2=' . $_GET['di2']  . "\r\n";
file_put_contents('temp.txt', join('', $arr));
?>

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Ещё вопрос, что я не так сделал?

function onoff(di,st,vb) {
document.getElementById(di).innerHTML=st;//Записываем состояние нажатой кнопки в блок 'Клиент'
//Инвертируем состояние нажатой кнопки
document.getElementById(vb).innerHTML='<img src="k'+st+'.png" onclick="onoff(\''+di+'\','+!st+',\''+vb+'\')">';
//Записываем состояние наждатой кнопки в temp.txt
if (di=='diod1'){
x.open("GET", "h t t p://192.168.1.36/text.php?di1="+st+"&ip=kn1&r="+Math.random(), true);
x.setRequestHeader("Origin:", "h t t p://192.168.1.36/");
x.send(null);
}else{
x.open("GET", "h t t p://192.168.1.36/text.php?di2="+st+"&ip=kn2&r="+Math.random(), true);
x.setRequestHeader("Origin:", "h t t p://192.168.1.36/");

x.send(null);
}
}

 

<?php
header("HTTP/1.0 200 OK");
header("Content-Type:text/html; charset=UTF-8");
header("Access-Control-Allow-Origin:h t t p://192.168.1.36/");

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Здравствуйте. Подскажите пожалуйста.

 

<script>
var yyy= 2000;
var o=new XMLHttpRequest();
function dR() {
o.open("GET","text.txt?r="+Math.random(),1);
o.onload=function(){
var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g);
for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {};
setTimeout("dR()", 1000);
gaugeP1S.value = document.getElementById("ob").innerText;
yyy =gaugeP1S.value;
console.log(yyy);//Выводит всё как надо, значение из text.txt
//return yyy;
}
o.send();
}
	
alert (yyy); //Выводит 2000, а не число из функции

</script>

<font color="#FFFFFF"><span id="ob">1000</span></font>

 

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Так она позже получает значение. Эта функция - обработчик события load (данные пришли с сервера). Когда случается событие отрабатывают строки с 7 по 16 и там у Вас всё правильно. А строка 18 работает сразу, т.е. ещё до того, как данные пришли с сервера.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Суть понял, а как реализовать нет.

Voodoo Doll
Voodoo Doll аватар
Offline
Зарегистрирован: 18.09.2016

alert() внутрь функции переселить же.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Это же не весь код, yyy используется ниже по коду.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
<!doctype htm>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #000000
    }</style>
</head>
<body onload="dR()">
<canvas id="gauge-ob"></canvas>

<script>
var yyy =2500;

var o=new XMLHttpRequest();
function dR() {
		o.open("GET","text.txt?r="+Math.random(),1);
o.onload=function(){
			var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g);
			for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {};
			setTimeout("dR()", 3000);
			gaugeP1S.value = document.getElementById("ob").innerText;
yyy  = document.getElementById("ob").innerText;
console.log("y="+yyy);
		}
		o.send();
	}
 console.log("y="+yyy);

var gaugeP1S = new RadialGauge({
    renderTo: 'gauge-ob',
    width: 400,
    height: 400,
    units: 'Об/мин',
    minValue: 0,
    maxValue: 6000,
    majorTicks: [
        '0',
        '1000',
        '2000',
        '3000',
        '4000',
        '5000',
        '6000',
    ],
    minorTicks: 10,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights  : [
      
  { from : 0,  to : yyy, color : 'rgba(255, 0, 0, 0.3)' },

    ],
    valueInt: 3,
    valueDec: 0,
    colorPlate: "#000000",
    colorMajorTicks: "#FF0000",
    colorMinorTicks: "#FF0000",
    colorTitle: "#FFFFFF",
    colorUnits: "#FFFFFF",
    colorNumbers: "#FFFFFF",
    valueBox: true,
       colorValueText: "#FFFFFF",
    colorValueBoxRect: "#000000",
    colorValueBoxRectEnd: "#000000",
    colorValueBoxBackground: "#000000",
    colorValueBoxShadow: false,
    colorValueTextShadow: false,
    colorNeedleShadowUp: true,
    colorNeedleShadowDown: false,
    colorNeedle: "#FF0000",
    colorNeedleEnd: "#FF0000",
    colorNeedleCircleOuter: "#FF0000",
    colorNeedleCircleOuterEnd: "#FF0000",
    borderShadowWidth: 0,
    borders: 0,
    borderInnerWidth: 0,
    borderMiddleWidth: 0,
    borderOuterWidth: 5,
    colorBorderOuter: "#FF0000",
    colorBorderOuterEnd: "#FF0000",
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "dequint",
    fontNumbers: "Verdana",
    fontTitle: "Verdana",
    fontUnits: "Verdana",
    fontValue: "Led",
    fontValueStyle: 'italic',
    fontNumbersSize: 15,
    fontNumbersStyle: 'italic',
    fontNumbersWeight: 'bold',
    fontTitleSize: 24,
    fontUnitsSize: 22,
    fontValueSize: 50,
    animatedValue: false
});
gaugeP1S.draw();
</script>
<font color="#FFFFFF"><span id="ob">1000</span></font>

</body>
</html>

 

Voodoo Doll
Voodoo Doll аватар
Offline
Зарегистрирован: 18.09.2016

Ммм, щас бы вызовы асинхронных процессов вне функций писать, найс чё. Ну в общем расклад такой, в подключаемой мной версии gauge.js не существует функции RadialGauge(), и выяснять, как заставить работать эту срань, мне как-то впадлу. Вам ЕвгенийП уже сказал, что ваш вызов происходит одновременно с вызовом запроса, а запрос это растянутый во времени процесс, там анонимную функцию у запроса видно не? ладна, выделю: onload=function(), оно какбе намекает. Щас.

Вот:

Горела жопа от различия версий у меня знатно, так как было потрачено часа 2; но так и быть, расскажу что с этим делать. Объясним это как-нибудь скромно, вроде "сегодня у моей богоподобной, наипиздейшей персоны имеется её особое настроение помогать нуждающимся". Я надеюсь, что оно всё-таки ясно, что работа с данными (работа это всмысле использование значения из yyy) должна делаться после запроса, внутри функции обработчика onload=function(). Действие здесь только одно, gaugeP1S.draw(), но ещё есть конструктор, у конструктора в скобках JSON, содержащий свойства. Конструктор, будем так говорить, запускается от корневого процесса, т. к. перед его вызовом нет никаких имён и точки, и он вне каких-то функций. Значит как страница создастся, так JS и будет ломиться его выполнять, моментально. Ессьсессьно, в то время yyy ещё будет равно undefined. Делаем следующее.

Способ 1. Перед 34й строкой пишем:

function xxx(){

после 107й строки пишем

}

Перед 29й, то есть в последнюю очередь, внутри обработчика, вызываем:

xxx();

Способ 2. Всё то же самое, но без функции:

- вырезаем строки 34...107 в буфер;

- перед 29й строкой вставляем их из буфера.

Сорян что малость резко, я это любя. Так то я стараюсь не агриться, но js выбесил. Мамке автора... а ладно, нахер надо...

Всем всего.

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Voodoo Doll пишет:

js выбесил

Да, ладно Вам! Классный язык! Я Вам точно говорю, я вообще как раз по языкам узкий специалист - это моя работа.

JS писали высококлассные язычники, которых пинали отовсюду и не позволяли лезть своими лапами в приличные языки, а то мол напихаете продвинутых фич и всю производительность нам посадите. А тут эта группа получила заказ сделать простенький скриптовый язычок. Ну, уж ребята дорвались! Они воткнули в JS ВСЁ, что было в тот момент в языковой теории и от чего разработчики промышленных языков шарахались, как чёрт от ладана (типа  "невозожно эффективно реализовать", "слишком сложно и для реализации, и для восприятия" и т.п.). Так вот все эти крутейшие и сложнейшие навороты они впихнули в JS.

Там столько всего, чего тому же С++ или там Java и рядом не снилось - дух захватывает! Один только динамический полиморфизм чего стоит! Такого нет ни в одном распространённом языке. Это можно встретить только в специальных языках на которых работаем только мы - язычники (т.е. языки для внутренних научных разработок) и вот в JS. Из языков известных всем, он один такими фичами обладает.

Voodoo Doll
Voodoo Doll аватар
Offline
Зарегистрирован: 18.09.2016

ЕвгенийП, я не про сам JS а про ссаный фреймворк с этими стрелочными индикаторами. Хз, на невозножность воспроизвести проблему мне обычно плевать, но может в этот раз это было слишком для меня важно.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
<!doctype htm>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
<script src="h t t p : / /stanciya-skorpom.ru/gauge.min.js"></script>
    <style>body {
        padding: 0;
        margin: 0;
        background: #000000
    }</style>
</head>
<body onload="dR()">
<canvas id="gauge-ob"></canvas>

<script>
var yyy=1000;
var gaugeP1S;
var o=new XMLHttpRequest();
function dR() {
		o.open("GET","text.txt?r="+Math.random(),1);
o.onload=function(){
			var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g);
			for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {};
			setTimeout("dR()", 3000);
			gaugeP1S.value = document.getElementById("ob").innerText;
yyy  = document.getElementById("ob").innerText;
console.log("y="+yyy);

xxx();

		}
		o.send();
		
	}

 function xxx(){


var gaugeP1S = new RadialGauge({
    renderTo: 'gauge-ob',
    width: 400,
    height: 400,
    units: 'Об/мин',
    minValue: 0,
    maxValue: 6000,
    majorTicks: [
        '0',
        '1000',
        '2000',
        '3000',
        '4000',
        '5000',
        '6000',
    ],
    minorTicks: 10,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights  : [
      
  { from : 0,  to : yyy, color : 'rgba(255, 0, 0, 0.3)' },

    ],
    valueInt: 3,
    valueDec: 0,
    colorPlate: "#000000",
    colorMajorTicks: "#FF0000",
    colorMinorTicks: "#FF0000",
    colorTitle: "#FFFFFF",
    colorUnits: "#FFFFFF",
    colorNumbers: "#FFFFFF",
    valueBox: true,
       colorValueText: "#FFFFFF",
    colorValueBoxRect: "#000000",
    colorValueBoxRectEnd: "#000000",
    colorValueBoxBackground: "#000000",
    colorValueBoxShadow: false,
    colorValueTextShadow: false,
    colorNeedleShadowUp: true,
    colorNeedleShadowDown: false,
    colorNeedle: "#FF0000",
    colorNeedleEnd: "#FF0000",
    colorNeedleCircleOuter: "#FF0000",
    colorNeedleCircleOuterEnd: "#FF0000",
    borderShadowWidth: 0,
    borders: 0,
    borderInnerWidth: 0,
    borderMiddleWidth: 0,
    borderOuterWidth: 5,
    colorBorderOuter: "#FF0000",
    colorBorderOuterEnd: "#FF0000",
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "dequint",
    fontNumbers: "Verdana",
    fontTitle: "Verdana",
    fontUnits: "Verdana",
    fontValue: "Led",
    fontValueStyle: 'italic',
    fontNumbersSize: 15,
    fontNumbersStyle: 'italic',
    fontNumbersWeight: 'bold',
    fontTitleSize: 24,
    fontUnitsSize: 22,
    fontValueSize: 50,
    animatedValue: false
});
gaugeP1S.draw();
}

</script>
<font color="#FFFFFF"><span id="ob">1000</span></font>

</body>
</html>

Voodoo Doll

Спасибо за помощь, очень доступно всё XD

Я так уже делал, у меня ругань

issue-63.html:30 Uncaught TypeError: Cannot set property 'value' of undefined(…)o.onload @ issue-63.html:30

 

Voodoo Doll
Voodoo Doll аватар
Offline
Зарегистрирован: 18.09.2016

Вот что я думаю.

1. не <!doctype htm> а <!doctype html>, тег <font> устарел. Кстати, не background а background-color.

2. да и в общем HTML ужасен.

3. отступы ещё хлеще

4. сценарию нехер делать в документе, есть тег <head>

5. мы упустили из виду, что конструктор будет каждый раз создавать новый объект, то есть жрать память, поэтому у функции xxx() теперь будет запрет повторных запусков

6. функцию можно переименовать более понятно

7. запятая после последнего элемента в массиве - это ошибка

8. запятая после единственного объекта в массиве - тем более ошибка

9. ругань была потому что сценарий ломился изменить значение объекта до того как он создан.

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Gauge Test</title>
<script src="h t t p : / /stanciya-skorpom.ru/gauge.min.js"></script>
<script>
var yyy=1000;
var gaugeP1S;
var bDone_gauge_create=false;
var o=new XMLHttpRequest();
function dR(){
  o.open("GET","text.txt?r="+Math.random(),1);
  o.onload=function(){
    var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g);
    for(var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {};
    setTimeout("dR()", 3000);
    yyy=document.getElementById("ob").innerText;
    gauge_create();
    gaugeP1S.value=document.getElementById("ob").innerText;
  }
  o.send();
}
function gauge_create(){
if (bDone_gauge_create) return;
  bDone_gauge_create=true;
  gaugeP1S = new RadialGauge({
    renderTo: 'gauge-ob',
    width: 400,
    height: 400,
    units: 'Об/мин',
    minValue: 0,
    maxValue: 6000,
    majorTicks: [
        '0',
        '1000',
        '2000',
        '3000',
        '4000',
        '5000',
        '6000'],
    minorTicks: 10,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights: [{from: 0, to: yyy, color: 'rgba(255, 0, 0, 0.3)'}],
    valueInt: 3,
    valueDec: 0,
    colorPlate: "#000000",
    colorMajorTicks: "#FF0000",
    colorMinorTicks: "#FF0000",
    colorTitle: "#FFFFFF",
    colorUnits: "#FFFFFF",
    colorNumbers: "#FFFFFF",
    valueBox: true,
    colorValueText: "#FFFFFF",
    colorValueBoxRect: "#000000",
    colorValueBoxRectEnd: "#000000",
    colorValueBoxBackground: "#000000",
    colorValueBoxShadow: false,
    colorValueTextShadow: false,
    colorNeedleShadowUp: true,
    colorNeedleShadowDown: false,
    colorNeedle: "#FF0000",
    colorNeedleEnd: "#FF0000",
    colorNeedleCircleOuter: "#FF0000",
    colorNeedleCircleOuterEnd: "#FF0000",
    borderShadowWidth: 0,
    borders: 0,
    borderInnerWidth: 0,
    borderMiddleWidth: 0,
    borderOuterWidth: 5,
    colorBorderOuter: "#FF0000",
    colorBorderOuterEnd: "#FF0000",
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "dequint",
    fontNumbers: "Verdana",
    fontTitle: "Verdana",
    fontUnits: "Verdana",
    fontValue: "Led",
    fontValueStyle: 'italic',
    fontNumbersSize: 15,
    fontNumbersStyle: 'italic',
    fontNumbersWeight: 'bold',
    fontTitleSize: 24,
    fontUnitsSize: 22,
    fontValueSize: 50,
    animatedValue: false
  });
  gaugeP1S.draw();
}
</script>
<style>
body{
  padding: 0;
  margin: 0;
  background-color: #000000;
}
#ob{
  color: #ffffff;
}
</style>
</head>
<body onload="dR()">
<canvas id="gauge-ob"></canvas>
<span id="ob">1000</span>
</body>
</html>

В общем... да похер...

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Voodoo Doll, выражаю слова Благодарности. Работает как ча..круг со стрелкой,всё кажет.

Я только эффекта другого ожидал, думал что вот эта полоска будет двигаться вместе со стрелкой, а она прорисовывается только после обновления странички.

Voodoo Doll
Voodoo Doll аватар
Offline
Зарегистрирован: 18.09.2016

Sergeyevd пишет:
только после обновления странички

Доо, а почему тогда стоит мне изменить php файл в своем макете, который служит провайдером информации (аналог data.txt), стрелка тут же (ну не тут же, с интервалом 3 с) показывает новое положение? Проверяйте целостность функции таймера.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Стрелка да, кажет, так и было.

highlights: [{from: 0, to: yyy, color: 'rgba(255, 0, 0, 0.3)'}],

Вот эта полоска по кругу прорисовывается только после обновления странички.

ua6em
ua6em аватар
Offline
Зарегистрирован: 17.08.2016

Если бы вместе, вообще красиво было )))
 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Здравствуйте.

Снова нужна Ваша помощь.

Плата NodeMCU, пример вебсервера.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Demo</title>
  <script>
function on() {
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http:// 192.168.0.91/gpio/1', true);
xhr.setRequestHeader('Origin','http:// 192.168.0.39');
xhr.onload = function() {
document.getElementById("text").innerText=this.responseText;
}
xhr.onerror = function() {
document.getElementById("text").innerText=this.status;
}
xhr.send();
}

function off() {
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http:// 192.168.0.91/gpio/0', true);
xhr.setRequestHeader('Origin','http:// 192.168.0.39');
xhr.onload = function() {
document.getElementById("text").innerText=this.responseText;
}
xhr.onerror = function() {
document.getElementById("text").innerText=this.status;
}
xhr.send();
}
</script>
</head>
<body>
<button onclick="on()">On</button>
<button onclick="off()">Off</button> 
<div id="text">text</div>
</body>
</html>

Сервер отвечает
  String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nAccess-Control-Allow-Origin: *\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
  s += (val)?"high":"low";
  s += "</html>\n";

Консоль браузера выдаёт ошибку

Refused to set unsafe header "Origin"