Динамическое обновление содержимого страницы сайта бывает очень полезно, когда нужно регулярно или по запросу обновлять какие-то данные на сайте без перезагрузки всей страницы.
Рассмотрим динамическое обновление контента сайта на примере часов. Сделать это очень просто при помощи функции Ajax из библитоки Jquery.
Создаем файл html в котором будем получать информацию из другого внешнего файла.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content"></div>
<script>
function show()
{
$.ajax({
url: "time.php",
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
$(document).ready(function(){
show();
setInterval('show()',1000);
});
</script>
</body>
</html>
Подключение библитеки jquery выполняет строка
<script type="text/javascript" src="jquery.js"></script>
В документе задан div контейнер в который будет выводится информация
<div id="content"></div>
Функция $(document).ready() выполняет запуск созданной нами функции show сразу после загрузки страницы и обновляет ее с заданным интервалом.
$(document).ready(function(){
show();
setInterval('show()',1000);
Функция show выполняет загрузку информации из внешнего файла time.php при помощи функции ajax c рядом параметров
Обращение к информационному файлу
url: "time.php"
Отключение кэширования запросов
cache: false
При успешном выполнении запроса выполняется функция, которая получает контент в качестве параметра и записывает его в контейнер div
success: function(html){
$("#content").html(html);
}
Содержимое информационного фойла, который выводит текущее время на экран
<?php echo date("H:i:s"); ?>