Иногда чтобы добавить некий функционал на сайте, может потребоваться обновления данных на странице с некоторой периодичностью. На помощь приходит возможность использования технологии 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 формате.
Строка 5: url: 'ajax.php', //а не ;)
Точно, исправил, спасибо!