Презентация AJAX и XML: Работа с таблицами в AJAX онлайн

Содержание слайда: AJAX и XML: Работа с таблицами в AJAX Подготовили: Вавилов В.В. Скоробогатая М. А.

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

Содержание слайда: Окна с закладками Закладки (tabs) предоставляют простейший способ того, как можно уместить множество данных на небольшой области экрана. Prototype – великолепная JavaScript-библиотека – до предела упрощает создание DHTML-окон с закладками и поддержкой Ajax.

Содержание слайда: Листинг 1 Пример кода работы с Prototype.js

Содержание слайда: Описание Листинга 1. В начале файла помещена ссылка на библиотеку Prototype.js, которая берет на себя всю работу с Ajax. Затем следует набор ссылок на различные страницы, причем нажатие на каждую ссылку приводит к вызову функции loadTab для обновления области, в которую загружается видимое содержимое. Эта область представляет собой элемент <div> с идентификатором content. Функция loadTab вызывает метод Ajax.Updater для загрузки указанного документа HTML внутрь этого элемента

Содержание слайда: Того же эффекта можно добиться при помощи скрытых элементов <div> с предварительно загруженным содержимым, управляя их видимостью. Преимуществом подхода на основе Ajax является то, что содержимое закладок загружается только по мере необходимости. Таким образом снижается время на загрузку страницы, причем если пользователь решит не просматривать закладку, то ее содержимое не будет загружено вовсе. Того же эффекта можно добиться при помощи скрытых элементов <div> с предварительно загруженным содержимым, управляя их видимостью. Преимуществом подхода на основе Ajax является то, что содержимое закладок загружается только по мере необходимости. Таким образом снижается время на загрузку страницы, причем если пользователь решит не просматривать закладку, то ее содержимое не будет загружено вовсе.

Содержание слайда: Основы работы с таблицами в Ajax Вначале мы рассмотрим пример создания таблицы с отправкой XML-запроса на сервер при помощи Ajax. У этого метода есть два преимущества. Во-первых, он позволяет загружать данные по мере необходимости и обновлять их по месту, что улучшает восприятие пользовательского интерфейса. Во-вторых, для работы этого метода требуется источник XML-данных, который будет полезен не только в случае Ajax, но и при использовании любого клиентского кода, ожидающего данные в формате XML.

Содержание слайда: Код примера создания таблицы из XML-данных 

Содержание слайда: Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы, описывающие книги. Затем выбираются значения вложенных тегов author, title и publisher. Наконец, обработчик добавляет данные в таблицу, вызывая методы insertRow и insertCell для каждой книги. Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы, описывающие книги. Затем выбираются значения вложенных тегов author, title и publisher. Наконец, обработчик добавляет данные в таблицу, вызывая методы insertRow и insertCell для каждой книги.

Содержание слайда: Пример формата XML, использующегося в этом примере

Содержание слайда: Скрытые таблицы с разбиением на страницы To be continued

Содержание слайда: Скрытые таблицы с разбиением на страницы

Содержание слайда: В данном примере используется код на PHP для создания набора тегов <div>, по одному на каждую страницу в таблице. Первый тег отображается по умолчанию, а остальные скрываются. Функция updateTable показывает и скрывает различные порции страницы в зависимости от выбранной страницы. В данном примере используется код на PHP для создания набора тегов <div>, по одному на каждую страницу в таблице. Первый тег отображается по умолчанию, а остальные скрываются. Функция updateTable показывает и скрывает различные порции страницы в зависимости от выбранной страницы. Обратите внимание, что в примере по-прежнему используется библиотека Prototype.js, хотя поддержка Ajax не требуется. С ее помощью легче управлять элементам <div> через предоставляемые ею методы $(),show и hide.

Содержание слайда: Глайдеры Для реализации эффекта сдвига страниц потребуется несколько дополнительных библиотек. Первой из них будет Scriptaculous – библиотека, реализованная на основе Prototype.js. Она предоставляет средства реализации эффектов, используемых глайдерами. Кроме нее будет также использоваться библиотека Glider.

Содержание слайда: Пример глайдера

Содержание слайда: В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент <div> глайдера, который содержит <div> с идентификатором controls со ссылками на каждую закладку, а также другой <div> с идентификатором scroller, в котором находится содержимое каждой закладки. Скрипт в нижней части страницы создает объект Glider с ID, равным идентификатору элемента <div> глайдера В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент <div> глайдера, который содержит <div> с идентификатором controls со ссылками на каждую закладку, а также другой <div> с идентификатором scroller, в котором находится содержимое каждой закладки. Скрипт в нижней части страницы создает объект Glider с ID, равным идентификатору элемента <div> глайдера

Содержание слайда: Заключение Нами было показано лишь несколько типов интерфейсных элементов, которые можно создавать при помощи Ajax, PHP и библиотеки Prototype.js. Надеюсь, некоторые из этих идей вы сможете применить в своих Web-приложениях. Они достаточно просты, причем Prototype.js действительно делает работу с Ajax тривиальной. 

Содержание слайда: Спасибо за внимание