Ajax и XML: Работа с таблицами в Ajax

Использование Ajax для создания таблиц, закладок и глайдеров

Одной из сильных сторон технологии Ajax (Asynchronous JavaScript™ + XML) является динамическое отображение данных, полученных от сервера. В этой статье описываются несколько методик для динамического представления данных при помощи таблиц, закладок и глайдеров.

Джек Д Херрингтон, главный инженер-программист, Leverage Software Inc.

Джек Д. Херрингтон (Jack D. Herrington) - главный инженер-программист с более чем двадцатилетним опытом работы. Он автор трех книг: "Генерирование кода в действии", "Podcasting Hacks" и "PHP Hacks". Написал более 30 статей. Вы можете связаться с Джеком по адресу jherr@pobox.com.



09.10.2009

Как правило, 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. Первоначальный вид страницы с закладками
The starting tab page

Если же кликнуть мышью на второй закладке, то страница примет вид как на рисунке 2.

Рисунок 2. Вид страницы после выбора второй закладки
After clicking the second tab

Готовый пример использования окон с закладками

Если вы хотите увидеть этот пример в реальном исполнении, то посмотрите нашу Нажмите для просмотра готового примера окна с закладками (открывается в новом окне)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>

Готовый пример работы с таблицами при помощи Ajax

Если вы хотите увидеть пример создания таблицы в реальном исполнении, то посмотрите нашу Нажмите для просмотра готового примера создания таблицы (открывается в новом окне)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
The XML-driven table page

Этот пример отлично работает в условиях небольших наборов данных, но что будет, если их объем возрастет?


Постраничный вывод страниц при помощи 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. Внешний вид таблицы с постраничным выводом
The paged table display

Остальные данные в таблицу загружаются динамически при нажатии на ссылки. На рисунке 5 показано, что произойдет при выборе мышью второй страницы данных.

Рисунок 5. Вторая страница таблицы
The second page

Готовый пример постраничного вывода таблицы при помощи Ajax

Если вы хотите увидеть пример создания таблицы со страницами в реальном исполнении, то посмотрите нашу Нажмите для просмотра готового примера таблицы со страницами (открывается в новом окне)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. Внешний вид таблицы с фиктивным постраничным разбиением
Mock paged table display

В последнем примере использования 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. Пример реализации закладок при помощи глайдера
The tabs example done with a glider

При выборе другой закладки ее содержимое плавно выдвигается на экран.


Заключение

В этой статье было показано лишь несколько типов интерфейсных элементов, которые можно создавать при помощи 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)
  • Обратитесь к технической библиотеке XML, содержащей множество статей, советов, руководств, стандартов и справочников IBM Redbook.
  • Технические мероприятия и Web-трансляции developerWorks: в этих разделах можно получить самую актуальную информацию о современных технологиях. (EN)
  • Обратитесь к магазину технической литературы, в котором представлены книги на данную и другие темы. (EN)

Получить продукты и технологии

  • Загрузите ознакомительные версии программного обеспечения IBM: используйте в вашем следующем проекте ознакомительные версии ПО, которые можно получить прямо с сайта IBM developerWorks. (EN)

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML
ArticleID=433905
ArticleTitle=Ajax и XML: Работа с таблицами в Ajax
publish-date=10092009