Постепенная загрузка страницы Ajax, урок третий.
Просмотров: 9929.
Подписаться на комментарии по 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