AJAX и XML: Работа с таблицами в AJAX - презентация, доклад, проект скачать

Нажмите для полного просмотра!

AJAX и XML: Работа с таблицами в AJAX, слайд №1

AJAX и XML: Работа с таблицами в AJAX, слайд №2

AJAX и XML: Работа с таблицами в AJAX, слайд №3

AJAX и XML: Работа с таблицами в AJAX, слайд №4

AJAX и XML: Работа с таблицами в AJAX, слайд №5

AJAX и XML: Работа с таблицами в AJAX, слайд №6

AJAX и XML: Работа с таблицами в AJAX, слайд №7

AJAX и XML: Работа с таблицами в AJAX, слайд №8

AJAX и XML: Работа с таблицами в AJAX, слайд №9

AJAX и XML: Работа с таблицами в AJAX, слайд №10

AJAX и XML: Работа с таблицами в AJAX, слайд №11

AJAX и XML: Работа с таблицами в AJAX, слайд №12

AJAX и XML: Работа с таблицами в AJAX, слайд №13

AJAX и XML: Работа с таблицами в AJAX, слайд №14

AJAX и XML: Работа с таблицами в AJAX, слайд №15

AJAX и XML: Работа с таблицами в AJAX, слайд №16

AJAX и XML: Работа с таблицами в AJAX, слайд №17

AJAX и XML: Работа с таблицами в AJAX, слайд №18

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему AJAX и XML: Работа с таблицами в AJAX. Доклад-сообщение содержит 18 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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