25.03.2019, 10:04
|
Новичок на форуме
|
|
Регистрация: 25.03.2019
Сообщений: 8
|
|
checkbox на ajax
Всем доброго времени суток! Прошу сильно не пинать начинающего.. Бьюсь несколько дней над следующей задачей: Есть чекбокс на странице, который по клику отправляет свое состояние серверу, в виде 1= галка установлена, 0 = галка снята - function Ligntonoff() этим занимается. На сервере состояние чекбокса загоняется в переменную, далее переменная фигурирует в xml который скрипт читает каждую секунду( function handleServerResponse() ).Далее скрипт в зависимости от состояния фигурируемой переменной в xml устанавливает/снимает галку чекбокса. Все как бы работает,но,проблема в том что передача данных не мгновенная,и пока до xml дойдет текущее состояние чека,он меняет свое состояние на противоположное (так как в xml еще старые данные),после чего принимает правильное состояние. Пожалуйста,подскажите как можно обойти данную неприятность?
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Lignt_Control</title>
<SCRIPT>
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){ // Функция обращается к xml каждую секунду
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open('PUT','xml',true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send(null);
}
setTimeout('process()',1000);
}
var isResizeble = false;
function handleServerResponse(){ // Функция разбирает xml по тегам
if(xmlHttp.readyState==4 && xmlHttp.status==200){
xmlResponse=xmlHttp.responseXML;
xmldoc = xmlResponse.getElementsByTagName('timedatestring');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById("NTP_TimeDate").innerHTML = message;
xmldoc = xmlResponse.getElementsByTagName('uptimestring');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById("UptimeString").innerHTML = message;
xmldoc = xmlResponse.getElementsByTagName('set_sec'); // Имя тега set_sec
message = xmldoc[0].firstChild.nodeValue;
document.getElementById('Set_Sec').value=message; // Данные из тега передаются элементу Set_Sec по ID
xmldoc = xmlResponse.getElementsByTagName('set_zummer');
message = xmldoc[0].firstChild.nodeValue;
document.getElementById('Set_Zummer').value=message;
xmldoc = xmlResponse.getElementsByTagName('lignt_on_off');
message = xmldoc[0].firstChild.nodeValue;
if(message==true){ // Устанавливаем / снимаем галочку чекбокса в зависимости от принятых данных с сервера
document.getElementById('checkbox').checked = true;
}
if(message==false){
document.getElementById('checkbox').checked = false;
}
}
}
function Setsec(){
znachenie=prompt('Введите число от 1 до 600');
if(znachenie<=0 || znachenie>=600){
alert('Введите число от 1 до 600 !!!');
}else{
server = "/Setsec?state=" + znachenie;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();
}
}
function Setzummer(){
znachenie=prompt('Введите число от 0 до 100');
if(znachenie >= 100){
alert('Введите число от 0 до 100 !!!');
}else{
server = "/Setzummer?state=" + znachenie;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();
}
}
function Ligntonoff() { // Отправка состояния чекбокса на сервер
var ch1;
if(document.getElementById('checkbox').checked ==true) {
ch1=1;
}else{
ch1=0;
}
server = "/Ligntonoff?state=" + ch1;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();
}
</SCRIPT>
</head>
<BODY onload="process();">
<br>
Дата/Время с NTP: <label id="NTP_TimeDate"></label>
<br>
<br>
Время работы: <label id="UptimeString"></label>
<br>
<br>
Задержка освещения в сек: <input type="text" name="h" onclick="Setsec()" id="Set_Sec" value="00" size="1" readonly>
<br>
<br>
Интенсивность зуммера: <input type="text" name="h" onclick="Setzummer()" id="Set_Zummer" value="00" size="1" readonly>
<br>
<br>
Принудительное освешение: <input id="checkbox" type="checkbox" onclick="Ligntonoff()"/>
</body></html>
|
|
25.03.2019, 10:44
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,118
|
|
Сообщение от djsidmsps
|
Пожалуйста,подскажите как можно обойти данную неприятность?
|
Как вариант в атрибутах того чека хранить некие его состояния...
Отправил - зафиксировал.
Получил подтверждение от сервера - зафиксировал.
Тогда, в зависимости от состояния, можно будет узнать - можно обновлять его или нет.
|
|
25.03.2019, 11:51
|
Новичок на форуме
|
|
Регистрация: 25.03.2019
Сообщений: 8
|
|
ksa,спасибо за потраченное время. Не соображу как это сделать.. Можно примерчик?
|
|
25.03.2019, 12:10
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от djsidmsps
|
024 setTimeout('process()',1000);
|
Зачем вам вычислять выражение, когда у вас есть готовая функция!
setTimeout(process, 1000);
Пока не придёт ответ, галочка должна находиться в заблокированном состоянии, чтобы не меняли её состояние, и чтобы не запускалась функция отправки... притом если не удалось связаться с сервером, то состояние возвращается на место!
<label><input type="checkbox" onchange="lightSwitch(this)">Принудительное освещение</label>
<script>
function lightSwitch(checkbox) {
var initialPosition = checkbox.checked;
var url = "/Ligntonoff?state=" + (initialPosition ? 1 : 0);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
checkbox.disabled = false;
if(xhr.status === 200) checkbox.checked = initialPosition;
}
};
xhr.open("GET", url, true);
xhr.send();
checkbox.checked = !initialPosition;
checkbox.disabled = true;
}
</script>
Последний раз редактировалось Malleys, 25.03.2019 в 12:51.
|
|
25.03.2019, 12:29
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,118
|
|
Сообщение от djsidmsps
|
Можно примерчик?
|
Тут тестовый пример ждем от тебя... На нем можно будет показать варианты.
Мне же пока не понятно зачем какой-то процесс меняет значение переменной, если это должен делать пользователь.
|
|
25.03.2019, 13:15
|
Новичок на форуме
|
|
Регистрация: 25.03.2019
Сообщений: 8
|
|
Malleys, ksa спасибо. Буду думать. Процесс обновляет данные на странице. Например если непосредственно на сервере изменились значения переменных,что бы они так же обновлялись в реальном времени на странице.
Выше приведенный мной код, мой только частично) Из примеров втыкаю,проверяю как работает и.т.д . Сервер - микросхема китайская esp8266..
Последний раз редактировалось djsidmsps, 25.03.2019 в 13:17.
|
|
25.03.2019, 15:02
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,118
|
|
Сообщение от djsidmsps
|
Например если непосредственно на сервере изменились значения переменных,что бы они так же обновлялись в реальном времени на странице.
|
Тогда можно присылать и время на какое актуальны эти данные.
При изменении поля пользователем, так же записать в атрибут когда было изменение.
Если сервер прислал "старые" данные - переменную не менять. Если данные новее, чем поменял пользователь - смело можно переменную менять и удалять/менять атрибут, отвечающий за отслеживание изменений.
Вот как-то так можно сделать...
|
|
25.03.2019, 15:03
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,118
|
|
Сообщение от djsidmsps
|
Выше приведенный мной код, мой только частично)
|
Это понятно.
Просто ты просишь пример действующий. А смоделировать такое не совсем просто. Проблема-то твоя - значит создавать всякий сервис для тестов нужно тебе.
|
|
29.03.2019, 19:23
|
Новичок на форуме
|
|
Регистрация: 25.03.2019
Сообщений: 8
|
|
А ларчик то просто открывался-сел сегодня за 15 минут решил задачу.
Переменную ch1 сделал глобальной и в function handleServerResponse() сравниваю ее с тем что в message.Короче все четко,как надо работает,но на оптимальность не претендую.
В очередной раз убеждаюсь что нужно давать себе отдохнуть,а не долбить одно и то же..)) Всем спасибо.
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Lignt_Control</title>
<SCRIPT>
var ch1;
var xmlHttp=createXmlHttpObject();
function createXmlHttpObject(){
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function process(){ // Функция обращается к xml каждую секунду
if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
xmlHttp.open('PUT','xml',true);
xmlHttp.onreadystatechange=handleServerResponse;
xmlHttp.send(null);
}
setTimeout('process()',1000);
}
function handleServerResponse(){ // Функция разбирает xml по тегам
if(xmlHttp.readyState==4 && xmlHttp.status==200){
xmlResponse=xmlHttp.responseXML;
xmldoc = xmlResponse.getElementsByTagName('lignt_on_off');
message = xmldoc[0].firstChild.nodeValue;
if(message==ch1){
checkbox.disabled = false;
if(message==true){
document.getElementById('checkbox').checked = true;
}
if(message==false){
document.getElementById('checkbox').checked = false;
}
}
}
}
function Ligntonoff() { // Отправка состояния чекбокса на сервер
if(document.getElementById('checkbox').checked ==true) {
ch1=1;
}else{
ch1=0;
}
server = "/Ligntonoff?state=" + ch1;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();
checkbox.disabled = true;
checkbox.checked =false;
}
</SCRIPT>
</head>
<BODY onload="process();">
<label> Принудительное освешение: <input id="checkbox" type="checkbox" onclick="Ligntonoff()"/></label>
</body></html>
Последний раз редактировалось djsidmsps, 29.03.2019 в 19:42.
|
|
|
|