Використання Ajax з PHP та Sajax
Перед початком роботи
Про це керівництво
Ви познайомитеся з Ajax, а також із проблемами його використання. Також ви створите Ajax-додаток на PHP, який відображатиме панелі розділів попередньо написаного посібника. При виборі посилання панелі завантажуватиметься лише вміст розділу та замінюватиметься вмістом вибраної панелі, заощаджуючи пропускну здатність та зменшуючи час завантаження сторінки. Потім ви інтегруєте в Ajax-додаток програму Simple Ajax Toolkit (Sajax), яка синхронізуватиме використання Ajax, спрощуючи розробку.
Попередні умови
Для роботи з керівництвом необхідні такі інструментальні засоби:
Web-сервер
Виберіть будь-який Web-сервер та операційну систему. Ви можете використовувати Apache 2.X або HTTPServer фірми IBM.
PHP
Ви можете продовжувати без PHP, але якщо ви цікавитеся взаємодією з прикладом програми, завантажте PHP V5.
Sajax
Вам знадобиться Sajax. Це бібліотека PHP-функцій в одному файлі, яка використовується в цьому посібнику.
Web-браузер
Перед зануренням у деталі познайомтеся з Ajax, прикладом програми PHP та Sajax.
Ajax дозволяє Web-розробникам створювати інтерактивні Web-сторінки, які оновлюють вміст без необхідності повного повторного завантаження. Використовуючи Ajax, ви можете створювати програми, які за натисканням кнопки змінюватимуть вміст одного розділу Web-сторінки. Немає необхідності очікувати завантаження всієї сторінки – завантажується лише вміст цього розділу. Погляньте, наприклад, на Google Maps: ви можете вибирати та переміщувати картку без очікування завантаження сторінки.
Проблеми Ajax
Приклад PHP-програми
Припустимо,що ви хочете створити Ajax-додаток, не замислюючись про хитромудрі деталі Ajax. Вам потрібний Sajax. Sajax абстрагує від Web-розробника високорівневі деталі Ajax за допомогою використання бібліотеки, розробленої групою ModernMethod. Власне, Sajax працює аналогічно Ajax. Проте, використовуючи надані у бібліотеці Sajax високорівневі функції, технічні деталі Ajax можуть ігноруватися.
Що таке Ajax?
За лаштунками
Для створення посилань із тегами span використовується CSS-код
CSS-код потрібен у прикладі програми для того, щоб теги span відображалися як реальні посилання, створені звичайним тегом анкера ( ), і натискалися як реальні посилання.
Лістинг 1. Вказує відображувану інформацію для тегів span
Ці теги span використовуються в прикладі програми, і колір узгоджується з посиланням у будь-якому посібнику IBM developerWorks. Перший рядок у стилі тега вказує, що після натискання на посилання, його колір залишається таким самим. При русі курсора миші над посиланням, вона підкреслюється, а курсор набуває вигляду покажчика, використовуваного для звичайних тегів анкера ( ). Розглянемо процес створення посилань, які використовують цей CSS-код.
Створення посилань з використанням тега span
Об'єкт XMLHttpRequest
Якщо ви використовуєте браузери Mozilla, Opera або інші браузери цього сімейства, вміст сторінки буде динамічно вилучатися за допомогою вбудованого об'єкта XMLHttpRequest . Internet Explorer фірми Microsoft використовує інший об'єкт, про який ми розповімо далі. Ці об'єкти використовуються однаково і реалізація підтримки обох об'єктів займає кілька додаткових рядків коду.
Лістинг 2. Ініціалізація та використання об'єкта XMLHttpRequest
Заголовком сторінки буде назва розділупопередньо написаного керівництва. Метод кодування вказується за допомогою метатегу, і ви налаштували HTML-документ на використання тегів span як посилання. Далі ви визначатимете ці посилання.
Створення посилань на бічній панелі
Перед створенням посилань ви маєте налаштувати бічну панель. Увімкніть заголовний файл, який ви можете завантажити разом з іншими файлами програми:
Лістинг 7. Створення 10 посилань
Посилання, що відображаються зліва, відповідають одному розділу посібника на developerWorks.
Ініціалізація вмісту
Бічна панель встановлена, отже тепер ви повинні підготувати розділ головного змісту, додаючи заголовок розділу:
Лістинг 8. Ініціалізація вмісту сторінки
Усі 10 панелей тепер відображаються одна за одною у стандартному форматі розділів IBM. Для завершення HTML-файлу додайте файл нижньої панелі сторінки:
HTML-сторінку закінчено. На малюнку 2 наведено приклад відображення сторінки у браузері.
Малюнок 2. Відображення ініціалізованої, закінченої сторінки змісту
Лістинг 9. Налаштування об'єкта XML HTTP
Цей код завантажує URL, вказаний у посиланні: panels-ajax.php. Далі додамо функцію processStateChange.
Лістинг 10. Обробка змін стану та розміщення нового вмісту в div
Ви завершили створення файлу ajax-app.php. Тепер потрібно визначити файл panels-ajax.php, на який вказують посилання в панелі.
Повернення вмісту
При натисканні одного із посилань у вашому додатку Ajax-код спробує завантажити panels-ajax.php. Створіть цей файл і помістіть його в каталог, в якому знаходиться ajax-app.php. Цей файл оброблятимезмінну panel_id, передану GET.
Лістинг 11. Обробка змінної panel_id та повернення зазначеної панелі
Якщо змінна panel_id існує, повертається вказана панель. HTML-файли вмісту панелей знаходяться у завантажуваному zip-файлі (ajax.sajax.source.zip на сторінці завантаження), разом із відповідними малюнками. Приклад відображення у браузері під час вибору панелі "Avoid editing a page that doesn't exist" наведено малюнку 3.
Малюнок 3. Відображення однієї панелі
Якщо посилання існують і Ajax працює, натискання посилання посилає початковий вміст вмістом конкретної панелі. Перейдемо до додавання навігаційних посилань.
Додавання навігаційних посилань
Для зручності читачів додайте навігаційні посилання внизу кожної панелі. Натискання посилання next викличе завантаження наступної панелі у розділі вмісту, замінюючи поточний вміст.
Лістинг 12. Обробка змінної panel_id та повернення зазначеної панелі
Малюнок 4. Відображення навігаційних посилань
Натискання на навігаційні посилання призводить до переміщення по розділах керівництва, як і очікувалося, тому коли читач досягне кінця панелі, натискання посилання next перемістить його на наступну панель. Знову ж таки, вміст поточної панелі буде замінюватись вмістом наступного без очікування перезавантаження всієї сторінки.
Створення програми завершено. Перейдемо до інтеграції вашої програми із Sajax.
Інтеграція з Sajax
Що таке Sajax?
Що відбувається за лаштунками?
Ініціалізація Sajax
Почнемо роботу з Sajax-додатком. Скопіюйте файл ajax-app.php та перейменуйте копію на sajax-app.php. Збережіть цей файл у тому самому каталозі, де знаходиться файл ajax-app.php.Додайте наступний код на початок файлу:
Лістинг 13. Ініціалізація Sajax
Модифікація посилань
Лістинг 14. Посилання на панелі в Sajax-додатку
Знову повернення вмісту
Тепер вам необхідно змінити файл panels-ajax.php для узгодження його із незначними змінами, зробленими для використання Sajax. Скопіюйте та перейменуйте файл panels-ajax.php на panels-sajax.php і помістіть його в той же каталог, в якому розташовані інші файли. Змініть його так, як показано у лістингу 16 .
Лістинг 16. Зміни у panels-sajax.php
Цей файл перевірятиме змінні, передані в запиті GET. Зверніть увагу, що ви послали panels в функцію sajax_import. Вони мають бути значеннями змінної rs у масиві GET. Якщо значення $_GET['rs'] є panels, то змінна panel_id міститься в $_GET['rsargs'][0], яка є першим параметром, переданим вами у функцію x_panels, автоматично згенеровану бібліотекою Sajax.
Продовжуючи свою роботу далі (перед поверненням відповідної панелі), ваш код повинен вивести будь-які два символи, оскільки це дефект бібліотеки Sajax. Ці символи не будуть відображатися у вихідному HTML-коді відображуваної Web-сторінки. Потім ви повинні замінити посилання $_GET['panel_id'] на $_GET['rsargs'][0]. І, нарешті, ви повинні змінити навігаційні посилання. Вони мають виглядати так, як вже змінені посилання в файлі sajax-app.php. Замініть виклик loadHTML викликом getPanel, як і раніше, передаючи ідентифікатор.
Рисунок 5. Приклад відображення в браузері результатів роботи програми PHP, інтегрованого з Sajax
Поведінка та інформація, що відображається додатком, показана на малюнку 5, такі ж, як і прироботи з Ajax.
Ресурси для скачування
- цей контент у PDF
- os-phpajax.sajax.source.zip">Вихідний код PHP програми (os-phpajax.sajax.source.zip 117KB)