Іноді щоб додати якийсь функціонал на сайті, може знадобитися оновлення даних на сторінці з деякою періодичністю. На допомогу приходить можливість використання технології 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.
Необхідно належним чином налагодити скрипт-обробник Ajax-запитів, т. к. у випадку появи помилок, навіть незначних, це справа перестає працювати, з тієї простої причини, що передається відповідь перестає відповідати стандарту передачі у форматі json.
Додав: htmaker, 02.08.2014 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Коментарі
Vladimir пише:25.11.2014 у 13:31
Рядок 5: url: ‘ajax.php’, //а не 😉
Відповісти
htmaker пише:25.11.2014 в 15:25
Точно, виправив, дякую!
Відповісти
