Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

24 установившиеся практики при реализации AJAX

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Дважды в месяц мы пересматриваем некоторые любимые посты наших пользователей из всех опубликованных ранее на Nettuts+.

Реализация технологии AJAX (* Asynchronous JavaScript And XML – асинхронный JavaScript + XML. Здесь и далее примеч. пер.) может принести вам как успех, так и провал. Выполните ее надлежащим образом, и пользователи вашего приложения будут восторгаться обеспечиваемой ею гладкостью опыта взаимодействия пользователя, в то время как если вы напортачите с ней, то получите хороший нагоняй. Ниже перечислены 24 совета по реализации технологии AJAX в вашем веб-приложении.


1. Поймите, о чем идет речь

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

Ниже приведен список обязательных для прочтения статей, чтобы ввести вас в курс дела:


2. Применяйте для подходящего сценария (* описание конкретного набора последовательных взаимодействий между пользователем и системой для достижения некоторой цели)

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

В качестве подходящего сценария могли бы служить случаи, когда у вас имеется большое количество данных на стороне сервера и вы хотите обновить UI в том случае, когда пользователю необходим доступ к ним или же когда вы хотите эмулировать (* имитировать функции другого объекта) соответственное десктопное приложение и обрабатывать все асинхронно. Чрезвычайно ошибочный сценарий – когда каждая страница статичного веб-сайта загружается при помощи AJAX только по той причине, что вы умете ею пользоваться. Проявляйте бдительность в этом вопросе.


3. Научитесь реализовывать ее самостоятельно ( * не прибегая к библиотекам)

Перед тем как приступить к написанию кода (* при помощи библиотек), разберитесь, как реализовать AJAX самостоятельно. Библиотеки могут сэкономить вам много времени, необходимого для создания независимого от браузера кода, однако если код перестает работать, то вам может очень пригодиться знание того, как применять AJAX без библиотек.

Я очень рекомендую вам руководства Jeffrey по реализации запросов AJAX за счет нативного кода JavaScript здесь и здесь.


4. Воспользуйтесь библиотекой

Как только вы научились реализовывать функциональные возможности AJAX при помощи нативного кода JS, пора вам перейти к использованию библиотеки JavaScript, которая предоставляет надежную поддержку AJAX. Подойдет любая из основных библиотек вроде jQuery, Prototype или MooTools.

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

Ниже перечислены некоторые из наших любимых, которые содержат характерные для AJAX функциональные возможности:


5. Основательно освойте библиотеку

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

По ходу того как каждая библиотека увеличивается из-за добавления дополнительных функциональных возможностей с каждой новой версией, разработчики скрывают огромное количество функционала от начинающего разработчика. Например вы знали, что в jQuery имеется множество методов для выполнения запросов AJAX? Или то, что некоторые методы, выполнение которых запускается при возникновении определенных событий, доступны только при использовании главного вызова AJAX? Многие люди не в курсе этого и поэтому неспособны раскрыть скрытый потенциал библиотеки.

Вот вам подборка некоторых ресурсов для изучения:


6. Предоставьте пользователям обратную связь

Tutorial Image

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

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


7. Используйте подходящие события и обработчики

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

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

При работе с jQuery вы бы воспользовались обработчиками событий success и error. Также имеются обработчики других событий вроде complete и beforeSend, которыми следует пользоваться в подходящих случаях

.


8. Выберите подходящий формат для конкретной задачи

То, что XML присутствует в аббревиатуре, вовсе не означает, что вы обязаны передавать данные по сети только в этом формате. Вы запросто можете выбирать любой формат, который вам нравится. JSON? Не проблема. XML? Само собой разумеется. HTML? Конечно. Простой текст? Несомненно.

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


9. Изучайте все доступные вам источники по этой теме

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

Вот список наиболее посещаемых мною блогов и наиболее читаемых книг:


10. Постоянно экспериментируйте

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


11. Используйте Firebug

Tutorial Image

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

Ниже перечислены еще некоторые рекомендуемые ресурсы:


12. Помните о пользователях, которые используют старые браузера

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


13. Возможность добавление закладки (* ссылка на адрес просмотренной Web-страницы, сохраняемая для прямого обращения к ней в последующих сеансах работы)

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

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


14. Используйте соответствующие анимационные эффекты

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

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


15. Добавьте возможность использования кнопки возврата

Использование кнопки возврата – другая распространенная привычка стандартного пользователя веб-приложения. Убедитесь, что вы учли в вашем приложении этот важный момент, чтобы избежать появления возмущенных пользователей. Поверьте, они возмутятся, если неожиданно обнаружат, что их кнопка возврата не работает надлежащим образом.

Ниже перечислены статьи, которые должны помочь вам в этом вопросе:


16. Вносите изменения в DOM разумно

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

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

Таким образом, для порции HTML вроде следующей:

вместо этого:

делайте так:

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


17. Комментируйте свой код

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

Вы вовсе не обязаны комментировать каждый крошечный фрагмент вашего кода; достаточно всего лишь прокомментировать важные моменты.

Это слишком!

Этот вариант намного лучше, поскольку значительная часть кода говорит сама за себя.


18. Принимайте взвешенное решение при выборе типа запроса

Строго говоря, это совет, который дается в общем при создании приложения, а не конкретно при реализации AJAX, однако обратите особое внимание на тип выполняемого вами запроса: GET или POST. Объект XMLHttpRequest предоставляет вам возможность выполнения обоих, однако выбор за вами.

Как должно быть понятно из названий, запрос по методу GET используется для получения данных с ресурса, тогда как запрос по методу POST предназначен для отправления данных для обработки. При использовании запроса AJAX по методу GET, как и при работе с обычным GET-запросом, вам необходимо будет передавать данные, необходимые для выполнения запроса, в качестве части самого URL-адреса вручную, в отличие от использования запроса по методу POST, при котором данные отправляются автоматически. Также обратите внимание на то, что запросы по методу GET кэшируются автоматически, в то время как запросы по методу POST – нет.


19. Используйте подходящую IDE (* интегрированная среда разработки)

Tutorial Image

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

Для приверженцев PC:

Для моих шикующих собратьев:


20. Присоединяйтесь к сообществу

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

Как говорит Jeff, только тогда вы понимаете что-то, когда вы обучили этому кого-то еще.


21. Отладьте используемые вами времена откликов (* время, необходимое компьютеру для ответа на запрос)

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

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


22. Используйте индикатор состояния

Tutorial Image

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

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

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


23. Помните о потрясающих возможностях, предоставляемых  JSONP

Часто при создании мэшапа (* интернет-приложение, объединяющее данные из нескольких источников) вам может понадобиться доступ к данным, получаемым с других сайтов при помощи запросов AJAX. Это противоречит кросс-доменным ограничениям, накладываемым большинством браузеров. В этом случае вместо того чтобы пользоваться экзотическими решениями вроде маскировки или использования прокси (* программа кэширования ответов на посылаемые в Internet или в WWW запросы клиентских частей приложений. Копии полученных Web-страниц, файлов и т. д. хранятся какое-то время на сервере, и при получении последующих аналогичных запросов proxy-сервер сам высылает имеющиеся копии, что позволяет сократить время отклика и объем сетевого трафика) вы могли бы просто использовать JSON-P (* JSON with Padding, или JSON-P – JSON с набивкой; дополнение к базовому формату JSON. Он предоставляет способ запросить данные с сервера, находящегося в другом домене — операцию, запрещённую в типичных веб-браузерах из-за политики ограничения домена).

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


24. Свободно задавайте вопросы

Не стесняйтесь задавать вопросы. Каждый из нас когда-то был полным чайником и начинал с опрашивания других пользователей. Имеется большое количество мест, где вы можете получить ответы, включая раздел с комментариями Nettuts+. Никогда не бойтесь задавать вопросы. Просто попробуйте быть немного вежливыми! Это всегда помогает.


На этом все, чуваки.

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

Есть вопросы? Хотите пожелать что-то приятное? Имеются какие-либо критические замечания? Перейдите к разделу с комментариями и оставьте мне комментарий. Удачного вам программирования!


Напишите руководство для Plus

Знали ли вы, что вы можете заработать до $600 за написание руководства и/или скринкаста (* цифровой файл, в котором хранится последовательность изображений с экрана монитора (screen output), зачастую с текстовыми и аудио-подсказками. Скринкасты могут быть очень полезными как часть инструкций для пользователя, отличное средство показать наглядно, что и как можно/нужно делать при работе с приложениями) для нас? Нам необходимы исчерпывающие и грамотно написанные руководства по HTML, CSS, PHP и JavaScript. Если у вас имеются соответственные умения, то свяжитесь с Jeffrey по адресу nettuts@tutsplus.com.

Пожалуйста, учтите, что фактическое вознаграждение будет зависеть от качества конечного руководства и скринкаста.

Write a PLUS tutorial
  • Подпишитесь на нас на Twitter или на Nettuts+ RSS Feed, чтобы быть в курсе о лучших руководствах по веб-разработке.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.