Динамическая загрузка контента через jQuery
В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.
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
Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:
Вот 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, завершен.
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
P.S. Хотите опубликовать интересный тематический материал? Если ответ «Да», то жмите сюда.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Похожие статьи:
Комментарии Вконтакте: Комментарии (19)Ребята, я бы очень хотел, что бы не затрачивать время на знакомство с Вашими обучающими материалами, а сразу, просто кликать и скачивать всё необходимое, по созданию сайте. Прежде всего на бесплатных пока ресурсах. потому как платные для меня —пока не доступны(ни хостинг ни другие). Хотелось бы, что бы это—было представлено просто с нуля. Скажем….для создания своего сайта, войдите на такой ресурс. Потом …теперь выберете себе шаблон оформления главной страницы,(кликайте сюда), потом Выбираем заголовок,как его оформить(кликайте сюда). Потом —начинаем работать с меню(заполняем соответствующие графы,вводим всплывающие ссылки по рассылке, по подаче объявлений, по регистрации клиентов,с оставлением адресов, по автоматизации процесса ответов на рассылки,по анимационному «волшебнику», —программа, которая помогает приглашать клиентов на сайт,ну и т.д. Вот это был бы класс. А то , пока я всё прочту, пока познакомлюсь со всеми деталями—-то я всё что читал в начале—половину забуду.И опять возвращайся к началу. Понимаете?
файла не существует, удалён…
Я хочу, чтобы всё делалось за меня, а я только сидел у мамы на коленках и сисю сосал, так чтоли?
Очень хорошоя статья, долго искал инструкции по созданию подобного меню. Только вот еще бы ссылки на исходники подправить , а то новичку трудновато понять)))