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

Сентябрь 4, 2022

Главная
Алгебра
AJAX и XML: Работа с таблицами в AJAX

Содержание

2. Введение Одной из сильных сторон технологии Ajax (Asynchronous JavaScript™ + XML) является динамическое отображение данных, полученных
3. Окна с закладками Закладки (tabs) предоставляют простейший способ того, как можно уместить множество данных на небольшой
4. Листинг 1 Пример кода работы с Prototype.js
5. Описание Листинга 1. В начале файла помещена ссылка на библиотеку Prototype.js, которая берет на себя всю
6. Того же эффекта можно добиться при помощи скрытых элементов с предварительно загруженным содержимым, управляя их видимостью.
7. Основы работы с таблицами в Ajax Вначале мы рассмотрим пример создания таблицы с отправкой XML-запроса на
8. Код примера создания таблицы из XML-данных
9. Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы, описывающие книги. Затем выбираются значения
10. Пример формата XML, использующегося в этом примере
11. Скрытые таблицы с разбиением на страницы To be continued
12. Скрытые таблицы с разбиением на страницы
13. В данном примере используется код на PHP для создания набора тегов , по одному на каждую
14. Глайдеры Для реализации эффекта сдвига страниц потребуется несколько дополнительных библиотек. Первой из них будет Scriptaculous –
15. Пример глайдера
16. В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент глайдера, который содержит с идентификатором controls
17. Заключение Нами было показано лишь несколько типов интерфейсных элементов, которые можно создавать при помощи Ajax, PHP
19. Скачать презентацию

Слайд 2

Введение
Одной из сильных сторон технологии Ajax (Asynchronous JavaScript™ + XML) является

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

Слайд 3

Окна с закладками
Закладки (tabs) предоставляют простейший способ того, как можно уместить

множество данных на небольшой области экрана. Prototype – великолепная JavaScript-библиотека – до предела упрощает создание DHTML-окон с закладками и поддержкой Ajax.

Слайд 4

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

Слайд 5

Описание Листинга 1.
В начале файла помещена ссылка на библиотеку Prototype.js, которая

берет на себя всю работу с Ajax. Затем следует набор ссылок на различные страницы, причем нажатие на каждую ссылку приводит к вызову функции loadTab для обновления области, в которую загружается видимое содержимое. Эта область представляет собой элемент

с идентификатором content. Функция loadTab вызывает метод Ajax.Updater для загрузки указанного документа HTML внутрь этого элемента

Слайд 6

Того же эффекта можно добиться при помощи скрытых элементов
с

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

Слайд 7

Основы работы с таблицами в Ajax
Вначале мы рассмотрим пример создания таблицы

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

Слайд 8

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

Слайд 9

Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы,

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

Слайд 10

Пример формата XML, использующегося в этом примере

Слайд 11

Скрытые таблицы с разбиением на страницы
To be continued

Слайд 12

Скрытые таблицы с разбиением на страницы

Слайд 13

В данном примере используется код на PHP для создания набора тегов

, по одному на каждую страницу в таблице. Первый тег отображается по умолчанию, а остальные скрываются. Функция updateTable показывает и скрывает различные порции страницы в зависимости от выбранной страницы.
Обратите внимание, что в примере по-прежнему используется библиотека Prototype.js, хотя поддержка Ajax не требуется. С ее помощью легче управлять элементам

через предоставляемые ею методы $(),show и hide.

Слайд 14

Глайдеры
Для реализации эффекта сдвига страниц потребуется несколько дополнительных библиотек. Первой из

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

Слайд 15

Пример глайдера

Слайд 16

В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент

глайдера, который содержит

с идентификатором controls со ссылками на каждую закладку, а также другой

с идентификатором scroller, в котором находится содержимое каждой закладки. Скрипт в нижней части страницы создает объект Glider с ID, равным идентификатору элемента

глайдера

Слайд 17

Заключение
Нами было показано лишь несколько типов интерфейсных элементов, которые можно создавать

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

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

Содержание

ВведениеОдной из сильных сторон технологии Ajax (Asynchronous JavaScript™ + XML) является

Окна с закладкамиЗакладки (tabs) предоставляют простейший способ того, как можно уместить

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

Описание Листинга 1.В начале файла помещена ссылка на библиотеку Prototype.js, которая

Того же эффекта можно добиться при помощи скрытых элементов с

Основы работы с таблицами в AjaxВначале мы рассмотрим пример создания таблицы