Улучшение пользовательского интерфейса с помощью Ajax

Цель лекции: рассмотреть основы технологии AJAX, познакомиться с понятием формы, рассмотреть основные типы виджетов, создать страницу поиска твитов, познакомиться с методами jQuery, добавить автодополнение хэштегов при отправке твита.

Ключевые термины: AJAX, CSS, HTML, jQuery, форма, фреймворк, твит, хештег, имплементация, элемент, запрос, поиск, метод, атрибут, приложение.

Появление AJAX стало важной вехой в истории Веб 2.0. AJAX — это группа технологий, что позволяет разработчикам создавать интерактивные, с большими возможностями веб-приложения. Большинство из этих технологий были доступны за многие годы до появления самого AJAX. Однако появление AJAX представляет переход Web от статических страниц, которые необходимо обновлять всякий раз, когда происходил обмен данными к динамическим, гибким и интерактивным пользовательским интерфейсам.

Так как наш проект является приложением Веб 2.0, оно должно быть более нацелено на пользователей. Успех нашего приложения зависит от получения пользователем возможности размещать и обмениваться контентом на нем. Таким образом, пользовательский интерфейс нашего приложения является одной из наших основных проблем. Эта лекция улучшит интерфейс нашего приложения с помощью описания возможностей AJAX, что сделает его более удобным для пользователей и интерактивным.

AJAX и его преимущества

AJAX, которая расшифовывается как Asynchronous JavaScript and XML (Асинхронный JavaScript и XML), состоит из следующих технологий:

• HTML и CSS для структурирования информации и придания стилей
• JavaScript для динамического доступа и манипулирования информацией
• Объект XMLHttpRequest, который представляет собой объект, предоставляемый современнми браузерами для обмена данными с сервером без перезагрузки текущей веб-страницы
• Формат для передачи данных между клиентом и сервером

Иногда используется XML, но это может быть в HTML, обычном тексте или формате на основе JavaScript, называемом JSON.

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

AJAX обеспечивает следующие преимущества при имплементации в правильных местах:

• Улучшение опыта пользователя: пользователь с AJAX может сделать много без обновления страницы, которая делает веб-приложения ближе к обычным настольным приложениям
• Лучшая производительность: путем обмена только требуемых данных внутри сервера, AJAX сохраняет пропускную способность и увеличивает скорость приложений

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

В этой лекции объясняется, как использовать AJAX с Django, с тем чтобы сделать приложения более гибким и удобным для пользователей. Мы имплементируем три наиболее распространенных функции AJAX, которые могут быть сегодня найдены в веб-приложениях. Однако, прежде, мы узнаем о преимуществах использования инфраструктуры AJAX, в отличие от работы с raw JavaScript функциями.

Использование AJAX фреймворка в Django

Так как мы уже использовали bootstrap в нашем проекте, нам не нужно настраивать его отдельно для AJAX и jQuery.

Есть много преимуществ использования AJAX фреймворка:

• Имплементация JavaScript различается от браузера к браузеру. Некоторые браузеры обеспечивают более полную и богатую на функции имплементацию, тогда как другие содержат имплементации, которые являются неполными или не придерживающиеся стандартов.

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

  С другой стороны, при использовании фреймворка AJAX, фреймворк заботится об этом для нас; он абстрагирует доступ к имплементации JavaScript и сделок с шин различия и особенности JavaScript в браузерах. Банки металлические способом, мы можем сосредоточиться на разработке функции вместо тревожиться о браузере различия и ограничения.
• Стандартного набора JavaScript функций и классов немного не хватает для полноценной разработки веб-приложений. Различные общие задачи требуют много строк кода, даже несмотря на то, что они могут быть обернуты в простые функции.

  Поэтому даже если вы не решитесь использовать инфраструктуру AJAX, вы найдете для себя написание библиотеки функций, которая инкапсулирует JavaScript зал и делает их более удобными. Однако, зачем изобретать велосипед, когда много отличных библиотек open source уже доступно?

AJAX фреймворки, имеющихся на рынке сегодня варьируются от всеобъемлющих решений, которые предоставляют серверные и клиентские компоненты до легких клиентских библиотек, которые упрощают работу с JavaScript. Учитывая, что мы уже используем Django на серверной стороне, мы хотим фреймворк только с клиентской стороны. В дополнение к этому фреймворк должны быть легко интегрируем с Django без требования любых дополнительных зависимостей. Наконец, желательно, выбрать легкий и быстрый фреймворк. Есть множество отличных фреймворков, которые отвечают нашим требованиям, таких как Prototype, Yahoo! UI Library, и jQuery.

Однако для нашего приложения, я собираюсь выбрать jQuery, потому что это самый легкий фреймворк из трех. Он также весьма активно развивается сообществом и имеет широкий спектр плагинов. Если у вас уже есть опыт с другим фреймворком, вы можете продолжить использовать его во время этой главы. Правда, вам придется адаптировать JavaScript код в этой главе под ваш фреймворк, но код Django на стороне сервера останется таким же, независимо от того, какой фреймворк вы выберете.

Вам нужно также импортировать bootstrap и jQuery.Таким образом, не нужно никакой особой установки или импорта для использования функций AJAX в нашем проекте Django.

Использование open source фреймворка jQuery

Прежде чем мы начнем имплементировать улучшения AJAX в наш проект, давайте пройдем через краткое введение в основы jQuery.

JavaScript фреймворк JQuery

jQuery — это библиотека функций JavaScript, которая облегчает взаимодействие с HTML-документами и управляет им. Библиотека предназначена для сокращения времени и усилий на написание кода и достижения совместимости между браузерами, и в то же время она в полной мере использует то, что JavaScript предлагает для создания гибких и интерактивных веб-приложений.

Рабочий процесс с помощью jQuery в общем состоит из следующих двух этапов:

1. Выбор HTML-элемента или группу элементов для работы.
2. Применение метода jQuery к выбранной группе.

Селекторы элемента

jQuery предоставляет простой подход для выбора элементов: она работает путем передачи строки селектора CSS в функцию $ (). Ниже приведены некоторые примеры, которые иллюстрируют использование этой функции :

• Если вы хотите выбрать все привязки (<a>) элементов на странице, можно использовать вызов функции $ ("a").
• Если вы хотите, выбрать элементы привязки, которые имеют CSS класс .title, используйте $("a.title")
• Чтобы выбрать элемент, идентификатор которого является #nav, можно использовать $ ("#nav")
• Для выбора всех элементов списка (<li>) внутри #nav, используйте $ ("#nav li")

Функция $ () создает и возвращает объект jQuery.После этого можно вызывать методы этого объекта для взаимодействия с выбранным HTML-элементом.

Методы jQuery

jQuery предлагает разнообразные методы для обработки HTML документов. Вы можете скрыть или показать элементы, присоединить обработчики событий к событиям, изменять свойства CSS, манипулировать структурой страницы и, самое главное, формировать AJAX-запросы.

Для отладки, мы выберем браузер Internet Explorer как браузер нашего выбора. Internet Explorer является одним из самых передовых JavaScript отладчиком в виде его инструментов разработчика Django. Чтобы запустить его, нажмите на клавиатуре Ctrl + Shift + J.

Поэкспериментируем с методами, изложенными в этом разделе, запустим сервер разработки и перейдем на страницу профиля пользователя (http: //127.0.0.1:8000/user/test/). Откройте консоль инструментов(нажав на клавиатуре Ctrl + Shift + J) разработчика и нажмите F12, попробуйте выбрать элементов и манипулировать ими.

Скрытие и отображение элементов

Давайте начнем с чего-то простого. Чтобы скрыть элемент на странице, вызовите метод — hide() на нем.Чтобы показать его снова, вызовите метод show(). Например попробуйте это с меню навигации, называемом navbar в загрузчик приложения:

>>> $(".navbar").hide()
>>> $(".navbar").show()

Также можно анимировать элемент во время скрытия и показа его. Попробуйте fadeOut(), fadeln(), slideUp() или slideDown () — методы, чтобы увидеть два из этих анимационных эффекта.

Конечно эти методы (как и все другие методы jQuery) также работают, если вы выберете более одного элемента за один раз. Например, если открыть профиль пользователя и ввести следующий вызов метода в консоли средства разработчика, все твиты исчезнут:

>>> $(".well").slideUp()

Доступ к свойствам CSS и HTML атрибутам

Далее мы узнаем, как изменить свойства CSS элементов. jQuery предлагает метод, называемый css() для выполнения CSS операций. Если вызвать этот метод с именем свойства CSS, переданным в виде строки, она возвращает значение этого свойства:

>>> $(".navbar").css("display")

Результатом этого является следующее:

block

Если второй аргумент передается в этот метод, он задает указанное свойство CSS выбранного элемента для дополнительного аргумента:

>>> $(".navbar").css("font-size", "0.8pt")

Результатом этого является следующее сообщение:

<div id="nav" style="font-size: 0.8em;"></div>

В самом деле вы можете манипулировать любой атрибут м HTML и не только свойствами CSS. Чтобы сделать это, используйте метод attr(), который работает аналогично методу css(). Вызвав его по имени атрибута, он возвращает значение атрибута, в то время как его вызов с именем атрибута или пары значений задает атрибуту переданное значение:

>>> $("input").attr ("size", "48")

Это приводит к следующему:

<input id="idcountry" name="country" type="hidden" value="Global" size="48">
<input type="submit" value="post" size="48">

Это одновременно изменит размер всех входных элементов на 48.

В дополнение к этому, есть методы ярлыка, чтобы получать и устанавливать часто используемые атрибуты, такие как val(), который возвращает значение поля ввода, когда вызывается без аргументов и задает значение для аргумента, если вы передадите аргумент. Существует также метод html() для контроля HTML кода внутри элемента.

Наконец, существует два метода, которые могут использоваться для присоединения или отсоединения CSS класса для элемента: это методы addClass() и removeClass(). Третий метод служит для переключения CSS класса и он называется методом toggleClass (). Все эти методы класса принимают имя класса, который необходимо изменить как параметр.