Постепенная загрузка страницы Ajax, урок третий.
Просмотров: 4590.
Подписаться на комментарии по RSS.
Здравствуйте, сегодня я расскажу Вам про постепенную загрузку страницы.
На многих сайтах страница отображается после того, как обработает весь html, php и javascript код. Но что делать, если на нашей странице обработка кода занимает долгое время?
Нам приходит на помощь ajax!
Создадим html файл.
<html>
<head>
<script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '></script>
<script type='text/javascript' src='my.js'></script>
<title>Пример постепенной загрузки страницы</title>
</head>
<body>
<p>Hello word <img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley"></p>
<div id='content'>Тут появится наш контент</div>
<div id='js'>
content();
</div>
</body>
</html>В div`е content появится наш контент.
В div`е js запускается javascript функция, которая, собственно, заставит контент появиться.
Не забываем подключить библиотеку Jquery и my.js
Теперь в файле my.js создадим функцию content.
function content() {
$.ajax({
type: "POST",
url: "content_loader.php",
success: function(html) {
$('#content').empty();
$('#content').append(html);
}
});
}type - тип запроса.
url - скрипт, который будет обрабатывать и выводить результат php кода.
success - что делать при удачном завершении обработки.
В этом примере, при удачном завершении обработки content_loader.php, у нас будет очищаться div content и выводиться в него ответ от content_loader.php
Теперь перейдем к php файлу. В нём Вы можете написать абсолютно любой код, но в примере будет так 
<?php sleep(2); echo "Новый контент!"; ?>Вот и всё, желаю Вам успехов!
Последние комментарии
Напишу скрипт бесплатно
Сортировка массивов по возрастанию и убыванию в PHP