AJAX часы

function showClock() {
var obj = document.getElementById('clock');
var req;

if (window.XMLHttpRequest)	req = new XMLHttpRequest();
else if(window.ActiveXObject) {
    try {
        req = new ActiveXObject('Msxml2.XMLHTTP');  
    } catch (e){}									
    try {											
        req = new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e){}
}

if (req) {
    req.onreadystatechange = function() {
    	if (req.readyState == 4 && req.status == 200)  
		{ obj.innerHTML = 'Московское время '+req.responseText; }        
    };  
    req.open("POST", 'xmlhttp.php', true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.send('clock=1&ajax=1');
} 
else alert("Браузер не поддерживает AJAX");
}

setInterval(showClock, 3000); 

echo date('H:i:s');

• Tweet

Комментарии:

А для ламеров поподробней мона было?

У этих часиков тоже есть недостаток - страница постоянно хавает трафик. Но думаю если не отображать секунды, и увеличить интервал до минуты, то этот недостаток тоже будет не существенным.

можно и секунды отображать ) просто часы надо делать так - ajax грузить время с сервера, а отображать и изменять уже javascript

На этом примере видно не меньше "подводных камней" ajax, чем его достоинств. Мало того, то сами ответы приходят асинхронно и с разной задержкой, так еще и сам javascript ничего не гарантирует при установлении интервала в 1000мс. Попробуйте переключиться на другую вкладку в браузере/другое приложение и вернуться обратно - секунды могут начать изменяться вообще в произвольном порядке, даже не по возрастанию.

Вообще лучше всего конечно просто брать время на стороне сервера (например с помошью php) а потом с помощью JS запускать их на стороне клиента и никаких проблем. А так спасибо за статьи, помогло. :-)

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

Все просто супер, работает на ура! Огромное спасибо АВТОРУ за то, что он написал этот скрипт. Очень искал!

В отображаемых комментариях перед двойными кавычками везде идет лишний слэш :(

>> Вообще лучше всего конечно просто брать время на стороне сервера (например с помошью php) а потом с помощью JS запускать их на стороне клиента и никаких проблем. А так спасибо за статьи, помогло. :-)


+1
Зачем нагружать сервер лишней работой? Один раз посылаем запрос к серверному скрипту, который отдает время сервера, разбиваем значение стандартными средствами (типа, explode(":", $time)) и дальше пишем простую функцию для управления. Выглядеть будет примерно так:

// Часы - int
var hour = 0;
// Минуты - int
var minute = 0;
// Минуты - int
var second = 0;
// Общее время - char[]
var time = '';
// Дополнительный флаг
var timeChanged = 1;
// Возможно пользователь захочет остановить часы
var timerEnabled = 1;
// Получаем время от серверного скрипта

function ajax_time() {
	//...
	// В конце разбиваем полученное время и записываем по отдельности его в переменные hour, minute, second.
	// Общее время записываем в переменную time.
}

function timeDelayer() {
	// Проверяем включен ли таймер
	if (!timerEnabled) return;
	// Будем вызывать каждую секунду отдельную функцию
	if (timeChanged)
	setTimeout("time_proceed", 1000);
	timeChanged = 0;
	// Рекурсивно вызываем эту функцию
	timeProceed();
}

function timeProceed() {
	second++;
	if (second >= 60) {
		minute++;
		second = 0;
	}
	if (minute >= 60) {
		hour++;
		minute = 0;
	}
	var cHour = second;
	var cMinute = minute;
	var cSecond = hour;
	// Т.к. переменные целочисленные, то в них может содержаться только по одной цифре, будет выглядеть не очень красиво (типа 1:5:3, а надо 01:05:03), проверим это.
	// Не C++ и преобразование типов нам не нужно
	if (second < 10) cSecond = "0" + second;
	if (minute < 10) cMinute = "0" + minute;
	if (hour < 10) cHour = "0" + hour;
	
	// Итоговое время
	time = cHour + ":" + cMinute + ":" + cSecond;
	// Кроосбраузерность уже самостоятельно прописываем
	document.getElemntById("time").innerHTML = time;
	timeChanged = 1;
	return true;
}

// Функция для остановки таймера
// Делаем кнопочку и для нее событие 'onclick="timeStop();"'
// При остановке таймера и повторном его запуске будет необходима последующая синхронизация с сервером
function timeStop() {
	timerEnabled = 0;
	return;
}

согласен с Gorky и Deft, что в случае с часами разумней брать время с сервера только один раз.
Оформил пример Deft'а, работоспособность не проверял.

По своему посту скажу:
В 29 строке ошибка, вызов рекурсии и вызывать надо timeDelayer(), а не timeProceed();

И еще после 41 строки нужно бы добавить вот это:
// Сбрасываем часы, если достигли 24:00:00
if (hour > 23)
{
hour = 0;
minute = 0;
second = 0;
}

Вроде бы так. Работоспособность неохота самому проверять =)
P.S. Побольше бы сайтов, где можно просто оставить коммент без всяких регистраций +_+

спасибо автору!!!

зы дело не в том что лучше или хуже, а в ВОЗМОЖНОСТИ создания одинаковых вещей разными средствами.

Хороший наглядный пример работы AJAX.
PS: В строке 22 не надо посылать переменные, достаточно
req.send(null);

Я вчера написал скрипт вроде работает, выдаю его на суд=)
Не судите строго мне 12 лет!
<?php
header("Content-Type: text/html;charset=UTF-8;");
$Hour = date("H");
$Minute = date("i");
$Second = date("s")
?>
<html>
<head>
</head>
<body>
<form name="d">
<p><strong>Московское время:</strong><input type="text" size="8" name="d2"></p>
</form>
<script>
var second=<?php echo $Second ?>;
var minute=<?php echo $Minute ?>;
var hour=<?php echo $Hour ?>;
document.d.d2.value='0'
function display(){
second++;
if (second>=60){
second=0
minute++
}
if (minute>=60){
minute=0
hour++
}
if (hour>23){
hour=0
minute=0
second=0
}
var cHour = hour;
var cMinute = minute;
var cSecond = second
if (second < 10) cSecond = "0" + second;
if (minute < 10) cMinute = "0" + minute;
if (hour < 10) cHour = "0" + hour;
document.d.d2.value=cHour+":"+cMinute+":"+cSecond
setTimeout("display()",1000)
}
display()
</script>
</body>
</head>
</html>

var obj = document.getElementById('clock'); rак вот это понять???

=)

obj это название переменной, а document.getElementById('clock') это значение переменной.

Если бы автор был в команде с "Тормозом"(brokenbrake.biz) - то цены бы им небыло. Спасибо автору!

Андрей Шеляков , document.getElementById('clock') это не значение переменной , а получение экземляра объекта называеться

Ну да=)

от кого: