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

Итак, допустим, нужно вывести на сайте информацию о последних актуальных ценах на бензин по одному из регионов Украины. Поиск подходящих информеров, к сожалению, успеха не имел (а может, просто искали плохо ;) ), и потому было решено делать информер самостоятельно. Для этого нам понадобятся три вещи - сайт-источник информации, импорт удаленного кода и jQuery. При помощи этой нехитрой комбинации, фактически, можно извлечь любую нужную информацию с любого источника.

Наиболее подходящим для экспорта информации ресурсом стал портал http://biz.liga.net
На этом портале информация о ценах на бензин представлена в подходящем виде (таблицей), и кроме того присутствует разделение по ценам на регионы, что в будущем поможет нам доработать информер таким образом, чтобы можно было посмотреть цены на бензин в любом регионе Украины. Для начала нам надо каким-то образом извлечь информацию с этого сайта. Так как это нельзя сделать при помощи JavaScript, а серверных языков программирования в нашем распоряжении нет, воспользуемся замечательной возможностью, предоставляемой uCoz, а именно импортом удаленного кода. Фактически, эта возможность позволяет загрузить любую страницу со стороннего сайта, и потом воспользоватся ею так как будет нужно. Именно так мы и сделаем - добавим в импорт удаленного кода адрес нужной нам страницы с информацией о ценах на бензин в нужном нам регионе. Вот этот адрес:

1
http://biz.liga.net/auto/region/56

Добавив этот адрес в импорт удаленного кода мы получили стандартный служебный код - $RCODE_1$. Но вставить его на свой сайт просто так не получится, так как в этом случае на нашем сайте выведется вся информация и содержимое импортированной страницы. Нам же нужна лишь табличка с ценами на бензин.
Здесь нам на помощь приходит вся мощь JavaScript-библиотеки jQuery, которая по-умолчанию интегрирована в систему uCoz. С ее помощью можно извлечь из импортированной страницы любые нужные элементы и информацию. Рассмотрим как это делается.
Для начала, нам нужно разместить полученный код $RCODE_1$ на одной из страниц нашего сайта, чтобы к ней можно было обращатся напрямую из JavaScript.
Для этого создадим в Редакторе страниц новую страницу и назовем ее "Актуальные цены на топливо". Единственным содержимым этой страницы будет код вызова импорта удаленного кода:

1
<div style="display:none;">$RCODE_1$</div>

Несмотря на то, что нигде на сайте мы не будем ссылаться на эту страницу - отображение информации лучше скрыть, на случай, если кто-либо зайдет по этому адресу случайно. Итак - теперь у нас есть страница вида http://autoclub.ck.ua/index/0-4 , которая содержит нужную нам информацию, и к которой мы уже можем обратится средствами JavaScript. Сделаем это прямо в нужном нам месте кода, а именно в правой колонке сайта. Создадим блок "Цены на топливо", оформим его в соответствии с дизайном сайта, и проведем выборку нужной информации и ее оформление к нужному виду.
Вот как это происходит:

1
2
3
4
5
6
7
8
<span id="newInformer">Загрузка...</span>
 <script type="text/javascript">
 jQuery("#newInformer").load("/index/0-4 table.ligaCurrencyRatesTable", function()
 { 
 jQuery("#newInformer table td").removeAttr("style").removeClass().addClass("fuel_view");
 jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").attr("bgcolor","#CCCCCC").attr("border","0").css("margin-right","2").css("margin-left","2");
 }); 
 </script>

Разберем подробнее.
Первая строчка:

1
<span id="newInformer">Загрузка...</span> 

является элементом-контейнером, в который мы собственно и загрузим полученную табличку с ценами на бензин. Надпись "Загрузка..." нужна для того, чтобы пользователь, заходящий на сайт, видел не пустое место, а понимал, что информация находится в процессе загрузки, и скоро появится. В случае возникновения каких-либо проблем с загрузкой (проблемы с удаленным сервером, каналом к нему и т.д.) в этом месте можно выводить другую надпись, например, "Извините, информация временно недоступна".

Следующей важной строчкой является:

1
jQuery("#newInformer").load("/index/0-4 table.ligaCurrencyRatesTable", function() { }

Алгоритм работы этой строки словами можно расписать так: загрузить в элемент с id newlnformer элемент table с классом .ligaCurrencyRatesTable со странички /index/0-4 То есть - благодаря универсальным возможностям jQuery мы получаем со страницы с импортированным кодом только тот элемент, который нам нужен - таблицу с ценами на бензин.

Следующие две строчки отвечают исключительно за оформление нашего информера. Первая из них:

1
jQuery("#newInformer table td").removeAttr("style").removeClass().addClass("fuel_view"); 

убирает в нашей таблице стили и классы, прописанные для ячеек и добавляет наш собственный класс fuel_view, в котором мы опишем, как должна отображаться информация.
Вторая строчка:

1
 jQuery("#newInformer table").attr("cellspacing","1").attr("cellpadding","0").attr("bgcolor","#CCCCCC").attr("border","0").css("margin-right","2").css("margin-left","2");

устраняет проблемы с внешним видом самой таблицы, устанавливает необходимые атрибуты и стили.

Вот собственно и все - используя всего несколько строк кода и функцию импорта мы получили на нашем сайте регулярно обновляющийся информер последних цен на бензин в регионе, который, к тому же, хорошо вписан в дизайн. Для непосвященного человека будет абсолютно незаметно, что информация загружается с другого ресурса. Готовый результат вы можете увидеть на сайте http://autoclub.ck.ua в правой колонке.


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

Как видите, минусов существенно меньше чем плюсов :) Потому, по-моему личному мнению, такой подход к импорту информации имеет право на жизнь :)