Отправка сообщения






Добро пожаловать!

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 формате.

Добавил: htmaker, 02.08.2014 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

Комментарии

  1. Vladimir пишет:

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

    1. htmaker пишет:

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

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

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

Комментарии

  • Загрузка...

Наверх