- Серія контенту:
- Цей контент є частиною серії: Ajax і XML
- Часто використовувані абревіатури
- Вікна з закладками
- Лістинг 1. index.html
- Лістинг 2. tab1.html
- Малюнок 1. Первісний вигляд сторінки з закладками
- Малюнок 2. Форма сторінки після вибору другої закладки
- Основи роботи з таблицями в Ajax
- Лістинг 3. index.html
- Лістинг 4. books.xml
- Малюнок 3. Зовнішній вигляд таблиці, побудованої за даними XML
- Посторінковий вивід сторінок за допомогою Ajax
- Лістинг 5. index.html
- Лістинг 6. data.php
- Лістинг 7. stats.php
- Малюнок 4. Зовнішній вигляд таблиці з посторінковим висновком
- Малюнок 5. Друга сторінка таблиці
- Приховані таблиці з розбивкою на сторінки
- Лістинг 8. index.php
- Малюнок 6. Зовнішній вигляд таблиці з фіктивним посторінковим розбиттям
- глайдери
- Лістинг 9. index.html
- Малюнок 7. Приклад реалізації закладок за допомогою глайдера
- висновок
- Ресурси для скачування
Наша взаимовыгодная связь https://banwar.org/
Ajax і XML
Використання Ajax для створення таблиць, закладок і глайдеров
Серія контенту:
Цей контент є частиною # з серії # статей: Ajax і XML
https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=ajax+и+xml
Слідкуйте за виходом нових статей цієї серії.
Цей контент є частиною серії: Ajax і XML
Слідкуйте за виходом нових статей цієї серії.
Як правило, Ajax і Web 2.0 в свідомості людей асоціюються з візуальними елементами призначеного для користувача інтерфейсу. Привабливість Ajax обумовлена саме відчуттям інтерактивності, яке з'являється, коли не доводиться оновлювати сторінку. Це аж ніяк не рекламне гасло, адже оновлення сторінок в традиційних додатках HTML призводить до морганню екрану, причому повторне завантаження елементів викликає візуальне відчуття зміни контексту навіть при найвищій швидкості з'єднання.
Часто використовувані абревіатури
- DHTML: динамічний HTML
- HTML: мова розмітки гіпертексту
- XSLT: розширювана мова стильових перетворень
У цій статті розглядається кілька методик (як з використанням Ajax, так і без нього) проектування призначеного для користувача інтерфейсу, що дозволяють уникнути подібного відчуття зміни контексту. Ми почнемо з найпростішого прикладу використання Ajax - вікна з закладками.
Вікна з закладками
Закладки (tabs) надають найпростіший спосіб того, як можна вмістити безліч даних на невеликій області екрану. Prototype - чудова JavaScript-бібліотека - до межі спрощує створення DHTML-вікон із закладками і підтримкою Ajax (див. лістинг 1 ). Якщо ви хочете більше дізнатися про цю бібліотеці або завантажити її для власних потреб, то зверніться до розділу ресурси .
Лістинг 1. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <a href="javascript:void loadTab('tab1.html' )"> Tab 1 </ a > | <a href="javascript:void loadTab('tab2.html' )"> Tab 2 </a> | <a href="javascript:void loadTab('tab3.html' )"> Tab 3 </a> <div id = "content" style = "padding: 5px; border: 2px solid black;"> </ div> <script> function loadTab (tab) {new Ajax.Updater ( 'content', tab, {method: 'get'}); } LoadTab ( 'tab1.html'); </ Script> </ body> </ html>
На початку файлу поміщена посилання на бібліотеку Prototype.js, яка бере на себе всю роботу з Ajax. Потім слід набір посилань на різні сторінки, причому натискання на кожну посилання призводить до виклику функції loadTab для поновлення області, в яку завантажується видиме вміст. Ця область є елементом <div> з ідентифікатором content. Функція loadTab викликає метод Ajax.Updater для завантаження зазначеного документа HTML всередину цього елемента.
В лістингу 2 показана перша закладка в файлі HTML. Всі інші файли виглядають аналогічно.
Лістинг 2. tab1.html
Tab 1
У браузері ця сторінка виглядає приблизно як на малюнку 1 .
Малюнок 1. Первісний вигляд сторінки з закладками
Якщо ж кликнути мишею на другий закладці, то сторінка набуде вигляду як на малюнку 2 .
Малюнок 2. Форма сторінки після вибору другої закладки
Якщо ви хочете побачити цей приклад в реальному виконанні, то подивіться нашу 
online-демонстрацію .
Того ж ефекту можна домогтися за допомогою прихованих елементів <div> з попередньо завантаженим вмістом, керуючи їх видимістю. Перевагою підходу на основі Ajax є те, що вміст закладок завантажується тільки в міру необхідності. Таким чином знижується час на завантаження сторінки, причому якщо користувач вирішить не переглядати закладку, то її вміст не буде завантажено зовсім.
У наступних трьох прикладах ілюструється робота з таблицями з використанням методів на основі Ajax (або схожих технологій).
Основи роботи з таблицями в Ajax
Спочатку ми розглянемо приклад створення таблиці з відправкою XML-запиту на сервер за допомогою Ajax. У цього методу є два переваги. По-перше, він дозволяє завантажувати дані в міру необхідності і оновлювати їх за місцем, що покращує сприйняття призначеного для користувача інтерфейсу. По-друге, для роботи цього методу потрібно джерело XML-даних, який буде корисний не тільки в разі Ajax, але і при використанні будь-якого клієнтського коду, який очікує дані в форматі XML.
Код прикладу створення таблиці з XML-даних наведено в лістингу 3 .
Лістинг 3. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <table id = "books"> </ table> <script> new Ajax.Request ( 'books. xml ', {method:' get ', onSuccess: function (transport) {var bookTags = transport.responseXML.getElementsByTagName (' book '); for (var b = 0; b <bookTags.length; b ++) {var author = bookTags [b] .getElementsByTagName ( 'author') [0] .firstChild.nodeValue; var title = bookTags [b] .getElementsByTagName ( 'title') [0] .firstChild.nodeValue; var publisher = bookTags [b] .getElementsByTagName ( 'publisher') [0] .firstChild.nodeValue; var elTR = $ ( 'books'). insertRow (-1); var elTD1 = elTR.insertCell (-1); elTD1.innerHTML = author; var elTD2 = elTR .insertCell (-1); elTD2.innerHTML = title; var elTD3 = elTR.insertCell (-1); elTD3.innerHTML = publisher;}}}); </ Script> </ body> </ html>
Якщо ви хочете побачити приклад створення таблиці в реальному виконанні, то подивіться нашу online-демонстрацію .
Обробник події onSuccess при виклику Ajax.Request розбирає XML-дані, спочатку вибираючи елементи, що описують книги. Потім вибираються значення вкладених тегів author, title і publisher. Нарешті, обробник додає дані в таблицю, викликаючи методи insertRow і insertCell для кожної книги.
Приклад формату XML, що використовується в цьому прикладі, наведено в лістингу 4 .
Лістинг 4. books.xml
<Books> <book> <author> Jack Herrington </ author> <title> Code Generation In Action </ title> <publisher> O'Reilly </ publisher> </ book> <book> <author> Jack Herrington </ author> <title> Podcasting Hacks </ title> <publisher> O'Reilly </ publisher> </ book> <book> <author> Jack Herrington </ author> <title> PHP Hacks </ title> <publisher> O 'Reilly </ publisher> </ book> </ books>
Зовнішній вигляд таблиці в DHTML показаний на малюнку 3 .
Малюнок 3. Зовнішній вигляд таблиці, побудованої за даними XML
Цей приклад відмінно працює в умовах невеликих наборів даних, але що буде, якщо їх обсяг зросте?
Посторінковий вивід сторінок за допомогою Ajax
Для посторінкового виведення таблиць за допомогою Ajax я продемонструю дещо інший підхід. Він не є строго обов'язковим, при бажанні можна легко модифікувати метод на основі розбору XML, показаний вище. Однак мені б хотілося охопити різні способи роботи з таблицями, щоб ви могли вибрати той з них, який найкращим чином відповідає вимогам вашого застосування.
В даному випадку буде використовуватися джерело даних на PHP, який буде видавати блоки HTML-коду для різних сторінок таблиці. Початкова секція HTML-коду показана в лістингу 5 .
Лістинг 5. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <div> <a href="javascript:void updateTable(0);"> 1 </a> | <a href="javascript:void updateTable(1);"> 2 </a> | <a href="javascript:void updateTable(2);"> 3 </a> | <a href="javascript:void updateTable(3);"> 4 </a> | <a href="javascript:void updateTable(4);"> 5 </a> | <a href="javascript:void updateTable(5);"> 6 </a> </ div> <div id = "states"> </ div> <script> function updateTable (start) {new Ajax.Updater ( 'states', 'stats.php? start =' + (start * 10) + '& count = 10', {method: 'get'}); } UpdateTable (0); </ Script> </ body> </ html>
Більшу частину сторінки складають посилання на різні сторінки таблиці. Вміст таблиці, отримане від сторінки stats.php, завантажується в елемент states <div>.
Для демонстрації таблиці, що складається з декількох сторінок, знадобиться великий набір даних. Для цього буде використовуватися статистика по населенню США, а також PHP-функція getdata, яка буде повертати масив штатів і їх населення по роках. Фрагмент коду цієї функції наведено в лістингу 6 .
Лістинг 6. data.php
<? Php function getdata () {$ population = array (); $ Population [] = array ( 'Alabama', 4447100,4527166,4596330,4663111,4728915,4800092,4874243); $ Population [] = array ( 'Alaska', 626932,661110,694109,732544,774421,820881,867674); ... $ population [] = array ( 'Wyoming', 493782,507268,519886,528005,530948,529031,522979); return $ population; }?>
Для отримання цих даних порціями я створив сторінку stats.php, яка приймає на вхід початок і кінець часового інтервалу і повертає HTML-таблицю, що містить відповідну порцію статистики. Сторінка показана в лістингу 7 .
Лістинг 7. stats.php
<Table> <? Php require 'data.php'; $ Data = getdata (); $ Start = 0; $ Count = count ($ data); if (array_key_exists ( 'start', $ _GET)) $ start = $ _GET [ 'start']; if (array_key_exists ( 'count', $ _GET)) $ count = $ _GET [ 'count']; $ Index = 0; foreach ($ data as $ state) {if ($ index> = $ start && $ index <$ start + $ count) {?> <tr> <? php foreach ($ state as $ item) {?> <td> <? php echo ($ item); ?> </ Td> <? Php}?> </ Tr> <? Php} $ index + = 1; }?> </ Table>
При відкритті сторінки в браузері перша сторінка таблиці завантажується автоматично ( малюнок 4 ).
Малюнок 4. Зовнішній вигляд таблиці з посторінковим висновком
Інші дані в таблицю завантажуються динамічно при натисканні на посилання. на малюнку 5 показано, що станеться при виборі мишею другої сторінки даних.
Малюнок 5. Друга сторінка таблиці
Якщо ви хочете побачити приклад створення таблиці зі сторінками в реальному виконанні, то подивіться нашу online-демонстрацію .
Цей метод схожий на той, що використовувався в прикладі з закладками. Передача даних в форматі HTML через Ajax часто також ефективна, як і в XML. При цьому такий підхід виявляється навіть простіше для браузера, оскільки не доводиться розбирати XML і перетворювати його в HTML.
Далі розглянемо найбільш простий з методів, що не використовують Ajax, для динамічного створення таблиць.
Приховані таблиці з розбивкою на сторінки
В лістингу 8 показаний простий метод створення таблиць з посторінковим висновком без використання Ajax на стороні сервера.
Лістинг 8. index.php
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <div> <? Php require ( 'data.php'); $ Data = getdata (); $ States = count ($ data) / 10; for ($ s = 0; $ s <$ states; $ s ++) {?> <? php echo ((($ s == 0)? '': '|')); ?> <a href="javascript:void updateTable(<?php echo( $s) ?>); "> <? Php echo ($ s + 1)?> </a> <? Php}?> </ div> <? php $ index = 0; foreach ($ data as $ state) {?> <? php if ($ index% 10 == 0) {?> <? php if ($ index> 0) {?> </ table> </ div> <? php}?> <div id = "states <? php echo ($ index / 10)?>" style = "display: none;"> <table> <? php}?> <tr> <? php foreach ($ state as $ item) {?> <td> <? php echo ($ item); ?> </ Td> <? Php}?> </ Tr> <? Php $ index + = 1; }?> </ Table> </ div> <script> function updateTable (id) {var elStateDivs = []; <? Php for ($ s = 0; $ s <$ states; $ s ++) {?> ElStateDivs.push ($ ( 'states <? Php echo ($ s)?>')); <? Php}?> For (var i = 0; i <elStateDivs.length; i ++) {if (i == id) elStateDivs [i] .show (); else elStateDivs [i] .hide (); }} UpdateTable (0); </ Script> </ body> </ html>
В даному прикладі використовується код на PHP для створення набору тегів <div>, по одному на кожну сторінку в таблиці. Перший тег відображається за замовчуванням, а решта ховаються. Функція updateTable показує і приховує різні порції сторінки в залежності від обраної сторінки.
Якщо ви хочете побачити приклад роботи з прихованими таблиці з посторінковим розбиттям в реальному виконанні, то подивіться нашу online-демонстрацію .
Зверніть увагу, що в прикладі і раніше використовується бібліотека Prototype.js, хоча підтримка Ajax не потрібно. З її допомогою легше управляти елементам <div> через надані нею методи $ (), show і hide.
Зовнішній вигляд сторінки показаний на малюнку 6 .
Малюнок 6. Зовнішній вигляд таблиці з фіктивним посторінковим розбиттям
В останньому прикладі використання Ajax мова піде про елемент під назвою глайдер. Він надає новий спосіб відображення інформації, динамічно зрушуючи її вліво або вправо при переході з однієї сторінки на іншу.
глайдери
Для реалізації ефекту зсуву сторінок буде потрібно кілька додаткових бібліотек. Першою з них буде Scriptaculous - бібліотека, реалізована на основі Prototype.js. Вона надає засоби реалізації ефектів, використовуваних глайдерами. Крім неї буде також використовуватися бібліотека Glider.
В лістингу 9 показаний приклад глайдера.
Лістинг 9. index.html
<Html> <head> <link rel = "stylesheet" href = "stylesheets / glider.css" type = "text / css"> <script src = "javascripts / prototype.js"> </ script> <script src = "javascripts / effects.js"> </ script> <script src = "javascripts / glider.js"> </ script> </ head> <body> <div id = "glider"> <div class = "controls" > <a href="#tab1"> Tab 1 </a> | <a href="#tab2"> Tab 2 </a> | <a href="#tab3"> Tab 3 </a> | <a href="#tab4"> Tab 4 </a> </ div> <div class = "scroller"> <div class = "content"> <div class = "section" id = "tab1"> Tab 1 </ div> <div class = "section" id = "tab2"> Tab 2 </ div> <div class = "section" id = "tab3"> Tab 3 </ div> <div class = "section" id = "tab4"> Tab 4 </ div> </ div> </ div> </ div> <script> new Glider ( 'glider', {duration: 0.5}); </ Script> </ body> </ html>
Якщо ви хочете побачити елемент глайдер в реальному виконанні, то подивіться нашу online-демонстрацію .
У верхній частині сторінки підключаються кілька скриптових бібліотек. Потім слід елемент <div> глайдера, який містить <div> з ідентифікатором controls з посиланнями на кожну закладку, а також іншої <div> з ідентифікатором scroller, в якому ви побачите уміст кожної закладки. Скрипт в нижній частині сторінки створює об'єкт Glider з ID, рівним ідентифікатором елемента <div> глайдера.
При відкритті сторінки в браузері вона виглядає так, як показано на малюнку 7 .
Малюнок 7. Приклад реалізації закладок за допомогою глайдера
При виборі іншого закладки її вміст плавно висувається на екран.
висновок
У цій статті було показано лише кілька типів інтерфейсних елементів, які можна створювати за допомогою Ajax, PHP і бібліотеки Prototype.js. Сподіваюся, деякі з цих ідей ви зможете застосувати в своїх Web-додатках. Вони досить прості, причому Prototype.js дійсно робить роботу з Ajax тривіальної. Якщо ви хочете поділитися своїм вдалим досвідом застосування Ajax, то ви можете це зробити в форумі Ajax на сайті developerWorks . Ми будемо раді про нього дізнатися.
Ресурси для скачування
Схожі теми
- Оригінал статті: " Ajax and XML: Ajax for tables ". (EN)
- зайдіть на домашню сторінку PHP , Що містить безцінні матеріали для PHP-програмістів. (EN)
- бібліотека Prototype : Прочитайте про можливості цієї інфраструктури JavaScript, створеної для спрощення розробки динамічних Web-додатків. (EN)
- JavaScript-бібліотека Scriptaculous : В ній ви знайдете кошти для додавання до вашого Web-сайту різних ефектів, відмінно доповнюють інфраструктуру на основі Prototype. (EN)
- Зверніться до документації по Prototype.js за додатковою інформацією про бібліотеку Prototype. Крім того, на цій сторінці ви знайдете посилання на офіційний блог Prototype і багато інших матеріалів. (EN)
- прочитайте про jQuery - ще одній бібліотеці JavaScript, що володіє схожими з Prototype.js можливостями. (EN)
- ознайомтеся з Yahoo! User Interface Library - інструментарієм Ajax, розробленим Yahoo! (EN)
- прочитайте про елементі управління Glider , Що представляє собою свіже рішення для реалізації закладок. (EN)
- Завантажте ознайомлювальні версії програмного забезпечення IBM : Використовуйте у вашому наступному проекті ознайомчі версії ПЗ, які можна отримати прямо з сайту IBM developerWorks. (EN)
Підпишіть мене на повідомлення до коментарів
Jsp?Php?
Population [] = array ( 'Wyoming', 493782,507268,519886,528005,530948,529031,522979); return $ population; }?
Gt; <tr> <?
Php foreach ($ state as $ item) {?
Gt; <td> <?
Php echo ($ item); ?
Gt; </ Td> <?
Php}?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
