Как выводить html с помощью AJAX
Из этой статьи Вы узнаете о том, как можно выводить любой html-код через специальную технологию AJAX. Это не очень легко и требует определенных знаний, но не стоит волноваться, что у вас не получится. Ниже будет дана подробная инструкция, по которой даже новичок сможет разобраться. Прежде чем приступать непосредственно к инструкции, отвечу на вопрос, а вообще зачем это нужно и какие есть варианты.
Вообще есть два способа вывода контента: либо через JavaScript, либо через AJAX. Мое мнение, что лучше использовать AJAX, чем JS, но почему лучше - спросите Вы? Ведь обе технологии прячут текст в отдельных файлах. А ответ в том, что поисковые системы дошли до очень высокого уровня и уже в состоянии определять ссылки, которые содержатся в яваскрипте. Например, Google уже заявил об этом, видимо скоро и Яндекс так же заявит об этом достижении.
Инструкция по выводу контента через AJAX
1) Добавить в заголовочную директорию <head> следующий скрипт:
<head> ... <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'></script> ... </head>
Таким образом мы подключим необходимые библиотеки для работы AJAX прямо с их официального сайта.
2) Создайте html или php документ с кодом, который, вы хотите выводить через AJAX. Например, создадим файл text-dlya-ajax.html и пропишем в нем:
Этот <b>текст</b> будет выведен через <b>AJAX</b>
3) Создайте отдельный файл JavaScript (.js). Обычно я его называю ajax.js, чтобы сразу понять его содержимое. Добавьте в него следующий код:
(function($) { $(function() { $("#blockajax").load("СЮДА_ПРОПИСЫВАЕМ_ПУТЬ_К_ФАЙЛУ_html/text-dlya-ajax.html"); }) })(jQuery)
Теперь blockajax будет характеризоваться файлом text-dlya-ajax.html.
Примечание
Если нужно вывести много таких привязок "блок" = "html-код", то можно прописать сколь угодно много различных соответствий:
(function($) { $(function() { $("#block1").load("block1.html"); $("#block2").load("block2.php"); ................................. $("#blockN").load("blockN.html"); }) })(jQuery)
4) Подключите файл ajax.js к документу через заголовочный тег <head>:
<head> ... <script type='text/javascript' src='ajax.js'></script> ... </head>
5) В месте где нужно вывести html-текст файла text-dlya-ajax.html напишите:
<div id="blockajax"></div>
Вместо <div id="blockajax"></div> подгрузиться наш html-код из файла text-dlya-ajax.html. В этом и есть смысл: что кода на странице нету, а вывод нужного нам контента есть.
Больше делать ничего не требуется. Теперь Вы можете легко выводить контент через AJAX.
Вы можете скачать выше описанный пример по следующей ссылке: ajax.rar
Примечание
Кстати, через AJAX также можно выводить и интерпитировать PHP-код. А это открывает огромные возможности перед Вами.
Зачем нужно выводить html с помощью AJAX (3 причины)
1. Если быть очень кратким, то это нужно для продвижения сайта в поисковых системах. Дело в том, что ссылки внутри сайта как бы передают вес между собой. Те страницы на кого ссылаются чаще, имеют больший вес. Поэтому чтобы более равномерно распределить вес сайта между страницами (а не сливать его весь по сквозным ссылкам) нужно как-то сделать так, чтобы эти сквозные ссылки не учитывались поисковыми машинами.
Например, на многих сайтах можно встретить ссылки на метки, которые стоят на каждой странице сайта в сайдбаре. Получается, что страницы с метками имеют наибольшие веса, хотя не содержат важной информации. Также сюда можно отнести другие лишние ссылки на страницах, которые в принципе не нужны.
Конечно, можно закрыть все ссылки в метках в rel="nofollow", однако исследования показали, что таким способом теряется вес на сайте, т.е. этот вес никому не передается, он как бы просто испаряется (звучит странно, но это так).
2. Второй причиной использования выводить html через AJAX является уменьшение кода на странице сайта. Опять таки это нужно для поисковых систем. Например, футер сайта постоянно дублирует один и тот же код, который только отнимает лишний вес со страницы, поэтому было бы хорошо этот код убрать, но футер оставить. Аякс идеально подходит для решения этой проблемы.
3. Страница с использованием AJAX грузится поблочно, то есть каждый элемент как бы грузиться синхронно и не зависит от других. Таким образом "тяжелые" элементы на сайте не будут тормозить загрузку других частей сайта. Это более удобно для пользователя, поскольку он видит, что сайт грузится и чувствует себя более спокойно, нежели когда загрузка сайта на чем-то застопорилась.
Читайте также:
• Вывод html с помощью JavaScript
• Эффект падающих снежинок на сайт
• Добавление социальных кнопок на сайт
• Как сделать фон для сайта
• Как сделать favicon
← Перейти в каталог html уроков и советов
|
