Разработка сайтов на AJAX: Проблемы в дизайне и общие вопросы - 14 Ноября 2012

Форма входа

Категории

Заметки с Хабра [26]

Заметки с ОНЛАЙНЕРА [5]

Заметки вебмастреа [222]

Заметки хакера [0]

coolwebmasters [72]

БРЕД [9]

Архив записей

Друзья сайта

Kalashnikov.by/

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Главная » » Разработка сайтов на AJAX: Проблемы в дизайне и общие вопросы

03:31

Разработка сайтов на AJAX: Проблемы в дизайне и общие вопросы

Почти в каждом фильме есть сцена, когда кто-нибудь оттягивает главного героя в сторону и произносит нечто вроде: «Мне нужно тебе кое-что рассказать о [вставьте любое имя]». И в большинстве случаев мы узнаем о каких-нибудь темных делишках «друга» главного героя или о том, как главный союзник оказывается на самом деле исчадием зла. Это примерно такой же момент, только мы собираемся рассказать вам о нашем друге в мире WEB2.0 – AJAX.

Сейчас эта технология применяется повсеместно. Её библиотеки и платформы делают процесс разработки интерактивных веб-приложений до смеха легким. С помощью AJAX вы можете немного «оживить» ваши статичные страницы и блоги.

Например, мы можем взять следующий HTML-код:

Let there be AJAX magic

…и добавить немного этого jQuery-кода:

$('.ajaxtrigger').click(function(){
$('#target').load('ajaxcontent.html');
});
В браузере, когда мы кликаем по ссылке с лейблом «Let there be AJAX magic», содержимое HTML-документа ajaxcontent.html подгрузится и будет записано в элемент с ID. Вы можете ознакомиться с этим простым AJAX-примером здесь. Его очень просто внедрить, но что конкретно происходит? Что такое AJAX?

Что же такое AJAX?

После того, как загрузится основной HTML-документ, AJAX загружает содержимое с сервера и заменяет отдельные части документа, вместо того, чтобы перезагружать всю страницу целиком. Все это достаточно просто. AJAX расшифровывается как «Asynchronous javascript and XML» или «Асинхронный javascript и XML», что означало, что будут подгружаться только XML-документы, но со временем стало можно подгружать практически все, что находится на нашей планете, а о частях XML просто-напросто забыли. Асинхронная часть по-настоящему функция-убийца, но давайте все-таки разберемся, что же это такое?

Ajax
Традиционная модель веб-приложений (слева) в сравнении с моделью Ajax (справа).

Давай начнем с анализа интерактивной работы обычной модели:

1. Пользователь вводит URI (например, http://wait-till-i.com/index.php) в адресную строку браузера.
2. Браузер переделывает этот URI в IP и запрашивает файл, который находится в указанной точке URI.
3. Браузер загружает файл и, если распознается тип файла, пытается его отобразить.
4. Если документ является элементом HTML, то мы видим интерфейс, с которым мы можем взаимодействовать; например, нажимая по ссылке или при вводе информации в поля и подтверждая кнопками.
5. В обоих случаях, весь документ заменяется и следует перезагрузка файла.

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

Преимущества AJAX:

* Мы оставляем нетронутым документ и в то же время имеем возможность отображения обновленных данных, не заставляя пользователя ждать нудной загрузки всего документа.
* Мы запрашиваем только нужные данные, и запрашиваем только тогда, когда они нам нужны, что экономит время и трафик.
* Мы можем предоставлять информацию без оформления HTML.
* Предоставляется возможность сразу нескольких взаимодействий. Пользователь, например, может заполнять форму в то время, как в другом элементе производится загрузка файлов.

Тем не менее, огромная власть влечет за собой огромную ответственность. Так и с AJAX – мы берем на себя ответственность за симулирование среды браузера для конечного пользователя.

AJAX не должен мешать нормальной работе Веб

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

Let there be AJAX magic

Это бесполезный код HTML. Если javascript становится недоступен или что-то еще идет не так, то получится, что вы предлагаете пользователю ссылку, которая никуда не ведет. Это очень раздражает. Пользователь будет раздражен тем, что он заинтересовался в вашем веб-сайте, зашел на него, прочел некоторые привлекательные аннотации, но в конечном случае так и не получил нужной ему информации. Это нехорошо. Итак, вместо того, чтобы оставлять URI в javascript части приложения AJAX, оставляйте этот элемент в HTML:

Let there be AJAX magic

Это гарантирует вам работу ссылок. Если произойдет ошибка javascript, то браузер просто продолжит загружать и отображать ajaxcontent.html. А код jQuery должен быть изменен соответствующе:

$('.ajaxtrigger').click(function(){
  var url = $(this).attr('href');
  $('#target').load(url);
  return false;
});
Вместо того, чтобы вписывать данные для запуска URI, мы просто считываем атрибут ссылки href. Требуется return false, чтобы избежать того, что браузер проследует по ссылке после того, как jQuery определит запрос AJAX. Это также означает, что любая ссылка с классом ajaxtrigger будет загружать содержимое посредством AJAX и отображать его в элементе с целевым ID. Вы можете поближе познакомиться с этим примером тут.

Конечно, может возникнуть проблема с тем, что документ, который мы подгружаем, вероятно представляет из себя цельный HTML-документ с верхушкой, телом и т.д. Это будет нормально работать в браузере, но AJAX-запрос ведь подгрузит и внедрит этот документ в другой, что может привести к не валидному коду HTML и отразиться на внешнем виде страницы. Попробуйте нажать по ссылке «Load a full document» на странице, на которую мы ссылались чуть выше.

Давайте сделаем так, чтобы документ ajaxtest-fullpage.html представлял из себя следующее:

"http://www.w3.org/TR/html4/strict.dtd">

  [... some links and title and so on ...]

     cite="http://ia341030.us.archive[...]-h.htm">

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had  peeped into the book her sister was reading, but it had no pictures or conversations in it, and where is the use of a book, thought Alice, without pictures or conversations? So she was considering in her own mind, (as well as she could, for the hot day made her feel very sleepy and stupid,) whether the pleasure of making a daisy-chain was worth the trouble of getting up and picking the daisies, when a white rabbit with pink eyes ran close by her.

Excerpt taken from
archive.org.

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

$('.ajaxtrigger').click(function(){
  var url = $(this).attr('href');
  $('#target').load(url+' #bd blockquote');
  return false;
});
Это подгружает только «blockquote» в другой документ, поэтому таким образом можно избежать создания не валидного HTML-кода с запросом AJAX. И мы упустили еще одно преимущество AJAX, которое заключается в возможности загрузки меньшего контента. Если страница весит 100кб, и вам нужно отобразить только основной текст, который составляет 2кб, то зачем пользователям загружать еще 98 лишних килобайт?

Чтобы решить эту проблему, вам нужно обратиться к серверной стороне. В PHP вы можете получить информацию о запросе, который был послан для загрузки страницы. Один бит данных – это есть метод составления запроса. Такие библиотеки javascript, как jQuery, посылают конкретные заголовки в момент загрузки документа посредством AJAX. Вы можете использовать эти данные в PHP для настройки соответствующего содержимого:

This is content requested by AJAX.

This is the normal content requested in a browser

Используйте этот заголовок, выбирая подходящий вам пример: кликните по ссылке «Load a document with AJAX» (загрузить документ при помощи AJAX), а затем нажмите правой кнопкой по той же ссылке и откройте ее в новой вкладке (или же нажмите по ссылке «Load the same document without AJAX» – загрузка документа без использования AJAX). В результате мы должны получить «This is content requested by AJAX» (это содержимое было запрошено посредством AJAX) и соответственно «This is the normal content requested in a browser», что в переводе означает – это обычное содержимое, которое было запрошено браузером.

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

  include('header.php');

cite="http://ia341030.us.archive[...]-h.htm">

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, and where is the use of a book, thought Alice, without pictures or conversations? So she was considering in her own mind, (as well as she could, for the hot day made her feel very sleepy and stupid,) whether the pleasure of making a daisy-chain was worth the trouble of getting up and picking the daisies, when a white rabbit with pink eyes ran close by her.

Excerpt taken from
archive.org.

  include('footer.php');

Такой «ненавязчивый» метод применения AJAX способствует следующему:

* Вы больше никогда не сделаете битую ссылку.
* Вам будет гораздо проще удерживать функционал; вам не нужно выслеживать URI в javascript – все находится в HTML.
* Вы позволяете пользователям открывать ссылки в новые вкладки.
* Вы можете размещать как содержимое, которые требует AJAX, так и содержимое без AJAX; без дублирования содержимого.

«Ненавязчивый javascript» – это термин для метода разработки веб-сайтов с высокой степенью взаимодействия с пользователем. Он был введен Стюартом Лангриджем в 2002 году. По случаю, Стюарт стал также первым автором документации об AJAX в книге о javascript, под названием «DHTML Utopia».

Далее в 2006 году Джереми Кейт пытался распространить идею безопасного AJAX, назвав ее «Hijax». Он даже в 2007 году написал книгу под названием «Bulletproof AJAX», что в переводе означает – Пуленепробиваемый AJAX. К сожалению, часто встречаются люди, которые используют эти вещи как отговорку: «Сейчас мы работаем над разработкой приложения на AJAX, а позже займемся методом Hijax». Но это не сработает! Потому что нужно изначально делать все правильно, чтобы получить стабильную работу системы. Не должно быть никаких «мы позже все исправим», когда речь идет о Веб-разработке: 12 лет профессиональной работы над разработкой о многом говорят.

Проблемы с дизайном и AJAX

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

С интерфейсами на AJAX, мы продвигаемся в мир приложений с собственными устоями и идеей из того привычного мира, где модели страниц представляли собой имитацию печатных изданий. Мы считаем, это к лучшему. Таким образом, веб становится более насыщенным, нежели просто «стрыкание» от дизайна к дизайну.

AJAX и удобство использования

Как уже было замечено выше, мы используем AJAX, чтобы перевернуть привычное понимание пользователем процесса времяпрепровождения в сети. Важно помнить, что никто не обещает полноценно-правильной работы браузера, но при этом важно учитывать, за сколькими вещами нам нужно уследить.

Какие свойства браузера вам нужно имитировать

Иногда мы просто забываем о том, сколько всего для нас делает сам браузер:

* Когда мы кликаем по ссылке, индикатор сообщает нам о процессе загрузки (это может быть анимированная иконка, строка загрузки и так далее).
* При работе с большими файлами, строка загрузки отображает ход событий и то, насколько далеко продвинулась загрузка.
* Если мы устали ждать, мы можем нажать кнопку «Стоп», или же попробовать снова путем перезагрузки страницы.
* Если страница не может быть найдена, нам отображается страница с соответствующим номером ошибки.
* Если на загрузку страницы потребуется очень долгое время, нас также предупреждают об этом.
* И в других случаях нас тоже предупреждают (например, если страница требует авторизации, или была перемещена).
* Мы можем открыть страницу в новой вкладке, вместо того, чтобы загружать ее прямо на открытой странице.
* Мы можем занести страницу в закладки, и вернутся к ней в любое удобное время.
* Если нам нужно отменить что-то, что пошло не так, мы всегда можем нажать кнопку «Назад» и перейти на этап назад.

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

Возможность добавления закладки и кнопка для возврата на этап назад

Единственная вещь, в подробности разработки которой нам бы не хотелось вдаваться, это как раз, разработка функционала кнопок создания закладок и кнопки возвращения на шаг назад. Для того, чтобы это все заработало, вам надо обновить URI текущей страницы фрагментом и перезагрузить скрытый фрейм на странице. Но нельзя забывать про разные надоедливые различия между браузерами, мы бы вам посоветовали воспользоваться плагином истории для jQuery.

Сообщаем пользователю о том, что идет загрузка

Когда пользователи кликают по ссылке или нажимают на кнопку, нам нужно сообщить им, что что-то начало загружаться. Если ничего не произойдет, то пользователь может не понять и кликнуть еще пару раз, что нежелательно. Это человеческий фактор – чем больше и быстрее ты говоришь компьютеру работать, тем больше кажется, что он работает медленнее или вообще не работает.

Самый простой способ дать отдачу пользователю – отобразить оповещение о загрузке. Для того чтобы сделать это в jQuery, нам нужно отказаться от метода load() и использовать ajax() вместо него. Он будет сообщать нам о том, что происходит во время запроса:

* Событие "beforeSend", которое работает до того, как будет задействован запрос AJAX, и
* Событие "success", после успешного запроса AJAX.

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

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    $.ajax({
      url: url,
      success: function(data){
        container.html(data);
      },
      beforeSend: function(data){
        container.html('

');
      }
    });
  }
});
Обработка ошибок

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

Нам нужно подготовить три разных ошибки:

* Когда пользователь пытается загрузить внешний файл, который запрещен настройками безопасности AJAX;
* Серверная ошибка (например, когда страница не найдена);
* Требуется очень много времени на загрузку содержимого страницы.

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

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      var errormsg = 'AJAX cannot load external content';
      container.html(errormsg);
    } else {
      $.ajax({
        url: url,
        timeout:5000,
        success: function(data){
          container.html(data);
        },
        error: function(req,error){
          if(error === 'error'){error = req.statusText;}
          var errormsg = 'There was a communication error: '+error;
          container.html(errormsg);
        },
        beforeSend: function(data){
          container.html('

');
        }
      });
    }
  }
});
Изменения представляют собой:

* Мы проверяем, начинается ли ссылка URI с http, а затем сообщаем о том, что загрузка посредством AJAX невозможна.
* Если ссылка не начинается с http, мы запускаем запрос AJAX. Здесь есть несколько нюансов:
- Мы определяем тайм-аут в 5 секунд (или 5000 миллисекунд);
- Мы внедряем обработчик ошибок.
* Обработчик ошибок может сообщать нам о том, что случилось на сервере посредством req.statustext или может отображать нам сообщение об ошибке, если время ожидания превысило 5 секунд. Итак, нам надо проверить то, что нужно отобразить, прежде чем отображать это.

Освещение изменений

Итак, мы почти завершили доработку нашего AJAX. Последним штрихом можно считать создание некой внешней видимости того, что на странице что-то поменялось. Стандартом считается желтая подсветка, которая была впервые представлена в 2004 году командой 37signals в их приложении Basecamp.

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

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

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      var errormsg = 'AJAX cannot load external content';
      container.html(errormsg).
        effect('highlight',{color:'#c00'},1000);
    } else {
      $.ajax({
        url: url,
        timeout:5000,
        success: function(data){
          container.html(data).
            effect("highlight",{},1000);
        },
        error: function(req,error){
          if(error === 'error'){error = req.statusText;}
          var errormsg = 'There was a communication error: '+error;
          container.html(errormsg).
            effect('highlight',{color:'#c00'},1000);
        },
        beforeSend: function(data){
          container.html('

');
        }
      });
    }
  }
});
Не забывайте также про разные цвета для случаев с удачной подгрузкой и для случая, если произошел сбой.

Это все что нам нужно было доработать в нашем функционале AJAX. Но для того, чтобы сделать его доступным каждому, нам придется еще немного попотеть.

AJAX и доступ

Доступность не означает больше чем простое юзабилити. Если обычный пользователь путается в интерфейсе, который не работает по привычной системе, то представьте себе, в каком затрудненном положении будут пользователи, которые никогда раньше не имели дела с интерфейсами. Или представьте пользователей, которые не могут уследить изменения, переходя со страницы на страницу, а тут нужно иметь дело всего с одной страницей, на которой происходят незначительные изменения – причем, изменения происходят без какого-либо оповещения. Или представьте пользователя, который переключается по ссылкам посредством клавиатуры, ему нужно перейти по одной ссылке, а высвечиваются сразу 10. Есть еще много различных случаев, когда нужно учитывать такие незначительные, но основные моменты.

Нужно больше беспокоиться о читателях экрана

Если вы поищите документацию о доступе и AJAX, то вы наткнетесь на множество статей о проблемах экранных читалок. Мы не хотим вдаваться в подробности – это может занять целую еще одну статью, но советуем вам учесть некоторые основные моменты:

* Экранные читалки представляют собой инструменты, которые помогают пользователям со слабым зрением просматривать приложения (или посредством HTML и скрытого CSS).
* Экранные читалки работают поверх основного браузера и лишь расширяют его возможности. Фактически, они помогают быстрее перемещаться за счет клавиатуры (например, переход от заголовка к заголовку).
* Они просто делают копию документа после его загрузки и добавляют изменения.
* Это означает, что эти инструменты понимают javascript, но они могут выполнить запрос только после того, как страница будет загружена. Если вы изменили документ посредством javascript, и AJAX уже загрузил эти данные, то вам нужно будет указать экранной читалке, что что-то было изменено на странице, и что требуется подгрузка измененного содержимого. Это может быть выполнено посредством перезагрузки поля формы.

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

У нас есть HTML-интерфейсы по типу ссылок и форм, с которыми иногда требуется работать посредством клавиатуры, мыши или даже программного обеспечения, которое распознает голосовые команды. Браузер должен каким-то образом оповещать вспомогательное ПО (будь то экранная читалка или программа, которая масштабирует окно просмотра, или же утилита, распознающая голос) о том, что произошли какие-то изменения, и то ПО должно перевести эти данные в непонятный формат. Все это обычно, причем очень быстро, приводит к провалу.

HTML 5 потихоньку вытесняет HTML 4, так как последняя технология не дает нам возможности разрабатывать такие интерфейсы, какие хотелось бы, WAI-ARIA представляет собой стандарт, который позволяет нам избегать этих проблем со вспомогательным ПО и различиями между браузерами.

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

Важная функция №1: Доступ с клавиатуры

Одним из важнейших требований относительно доступности и AJAX это предоставление доступа с клавиатуры, а сделать это в очень простой форме не сложно. Элемент, который инициирует запрос AJAX, должен быть доступен пользователям с клавиатуры (например, в виде ссылки или кнопки). Вы можете проверить себя: просто воспользуйтесь клавишей Tab, чтобы переключиться с одного элемента в вашем документе к другому. Можете ли вы пользоваться всеми функциями? Четко ли вы понимаете, где вы находитесь в каждый отдельный момент работы?

Здесь вы, как дизайнер, можете сделать многое, чтобы ваш AJAX-интерфейс был более доступным. Patrick Lauke написал отличную статью по применению необходимых вам стилей с клавиатуры.

Важная функция №2: Оповещение о происходящем

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

Ajax
Когда мы видим всю область экрана, все становится совершенно понятным и очевидным. Но подумайте о конечном пользователе, которому придется увеличить размер экрана области просмотра на 1600%, чтобы прочесть то, что там написано. Или о другом пользователе, который путается и использует утилиту для фокусировки на определенной части экрана, с которой он в данный момент работает, в то время как остальная его часть выглядит расплывчатым маревом. Их впечатление будет совершенно иным:

[img]/uploads/posts/2010-03/1268510571_ajax-03.jpg[/img]

Кликнув сюда, пользователь ждет, что он сможет оставить свой отзыв. Вместо этого он видит темнеющий экран, который похож на проблемы с «железом» или еще на что-нибудь. Никакой информации относительно того, на чем основывать свое следующее движение, пользователь не получает.

Заходить в своих предположениях так далеко, чтобы вспомнить о людях с ограниченными возможностями вам даже не придется: просто возьмите нетбук, монитор которого не более 300 пикселей в высоту (как у Eee PC первого поколения) или интерфейс для мобильных устройств, который фокусирует изображение на определенной области страницы (как у Blackberry с установленной Opera Mini).

В любом из этих случаев, ваше AJAX-решение нельзя будет ни использовать, ни добраться до него, если секция, которую заменяют, передвигается далеко от кнопки, которая запускает AJAX.

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

Ajax
В качестве дополнительной помощи, вы можете сместить фокус клавиатуры к целевому элементу, пока будет обрабатываться запрос AJAX. Но будьте внимательны: это может запутать многих пользователей – бессмысленные скачки по экрану могут напугать. В то же время, решение с мягким плавным перемещением, которое понравится всем нам, может стать настоящим кошмаром для пользователей с таким расстройством как необучаемость.

Сложите все эти факторы вместе и посмотрите на этот более доступный пример. Он добавляет к ссылке интервал, который позволяет увидеть состояние AJAX-команды, он выделяет содержимое, которое уже закончило загружаться, а затем перемещает фокус к новым элементам. Вот последняя версия кода. Обратите внимание на комментарии (// example), чтобы понять, что происходит.

$(document).ready(function(){

  // this is the container we'll load content into
  var container = $('#target');

  // adding a tabIndex of -1 makes it keyboard accessible,
  // and we can set the focus to it
  container.attr('tabIndex','-1');

  // if a user clicks on an element with the class ajaxtrigger...
  $('.ajaxtrigger').click(function(){

    // define trigger as the link
    var trigger = $(this);

    // read its href attribute (which is the URI we'll load with AJAX)
    var url = trigger.attr('href');

    // if the element does not have a class called "loaded"
    if(!trigger.hasClass('loaded')){

      // add a new span to the element.
      trigger.append('');

      // add a class called 'loaded' to the element
      trigger.addClass('loaded');

      // and define msg as the last span in the element
      var msg = trigger.find('span::last');

    // otherwise, simply define msg as the last span in the element
    } else {
      var msg = trigger.find('span::last');
    }
    // ^ this condition means we only add the span once and not
    //   every time users click the element.

    // call the doAjax function with the URI to load,
    // the span inside the link to change and the
    // target element to replace.
    doAjax(url,msg,container);

    // tell the browser to not follow the link
    return false;
  });

  // here's where the AJAX magic happens
  function doAjax(url,msg,container){

    // if the URI starts with http...
    if(url.match('^http')){
      // show an error and set the class of the span to 'error'
      msg.html(' (error!)').addClass('error');

      // tell the end user in the target element what the error is
      var errormsg = 'AJAX cannot load external content';

      // update the container with the error
      updateContainer(errormsg,'#c00');

    // if the URI does not start with http
    } else {

      // start an AJAX request using the url
      $.ajax({
        url: url,

        // give the request five seconds time, otherwise call it
        // a timeout error
        timeout:5000,

        // if all went well
        success: function(data){

          // set the span content to ready
          msg.html(' (ready.)');

          // update the container with the right data
          updateContainer(data,'#ff9');
        },

        // if there was an error
        error: function(req,error){

          // say in the link that there was an error and set the
          // class of the span to 'error'
          msg.html(' (error!)').addClass('error');

          // if the error just says error, get the real status
          // text from the browser (jQuery doesn't do this right)
          if(error === 'error'){error = req.statusText;}

          // tell the user that there is a communication error
          var errormsg = 'There was a communication error: '+error;

          // update the container with the error
          updateContainer(errormsg,'#c00');
        },

        // if the link was clicked but the AJAX request was not fired...
        beforeSend: function(data){

          // remove any "error" classes and set the span message to loading
          msg.removeClass('error').html(' (loading...)');
        }
      });
    }
  };

  // update the container
  function updateContainer(content,colour){
    container.
      // set the content
      html(content).
        // shift the browser focus
        focus().
          // flash the container for a second in the
          // specified colour
          effect('highlight',{color:colour},1000);
  }

});
Этот код немного длиннее, чем в других наших примерах, но результат того стоит.

Важная функция №3: Упорядочивание вашего интерфейса

С помощью такой библиотеки, как jQuery, вы можете сделать любой элемент своей страницы интерактивным, он также сможет инициировать команды AJAX. Вы можете использовать интерфейс с возможностью применения клавиатурных сочетаний или функцию «перетаскивания», они отлично выглядят, но спросите себя: действительно ли они интуитивно понятны? У браузеров до сих пор нет функционала под «перетаскивание» или даже клавиатурные сочетания клавиш. Попробуйте воспользоваться клавиатурой, чтобы пройтись по своему меню – вам приходится делать клик, чтобы инициировать какое-либо действие.

Но используя трюки с javascript, вы можете сделать любой элемент доступным с клавиатуры. А если вы пишете виджеты, то сможете пойти дальше, пользуясь правилами клавиатурной навигации. Вы даже можете создать интерфейс «drag-and-drop» совместимый с экранными читалками. Но, опять-таки, задайте себе несколько вопросов:

* Стоит ли это того?
* Делает ли это интерфейс более понятным?
* Делает ли это его более интуитивным и естественным в использовании?
* Поможет ли это пользователям быстрее достичь своей цели или вы поставили эту функцию только потому, что это выглядит круто?

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

Для чего НЕ нужно использовать AJAX

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

Ajax
Анализируя эти команды, мы смогли собрать информацию, которую вы бы не хотели показывать миру; например, конечные точки служб в вашей системе (такие, как почтовые скрипты), которыми мы могли бы использовать для наших собственных целей.

Ничто в ваших кодах javascript или HTML не защищено. Мы можем быстро это изменить и поработать над механизмами защиты.

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

Еще один пункт, о котором вам следует подумать – поисковые службы. Если вы подгрузите весь свой контекст с помощью AJAX, то поисковым службам в этих документах практически нечего индексировать. Для поисковых систем лучшим решением до сих пор остается статический HTML контент, так же как и для производительности, поскольку, если вы все делаете верно, то страницы легко запаковать и закэшировать на вашем сервере. Загрузка же через AJAX быстрее доставляет контент пользователям и экономит на пропускной способности, но вы увидите меньше трафика со стороны поисковых служб. Есть о чем поразмышлять.

Проблема с внешним контентом

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

Однако иногда вам может потребоваться контент с третьей стороны, например, загрузить внешний контент в свой документ как данные (потому что вы не всегда можете воспользоваться iFrame, чтобы внедрить другие документы). Это тот случай, когда нам следует приложить все свои знания технологий при расстановке элементов.

Самый распространенный способ справится с проблемой, если AJAX не может загрузить нечто вроде http://icant.co.uk/index.php – это написать серверный скрипт, который загружает страницу, а потом распечатывает ее. Это называется прокси, и вы можете увидеть пример такого решения вот здесь.

Крайне важно при использовании прокси – внести URL, который вы хотите загрузить в список разрешенных адресов. Не загружайте любой URL, какой вам попадется в сети, иначе взломщики смогут прочитать файлы с вашего сервера и использовать его для рассылки спама или атак на другие сервера, подставив вас, чтобы все считали злоумышленником вас.

Другие способы получить доступ к внешнему контенту – это получить данные в специальном формате JSON-P или использовать сторонний прокси-сервер, например, YQL. На этом мы закончим, поскольку для этой проблемы есть несколько решений. Если вы хотите узнать больше, прочитайте статью на эту тему.

Для чего следует использовать AJAX

Если пользоваться им с умом, AJAX делает нашу жизнь в Интернете легче. Если вам интересно узнать, в каких случаях и как его использовать, просмотрите здесь (Design Pattern Gallery) примеры, основанные на реальных изысканиях пользователей. Начинающие могут поразмыслить над такими случаями использования:

Добавление большого приложения к сообщению
Ничто не раздражает больше, чем ожиданием, пока ваш браузер подгрузит что-то, не имея при этом понятия, как быстро оно грузится и сколько еще ждать. Панель прогресса загрузки браузера дает приблизительное понятие, но не точные цифры. Загрузчик Yahoo User Interface, как и реализация jQuery в роде Uploadify, показывают, как это бы выглядело в браузере.

Работа с множеством маленьких наборов данных
Отличный пример этого – раздел для комментариев в WordPress. Вместо того чтобы отмечать множество пунктов или перегружать страницу каждый раз, как мне хочется удалять или подтверждать комментарии, кликая по нескольким ссылкам.

Оценка контента
Вам не нужно перегружать всю страницу, если вы хотите получить от пользователя в ответ на вопрос простой ответ вроде «Да» или «Нет».

Отображение постоянно меняющегося контента
Например, финансовых сводок или мгновенных обновлений с Twitter и Facebook.

Добавьте свой вариант использования

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

Категория: coolwebmasters | Просмотров: 725 | Добавил: kalashnikov_by | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]