Как выводить 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>

Важно, чтобы сначала подключалась библиотека jquery.min.js, а уже потом файл ajax.js. Иначе работать не будет. Должно быть так:

<head>
...
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'></script>
<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 на странице сайта

• Вывод html с помощью JavaScript

• Эффект падающих снежинок на сайт

• Добавление социальных кнопок на сайт

• Как сделать фон для сайта

• Как сделать favicon

• HTML тег <embed>

• HTML тег <object>

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.