Створюємо валютний інформер з допомогу PHP і JavaScript
- підключення інформера
- Отримання даних
- Джерело даних
- розмітка інформера
- клієнтський скрипт
- серверна частина
- результати
У цій статті я хочу обговорити підхід до додавання різних інформерів на сторінки сайту, і показати один з варіантів вирішення даного завдання.
Результат, який повинен вийти, можна подивитися на демонстраційній сторінці або запустивши приклад з архіву.
Sourceпідключення інформера
Існує два основні варіанти.
1) Ресурс, який є джерелом інформації, надає код для вставки на вашому сайті. зазвичай це JS код, який завантажує дані і формує зовнішній вигляд інформера. При цьому, іноді власники забороняють змінювати оформлення і вміст інформера. У цьому випадку вибір у вас невеликий: або користуватися тим, що дають, або ні.
2) Дані можна отримати в XML або JSON форматі. Цей варіант набагато цікавіше, тому що ви повністю контролюєте зовнішній вигляд інформера і можете виводити тільки ті дані, які вам потрібні. Крім того, з'являється вибір між варіантами завантаження даних.
Оскільки за першим варіантом обговорювати, в общем-то, нічого, зупинимося на другому.
Отримання даних
Тут теж два варіанти.
1) Відправити запит з PHP скрипта при формуванні сторінки.
В цьому випадку не потрібно використовувати JavaScript, але можуть виникнути затримки при отриманні даних, які збільшать загальний час формування сторінки. Частково усунути цю проблему можна за допомогою кешування.
2) Отримувати дані за допомогою AJAX запиту.
При цьому підтримка JavaScript на стороні клієнта обов'язкове, а час формування сторінки трохи зменшиться. Точніше дані в інформер будуть завантажуватися після того як відвідувач побачить основний вміст сторінки.
Відразу хочу відзначити, що обидва підходи мають багато спільного.
Справа в тому, що запит до стороннього сервера в будь-якому випадку доведеться відправляти з PHP скрипта. Причина - Same Origin Policy, яку використовують всі сучасні браузери. Ця політика не дозволяє JS коду отримати доступ до даних, завантажених з іншого домену.
Обійти це обмеження можна за допомогою JSONP, але реалізувати його підтримку повинні розробники сервісу, від якого ви хочете отримати дані. Детальніше на цю тему ви можете почитати тут , тут і тут .
Загалом, я покажу приклад створення інформера з використанням JavaScript, але, при бажанні, його нескладно буде переробити під перший варіант.
Джерело даних
Для цього прикладу використовуємо дані про курси валют, які надає ресурс pfsoft.com.ua в XML форматі. Подивитися їх можна тут .
розмітка інформера
Тут все просто.
<Ul id = "rates"> <li> Завантаження даних ... </ li> </ ul>Оскільки дані будуть завантажуватися за допомогою AJAX запиту, то показуємо відвідувачу повідомлення про те, що завантаження розпочато. Коли дані будуть завантажені, ми вставимо їх в список.
клієнтський скрипт
Принцип роботи наступний. Після завантаження сторінки відправляємо AJAX запит на свій сервер. PHP скрипт отримує дані від сервера pfsoft.com.ua і відправляє їх браузеру.
JS код отримує XML рядок з даними, знаходить в ній потрібні елементи і додає їх до списку (вихідні дані містять курси приблизно двох десятків валют, але навряд чи має сенс виводити їх все).
var curCodes = [ 'RUB', 'USD', 'EUR']; $ (Document) .ready (function () {$ .get ( 'getrates.php', function (data) {if (data! = 'ERR') {var rates = ''; $ (data) .find ( ' Valute '). each (function (key, value) {var curCode = $ (value) .find (' CharCode '). html (); if (-1! = $ .inArray (curCode, curCodes)) {rates + = '<li>' + $ (value) .find ( 'Nominal'). html () + '' + curCode + '=' + $ (value) .find ( 'Value'). html () + 'грн . '+' </ li> ';} $ (' # rates '). html (rates);});} else {$ (' # rates '). html (' <li> Дані не доступні </ li > ');}});});Перш за все, створюємо масив з кодами валют, які потрібно показати в інформері.
Потім, відправляємо AJAX запит (рядок 3). PHP скрипт, який виконує завантаження даних, називається getrates.php.
Якщо при отриманні даних виникли помилки, виводимо відповідне повідомлення (рядок 17), в іншому випадку - починаємо обробку XML рядка.
Зверніть увагу! Ми можемо працювати з XML даними точно так же, як і з HTML сторінкою.
Просто створюємо об'єкт jQuery ($ (data)) і отримуємо можливість використовувати методи find, html, each і т.д.
Тут ми знаходимо все теги Valute, які містять дані про окрему валюті, а потім з них вибираємо код валюти, її курс і формуємо елемент списку.
При цьому перевіряємо, чи вказана дана валюта в масиві curCodes (рядок 8). До речі, зверніть увагу, метод $ .inArray повертає -1 якщо зазначений елемент відсутній у масиві.
Після цього вставляємо дані в список (рядок 13).
серверна частина
Розглянемо скрипт getrates.php.
require_once ( 'ratescache.php'); $ RCache = new RatesCache (); // $ rCache-> expired = 30; // пробуємо отримати дані з кеша if (FALSE === ($ data = $ rCache-> get ())) {// якщо дані в кеші застаріли, намагаємося отримати їх від сервера pfsoft.com.ua $ data = @file_get_contents ( 'http://pfsoft.com.ua/service/currency/'); // якщо сервер недоступний, пробуємо отримати дані з застарілого кеша if (FALSE === $ data) {$ data = $ rCache-> get (TRUE); } Else {// оновлюємо дані в кеші, попередньо змінюємо кодування на UTF-8 $ rCache-> save (iconv ( 'windows-1251', 'utf-8', $ data)); }} If (FALSE! == $ data) {// відправляємо дані echo $ data; exit; } // відправляємо повідомлення про помилку echo 'ERR';Логіка роботи досить проста. Отримати дані і відправити їх браузеру, але при цьому використовується трохи не стандартний кеш.
Перш за все, хочу пояснити навіщо потрібен кеш.
По-перше, його використання скорочує час завантаження даних.
По-друге, якщо у вас відвідуваний сайт, і ви будете запитувати дані для кожного відвідувача, то адміністратори джерела даних можуть вас просто забанити (за навантаження).
По-третє, кеш дозволить отримати дані для інформера навіть якщо pfsoft.com.ua не доступний.
Отже, алгоритм роботи наступний.
1) Створюємо екземпляр класу кеша (рядок 3) та пробуємо отримати дані з нього (рядок 7).
2) Якщо дані в ньому застаріли, пробуємо отримати їх від сервера pfsoft.com.ua (рядок 9).
3) Якщо і сервер не відповідає, намагаємося отримати дані з застарілого кеша (рядок 12). До речі, це єдина причина, через яку я написав власну реалізацію кеша. Клас RatesCache містить два методу get і set, причому виклик get (true) поверне дані, навіть якщо кеш застарів.
4) Якщо сервер pfsoft.com.ua повернув дані, то оновлюємо кеш і відправляємо їх браузеру (рядок 16).
5) Якщо дані отримати не вдалося (кеш не існує і сервер не відповідає), відправляємо повідомлення про помилку (рядок 26).
Наводити клас кеша тут я не буду. Ви завжди можете подивитися його в исходниках (Там, на мій погляд, досить коментарів). До того ж клас досить простий і написаний в основному для цього прикладу. Якщо ви використовуєте який-небудь фреймворк, то простіше буде використовувати вбудовану бібліотеку кешування.
результати
На мій погляд, показаний тут варіант створення інформера один з найбільш зручних. З одного боку він не уповільнює формування сторінки (за рахунок AJAX завантаження), з іншого - формується досить швидко (за рахунок використання кеша).
До того ж, частково усувається залежність від джерела даних. Відвідувач побачить курси валют, правда застарілі. Як тільки джерело даних стане доступним кеш буде оновлено.
Як завжди, я буду радий відповісти на ваші запитання і зауваження!
цікаво почитати
незвичайний приклад реклами ресторану від практичних японців.
п'ять способів залучення клієнтів для фірм на b2b-ринку