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

jQuery

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

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

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

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

jQuery

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Шаг 1

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

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

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

Шаг 2

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

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

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

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

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

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

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

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

Шаг 3

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

jQuery

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Шаг 4

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

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

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

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

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

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

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

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

А вот и код:

Шаг 5

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

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

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

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

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

Конец…

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

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

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

Автор: James Padolsey

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

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

E-mail: contact@webformyself.com

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: , ,

Похожие статьи:

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

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