Динамическая загрузка контента через jQuery

jQuery

В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.

jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li>welcome</li>
        <li>about</li>
        <li>portfolio</li>
        <li>contact</li>
        <li>terms</li>
    </ul>
    <div id="content">
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

Шаг 1

Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:

<script type="text/javascript" src="jQuery.js"></script>

Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.

Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).

$(document).ready(function() {
	// Stuff here
});

Шаг 2

Нам нужно сделать так, чтобы при нажатии на ссылку в меню навигации на нашей странице, браузер не делал переход на соответствующую страницу, а динамически загружал контент этой страницы внутрь нашего макета, без перезагрузки.

Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:

$('#nav li a').click(function(){
	// function here
});

Давайте наметим, что мы должны сделать в этой функции по порядку.

Удалить содержимое текущей страницы.

Получить новое содержимое страницы и добавить в содержимое DIV.

Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали. Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.
Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:

var toLoad = $(this).attr('href')+' #content';

Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы. Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:

$('#content').hide('fast',loadContent);

Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).

Шаг 3

Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:

jQuery

$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');

Вот CSS, прилагающаяся к свежесозданному #load div:

#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

Таким образом область, которая должна содержать анимацию загрузки, первоначально не отображается. Далее, при инициализации функции fadeIn () (см. выше в коде), она начинает отображаться в верхнем правом углу сайта и показывает анимированный GIF, пока через некоторое время снова не исчезнет с экрана.

Шаг 4

Через некоторое время, когда пользователь нажмет на одну из ссылок, начнет происходить следующее:

Текущее содержание эффектно исчезает.

Появляется сообщение о загрузке.

А теперь давайте напишем ту самую функцию загрузки содержимого, о которой мы ранее говорили:

function loadContent() {
	$('#content').load(toLoad,'',showNewContent)
}

Функция loadContent вызывает запрошенную страницу, а когда это уже выполнено, вызывает функцию ‘showNewContent’ (показ нового содержимого):

function showNewContent() {
	$('#content').show('normal',hideLoader);
}

Эта функция – showNewContent — использует функцию show() jQuery (на самом деле, это слишком скучное название для такого отличного эффекта) с тем, чтобы новое содержимое, помеченное меткой элемента ‘#content’ появилось на странице. Однажды вызванная, она инициирует функцию ‘hideLoader’ (исчезание):

function hideLoader() {
	$('#load').fadeOut('normal');
}

Нам необходимо помнить, что функция обработки клика должна возвратить «false», чтобы браузер не совершил перехода на другую страницу.

Теперь все должно работать прекрасно. Пример этого можно увидеть здесь: [LINK]

А вот и код:

$(document).ready(function() {

    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Шаг 5

Можно было бы на этом и остановиться, но если вы беспокоитесь об удобстве использования (о котором должны заботиться), важно проделать еще кое-какую работу. Проблема нашего текущего решения в том, что оно игнорирует адреса URL. Что, если пользователь захочет определить ссылку на одну из наших так называемых «страниц»? Сейчас это сделать невозможно, потому что URL все время один и тот же.

Самое лучшее, что можно сделать – это изменить значение метки содержимого в URL, чтобы обозначить, что именно просматривает сейчас пользователь. Таким образом, если пользователь просматривает содержание ссылки ‘about’, то URL должен быть таким: ‘www.website.com/#about’. Для этого нам нужно всего лишь добавить одну строчку кода в функцию ‘click’, которая будет хэшировать текущую страницу в URL при щелчке пользователя на ссылку навигации:

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

Вышеуказанный код изменяет значение URL на значение нажатого атрибута ‘href’ (за исключением расширения ‘.html’). Поэтому, когда пользователь щелкает ссылку ‘home’ (href=index.html), то хэш-значение будет выглядеть как ‘#index’.

Кроме того, нам необходимо сделать возможным получение нужной страницы, когда URL написан в адресной строки браузера. Чтобы это работало, мы проверяем хэш-значение во время загрузки страницы и соответственно изменяем содержимое:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    } 
});

Итак, вот весь необходимый код на javascript (и библиотека jQuery):

$(document).ready(function() {
	
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        } 
    });
    
    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Конец…

Достоинство этого метода заключается в том, что он гибок и может быть прикручен к сайту в считанные минуты. Он неназойлив и ваш сайт будет работать нормально и при выключенном javascript.

На этом, выпуск посвящённый созданию динамической загрузки контента, без перезагрузки страницы, средствами AJAX и jQuery, завершен.

Посмотреть полностью работающий пример

Автор: James Padolsey

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (17)

  1. Валерий Васильевич

    Ребята, я бы очень хотел, что бы не затрачивать время на знакомство с Вашими обучающими материалами, а сразу, просто кликать и скачивать всё необходимое, по созданию сайте. Прежде всего на бесплатных пока ресурсах. потому как платные для меня —пока не доступны(ни хостинг ни другие). Хотелось бы, что бы это—было представлено просто с нуля. Скажем….для создания своего сайта, войдите на такой ресурс. Потом …теперь выберете себе шаблон оформления главной страницы,(кликайте сюда), потом Выбираем заголовок,как его оформить(кликайте сюда). Потом —начинаем работать с меню(заполняем соответствующие графы,вводим всплывающие ссылки по рассылке, по подаче объявлений, по регистрации клиентов,с оставлением адресов, по автоматизации процесса ответов на рассылки,по анимационному «волшебнику», —программа, которая помогает приглашать клиентов на сайт,ну и т.д. Вот это был бы класс. А то , пока я всё прочту, пока познакомлюсь со всеми деталями—-то я всё что читал в начале—половину забуду.И опять возвращайся к началу. Понимаете?

  2. DN

    Очень хорошоя статья, долго искал инструкции по созданию подобного меню. Только вот еще бы ссылки на исходники подправить :) , а то новичку трудновато понять)))

  3. Volt

    Наконец-то! Спасибо!

  4. Pocherk

    Клево! Очень пригодится

  5. Вера

    Вот спасибо большинское! Как мне во-время попалась ваша статья!! очень интересно и доступно! Второй урок разбираю у вас — этот и ‘Панель для сайта в стиле MacOS с помощью jquery’ все понятно и полезно, думаю все до строчечки проработать,
    что вы здесь нам даете. Спасибо сто раз!

  6. Den

    Спасибо афтару.
    Соорудил небольшой блок для формы… пользовал твой код… симпотно!

  7. Pocherk

    Все здорово и красиво, но смущает один момент — все ссылки на сайте, сделаные по такой технологии будут вида: мой_домен/index.html#мое_слово т.е. поисковые системы будут считать, что на сайте только одна страница — index.html А это не есть хорошо, для поисковой оптимизации сайта

  8. popo

    Скажите, а как сделать что бы всё тоже самое происходило не при клике на ссылку, а на кнопку формы?

  9. Polina

    единственная проблема — навигация браузера (стрелки назад и вперед) не работают — url меняют, а контент нет

  10. dimaz

    Еще на этом примере, если загружаемый файл в формате html, то при нажатии ф5, страница остается прежней, а если загружать php, то страница скидывается на изначальную.

  11. cevil

    почему перекидывает на начало страницы? как это убрать?Если вставить например на длинную страницу куда нибудь в конец id=»content» то при клике по ссылкам контент меняется но перекинет на самый вверх страницы

  12. Hunter0k

    Народ, как сделать, чтобы на страницах «about», «portfolio» был не html текст, а материал с базы данных phpmyadmin?

  13. Денис

    Динамическая подгрузка содержимого тегов это хорошо, но если обновить сайт, то тебя возвращает на гравную

  14. Vasja

    Спасибо очень привлекательный метод!
    Хочется создать такой на моих сайтах

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree