Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
18 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
535.85 kB
Просмотров:
78
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![AJAX и XML Работа с таблицами](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img0.jpg)
Содержание слайда: AJAX и XML:
Работа с таблицами в AJAX
Подготовили: Вавилов В.В. Скоробогатая М. А.
№2 слайд![Введение Одной из сильных](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img1.jpg)
Содержание слайда: Введение
Одной из сильных сторон технологии Ajax (Asynchronous JavaScript™ + XML) является динамическое отображение данных, полученных от сервера. Сейчас мы рассмотрим как описываются несколько методик для динамического представления данных при помощи таблиц, закладок и глайдеров.
№3 слайд![Окна с закладками Закладки](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img2.jpg)
Содержание слайда: Окна с закладками
Закладки (tabs) предоставляют простейший способ того, как можно уместить множество данных на небольшой области экрана. Prototype – великолепная JavaScript-библиотека – до предела упрощает создание DHTML-окон с закладками и поддержкой Ajax.
№4 слайд![Листинг Пример кода работы с](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img3.jpg)
Содержание слайда: Листинг 1
Пример кода работы с Prototype.js
№5 слайд![Описание Листинга . В начале](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img4.jpg)
Содержание слайда: Описание Листинга 1.
В начале файла помещена ссылка на библиотеку Prototype.js, которая берет на себя всю работу с Ajax. Затем следует набор ссылок на различные страницы, причем нажатие на каждую ссылку приводит к вызову функции loadTab для обновления области, в которую загружается видимое содержимое. Эта область представляет собой элемент <div> с идентификатором content. Функция loadTab вызывает метод Ajax.Updater для загрузки указанного документа HTML внутрь этого элемента
№6 слайд![Того же эффекта можно](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img5.jpg)
Содержание слайда: Того же эффекта можно добиться при помощи скрытых элементов <div> с предварительно загруженным содержимым, управляя их видимостью. Преимуществом подхода на основе Ajax является то, что содержимое закладок загружается только по мере необходимости. Таким образом снижается время на загрузку страницы, причем если пользователь решит не просматривать закладку, то ее содержимое не будет загружено вовсе.
Того же эффекта можно добиться при помощи скрытых элементов <div> с предварительно загруженным содержимым, управляя их видимостью. Преимуществом подхода на основе Ajax является то, что содержимое закладок загружается только по мере необходимости. Таким образом снижается время на загрузку страницы, причем если пользователь решит не просматривать закладку, то ее содержимое не будет загружено вовсе.
№7 слайд![Основы работы с таблицами в](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img6.jpg)
Содержание слайда: Основы работы с таблицами в Ajax
Вначале мы рассмотрим пример создания таблицы с отправкой XML-запроса на сервер при помощи Ajax. У этого метода есть два преимущества. Во-первых, он позволяет загружать данные по мере необходимости и обновлять их по месту, что улучшает восприятие пользовательского интерфейса. Во-вторых, для работы этого метода требуется источник XML-данных, который будет полезен не только в случае Ajax, но и при использовании любого клиентского кода, ожидающего данные в формате XML.
№8 слайд![Код примера создания таблицы](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img7.jpg)
Содержание слайда: Код примера создания таблицы из XML-данных
№9 слайд![Обработчик события onSuccess](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img8.jpg)
Содержание слайда: Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы, описывающие книги. Затем выбираются значения вложенных тегов author, title и publisher. Наконец, обработчик добавляет данные в таблицу, вызывая методы insertRow и insertCell для каждой книги.
Обработчик события onSuccess при вызове Ajax.Request разбирает XML-данные, сначала выбирая элементы, описывающие книги. Затем выбираются значения вложенных тегов author, title и publisher. Наконец, обработчик добавляет данные в таблицу, вызывая методы insertRow и insertCell для каждой книги.
№10 слайд![Пример формата XML,](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img9.jpg)
Содержание слайда: Пример формата XML, использующегося в этом примере
№11 слайд![Скрытые таблицы с разбиением](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img10.jpg)
Содержание слайда: Скрытые таблицы с разбиением на страницы
To be continued
№12 слайд![Скрытые таблицы с разбиением](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img11.jpg)
Содержание слайда: Скрытые таблицы с разбиением на страницы
№13 слайд![В данном примере используется](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img12.jpg)
Содержание слайда: В данном примере используется код на PHP для создания набора тегов <div>, по одному на каждую страницу в таблице. Первый тег отображается по умолчанию, а остальные скрываются. Функция updateTable показывает и скрывает различные порции страницы в зависимости от выбранной страницы.
В данном примере используется код на PHP для создания набора тегов <div>, по одному на каждую страницу в таблице. Первый тег отображается по умолчанию, а остальные скрываются. Функция updateTable показывает и скрывает различные порции страницы в зависимости от выбранной страницы.
Обратите внимание, что в примере по-прежнему используется библиотека Prototype.js, хотя поддержка Ajax не требуется. С ее помощью легче управлять элементам <div> через предоставляемые ею методы $(),show и hide.
№14 слайд![Глайдеры Для реализации](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img13.jpg)
Содержание слайда: Глайдеры
Для реализации эффекта сдвига страниц потребуется несколько дополнительных библиотек. Первой из них будет Scriptaculous – библиотека, реализованная на основе Prototype.js. Она предоставляет средства реализации эффектов, используемых глайдерами. Кроме нее будет также использоваться библиотека Glider.
№15 слайд![Пример глайдера](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img14.jpg)
Содержание слайда: Пример глайдера
№16 слайд![В начале страницы](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img15.jpg)
Содержание слайда: В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент <div> глайдера, который содержит <div> с идентификатором controls со ссылками на каждую закладку, а также другой <div> с идентификатором scroller, в котором находится содержимое каждой закладки. Скрипт в нижней части страницы создает объект Glider с ID, равным идентификатору элемента <div> глайдера
В начале страницы подключаются несколько скриптовых библиотек. Затем следует элемент <div> глайдера, который содержит <div> с идентификатором controls со ссылками на каждую закладку, а также другой <div> с идентификатором scroller, в котором находится содержимое каждой закладки. Скрипт в нижней части страницы создает объект Glider с ID, равным идентификатору элемента <div> глайдера
№17 слайд![Заключение Нами было показано](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img16.jpg)
Содержание слайда: Заключение
Нами было показано лишь несколько типов интерфейсных элементов, которые можно создавать при помощи Ajax, PHP и библиотеки Prototype.js. Надеюсь, некоторые из этих идей вы сможете применить в своих Web-приложениях. Они достаточно просты, причем Prototype.js действительно делает работу с Ajax тривиальной.
№18 слайд![Спасибо за внимание](/documents_6/2ab1e8f52a45826c8a2b70644635559e/img17.jpg)
Содержание слайда: Спасибо за внимание