.jpg)
В этой статье я хочу обсудить подход к добавлению различных информеров на страницы сайта, и показать один из вариантов решения данной задачи. Сразу хочу уточнить, что в этой статье под термином «информер» я имею в виду блок на странице, содержащий информацию, полученную с другого ресурса. Информация может быть какая угодно: курсы валют, погода, данные счетчиков, последние твиты и т. п. Результат, который должен получиться, можно посмотреть на демонстрационной страничке или запустив пример из архива.
Подключение информера
Существует два основных варианта. 1) Ресурс, который является источником информации, предоставляет код для вставки на вашем сайте. Обычно это JS код, который подгружает данные и формирует внешний вид информера. При этом, иногда владельцы запрещают менять оформление и содержимое информера. В этом случае выбор у вас небольшой: либо пользоваться тем, что дают, либо нет. 2) Данные можно получить в XML или JSON формате. Этот вариант гораздо интереснее, т. к. вы полностью контролируете внешний вид информера и можете выводить только те данные, которые вам нужны. Кроме того, появляется выбор между вариантами загрузки данных. Т. к. по первому варианту обсуждать, в общем-то, нечего, остановимся на втором.
Получение данных
Тут тоже два варианта. 1) Отправить запрос из PHP скрипта при формировании страницы. В этом случае не нужно использовать JavaScript, но могут возникнуть задержки при получении данных, которые увеличат общее время формирования страницы. Частично устранить эту проблему можно с помощью кеширования. 2) Получать данные с помощью AJAX запроса. При этом поддержка JavaScript на стороне клиента обязательна, а время формирования страницы немного уменьшится. Точнее данные в информер будут загружаться после того как посетитель увидит основное содержимое страницы. Сразу хочу отметить, что оба подхода имеют много общего. Дело в том, что запрос к стороннему серверу в любом случае придётся отправлять из PHP скрипта. Причина – Same Origin Policy, которую используют все современные браузеры. Эта политика не позволяет JS коду получить доступ к данным, загруженным с другого домена. Обойти это ограничение можно с помощью JSONP, но реализовать его поддержку должны разработчики сервиса, от которого вы хотите получить данные. Подробнее на эту тему вы можете почитать здесь, здесь и здесь. В общем, я покажу пример создания информера с использованием JavaScript, но, при желании, его несложно будет переделать под первый вариант.
Источник данных
Для этого примера используем данные о курсах валют, которые предоставляет ресурс pfsoft. com. ua в XML формате. Посмотреть их можно здесь.
Разметка информера
Тут всё просто.