О web-разработке
и даже немного больше...

Ajax запросы с интервалом по времени

Иногда чтобы добавить некий функционал на сайте, может потребоваться обновления данных на странице с некоторой периодичностью. На помощь приходит возможность использования технологии AJAX, которая хорошо подходит для выполнения этой задачи. Так же мы воспользуемся JQuery, это значительно облегчит написание кода.

Код для выполнения Ajax запросов:

var my_ajax_req ={ // создаем экземпляр объекта

// задаем свойства объекта
updInterval: 10000, // 10 сек. - интервал времени между запросами
url: 'ajax.php', // скрипт который должен отвечать на Ajax запросы
init: function(){
	var self = my_ajax_req;
	setInterval($.proxy(my_ajax_req.requestData, self), self.updInterval);
},
 
requestData: function(){
	var self = my_ajax_req;
	 
	// ajax запрос посредством JQuery
	$.ajax({
		url: self.url,
		type: 'GET',
		dataType: 'json',
		success: function(data){ self.update(data) },
		error: function(data){ self.error(data) },
	});
},
     
// метод принимает ответ на Ajax запрос
update: function(Data){
	var self = my_ajax_req;
	console.log(Data);
	// тут можно дописать логику после получения данных
},

// метод для обработки ошибок
error: function(Data){
	var self = my_ajax_req;
	console.log('Failed to get data');
},
}

При загрузке страницы добавляем инициализацию скрипта:

my_ajax_req.init();

На стороне сервера, в файле ajax.php организуем обработку AJAX-запросов. Традиционно результат возвращаем в виде json.

<?php
$arData = array();
$arData['name'] = 'example';
$res = json_encode($arData);
echo $res;
?>

Необходимо должным образом отладить скрипт-обработчик Ajax-запросов, т.к. в случае появления ошибок, даже незначительных, это дело перестает работать, по той простой причине, что передаваемый ответ перестает соответствовать стандарту передачи в json формате.

Опубликован: 02.08.2014 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Мобильное меню для сайта на CSS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта

Комментарии

  1. Vladimir пишет:

    Строка 5: url: 'ajax.php', //а не ;)

    1. htmaker пишет:

      Точно, исправил, спасибо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта