Використання Ajax з PHP і Sajax
- Перед початком роботи
- Про це керівництві
- попередні умови
- огляд
- Ajax
- проблеми Ajax
- Приклад PHP-додатки
- Sajax
- Що таке Ajax?
- За лаштунками
- CSS-код
- Лістинг 1. Вказівка, що відображається для тегів span
- Створення посилань з використанням тега span
- об'єкт XMLHttpRequest
- Лістинг 2. Ініціалізація і використання об'єкта XMLHttpRequest
- ActiveXObject
- Лістинг 3. Ініціалізація та використання ActiveXObject
- функція processStateChange
- Лістинг 4. Обробка змін стану
- Лістинг 5. Обробка помилки
- GET проти POST
- методи кодування
- Створення PHP-додатки
- Створення HTML-документа
- Лістинг 6. Відображення посилань
- Створення посилань на бічній панелі
- Лістинг 7. Створення 10 посилань
- Малюнок 1. Відображення бічній панелі з посиланнями
- ініціалізація вмісту
- Лістінг 8. Ініціалізація вмісту Сторінки
- Малюнок 2. Відображення ініціалізованої, закінченою сторінки змісту
- JavaScript: Додавання функції loadHTML
- Лістинг 9. Налаштування об'єкта XML HTTP
- JavaScript: Додавання функції processStateChange
- Лістинг 10. Обробка змін стану і розміщення нового вмісту в div
- повернення вмісту
- Лістинг 11. Обробка змінної panel_id і повернення зазначеної панелі
- Малюнок 3. Відображення однієї панелі
- Додавання навігаційних посилань
- Лістинг 12. Обробка змінної panel_id і повернення зазначеної панелі
- Малюнок 4. Відображення навігаційних посилань
- Інтеграція з Sajax
- Що таке Sajax?
- Синхронізація асинхронного JavaScript
- Що відбувається за лаштунками?
- ініціалізація Sajax
- Лістинг 13. Ініціалізація Sajax
- модифікація посилань
- Лістинг 14. Посилання на панелі в Sajax-додатку
- заміна JavaScript
- Лістинг 15. Нові JavaScript-функції
- Знову повернення вмісту
- Лістинг 16. Зміни в panels-sajax.php
- Малюнок 5. Приклад відображення в браузері результатів роботи PHP-додатки, інтегрованого з Sajax
- резюме
- Ресурси для скачування
Simple Ajax Toolkit може спростити інтеграцію серверних PHP-додатків з JavaScript
Перед початком роботи
Даний посібник призначено для тих, хто цікавиться розробкою потужних Web-додатків, динамічно оновлюють свій вміст, використовуючи технологію Ajax (asynchronous JavaScript and XML) з PHP, і не оновлюючи всю Web-сторінку при кожній дії користувача. У цьому керівництві передбачається, що ви знайомі з основними концепціями PHP, включаючи використання операторів if і switch, а також функцій.
Про це керівництві
Ви познайомитеся з Ajax, а також з проблемами його використання. Також ви створите Ajax-додаток на PHP, яке буде відображати панелі розділів попередньо написаного керівництва. При виборі посилання панелі буде завантажуватися тільки вміст розділу і заміщатися вмістом обраної панелі, економлячи пропускну здатність і зменшуючи час завантаження сторінки. Потім ви інтегруєте в Ajax-додаток програму Simple Ajax Toolkit (Sajax), яка буде синхронізувати використання Ajax, спрощуючи розробку.
попередні умови
Для роботи з керівництвом необхідні наступні інструментальні засоби:
Web-сервер
Виберіть будь-який Web-сервер і операційну систему. можете використовувати Apache 2.X або HTTPServer фірми IBM.
PHP
Ви можете продовжувати без PHP, але якщо ви цікавитеся взаємодією з прикладом додатки, завантажте PHP V5 .
Sajax
вам знадобитися Sajax . Це бібліотека PHP-функцій в одному файлі, використовувана в цьому посібнику.
Web-браузер
Вам знадобитися Web-браузер, що підтримує JavaScript. До таких браузерам відносяться Mozilla, Firefox, Opera і Microsoft Internet Explorer.
огляд
Перед зануренням у деталі познайомтеся з Ajax, прикладом PHP-додатки і Sajax.
Ajax
Ajax дозволяє Web-розробникам створювати інтерактивні Web-сторінки, які оновлюють свій вміст без необхідності повної повторної завантаження. Використовуючи Ajax, ви можете створювати додатки, які після натискання кнопки будуть змінювати вміст одного розділу Web-сторінки. Немає необхідності чекати завантаження всієї сторінки - завантажується тільки вміст цього одного розділу. Погляньте, наприклад, на Google Maps: ви можете вибирати і переміщати карту без очікування завантажень сторінки.
проблеми Ajax
Існують моменти, які потрібно враховувати при використанні Ajax. Аналогічно будь-який інший Web-сторінці, Ajax-сторінки можна вносити в закладки, що може створити проблеми, якщо запити виконуються в GET, а не вPOST. Інтернаціоналізація і з'являються різні схеми кодування роблять стандартизацію цих схем дуже важливим питанням. У цьому посібнику ви дізнаєтеся про ці важливі проблеми
Приклад PHP-додатки
Спочатку ви створите додаток в Ajax, потім в Sajax, для того щоб побачити переваги використання цього інструментального засобу. Додаток являє собою розділ попередньо написаного керівництва з посиланнями на панелі. Воно буде використано як приклад, що показує переваги використання Ajax. Панелі завантажуються в асинхронному режимі без очікування повторного завантаження решти сторінки. Ця програма служить також як приклад, що показує, як створювати ваші власні Ajax-додатки.
Sajax
Припустимо, що ви хочете створити Ajax-додаток, не замислюючись про хитромудрих деталях Ajax. Вам потрібен Sajax. Sajax абстрагує від Web-розробника високорівневі деталі Ajax за допомогою використання бібліотеки, розробленої групою з ModernMethod. По суті, Sajax працює аналогічно Ajax. Однак, використовуючи надані в бібліотеці Sajax високорівневі функції, технічні деталі Ajax можуть ігноруватися.
Що таке Ajax?
В даному розділі будуть розглянуті (з прикладами) концепції Ajax, включаючи те, що відбувається при натисканні на посилання, HTML-код і JavaScript-код, необхідні для роботи Ajax з PHP-додатком. У наступному розділі «Створення PHP-додатки» ми приступимо до створення PHP-додатки, використовуючи вивчені тут концепції Ajax.
За лаштунками
Ajax є комбінацією асинхронного JavaScript і XML. Асинхронність полягає в тому, що ви можете натиснути на посилання, і при цьому буде завантажуватися тільки вміст, відповідне цим посиланням, в той час як верхня частина сторінки або будь-яка інша інформація залишаться незмінними.
При натисканні на посилання починає працювати JavaScript-функція. Вона створює об'єкт, який взаємодіє з Web-браузером і вказує браузеру завантажити конкретну сторінку. Ви можете потім переглянути на цій же сторінці інший вміст як зазвичай, а коли нова сторінка повністю завантажиться в браузер, він відобразить вміст в місце, вказане HTML-тегом div.
Для створення посилань з тегами span використовується CSS-код
CSS-код
CSS-код потрібен в прикладі додатка для того, щоб теги span відображалися як реальні посилання, створені звичайним тегом анкера (<a href=...>), і натискати, як реальні посилання.
Лістинг 1. Вказівка, що відображається для тегів span
... <style type = "text / css"> span: visited {text-decoration: none; color: # 293d6b; } Span: hover {text-decoration: underline; color: # 293d6b; } Span {color: # 293d6b; cursor: pointer} </ style>Ці теги span використовуються в прикладі додатка, і колір узгоджується з використовуваним для посилань в будь-якому керівництві IBM developerWorks. Перший рядок у стилі тега вказує, що після натискання на посилання, її колір залишається таким же. При русі курсору миші над посиланням, вона підкреслюється, а курсор набирає вигляду покажчика, використовуваного для звичайних тегів анкера (<a href...>). Розглянемо процес створення посилань, що використовують цей CSS-код.
Створення посилань з використанням тега span
Посилання, які ви створите в розділі «Створення PHP-додатки», будуть використовуватися для взаємодії з браузером через JavaScript та вказівки вмісту, яке треба витягти. Це не звичайні посилання, що використовують теги анкера. Вони створюються за допомогою теговspan. Зовнішній вигляд і поведінка тега span визначаються в CSS-коді ( лістинг 1 ). наприклад:
<Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 0', 'content')"> Managing content </ span>Оброблювач onclick вказує сценарій, який треба виконати при натисканні на цей тег span. Існують і деякі інші специфікатори, аналогічні onclick, з якими ви можете експериментувати, наприклад, onmouseover і ondblclick. Зверніть увагу, що замість звичайного посилання http: // або відносної посилання panels-ajax.php ?, в поле onclick використовується виклик JavaScript-функції loadHTML. Ви розглянете функцію loadHTML нижче.
об'єкт XMLHttpRequest
Якщо ви використовуєте браузери Mozilla, Opera або інші браузери даного сімейства, вміст сторінки буде динамічно вилучатись за допомогою вбудованого об'єкта XMLHttpRequest. Internet Explorer фірми Microsoft використовує інший об'єкт, про який ми розповімо далі. Ці об'єкти використовуються однаково, і реалізація підтримки обох об'єктів займає кілька додаткових рядків коду.
Об'ектXMLHttpRequest використовується для вилучення вмісту сторінки в JavaScript. Ви будете використовувати цей код в прикладі додатка разом з доповненнями до функцііloadHTML, що відносяться до ActiveXObject. Приклад використання наведено в лістингу 2 .
Лістинг 2. Ініціалізація і використання об'єкта XMLHttpRequest
... <style> <script type = "text / javascript"> var request; var dest; function loadHTML (URL, destination) {dest = destination; if (window.XMLHttpRequest) {request = new XMLHttpRequest (); request.onreadystatechange = processStateChange; request.open ( "GET", URL, true); request.send (null); }} </ Script> ...Мінлива destination, передана як параметр в лістингу 2 , Вказує місце, куди потрібно помістити вміст, завантажене об'єктом XMLHttpRequest і зазначене тегом <div id = "content"> </ div>. Потім код перевіряє існування об'єкта XMLHttpRequest і при позитивному результаті створює новий. Потім обробник події встановлюється в функцію processStateChange, що є функцією, яку викликає об'єкт при кожній зміні стану. Далі, об'єкт request використовує метод open, передаючи тип запиту, GET, і URL, який об'єкт буде завантажувати. І, на завершення, об'єкт наводиться в дію за допомогою виклику його методу send.
ActiveXObject
ActiveXObject використовується замість об'єкта XMLHttpRequest в Internet Explorer. Він працює аналогічно об'єкту XMLHttpRequest, і навіть назви функцій збігаються ( лістинг 3 ).
Лістинг 3. Ініціалізація та використання ActiveXObject
... function loadHTML (URL, destination) {dest = destination; if (window.XMLHttpRequest) {...} else if (window.ActiveXObject) {request = new ActiveXObject ( "Microsoft.XMLHTTP"); if (request) {request.onreadystatechange = processStateChange; request.open ( "GET", URL, true); request.send (); }}} </ Script>У цьому випадку (якщо ви використовуєте Internet Explorer) створюється новий екземпляр ActiveXObject з типом Microsoft.XMLHTTP. Після чого використайте вбудований подій і викликається його функція open, потім функція send, і об'єкт ActiveXObject починає працювати.
функція processStateChange
Тут описується обробник подій або функція зворотного виклику. Мета цієї функції - обробити зміни стану, що виникають в створеному об'єкті. У нашому випадку призначенням цієї функції будуть: обробка змін стану, перевірка переходу об'єкта в потрібний стан і читання динамічно отриманий вміст.
Функція processStateChange викликається об'єктами XMLHttpRequest або ActiveXObject при зміні стану. Коли об'єкт переходить в стан 4, це означає, що вміст сторінки отримано (див. лістинг 4 ).
Лістинг 4. Обробка змін стану
... var dest; function processStateChange () {if (request.readyState == 4) {contentDiv = document.getElementById (dest); if (request.status == 200) {response = request.responseText; contentDiv.innerHTML = response; http: //httpd.apache.org/download.cgi}}} function loadHTML (URL, destination) {...Коли об'єкт XML HTTP переходить в стан 4, вміст готове для вилучення і відображення в потрібному місці браузера. Таким місцем являетсяcontentDiv, і воно знаходиться в документі. Якщо запит був нормальним і був отриманий в нормальному порядку, код статусу відповіді буде дорівнює 200. HTML-відповідь зберігається в request.responseText і відображається в браузері шляхом привласнення його змінної contentDiv.innerHTML.
Якщо помилок при передачі не було, значить все пройшло добре і нове вміст з'явиться в браузері; в іншому випадку значеніеrequest.status не дорівнюватиме 200. У лістингу 5 наведено код обробки помилки.
Лістинг 5. Обробка помилки
... if (request.status == 200) {response = request.responseText; contentDiv.innerHTML = response; } Else {contentDiv.innerHTML = "Error: Status" + request.status; } ...лістинг 5 передаватиме інформацію про помилку передачі в браузер. Ви будете використовувати цю функцію у вашому прикладі програми як функції зворотного виклику. Потім ви розглянете проблеми і відмінності між GET і POST.
GET проти POST
GET і POST - це два методи виконання HTTP-запитів і передачі змінних з цими запитами. Розробник не повинен вибирати метод довільно, оскільки обидва використовуються в певних ситуаціях. GET-запити включають змінні в URL, тому вони можуть бути занесені в закладки. Це призведе до поганих наслідків, якщо змінні призначалися для зміни бази даних, або для покупки чогось і т.д. Уявіть собі ситуацію, коли ви випадково занесли в закладки сторінку, призначену для покупки чогось, з вашою адресою, номером кредитної карти і товаром вартістю в $ 100, зазначеними в URL. Повторний перехід з цього URL означав би покупку цього товару.
Отже, GET-запит повинен бути виконаний тоді, коли змінні не мають наслідків, означаючи, що ви можете перезавантажувати сторінку в будь-який час і нічого не повинно змінюватися. Підходящої для GET-запиту змінної міг би бути ідентифікатор категорії. Ви можете перезавантажувати сторінку знову і знову, і ця категорія буде відображатися повторно без небажаного ефекту.
POST-запити, з іншого боку, повинні застосовуватися в тих випадках, коли змінні впливають на такий ресурс, наприклад, як база даних, або для захисту персональної інформації. У гіпотетичній ситуації покупки товару вартістю $ 100 ви повинні використовувати POST-запит. Якщо ви занесете в закладки сторінку підтвердження покупки, що не містить в URL змінних, нічого не станеться, тобто ви не купите випадково що-небудь непотрібне, або не купите те, що у вас вже є.
Наслідки використання запитів GET і POST мають те ж значення і в Ajax. Важливо розуміти різницю між цими запитами при створенні цього додатка, а також ваших майбутніх додатків. Це допоможе вам уникнути однієї з типових помилок при розробці Web-додатків.
методи кодування
У HTTP існують різні методи кодування переданих даних, але XML сприймає тільки декілька з них. Одним з них, максимально сумісним, є UTF-8, оскільки він зворотно сумісний з кодом ASCII (American Standard Code for Information Interchange). Крім символів цього коду існує велика кількість інтернаціональних символів, використовуваних в інших країнах і кодованих або не сумісним з ASCII способом, або способом, що не відповідає для розміщення в XML-файлах без відповідного кодування.
Наприклад, приміщення рядки Internationalization в ваш браузер перетворює її в рядок I% F1t% EBrn% E2ti% F4n% E0liz% E6ti% F8n, закодовану з використанням UTF-8. UTF-8-кодування класичних символів ASCII відповідає 7-бітовим ASCII-кодами цих же символів, що робить UTF-8 ідеальним вибором методу кодування.
Це важливо знати, оскільки ви зустрічаєтеся з кодуванням постійно при передачі і прийомі документів по HTTP, в тому числі і в Ajax. Передані дані в Ajax теж повинні кодуватися в UTF-8 для уможливлення більшої сумісності.
Створення PHP-додатки
У цьому розділі розглядається створення PHP-додатки з використанням Ajax, яке буде відображати керівництво з панеллю посилань. Ми будемо далі працювати з додатком, яке ви почали в розділі «Що таке Ajax?».
Створення HTML-документа
Почнемо зі створення PHP-файлу програми. Створимо файл ajax-app.php і почнемо з вказівки типу документа:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Тип документа встановлюється в HTML і стандарт XML, який ми будемо використовувати.
Пізніше ви побачите, що якщо ми видалимо ці рядки тоді, коли все зроблено і працює, відображення бічній панелі зміниться незначно.
Зазначимо також метод кодування і додамо CSS-код як показано в лістингу 6 .
Лістинг 6. Відображення посилань
... <html> <head> <title> Create a Content Management System with PHP </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" /> < style type = "text / css"> span: visited {text-decoration: none; color: # 293d6b; } Span: hover {text-decoration: underline; color: # 293d6b; } Span {color: # 293d6b; cursor: pointer} </ style> ...Заголовком сторінки буде назва розділу попередньо написаного керівництва. Метод кодування вказується за допомогою метатега, і ви налаштували HTML-документ на використання тегів span як посилань. Далі ви будете визначати ці посилання.
Створення посилань на бічній панелі
Перед створенням посилань ви повинні налаштувати бічну панель. Увімкніть заголовки, який ви можете завантажити разом з усіма іншими файлами програми:
... </ style> <? Php require ( 'content / header.html'); ?>Цей файл header.html містить CSS і іншу інформацію по JavaScript і форматування, використовувану в посібниках developerWorks. Він також налаштовує сторінку, для того, щоб ви могли почати додавати посилання. Існує введення в розділи і дев'ять панелей, тому ви повинні створити 10 посилань, як показано в лістингу 7 .
Лістинг 7. Створення 10 посилань
... <? Php require ( 'content / header.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 0', 'content')"> Managing content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 1', 'content')"> Adding content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 2', 'content')"> Saving new content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 3', 'content')"> Editing content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 4', 'content')"> Saving edited content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 5', 'content')"> Avoid adding duplicates </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 6', 'content')"> Avoid editing a page that does not exist </ span> <? Php require ( 'content / between- link.html '); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 7', 'content')"> Deleting content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 8', 'content')"> Serving a page </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "loadHTML ( 'panels-ajax.php? Panel_id = 9', 'content')"> Pulling it together: The CMS control page </ span>Кожне посилання викликає loadHTML, передаючи URL, що містить ідентифікатор панелі, використовуваний для визначення завантажується панелі. Другий параметр вказує цільової тег div для розміщення нового вмісту. Кожне посилання має деякий HTML-код в проміжках, і для того, щоб абстрагуватися від нього в цьому керівництві, цей код був поміщений в файл between-link.html, який теж можна завантажити. Приклад відображення в вікні браузера приведений на малюнку 1.
Малюнок 1. Відображення бічній панелі з посиланнями
Посилання, які відображаються зліва, відповідають одному розділу керівництва на developerWorks.
ініціалізація вмісту
Бічна панель встановлена, отже, тепер ви повинні підготувати розділ головного змісту, додаючи заголовок розділу:
... The CMS control page </ span> <? Php require ( 'content / pre-content.html'); ?>При цьому додасться посилання на заголовок розділу, а також посилання виведення на принтер. Потім, Ініціалізуйте розділ вмісту з усіма панелями, одну за одною, всередині вмісту тега div, як показано в лістингу 8 .
Лістінг 8. Ініціалізація вмісту Сторінки
... <? Php require ( 'content / pre-content.html'); ?> <Div id = "content"> <? Php require ( 'content / panel-0.html'); require ( 'content / panel-1.html'); require ( 'content / panel-2.html'); require ( 'content / panel-3.html'); require ( 'content / panel-4.html'); require ( 'content / panel-5.html'); require ( 'content / panel-6.html'); require ( 'content / panel-7.html'); require ( 'content / panel-8.html'); require ( 'content / panel-9.html'); ?> </ Div>Всі 10 панелей тепер відображаються одна за одною в стандартному форматі розділів IBM. Для завершення HTML-файлу додайте файл нижній панелі сторінки:
<? Php require ( 'content / footer.html'); ?>HTML-сторінка закінчена. На малюнку 2 наведено приклад відображення сторінки в браузері.
Малюнок 2. Відображення ініціалізованої, закінченою сторінки змісту
Вміст сторінки ініціалізувати і посилання підготовлені для виклику JavaScript-команд.
JavaScript: Додавання функції loadHTML
Пора вставити асинхронний JavaScript і додати функцію loadHTML в приклад програми, яка викликається посиланнями, створеними в розділі «Створення посилань на бічній панелі».
Лістинг 9. Налаштування об'єкта XML HTTP
... span {color: # 293d6b; cursor: pointer} </ style> <script type = "text / javascript"> var request; var dest; ... function loadHTML (URL, destination) {dest = destination; if (window.XMLHttpRequest) {request = new XMLHttpRequest (); request.onreadystatechange = processStateChange; request.open ( "GET", URL, true); request.send (null); } Else if (window.ActiveXObject) {request = new ActiveXObject ( "Microsoft.XMLHTTP"); if (request) {request.onreadystatechange = processStateChange; request.open ( "GET", URL, true); request.send (); }}} </ Script> <? Php require ( 'content / header.html'); ?> ...Цей код завантажує URL, вказаний на засланні: panels-ajax.php. Далі додамо функцію processStateChange.
JavaScript: Додавання функції processStateChange
Для завершення JavaScript-коду необхідна функція processStateChange, поміщає HTML-вміст в тег div, яке ви ініціалізували в розділі «Ініціалізація вмісту».
Лістинг 10. Обробка змін стану і розміщення нового вмісту в div
... var dest; function processStateChange () {if (request.readyState == 4) {contentDiv = document.getElementById (dest); if (request.status == 200) {response = request.responseText; contentDiv.innerHTML = response; } Else {contentDiv.innerHTML = "Error: Status" + request.status; }}} Function loadHTML (URL, destination) {...Ви завершили створення файлу ajax-app.php. Тепер ви повинні визначити файл panels-ajax.php, на який вказують посилання в панелі.
повернення вмісту
При натисканні однієї з посилань у вашому додатку Ajax-код спробує завантажити panels-ajax.php. Створіть цей файл і помістіть його в той же каталог, в якому знаходиться ajax-app.php. Цей файл буде обробляти змінну panel_id, передану в GET.
Лістинг 11. Обробка змінної panel_id і повернення зазначеної панелі
<? Php switch ($ _ GET [ 'panel_id']) {case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: case 8: case 9: require ( 'content / panel - '. $ _ GET [' panel_id '].'. html '); break; default: print ( "No such category <br>"); }?>Якщо змінна panel_id існує, буде повертатися зазначена панель. HTML-файли вмісту панелей знаходяться у переданому zip-файлі (ajax.sajax.source.zip на сторінці завантаження), разом з відповідними малюнками. Приклад відображення в браузері при виборі панелі "Avoid editing a page that does not exist" наведено на малюнку 3.
Малюнок 3. Відображення однієї панелі
Якщо посилання існують і Ajax працює, натискання на посилання заміщає початкове вміст вмістом конкретної панелі. Перейдемо до додавання навігаційних посилань.
Додавання навігаційних посилань
Для зручності читачів додайте навігаційні посилання внизу кожної панелі. Натискання посилання next викличе завантаження наступної панелі в розділі вмісту, заміщаючи поточний зміст.
Лістинг 12. Обробка змінної panel_id і повернення зазначеної панелі
require ( 'content / panel -'. $ _ GET [ 'panel_id']. '. html'); $ Panel_id_next = $ _GET [ 'panel_id'] + 1; $ Panel_id_prev = $ _GET [ 'panel_id'] - 1; if ($ panel_id_prev> = 0) {print ( "<span onclick = \" loadHTML ( 'panels-ajax.php? panel_id = ". $ panel_id_prev."', 'content') \ "> Previous Panel </ span> "); if ($ panel_id_next <= 9) print ( "|"); } If ($ panel_id_next <= 9) {print ( "<span onclick = \" loadHTML ( 'panels-ajax.php? Panel_id = ". $ Panel_id_next."', 'Content') \ "> Next Panel </ span > "); } Break; default:Посилання next буде просто являти собою посилання на збільшений на одиницю ідентифікатор поточної панелі, а посилання previous - зменшений на одиницю. Посилання previous буде відображатися тільки в тому випадку, якщо вона існує, тобто має значення більше або рівне нулю, а посилання next буде відображатися, якщо вона має значення менше або рівне дев'яти. Ці посилання створюються так само, як і інші вже створені вами посилання, за винятком того, що вони будуть змінюватися в залежності від значення ідентифікатора поточної панелі. Приклад відображення сторінки з навігаційними посиланнями наведено на малюнку 4.
Малюнок 4. Відображення навігаційних посилань
Натискання на навігаційні посилання призводить до переміщення по розділах керівництва, як і очікувалося, тому, коли читач досягне кінця панелі, натискання посилання next перемістить його на наступну панель. Знову ж, вміст поточної панелі буде заміщатися вмістом наступної без очікування перезавантаження всієї сторінки.
Створення програми завершено. Перейдемо до інтеграції вашої програми з Sajax.
Інтеграція з Sajax
У цьому розділі розглядається, що таке Sajax, як він синхронізує асинхронний JavaScript, і як перетворити ваше поточне Ajax-додаток в Sajax-додаток.
Що таке Sajax?
Simple Ajax Toolkit (Sajax) - це синхронний асинхронний JavaScript і XML. Що робить його синхронним - деталі об'єкта XML HTTP, використовуваного в вашому поточному Ajax-додатку, абстрагуються за допомогою файлу бібліотеки Sajax.php. Це дуже спрощує розробку Ajax-додатків, оскільки зменшується шанс появи помилок програмування. Ваші посилання теж будуть виглядати набагато простіше, оскільки будуть містити виклик тільки однієї функції. По суті, Sajax є модульний метод створення Ajax-додатків за допомогою викликів певних і динамічних функцій, спрощуючи процес розробки додатків.
Синхронізація асинхронного JavaScript
Існує кілька аспектів Sajax, які ви будете використовувати в даному розділі для синхронізації Ajax. Одним з них є sajax_init, не започатковано бібліотеку Sajax. Наступний - функція sajax_export, яку ви будете викликати для повідомлення Sajax про те, що у вас є розділ вмісту panels, для якого ви надалі створите відповідні JavaScript-функції. Ви можете викликати sajax_export стільки раз, скільки необхідно для кожного розділу динамічного вмісту вашого додатка.
Наступною використовуваної вами функцією є sajax_handle_client_request. Ця функція ініціалізує структури даних Sajax, готуючи додаток до обробки клієнтських запитів. Також ви створите $ sajax_remote_uri. Це URL, куди ваш додаток буде направлятися клієнтські запити, аналогічно вбудованому URL в посиланнях вашого Ajax-додатки.
Нарешті, вам потрібно буде включити JavaScript-функції Sajax в ваш JavaScript за допомогою функції sajax_show_javascript.
Що відбувається за лаштунками?
Що ж зараз відбувається? За лаштунками Sajax діє точно також як і Ajax. Однак Sajax налаштовує об'єкт XML HTTP за вас, спрощуючи вашу роботу. Це дозволяє вашому додатку працювати модульним способом з кількома розділами, використовуючи JavaScript-функції. Пакет Sajax робить розробку Ajax-додатків більш ефективної, використовуючи ту ж саму функціональність.
ініціалізація Sajax
Почнемо роботу з Sajax-додатком. Скопіюйте файл ajax-app.php і перейменуйте копію в sajax-app.php. Збережіть цей файл у тому ж каталозі, в якому знаходиться файл ajax-app.php. Додайте наступний код в початок файлу:
Лістинг 13. Ініціалізація Sajax
<? require ( "Sajax.php"); $ Sajax_remote_uri = "http: //localhost.localdomain/ajax-sajax/panels-sajax.php"; sajax_init (); sajax_export ( "panels"); sajax_handle_client_request (); ?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" ...Спочатку ми налаштовуємо віддалений URL. Потім необхідно ініціалізувати Sajax і експортувати panels. Це инициализирует Sajax для подальшого створення JavaScript-функцій, що обробляють запити, пов'язані з вмістом panels.
модифікація посилань
Тепер посилання повинні містити функції, що передають ідентифікатор панелі відповідної JavaScript-функції.
Лістинг 14. Посилання на панелі в Sajax-додатку
<? Php require ( 'content / header.html'); ?> <Span onclick = "getPanel (0)"> Managing content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (1)"> Adding content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (2)"> Saving new content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (3)"> Editing content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (4)"> Saving edited content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (5)"> Avoid adding duplicates </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (6)"> Avoid editing a page that does not exist </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (7)"> Deleting content </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (8)"> Serving a page </ span> <? Php require ( 'content / between-link.html'); ?> <Span onclick = "getPanel (9)"> Pulling it together: The CMS control page </ span> <? Php require ( 'content / pre-content.html'); ?> ...Натискання на посилання тепер викличе іншу JavaScript-функцію, яку ми зараз додамо.
заміна JavaScript
Перед продовженням роботи видаліть JavaScript з Ajax-додатки. Ви повинні додати нові функції, і ці функції нічого не будуть робити з об'єктом XML HTTP. Додайте наступні рядки замість старих JavaScript-функцій:
Лістинг 15. Нові JavaScript-функції
... <script type = "text / javascript"> <? Php sajax_show_javascript (); ?> Function getPanel_cb (content) {document.getElementById ( 'content'). InnerHTML = content; } Function getPanel (panel_id) {x_panels (panel_id, getPanel_cb); } </ Script> ...Перший рядок викликає sajax_show_javascript, яка імпортує JavaScript-функції, необхідні Sajax, і ще одну функцію getPanel, яку ви додасте. Ці додаткові JavaScript-функції додадуть ядро Sajax-додатки в браузер, оскільки після першого завантаження сторінки в браузер PHP-код більше не використовується.
Знову повернення вмісту
Тепер вам необхідно змінити файл panels-ajax.php для узгодження його з незначними змінами, зробленими для використання Sajax. Скопіюйте та перейменуйте файл panels-ajax.php в panels-sajax.php і помістіть його в той же каталог, в якому розташовані інші файли. Змініть його так, як показано в лістингу 16 .
Лістинг 16. Зміни в panels-sajax.php
<? Php if ($ _ GET [ 'rs'] == 'panels') {switch ($ _ GET [ 'rsargs'] [0]) {case 0: ... case 9: print ( "##"); require ( 'content / panel -'. $ _ GET [ 'rsargs'] [0]. '. html'); $ Panel_id_next = $ _GET [ 'rsargs'] [0] + 1; $ Panel_id_prev = $ _GET [ 'rsargs'] [0] - 1; if ($ panel_id_prev> = 0) {print ( "<span onclick = \" getPanel ( ". $ panel_id_prev.") \ "> Previous Panel </ span>"); ... print ( "<span onclick = \" getPanel ( ". $ Panel_id_next.") \ "> Next Panel </ span>"); ...Цей файл буде перевіряти змінні, передані в запиті 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.
резюме
Прийміть наші вітання! Ви успішно створили Ajax-додаток в PHP і інтегрували його з Sajax. Ваша програма заощадить для ваших користувачів (і в ваших майбутніх асинхронних JavaScript-додатках) значний обсяг трафіку і скоротить час завантаження, оскільки немає необхідності завантажувати Web-сторінки повністю - завантажується тільки необхідна інформація. Це дозволить вам створювати потужні інтерактивні додатки, які стають все більш звичними.
Ресурси для скачування
Схожі тими
Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів
Що таке Ajax?Php?
Php ?
Lt;/ style> <?
Php require ( 'content / header.html'); ?
Lt;?
Php require ( 'content / header.html'); ?
Php require ( 'content / between-link.html'); ?
Php require ( 'content / between-link.html'); ?
Php require ( 'content / between-link.html'); ?
