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

Почти в каждом фильме есть сцена, в которой персонаж тянуть главного героя в сторону и говорит: “ There’ S то, что вы должны знать о [название другого персонажа здесь] ”. Большую часть времени мы узнаем некоторые темную тайнуо якобы друга главного героя, или о том, что главный союзник на самом деле злой повелитель.Это тот момент, и я здесь, чтобы сказать вам кое-что о нашем друге в Web 2.0 мире: AJAX.

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

Например, мы могли бы принять следующие HTML…

<div id="target"></div>
<p><a href="#" class="ajaxtrigger">Let there be AJAX magic</a></p>

… и добавить эту JQuery код:

$('.ajaxtrigger').click(function(){
  $('#target').load('ajaxcontent.html');
});

В браузере, если мы нажали на ссылку помечены “ Пусть будет AJAX магии, ” содержание HTML документа ajaxcontent.html будет загружен и записан в элемент с ID target.Вы можете попробовать это очень простой пример AJAX here.It’ с простым и удобным в использовании, но what’ действительно там происходит?Что такое AJAX

Что такое AJAX

После основного HTML документ загружен, AJAX загружает содержимое с сервера и заменяет части документа, с содержанием, а не перезагрузить основной документ.It’ ы так просто.AJAX расшифровывается как “ Asynchronous JavaScript и XML ” и должно было загружать только XML документов, но вскоре мы использовали его, чтобы загрузить все под солнцем, и поэтому часть XML был быстро забыт.Асинхронная часть является убийцей функцию;? Но что это

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

Let’ начнем с анализа того, как нормальное взаимодействие работы Web:

Пользователь вводит URI (например, http://wait-till-i.com/index.php). В пользовательский агент (обычно браузер)
Браузере превращает этот URI в IP и просит файл, расположенный на указанный URI endpoint.
Браузер загружает файл и, если она признает, тип документа, пытается отобразить it.
Если документ в HTML, мы получаем интерфейс, который мы можем взаимодействовать с, например, нажав на ссылку или ввода данных в форму и представления it.
В обоих случаях весь документ заменен и последовательность restarts.

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

Преимущества AJAX довольно ясно:

Мы поддерживаем единый интерфейс, а не отказываться от него только чтобы привести его снова с несколькими незначительными изменениями после долгой и раздражает загрузки process.
Мы просим только те данные, которые нам нужны, когда нам это нужно, спасая нас много серверов traffic.
Мы в состоянии предложить данные без упаковки HTML вокруг него, чтобы сделать его interface.
Мы позволяем для одновременного взаимодействия, пользователь сможет, например, заполнить форму, в то время как вложения добавления в background.

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

AJAX не должны нарушать Web

В первую очередь нужно убедиться в том, что вы не нарушаете веб-страницы с вашего решения AJAX.Приведенный выше пример, хотя:

<div id="target"></div>
<p><a href="#" class="ajaxtrigger">Let there be AJAX magic</a></p>

Это не полезно HTML.Если JavaScript не доступен или что-нибудь еще пойдет не так, вы бы предлагать конечному пользователю ссылку, которая уходит в никуда.Это раздражает; I’ ве приходят на ваш сайт, взял шаг нажав на ссылку, были в восторге от перспективы удивительным содержанием, но don’ т получить ничего.Не хорошо.Таким образом, вместо того, чтобы хранить URI в части наличие решения AJAX, оставить его в HTML:

<div id="target"></div>
<p><a href="ajaxtest-fullpage.html" class="ajaxtrigger">
  Let there be AJAX magic
</a></p>

Это гарантирует, что ссылка работает, если есть наличие ошибки, браузер будет просто перейти к загрузки и отображения 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 target.Вы можете попробовать это многоразовые примере AJAX here.

Существует проблема, конечно, потому, что мы загружаем документ может быть полный HTML документ, с головой и телом и так далее.Это хорошо работает в браузере, но запрос AJAX будет загружать и придать этому документу его в другой документ, который является недействительным HTML и вызовет проблем с дисплеем.Попробуйте это, нажав на “ Загрузить полный document” ссылка на страницу, упомянутые above.

Let’ ы говорят, что ajaxtest-fullpage.html заключается в следующем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  [... some links and title and so on ...]
</head>
<body>
<div id="doc" class="yui-t7">
  <div id="hd" role="banner"><h1>Excerpt from Alice's Adventure Underground</h1></div>
  <div id="bd" role="main">
    <blockquote
     cite="http://ia341030.us.archive[...]-h.htm">
      <p>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.</p>
    </blockquote>
    <p>Excerpt taken from 
      <a href="http://ia341030.us.archive[...]-h.htm">archive.org</a>.
    </p>
  </div>
  <div id="ft" role="contentinfo">
    <p>Demo by <a href="http://wait-till-i.com">Chris Heilmann</a></p>
  </div>
</div>
</body>
</html>

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

$('.ajaxtrigger').click(function(){
  var url = $(this).attr('href');
  $('#target').load(url+' #bd blockquote');
  return false;
});

Это всего лишь загружается blockquote в другой документ, так что вы wouldn’ T создавать недействительными HTML с вызовом AJAX.Тем не менее, мы теряем других пользу AJAX, которая заключается в загрузке меньше содержания.Если страница 100 КБ, и вы хотите, чтобы показывать только основной текст, который находится в 2 KB, зачем пользователям придется ждать 98 КБ для загрузки

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

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest'){?>
This is content requested by AJAX.
<?php }?>

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']==''){?>
This is the normal content requested in a browser
<?php }?>

Попробуйте этот заголовок, переключение из примера для yourself: нажмите на “ Загрузка документа с AJAX” Ссылка, а затем щелкните правой кнопкой мыши (или + клик) по этой же ссылке, чтобы открыть ее в новой вкладке (илиударил “ загрузить тот же документ без AJAX” ссылка).Результаты должны быть “ Это содержание с просьбой AJAX” и “ Это нормальное содержание просил в browser” respectively.

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

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']==''){?>
  include('header.php');
<?php }?>

<blockquote
 cite="http://ia341030.us.archive[...]-h.htm">
  <p>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.</p>
</blockquote>
<p>Excerpt taken from 
  <a href="http://ia341030.us.archive[...]-h.htm">archive.org</a>.
</p>

<?php if($_SERVER['HTTP_X_REQUESTED_WITH']==''){?>
  include('footer.php');
<?php }?>

Используя эту “ ненавязчивый AJAX” подход делает несколько вещей:

Вы don’ T создать неработающие ссылки, ever.
Вы сделать его легче поддерживать функциональность, не нужно охотиться за URI, в JavaScript— все в HTML.
Вы позволит пользователям открывать ссылки в новом окне или tab.
Вы поддерживаете с поддержкой AJAX и AJAX-инвалидов содержание в том же документе, не дублируя content.

“ Ненавязчивый JavaScript” есть термин для этого метода разработки интерактивных веб-сайтов.Он был введен Stuart Langridge в 2002, и я написал самообучение course для него в 2004 году.Кстати, Стюарт также был первым автором, чтобы покрыть AJAX в книге JavaScript, к сожалению, с именем DHTML Utopia.Мои собственные не совсем так кратко-книгу под названием Начиная с JavaScript DOM сценариев и AJAX было, я думаю, второе.Обе книги следовать подходу, показанный здесь и создавать AJAX решения, которые попадают обратно в не-JavaScript versions.

Jeremy Keith пытался дальнейшей популяризации этой идеи “ безопаснее AJAX” в 2006 году Назвав его “ Hijax” , и он написал книгу под названием Bulletproof AJAX в 2007 году.К сожалению, хотя, я встречался с людьми, которые используют это как оправдание, говоря: “ We’ повторное построение решения AJAX сейчас, и we’ будете переместить его в Hijax later.” Это не будет работать!Сделайте это правильно с первого раза и you’ Придется устойчивое решение.Существует нет “ We’ буду это исправить в следующей iteration” когда дело доходит до необходимую функциональность в веб-разработки: 12 лет профессионального развития научили меня, что much.

AJAX Дизайн Challenges

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

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

AJAX и Usability

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

Что браузеры делают это нужно Simulate

Мы иногда забываем, как много вещей браузер для нас:

. Когда мы нажимаем на ссылку, индикатор предупреждает нас о процессе загрузки (как анимированная иконка, прогресс-бар и т.д.)
Для больших файлов, индикатор дает нам представление о том, насколько we’ ве достигнуто в загрузке process.
Если мы устали ждать, мы можем ударить “ Stop” кнопки или повторите попытку перезагрузки page.
Если страница не может быть найдена, мы показали ошибки page.
Если страница занимает слишком много времени для загрузки, мы показали ошибки page.
Другие ошибки мы сталкиваемся (например, страница, которая требует проверки подлинности, или документ, который был перемещен) также отображаются на специальной page.
Мы можем щелкнуть правой кнопкой мыши ссылку, чтобы открыть ее в новой вкладке или окне, не замещая текущее document.
Мы можем закладку на страницу и вернуться к ней в любое время в future.
Когда нам нужно что-то, чтобы отменить that’ S пошло не так, “ Back” кнопка возвращает нас на один шаг в нашем путешествии.

Все это должно быть учтено в полноценные приложения AJAX, AJAX, потому что должно улучшить конца user’ с опытом, а не усложнить.Let’ S теперь расширить наши AJAX скрипт, пока мы не можем сказать, что we’ ве покрыты basics.

Социальные Вернуться Button

Одна вещьЯ won’ т вдаваться в детали “ Back” кнопка закладок и функциональность.Чтобы сделать эту работу, необходимо обновить URI текущей страницы с фрагментом и перезагрузить скрытый фрейм на странице.Есть все виды раздражает различия между браузерами, тоже, и вы можете использовать что-то вроде история плагин in для JQuery, чтобы получить эту work.

Предупреждая пользователя, что что-то Loading

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

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

beforeSend событие, выстрелил, прежде чем запрос AJAX начата, and
success событие, которое вызывается при запросе AJAX является successful.

Собираем все вместе, мы можем добавить нагрузку message в целевой элемент, когда запрос 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('<p>Loading...</p>');
      }
    });
  }
});

Ошибка Handling

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

Мы должны подготовить для трех различных ошибок:

Пользователь пытается загрузить внешний файл, который недоступен из-за настроек безопасности AJAX;
Существует некоторая ошибка сервера (например, “ Страница не found”);
Ресурсов занимает слишком много времени, чтобы load.

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

$(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('<p>Loading...</p>');
        }
      });
    }
  }
});

Изменения:

Мы проверяем, является ли ссылка URI начинается с http, а затем сообщить об ошибке, что его загрузки с AJAX не possible.
Если ссылка doesn’ T начинается с http, мы начинаем новый запрос AJAX.У этого есть несколько новых функций:
- Мы определим timeout 5 секунд (т.е. 5000 миллисекунд);
- Мы добавляем ошибку handler.
Обработчик ошибок, либо отправляет нам, что случилось на сервере, а req.statustext или дает нам сообщение об ошибке timeout когда 5 секунд вверх.Таким образом, мы должны проверить, что мы получили, прежде чем мы пишем об ошибке message.

Выделение Changes

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

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 10.02.2010 by Newsbot