Как выводить html с помощью AJAX
Из этой статьи Вы узнаете о том, как можно выводить любой html-код через специальную технологию AJAX . Это не очень легко и требует определенных знаний, но не стоит волноваться, что у вас не получится. Ниже будет дана подробная инструкция, по которой даже новичок сможет разобраться. Прежде чем приступать непосредственно к инструкции, отвечу на вопрос, а вообще зачем это нужно и какие есть варианты.
Вообще есть два способа вывода контента: либо через JavaScript, либо через AJAX. Мое мнение, что лучше использовать AJAX, чем JS, но почему лучше — спросите Вы? Ведь обе технологии прячут текст в отдельных файлах. А ответ в том, что поисковые системы дошли до очень высокого уровня и уже в состоянии определять ссылки, которые содержатся в яваскрипте. Например, Google уже заявил об этом, видимо скоро и Яндекс так же заявит об этом достижении.
Инструкция по выводу контента через AJAX
1. Добавить в заголовочную директорию следующий скрипт:
head> . script type value">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>AJAXb>
3. Создайте отдельный файл JavaScript (.js). Обычно я его называю ajax.js , чтобы сразу понять его содержимое. Добавьте в него следующий код:
Теперь blockajax будет характеризоваться файлом text-dlya-ajax.html .
Если нужно вывести много таких привязок «блок» = «html-код», то можно прописать сколь угодно много различных соответствий:
4. Подключите файл ajax.js к документу через заголовочный тег :
head> . script type value">text/javascript" src='ajax.js'>script> . head>
Важно, чтобы сначала подключалась библиотека jquery.min.js, а уже потом файл ajax.js. Иначе работать не будет. Должно быть так:
head> . script type value">text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'>script> script type value">text/javascript" src='ajax.js'>script> . head>
5. В месте где нужно вывести html-текст файла text-dlya-ajax.html напишите:
Вместо подгрузиться наш html-код из файла text-dlya-ajax.html . Главная идея: скрывать ненужный код. В итоге кода на странице нету, а вывод нужного нам контента есть.
Больше делать ничего не требуется. Теперь Вы можете легко выводить контент через AJAX .
Вы можете скачать выше описанный пример по следующей ссылке: ajax.rar
Кстати, через AJAX также можно выводить и интерпретировать PHP-код. А это открывает огромные возможности перед Вами.
Зачем нужно выводить html с помощью AJAX (3 причины)
1. Если быть очень кратким, то это нужно для продвижения сайта в поисковых системах. Дело в том, что ссылки внутри сайта как бы передают вес между собой. Те страницы на кого ссылаются чаще, имеют больший вес. Поэтому чтобы более равномерно распределить вес сайта между страницами (а не сливать его весь по сквозным ссылкам) нужно как-то сделать так, чтобы эти сквозные ссылки не учитывались поисковыми машинами.
Например, на многих сайтах можно встретить ссылки на метки, которые стоят на каждой странице сайта в сайдбаре. Получается, что страницы с метками имеют наибольшие веса, хотя не содержат важной информации. Также сюда можно отнести другие лишние ссылки на страницах, которые в принципе не нужны.
Конечно, можно закрыть все ссылки в метках в rel=»nofollow», однако исследования показали, что таким способом теряется вес на сайте, т.е. этот вес никому не передается, он как бы просто испаряется (звучит странно, но это так).
2. Второй причиной использования выводить html через AJAX является уменьшение кода на странице сайта. Опять таки это нужно для поисковых систем. Например, футер сайта постоянно дублирует один и тот же код, который только отнимает лишний вес со страницы, поэтому было бы хорошо этот код убрать, но футер оставить. Аякс идеально подходит для решения этой проблемы.
3. Страница с использованием AJAX грузится поблочно, то есть каждый элемент как бы грузиться синхронно и не зависит от других. Таким образом «тяжелые» элементы на сайте не будут тормозить загрузку других частей сайта. Это более удобно для пользователя, поскольку он видит, что сайт грузится и чувствует себя более спокойно, нежели когда загрузка сайта на чем-то застопорилась.
How to include HTML page with jQuery
If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.
This saves time when you need to add the same line of code in several files.
If you are not using the server-side script on your webpage then you can use the iframe or Client-side scripting language.
There are two ways in jQuery for including a file in another HTML file –
Contents
1. Create Embedding file
In the demonstration, I am including a header.html file to index.html .
The header.html file contains menu layout.
/* Menu */ .menu < list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: darkturquoise; >.menu li < float: left; >.menu li a < display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; >.menu li a:hover
2. AJAX – GET request
Send GET requests from AJAX which takes data from the server and using its response in html() method to add it to the page.
Completed Code
3. load() method
There is another way of doing this with .load() function. This also loads content from the server and add it to the selector.
You can pass your URL within the load() method.
Completed Code
4. Demo
They both give the same output –
5. Conclusion
Both of the ways return content from the server but I don’t recommend it when you are using Server-side scripting within your project like – PHP, where you use built-in statements e.g. -, include, require, include_once, and require_once.
Otherwise, It is a good way of reusing the same code and your file maintenance becomes easy.
If you know a better way to do this then let me know in the comment section.
If you found this tutorial helpful then don’t forget to share.