Что такое ajax и для чего он нужен: AJAX для новичков / Хабр

что это такое, влияние на SEO, преимущества и недостатки технологии

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

История возникновения технологии AJAX

Огромное количество подобных технологий начали применяться еще в далеких 90-х годах прошлого века. Например, в 96-ом году в браузер Internet Explorer 3 внедрили HTML-элемент IFRAME, а спустя два года Microsoft реализовала механизм Remote Scripting.

Однако сам термин «Asynchronous JavaScript and XML» стал известен миру лишь на заре 2005 года, когда Джесси Гаррет выпустил статью под названием «Ajax: новый подход к веб-приложениям». В своем материале Гаррет подробно рассказал, как создаются интернет-приложения для Google Maps и Gmail. Он с уверенностью заявил, что это стало началом стремительного развития возможностей, доступных пользователям в приложениях.

Джесси Джеймс Гарретт (Jesse James Garrett)

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

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

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

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

Принцип работы технологии

Чтобы конкретно понять, как именно работает AJAX, рассмотрим 4 важнейших этапа:

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

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

Без объекта XMLHttpReques обмен информацией невозможен, поэтому он предварительно размещается на самой странице. Объект выступает в роли связывающего звена для сервера и веб-браузера. Сами запросы переходят от системы к серверу в формате POST или GET. Для типа GET присущее обращение к документу, находящемуся на сервере, а в качестве аргумента он получает адрес сайта. Чтобы запрос не был прерван, создана надежная функция JavaScript Escape, предотвращающая такие случаи.

Если данные передаются в больших объемах, не обойтись без функции POST. Сервер занимается обработкой информации, которая ему поступает, и затем, основываясь на них, образует обновленные данные, которые отправляются пользователю.

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

Для отправки ответа, сервер применяет стандартный текст JSON либо XML. Получая JSON-документ, он сразу выводится на экран. Но еще пользователь обязан выполнить код, который он получит, после чего сформируется объект JavaScript. А если отправляется текст в формате XML, его сначала нужно заменить на HTML, а затем уже отобразить на странице.

Какие плюсы у AJAX?

• • Уменьшает нагрузку на сервер. Но это возможно только в том случае, если применять технологию правильно. Вы можете использовать шаблон, который поможет создавать постоянные элементы веб-ресурса: меню, логотип, шапка и прочее. А чтобы удовлетворять запросы посетителей, нет необходимости перезагружать страницу целиком. К примеру, вы создали блок с голосованием, и посетителю предлагается выбрать оптимальный для него пункт, чтобы проголосовать. Как только он нажмет на кнопку, информация моментально уйдет на сервер, а затем человеку придет ответ. И все это происходит без обновления страницы.
  • Повышает работоспособность сервера. Потому что происходит загрузка лишь содержания страницы, и пользователям приходят результаты их действий намного быстрее.
  • Снижает трафик. Число данных в процессе работы с приложениями существенно уменьшается. Обеспечивается это тем, что заново загружается не вся страница, а лишь ее измененные элементы или данные. Затем скрипт меняет информацию на странице в браузере.
  • Открывает большое разнообразие возможностей. Сделав выбор в пользу AJAX, вам будет доступно изобилие действий. Так, регистрируясь на сайтах, посетитель, указывая логин, сразу же узнает, занят он, или нет. А вводя запрос в поисковой строке Google или Яндекс, после любого последующего слова или буквы, ниже отображаются готовые варианты запросов. Разумеется, это значительно облегчает задачу интернет-пользователям.

Какие недостатки у технологии?

• Нужно постоянно включать JavaScript. Без данной поддержки технология AJAX на соответствующих страницах практически бесполезна.
• Проблемы с индексацией содержимого. Нередко контент, размещающийся на страницах динамически, остается без внимания поисковых ботов. В связи с этим рекомендуется применять динамический способ загрузки только по отношению к некоторым фрагментам содержимого. Только так можно свести к минимуму негативное влияние технологии на SEO-продвижение.
• Невозможно объединиться с инструментами браузера. Если создавать страницы динамическим методом, браузер не будет запоминать их и показывать в истории, в связи с чем при нажатии кнопки «Назад» вы не вернетесь на ранее посещенную страницу. Но проблема решается специальными скриптами. Еще у вас не будет возможности сохранить закладку на какой-нибудь контент.
• Отсутствие количества обращений. Из-за динамической загрузки материалов, система не может точно отображать статистику, потому что, когда пользователь перемещается по разным страницам, они не перезагружаются, и счетчик не учитывает эти переходы. Из за этого могут возникать проблемы при оценке аналитике на сайте.
• Снижается уровень безопасности. Установив AJAX, любой пользователь может просмотреть исходный код страницы, а это небезопасно.

Как AJAX индексируется поисковыми системами?

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

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

Для максимального снижения отрицательного воздействия AJAX на продвижение сайта, его необходимо оптимизировать:

1. Поменяйте ссылки в URL. После всех символов # пропишите знаки !. К примеру, ссылку http://mysite.com/#catalog поменяйте на http://www.mysite.com/#!catalog
2. Откройте доступ к HTML версиям каждой страницы AJAX по конкретным адресам. Для этого поменяйте в них заданное нами значение «#!» на «?_escaped_fragment_=». В результате получится http://www.mysite.com/?_escaped_fragment_=catalog
3. Для AJAX страницы пропишите тег: <meta name=”fragment” content=”!”>
4. Создайте xml карту. Это ускорит индексацию страниц сайта.
5. После того, как сайт попадет в индекс, посмотрите разницу между AJAX версией и копией. Так вы сможете проконтролировать, какие страницы роботы не внесли в базу данных поисковиков. Как проверить индексацию сайта, читайте здесь.

Как технология сказывается на ранжировании и стоит ли ее использовать на сайте?

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

• некоторый контент может быть не проиндексирован роботами;
• все страницы имеют одинаковые url;
• определенные страницы могут отображаться у поисковых ботов не так, как у пользователей.

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

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

Заключение

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

Знакомство с Ajax. Основы Ajax

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

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

Как работает AJAX

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

На картинке описан стандартный AJAX сценарий:

Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.

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

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

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

Живой пример на AJAX

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

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

XML

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

<person>
<name>Mike</name>
<surname>Mathew</surname>
<nationality>Australian</nationality>
<languages>
<language>English</language>
<language>Spanish</language>
<language>French</language>
<language>Russian</language>
</languages>
</person>

В сети полно онлайн редакторов, с помощью которых можно создавать XML документы. Мой любимый это: XMLGrid.net. В этом редакторе наш пример выглядит так:

JSON

JSON (JavaScript Object Notation) – еще один популярный формат обмена данными. В JSON пример сверху будет выглядеть так:

{
«name» : «Mike»,
«surname» : «Mathew»,
«nationality» : «Australian»,
«languages» : [«English», «Spanish», «French», «Russian»]
}

В сети также полно онлайн JSON редакторов. Мне нравятся два редактора: JSON Generator, JSON Editor Online

В JSN редакторе наш пример будет выглядеть так:

Ограничения в AJAX запросах

Перед тем, как начать использовать AJAX, необходимо узнать про ограничения. Мы рассмотрим только две проблемы.
Первая – ошибка в консоли Chrome:

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

Ошибка появляется, когда данные из запроса хранятся на другом домене относительно нашей страницы (ошибка известна как правило ограничения домена). В нашем примере данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, данные ошибки устранимы.

Один из способов это CORS от W3C. Но данный механизм требует внести изменения в конфигурацию файлов на сервере. К примеру, на данной странице описано, как настроить Apache сервер. Другой способ это JSONP (JSON с набивкой).

Заключение

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

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Создание зависимых списков средствами AJAX

Посмотрите видео по созданию зависимых списков средствами AJAX!

Смотреть

Что такое Ajax?

Ajax — это подход к построению интерактивных пользовательских интерфейсов web-приложений, разработанный на javaScript, который в фоновом режиме (без перезагрузки всей страницы, как в PHP) позволяет обмениваться данными между браузером и сервером.

AJAX от английского э́йджэкс, в русском языке популярно произношение ая́кс.

Из истории AJAX

Первое упоминания об AJAX официально известно 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) Новый подход к веб-приложениям. Автор решил описать новый подход к web-технологиям и упрощённой связи сервера и клиента.

Большую популярность AJAX приобрёл после того, как Google использовал его в своих сервисах, таких как Gmail, Google Maps и Google Suggest.

Google поиск выдаёт варианты запроса

Как работает AJAX

В начале хотелось бы сказать, что AJAX имеет вид всего лишь одного объекта под названием XMLHttpRequest.

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

Когда Вы используете Ajax нужно учитывать следующие правила:
1. вся информация передается/получается исключительно в кодировке UTF-8
2. в разных браузерах XMLHttpRequest вызывается по-разному

Основные преимущества и недостатки AJAX

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

Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик.
Уменьшение нагрузки на сервер. Нет надобности обновлять страницу целиком, уходит конкретный запрос. Например, Вы захотели проголосовать на сайте. После нажатия кнопки отправляются данные на сервер по Вашему голосу, и возвращается ответ. При этом сама страница не обновляется. Меняется только результат.
Быстрая работа самого сервиса. Поскольку работа происходит с конкретным блоком, то и результат его работы можно увидеть намного быстрее.
Разнообразие в использовании. Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.
Недостатки

Требуется включенный Java Script. Если в настройках безопасности браузера будет выключен Java Script, то результата работы AJAX можно не увидеть.
Данные не доступны поисковикам. Что логично, динамически изменяемые данные, как и прочие в Java Script не видимы поисковым роботом.
Сложность самого проекта. Со временем, при частом использовании AJAX на сервисе могут возникнуть трудности в работе с программным кодом и масштабностью проекта. Поэтому использование AJAX в самом начале стоит ограничить и использовать точечно.
невозможно отследить количество обращений. Поскольку AJAX слабо интегрирован со стандартными инструментами браузера, использование динамических элементов нельзя отследить и просмотреть. Для этого приходится использовать другие скрипты.

Пример работы AJAX

Демонстрация Скачать исходники

Популярные библиотеки AJAX

jQuery — популярный JavaScript-фреймворк
AJAX.OOP — JavaScript-фреймворк
Extjs — JavaScript-библиотека
xajax — PHP и JavaScript-библиотека
Dojo — многофункциональный JavaScript-инструментарий
JsHttpRequest — AJAX-библиотека с поддержкой AJAX-закачки файлов на сервер и многими другими возможностям
Google Web Toolkit — инструментарий от Google для Java-разработчиков

Области применения Ajax

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Для чего все-таки нужен Ajax? Где его стоит использовать, а где нет?

Где стоит использовать Ajax:

1. Формы. Они очень медленны. Если асинхронно передавать данные, страница не
   перезагружается.
2. Навигация в виде «дерева». Вообще, такая навигация — ужас. Простая топология
   намного удобнее, но если уж до этого дошло, лучше использовать Ajax.
3. Голосования. Пользователю будет приятней оставить свой голос за несколько секунд,
   чем за 30-40.
4. Система комментариев. Пример: на сайте есть статьи, к которым можно приписывать
   комментарии. Пользователю приходится все время перезагружать страницу, чтобы увидеть
   новые посты. Это крайне неудобно.
5. Фильтры. Часто на сайтах делают сортировку по дате, по имени, и т.д.
   Ajax это будет значительно удобнее.

Где не стоит использовать Ajax:

1. Поиск. Лучше использовать PHP и Perl.
2. Обычная навигация. Для навигации между документами Ajax не поможет.
3. Обновление большого количества текста. Если текст занимает почти всю страницу, то легче перезагрузить ее.
4. Бесполезные украшения. Всякие подсвечивающиеся ячейки и появляющиеся подсказки будут только отвлекать пользователя.

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

Итак, Ajax — это не технология, это объединение технологий, это процесс, это
новый взгляд на старые вещи. Ни одна из технологий, составляющих Ajax не нова.
Однако, их совместное использование позволяет получить новые результаты.

Как делать удобные ajax-сайты / Хабр

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

Сразу скажу, что существуют такие web-приложения, которые лишены указанных ниже недостатков (например, Gmail, Хабрахабр). Но это — счастливые исключения, лишь подтверждающие правила.

1. Трудность навигации

Прежде всего, состояние. Тот, кто читал «Психбольницу в руках пациентов» Купера, знает, о чем речь. Складным ножом легко пользоваться потому, что у него всего два состояния: раскрыт и сложен. А в случае же с сайтом вы имеете очень большое количество состояний. И если к неопределенности в плане ссылок мозг еще привыкает со временем — пользователь знает, что он находится на одной странице, и всего его действия ограничены ею одной, что сказывается на относительной легкости моделировании различных состояний по страницам — то с аяксом такого не происходит.

Довольная Гаечка наконец-то нашла нормальный ajax-сайт!

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

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

Решением является такое применение аякса, когда пользователю предоставляются «виртуальные» страницы, когда функционал так группируется, что есть некие логические центры, откуда идет множество аякс-запросов, связанных одной ответственностью. К примеру, в Gmail это явно видно: вот список писем, вот страница письма, а вот страница настроек.

Но это только вершина айсберга. Рассмотрим более конкретные баги и недоработки.

2. Сброс состояния при закрытии

Это один из частых видов проблем, о которых не думает никто. Распространены следующие варианты.

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

Отдельно отмечу формы, которые не запоминают введенные данные, показывая сообщений о неверном заполнении. Это просто трындец, господа. Запомните, главный закон — DRY — работает для пользователя в первую очередь. Пользователь должен делать минимум кликов, и не должен ничего делать дважды. Плюс автосохранение в важных формах is a must, если речь идет об админках приложений.

Решением является добавление к URL каких-нибудь маркеров, возвращающих приложение к нужному состоянию, например, ajaxsite.ru/#myStateInfoGoesHere

3. Неработающие кнопки навигации

Так как в первом пункте мы уже поняли, что пользователи привыкли и в силу работы мозга, и в силу истории развития интернета думать страницами, то неработающие кнопки назад/вперед, которые так бесили во флэш-сайтах, восстали из пепла после постепенного умирания flash в аякс-сайтах. Ничто так не раздражает, когда ты зашел на какой-то нереальный раздел 100500го уровня навигации, и нет кнопки вроде «вернуться к списку» на самой странице от разработчика, и вдруг обнаруживаешь — «Back», которая спасала еще со времен Netscape (классный был браузер), не работает!

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

4. Тормоза

Недавно я зашел на сайт одного стартапа, который реализовал мою давнюю идею. И был очень недоволен — с айпада грузился очень медленно, во многом благодаря тому, что каждый из мелких элементов административного интерфейса подгружался аяксом. Кликаю раскрыть список — и он грузится… Если бить страницу на миллион мелких страниц, нужно знать, что нередко это может приводить к ее медленной работе. Особенно если разработчик не позаботился посылать параллельные запросы к серверу и каждый микроэлемент сделал аяксом.

Количество аякс-блоков на странице должно быть ограничено разумным числом.. Подгрузить следующую страницу результатов в таблицу, когда для генерации шапки, меню и тд выполняется много запросов к БД — разумно. А вот в случае с конфигурацией, когда у вас вкладки и внутри дерево настроек, каждую вкладку грузить аяксом, каждый попап, каждый элемент дерева (фанаты ExtJS в первую очередь стоят) — это зло, однозначно, господа.

5. Неочевидность происходящего на странице

Ушла в прошлое нижняя строка браузера, в которой когда-то мы писали с помощью манипуляций над window.status бегущую строку. Эх, было время в 2000х, когда это называлось не аяксом, а DHTML, и применялось в меру, и сайт javascript.internet.com и dynamicdrive.com с туториалами знал каждый второй, и на JS писали, понимая, а не тупя над тормозами без знания внутренностей фреймворков, как делают новички, пишущие о виртуозном владении JavaScript.

Но я отвлекся 🙂

Только половина сайтов сообщают, как Google Docs, что они что-то там сохраняют или загружают, с помощью надписей или всем приевшегося рисуночка с крутящимися полосками. Сейчас ситуация уже лучше, а раньше ты работал с сайтом, и вдруг у тебя пропадало текущее окно и вылезало ОНО, на что ты нажал минуту назад (привет server-side тормозам).

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

6. Неверное применение AJAX

Очень часто применяется модный эффект. К примеру, подгрузка по мере скролла контента вместо традиционного paging. Paging обладает миллиардом преимуществ — и ссылку можно дать, и понятно где ты находишься. А когда ты скроллил фотки вконтакте, закрыл случайно и открыл shift+ctrl+T — изволь скроллить по-новой.

Ну и самый распространенный косяк — это когда модный эффект, применный к месту, усложняется. Знаете, как раздражает, когда кликаешь «подгрузить еще» каждые 10 сообщений, водя мышку туда-сюда, вместо того, чтобы просто скроллить. И просто потому, что программист поленился и не сделал подгрузку при скролле.

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

7. Отсутствие поддержки клавиатуры

Тоже очень бесит. Во-первых, формы не отправляются по нажатию Enter (к чему приучает десктопный интерфейс). Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц, не работают (привет Гуглу, Яндекс красавчеги). Внезапно вылезший модальный попап не пропадает при нажатии Escape.

Если ваши пользователи — не героиня Гриффинов, которая ходит, не разгибаясь и смотря в свой мобильный девайс, не забывайте о привычках пользователей и добавляйте поддержку клавиатуры.

Общая идея проектирования ajax-приложения

Я думаю, вы сами без труда найдете еще десяток примеров. А если нет, и вы, как и я — программист и вам легко работать с вашим приложением, помните о своих настоящих пользователях. Попробуйте посмотреть на приложений их глазами.

Вам в помощь наука. Мозг, как известно, при весе в 1/50 тела в момент предельной нагрузки потребляет до 25% всей энергии организма. Посему он стремиться всячески свести свою работу к минимуму. Именно поэтому, а вовсе из-за непонятной психологам, не знающим биологию есть прокрастинация. Поэтому мы ленивы и поэтому нам нравится все простое и не нравится все, что требует лишних энергетических затрат.

Следовательно, измеряйте количество кликов для выполнения основных user stories на вашем сайте, количество движений мышкой, количество нажатий клавиш, и всячески минимизируйте эти числа. Тупо и методично. Тут можно похвалить Гугл — зацените, вы вводите текст, а он уже начинает искать и показывать результаты. Круто сделано.

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

upd. из комментариев:

lesha_penguin 8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

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

alienator Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

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

mib Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

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

что это? Асинхронный JavaScript и XML: преимущества и недостатки

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

Общая информация

Как расшифровывается AJAX? Что это значит? Данное сокращение является аббревиатурой. Она расшифровывается как Asynchronous Javascript and XML («Асинхронный Яваскрипт и ИКСМЛ»). Часто можно увидеть или услышать информацию, что это новая технология. Но это не совсем так. Дело в том, что Javascript и XML существуют уже довольно длительное время, тогда как «Аякс» является синтезом этих технологий. Чаще всего он используется вместе с термином Web 2.0 и подразумевается как использование передовых методов разработки.

А чем особенность?

Итак, мы уже имеем общее представление о том, чем является AJAX. Что это даёт нам на практике? Почему ведутся активные разговоры о его применении? Особенность данной технологии — в том, что при её использовании не нужно обновлять всю страницу при первой же потребности. Ведь можно запросить новые данные только для её части. Это и удобно (ведь меньше времени приходится ждать), и экономично (для тех, у кого не безлимитный интернет). Правда, для информирования пользователя о происходящем обновлении желательно использовать хотя бы индикатор загрузки или текстовые сообщения, которые проинформируют про новые данные с сервера. В качестве минусов технологии часто упоминают тот факт, что она не поддерживается устаревшими и текстовыми браузерами. Да и возможность отключения технологии Javascript есть у пользователя, чем многие и пользуются. Поэтому не следует злоупотреблять AJAX. Что это может дать, если не предусмотреть альтернативные методы представления информации? В лучшем случае информация просто не будет отображена на сайте. В худшем – его внешний вид так пострадает, что пользователь на него больше не вернётся.

Преимущества «Аякса»

Данная технология предлагает два метода, по которым может быть реализована веб-страница. Первый предусматривает внесение изменений без перезагрузки. Это может быть осуществлено с помощью динамических обращений к серверу. Второй предусматривает использование отдельных технологий, наиболее популярной из которых является XMLHttpRequest. Относительно самих преимуществ «Аякса» можно сказать следующее:

1. Можно создавать удобное веб-приложение, в котором интерфейс будет иметь целых ряд приятных для пользователя возможностей, что в итоге облегчит взаимодействие человека и сайта.
2. Вместо полной перезагрузки страницы происходит частичная. Благодаря этому экономятся ресурсы машины и оптимизируется быстродействие.
3. Серверная часть сайта активно взаимодействует с пользователем.
4. Удобно использовать для реализации целого ряда задумок.

Обмен данными

Вот, допустим, нужна форма обратной связи, с помощью которой можно будет проконсультировать клиентов. Как её можно сделать? Для начала необходимо позаботится о «носителе» информации. Для этого необходимо создать объект XMLHttpRequest. Он выступает в роли посредника между сервером и браузером пользователя. С помощью этого объекта будут отправляться запросы, а также получаться ответы на них. Для непосредственного обмена данными нам нужен AJAX PHP. Этот инструментарий может быть реализован с помощью GET- или POST-запросов. В таком случае необходимые аргументы будут передаваться непосредственно через URL. Одновременно будет запущена функция, следящая за тем, чтобы передача данных не прерывалась. Но какой AJAX-запрос реализовать? Рекомендуют использовать POST. Благодаря ему можно передавать неограниченное количество данных, к которым, к тому же значительно сложней получить доступ.

Принцип работы

Как же функционирует асинхронный Javascript и XML на практике? Давайте разберёмся с этим на примере. Относительно структуры постройки необходимо позаботиться о том, чтобы клиентская часть обеспечивала весь нужный функционал для безопасного обмена данными. Она должна предоставлять необходимые методы для передачи информации выбранными способами. Серверная же часть должна обеспечивать обработку полученных данных, и, уже основываясь на них, генерировать новую информацию, чтобы в последующем передать её к клиенту. Самым распространённым взаимодействием данного типа является работа с базой данных. Ранее мы уже упомянули такой элемент многих бизнес-сайтов, как форма обратной связи. Преимуществом «Аякса» в данном случае будет то, что он проводит асинхронную передачу данных. Иными словами, пока информация пересылается, пользователь может совершать все необходимые ему действия. Ориентируясь на специфику каждого конкретного случая, необходимо решить, нужно ли об этом процессе информировать посетителя сайта. Относительно той же формы обратной связи следует сказать, что в данном случае можно написать «оператор набирает ответ», или нечто подобное.

Ответ сервера

Он может приходить не только благодаря XML, как это можно подумать из-за названия технологии. Кроме этого, он может передаваться как обычный текст или JSON. В первом случае полученную информацию можно сразу же выводить на страницу. Если же используется XML, то необходимо позаботиться о том, чтобы AJAX-файл был должным образом обработан в браузере клиента. Все данные в этом случае преобразовываются к (X)HTML. Когда же используется формат JSON, необходимо выполнить полученный код, чтобы получить полноценный объект Javascript. При этом необходимо проявить осторожность и учитывать тот факт, что многие злоумышленники любят передавать посредством этой технологии вредоносный код. Поэтому необходимо предусмотреть процедуру проверки полученных данных перед их обработкой. Особенности реализации для разных браузеров могут немного разниться, но, в целом, схема действия тут одна.

Делаем запрос к серверу и обработку ответа

Вся последовательность действий будет выглядеть следующим образом:

1. Первоначально необходимо создать и удостовериться в том, что существует XMLHttpRequest.
2. Затем инициализируется соединение с сервером.
3. Посылаем к нему запрос.
4. Дожидаемся, пока придут данные, и обрабатываем их.

Следует рассказать о некоторых особенностях относительно создания объекта. Он может быть инициирован в любом месте, где это только возможно в рамках языка программирования. Но если ему присвоить статус глобального, то в какой-то один момент времени для него будет возможной только работа с одним запросом. Этому моменту необходимо уделить пристальное внимание. Относительно обработки – здесь ориентируемся по выбранному инструменту. Так, при XML данные необходимо обработать DOM-функциями и представить пользователю уже конечный результат в HTML. А что же делать с JSON-ном? Следует понимать, что он является объектной нотацией Javascript. Что это значит? Благодаря JSON можно представлять объект как строку. Но при этом необходимо помнить, что данный способ не является безопасным в полной мере, и необходимо будет учитывать кучу факторов. Но, в целом, он является весьма легким.

Серверные языки программирования

Практически любое веб-приложение использует их в той или иной мере. Для передачи данных наиболее популярным является PHP. На нём обычно пишут файлы для сайтов, где не является критически важным скорость передачи информации, а отдается предпочтение балансу между нею и надёжностью. Методы передачи XMLHttpRequest рассматривались выше.

Настраиваем сервер

Какие программы необходимы для того, чтобы полноценно работал AJAX? Что это нам даст? Для чего они нужны? Чтобы получить ответы на эти вопросы, следует ознакомиться со следующим списком:

1. HTML/XHTML. Они нужны для того, чтобы сервер распознавал разметку страницы.
2. CSS. Этот инструмент необходим для визуального подбора оформления страницы.
3. DOM. Он нужен для того, чтобы обеспечивать динамические изменения на странице как ответ на действие со стороны пользователя.
4. XML. Необходим для пересылки данных между клиентом и сервером.
5. JavaScript. Нужен для создания движка «Аякса» и обеспечения интерактивности.
6. XMLHttpRequest. Объект, посредством которого будут пересылаться запросы к серверу.

Использование на сайте

Итак, сейчас у нас есть и теоретические знания, и представления о том, как работает AJAX. Отправка данных сейчас требует только определённой практики. Давайте же в целом посмотрим, как можно подходить к реализации поставленной задачи с использованием «Аякса». Итак, нам необходимо создать базу данных драйверов. Причем разниться они будут по устройствам, на которых могут работать. Следует отметить, что рассматриваемая база данных очень большая, поэтому просто пересылать её клиенту и уже ему предлагать делать выборку с помощью JavaScript нет смысла. Также нежелательно, чтобы сама веб-страница перезагружалась из-за одного параметра. На сервере запросы будут обрабатывать специальные скрипты РНР. БД реализована в виде XML-файла.

О базе данных

Необходимо проработать её структуру. А что делать, если передаются параметры, которые являются объектами? В таком случае необходимо предусмотреть создание переменной, где будет находиться ссылка не него, на случай вызова со стороны функции. Для возможности обращения к ней из любого места кода её нужно сделать глобальной. Для удобства желательно использовать систему управления базами данных. Конечно, это не обязательно. Но всё же использование СУБД позволит работать с данными более удобно и эффективно.

Прорабатываем работу движка

Как же всё будет происходить? Итак, наступает определённое событие, которое будет вызывать особенную функцию. Она подготовит GET или POST-данные, которые будут пересылаться. Затем вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XMLHttpRequest-объекта. Ссылку на него следует хранить в переменной. После того как данные были отправлены серверу, необходимо ждать от него ответа. Для этого можно включить «прослушку» до получения информации (если известно, что придёт и когда) или предусмотреть функцию, которая будет всегда готова принять данные. Первый вариант менее надёжен в случае возникновения внештатной ситуации. Вторая же реализация — более затратная с точки зрения ресурсов. Хотя, если это делается только относительно одной переменной, на быстром интернете это не скажется. Но если их сотни и тысячи, и они будут иметь большой размер, – тогда это будет другое дело. Поэтому необходимо искать баланс между пользованием имеющимися ресурсами и результативностью. Ведь следует понимать, что не все обладают оперативной памятью на 16 Гб. Для этого может устанавливаться определённое время ожидания, после которого подставляются предыдущие данные или информация о том, что сервер недоступен в данный момент времени.

Особенности

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

Заключение

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

Что такое AJAX, как он работает и для чего используется?

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

Что такое AJAX?

AJAX — это аббревиатура от Asynchronous JavaScript and XML, которая описывает набор методов разработки, используемых для создания веб-сайтов и веб-приложений.По словам веб-разработчика и инструктора Skillcrush WordPress Энн Каскарано, лучший способ понять AJAX — это начать с определения его конкретной цели в процессе веб-разработки. Основная функция AJAX заключается в асинхронном обновлении веб-контента («A» в AJAX), что означает, что веб-браузеру пользователя не нужно перезагружать всю веб-страницу, когда требуется изменить лишь небольшую часть содержимого на странице.

Одним из наиболее распространенных примеров асинхронного обновления является функция Google «Google Suggest».Когда вы вводите поисковый запрос в строку поиска Google, и веб-сайт Google автоматически начинает предлагать варианты автозаполнения, пока вы вводите текст, это AJAX в действии. Контент на странице изменяется (в данном случае параметры автозаполнения в строке поиска) без необходимости вручную обновлять страницу (что может сделать использование Google Suggest непрактичным). Такие функции, как Google Suggest, являются фундаментальной частью современного просмотра веб-страниц, что указывает на важность AJAX в веб-разработке.Помимо Google Suggest, Каскарано говорит, что AJAX обычно используется для обновления таких функций, как строки состояния и уведомлений, онлайн-формы, разделы комментариев, а также опросы и опросы. Но что такое «J» и «X» в AJAX и как они делают возможным асинхронное обновление?

JavaScript и XML

Как упоминалось выше, «J» в AJAX означает JavaScript. JavaScript — это тип языка сценариев — языков программирования, используемых для автоматизации процессов веб-сайта, поэтому веб-разработчикам не нужно индивидуально программировать каждый экземпляр процесса, который появляется на странице.В случае с JavaScript он используется специально для создания, добавления и управления динамическим содержанием веб-сайтов. Другими словами, после того, как языки разметки, такие как HTML и CSS, используются для создания и отображения статических веб-функций (заголовков, шрифтов, абзацев и т. Д.), JavaScript затем используется для управления функциями, которые требуют обновлений в реальном времени, пока посетитель просматривает страницу. (подумайте об интерактивных картах, анимированной графике, видео с прокруткой, музыкальных автоматах и ​​т. д.). Поскольку JavaScript предназначен для обновления содержимого страниц, не требуя от зрителей вручную перезагружать целые страницы, это важный компонент для асинхронного обновления AJAX.

«X» в AJAX — это XML (расширяемый язык разметки). Как следует из названия, XML — это язык разметки, что означает, что он принадлежит к тому же семейству, что и такие языки, как HTML и CSS. Языки разметки — это языки кодирования, используемые для аннотирования частей веб-документа, которые предназначены для предоставления веб-браузерам инструкций о том, как понимать, обрабатывать и отображать веб-страницу, по сравнению с фактическим текстом, предназначенным для отображения на странице. В то время как HTML и CSS фокусируются на инструкциях по отображению содержимого страницы (абзацы, заголовки, шрифты, цвета и т. Д.)) XML используется для передачи данных, хранящихся на странице, браузерам, которые ее просматривают. Отдельные компьютерные системы часто несовместимы друг с другом и не могут понимать данные, отформатированные в другой системе, или взаимодействовать с ними. XML позволяет разработчикам обойти это препятствие, сохраняя данные в текстовом формате между тегами XML. Таким образом, XML предлагает способ хранения, перемещения и обмена данными, который не зависит от конкретной программной или аппаратной системы (что имеет решающее значение для Интернета, где данные должны быть доступны и понятны для всех программных и аппаратных платформ. ).RSS-каналы — веб-каналы подписки, которые позволяют пользователям получать доступ к контенту из блогов и источников новостей по мере их обновления в реальном времени — построены с использованием XML и являются примером практических возможностей языка по обмену данными. Но как XML объединяется с JavaScript для формирования AJAX?

Как работает AJAX?

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

Напомним: JavaScript автоматизирует процесс обновления, запрос обновленного контента форматируется в XML, чтобы сделать его универсально понятным, и снова включается JavaScript, чтобы обновить соответствующий контент для пользователя, просматривающего страницу. Каскарано отмечает, что метод AJAX игнорирует посторонние данные страницы и обрабатывает только запросы обновленной информации и саму обновленную информацию. Это действительно суть эффективности AJAX, делая веб-сайты и приложения, использующие AJAX, более быстрыми и более отзывчивыми для пользователей.

Как выучить AJAX?

Хотя все тонкости JavaScript и языков разметки, вероятно, лучше всего изучить через онлайн или личные занятия, Каскарано говорит, что объединение этих навыков и овладение техникой AJAX можно легко осуществить с помощью онлайн-руководств. Веб-ресурсы с бесплатным учебником по AJAX включают, помимо прочего, Udacity, jQuery, Webucator и Code School. Помните, что если вы уже изучили JavaScript, HTML и XML или даже если вы в настоящее время находитесь в процессе обучения, AJAX — это просто метод объединения этих навыков, которые можно освоить в течение нескольких часов, а не к совершенно новому набору навыков.Когда дело доходит до получения вакансии веб-разработчика, Каскарано говорит, что стоит потратить эти часы и освоить технику AJAX. Хотя AJAX не является отдельным навыком, он является настолько универсальным и ключевым для разработки интерфейса, что любое время, которое вы потратите на ознакомление с ним, окупится в геометрической прогрессии. На момент написания этой статьи в Glassdoor было около 5000 списков вакансий, в которых знания AJAX явным образом указаны как требование, и почти 93000 вакансий фронтенд-разработчиков в целом, и все они будут приветствовать ваше свободное владение AJAX.

.

Что такое Ajax и как он используется в современной веб-разработке?

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

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

Но это помогает понять историю Ajax и проблемы, которые он решает, прежде чем применять его в ваших реальных веб-проектах.

Краткая история Ajax

Ajax — это метод передачи данных HTTP в веб-браузере без обновления страницы. Иногда его можно записать как аббревиатуру (AJAX), где буквы обозначают асинхронный JavaScript и XML.

Концепт был разработан Джесси Джеймсом Гарретом и действительно набрал обороты в середине 2000-х годов.

В те первые дни многие компании, занимающиеся Web 2.0, снисходили до принципов проектирования Ajax. Одним из первых титанов был значок голосования Digg, который передавал HTTP-запрос в базу данных голосования без обновления страницы.

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

Библиотеки абстракции, такие как jQuery, значительно упрощают современным разработчикам освоение базовой технологии Ajax, не требуя необработанного ванильного JS.Но что это за основы и как Ajax работает в браузере?

До основ: что такое Ajax?

Строго говоря, Ajax — это тип объекта API, самый ранний из которого — XMLHttpRequest (). Это обеспечивает функциональность на стороне клиента для передачи (или получения) данных от клиента на сервер без обновления страницы.

Первоначально он был разработан Microsoft, а теперь стандартизирован WHATWG. Согласно блогу Аарона Шварца, этот XMLHttpRequest (или для краткости XHR) был впервые добавлен в браузер IE5.Вскоре он был принят Mozilla и другими разработчиками браузеров.

Подводя итог, Microsoft создала JS-метод под названием XMLHttpRequest, который позволяет передавать данные HTTP на стороне клиента. Этот метод изначально был встроен в IE и вскоре распространился на другие браузеры. Он был придуман Ajax и быстро превратился в методологию, которую мы видим сегодня.

Так как именно это работает? HTTP-запрос отправляется в файл на сервере, локальном или удаленном. Данные возвращаются из этого файла и затем могут быть проанализированы с помощью JavaScript.

Самым распространенным типом передачи данных изначально был XML, отсюда и название XMLHttpRequest. Но со временем это изменилось, чтобы поддерживать новые типы данных на основе JS, такие как JSON. Это было очень естественным прогрессом, потому что данные JSON можно анализировать как объекты, которые намного удобнее, чем узлы XML.

Ajax в повседневной разработке

Хотя вы все еще можете использовать объект XHR, если хотите, его синтаксис невероятно запутанный и многословный. В настоящее время большинство разработчиков предпочитают такие библиотеки, как jQuery или UmbrellaJS, у обеих из которых есть собственный .ajax () метод.

Также большая часть кода Ajax используется вместе с базой данных. Вызов Ajax подключается к сценарию на вашем сервере, который затем извлекает данные из базы данных. Этот сценарий может быть написан на PHP, Python, Ruby, Node или даже на Java. Все, что имеет значение, — это возвращаемый тип , который преимущественно является JSON.

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

Наиболее ценным применением Ajax в современной разработке является локальная база данных. Это позволяет пользователям, например, обновлять информацию профиля без обновления всей страницы или голосовать на таком сайте, как Designer News, и сохранять голосование в базе данных без обновления.

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

Асинхронная загрузка: как часто бывает слишком часто?

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

Во-первых, как можно чаще сокращать количество HTTP-вызовов. Если у вас нет команды разработчиков и фермы серверов, такой как Twitter, вы не сможете запускать обновления Ajax в своем приложении без ущерба для скорости.

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

Однако кеширование также играет важную роль, и в этой области можно много сказать об оптимизации.

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

Дополнительная литература

Удивительно видеть, насколько Ajax как методология выросла всего за десять лет.Ajax начинался как роскошь для веб-разработчиков, а теперь считается стандартной рабочей процедурой.

Хотя технические детали, лежащие в основе Ajax, могут быть увлекательными, лучший способ узнать больше — создать что-то для себя. Ознакомьтесь с руководствами ниже и начните с простых целей. API могут предложить интересный способ изучить Ajax без создания собственной базы данных.

.

Что такое Ajax?

— [Рассказчик] В этом курсе мы будем учиться
о разработке Ajax с помощью PHP.
Поэтому имеет смысл начать с вопроса:
что такое Ajax?
Ajax — это своего рода сокращение, происходящее от
асинхронный JavaScript и XML.
A от асинхронного, JA происходит от JavaScript,
и X из XML.Хотя это аббревиатура,
он по-прежнему пишется как отдельное слово с большой буквы
и строчный jax.
Проще говоря, Ajax — это то, что позволяет веб-браузеру отправлять
и получать данные в фоновом режиме.

Хотя у Ajax одно имя,
это не единая технология.
На самом деле это комбинация
нескольких технологий, работающих вместе.Будет полезно, если мы начнем с понимания истории Ajax.
Начиная с 1996 года Microsoft и Mozilla,
создатели Netscape и Firefox,
начать экспериментировать с асинхронной загрузкой
контента в веб-браузерах.
Асинхронный означает, что не весь контент загружается
в то же время.
В 1999 году Microsoft Internet Explorer 5 добавил кое-что
называется XMLHTTP ActiveX control.

И это действительно был первый раз, когда мы смогли
для загрузки асинхронного контента.
В период с 2000 по 2002 год Mozilla создала стандартизированный
Объект XMLHttpRequest, который был смоделирован очень тщательно
на интерфейсе Microsoft.
И именно эта стандартизация была принята
всеми веб-браузерами в период с 2002 по 2006 год.
Как раз в середине того периода, в 2004 году,
Google начал использовать XMLHttpRequest для асинхронной загрузки
контент для Gmail.

В 2004 году они также использовали его для Google Suggest.
Вот что происходит, когда вы переходите на главную страницу Google
и вы начинаете печатать, и он предлагает предложения по мере того, как вы печатаете
возможных поисковых запросов, которые появляются прямо под
поле поиска.
А затем в 2005 году они начали использовать его для Google Maps.
Теперь Google была одной из первых компаний, осознавших
огромные перспективы использования XMLHttpRequest
но это был не только Google.Flickr, Amazon и Kayak.com были одними из
другие ранние последователи.
До этого момента это все еще была техника
для совместного использования нескольких различных технологий.

Момент, когда Ajax действительно загорелся веб-разработчиками
когда ему дали имя и объяснили
как вы могли бы использовать это в статье Джесси Джеймса Гарретта
адаптивного пути.Его статья «Ajax: новый подход к веб-приложениям».
вышел в феврале 2005 года.
Он по-прежнему доступен в Интернете, и он по-прежнему отличный
введение в тему.
До Ajax все веб-страницы использовали классическую модель HTTP.
Давайте сначала убедимся, что мы это понимаем.
Пользователь выполняет действие, например,
они нажимают на ссылку.

HTTP-запрос отправляется из браузера на сервер,
сервер обрабатывает запрос,
а затем сервер возвращает HTML браузеру.
Однако одним из ключевых моментов здесь является то, что пользователь
должен дождаться ответов от сервера.
Он должен дождаться получения новой страницы
и загрузить в браузер пользователя.Напротив, давайте теперь посмотрим на модель Ajax,
описанный мистером Гарретом.
Сначала веб-страница загружает JavaScript.
Г-н Гаррет называет это движком Ajax,
хотя сегодня мало кто действительно использует этот термин.

Затем, когда пользователь выполняет действие,
например, щелкнув ссылку,
запрос сначала идет к JavaScript, а не к серверу.Это дает JavaScript возможность
для обработки запроса напрямую.
Возможно, JavaScript уже знает, что должно произойти.
Может быть, что-то на странице просто нужно изменить.
Некоторые элементы страницы могут быть показаны или скрыты,
или, возможно, значение будет обновлено.
JavaScript также может проверять данные в форме,
он может обновить навигацию,
или отредактируйте другие внутренние значения.JavaScript также имеет возможность использовать
что XMLHttpRequest для связи с сервером
на заднем фоне.

И делает это путем асинхронной отправки XML.
к серверу.
Таким образом, страница все еще видна пользователю
а в фоновом режиме JavaScript может отправить запрос
к серверу.Затем можно использовать полученные данные ответа.
чтобы обновить страницу.
Главное преимущество здесь в том, что пользователи могут продолжать
взаимодействовать с веб-страницей без ожидания.
Это может происходить в фоновом режиме, и пользователь может
продолжать прокручивать страницу вверх и вниз,
нажимать на другие вещи,
для запуска других запросов Ajax.

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

Есть HTML и CSS, есть XML,
есть объект XMLHttpRequest и JavaScript.
Я предполагаю, что у вас есть опыт
с ними уже, но если вы этого не сделаете, не паникуйте,
вы по-прежнему сможете следовать за ним.Мы не собираемся слишком углубляться в HTML, CSS,
XML или JavaScript.
И основы легко понять.
Мы собираемся потратить большую часть времени на обучение работе
с этим объектом XMLHttpRequest,
что действительно позволяет Ajax.
Однако, если вы хотите серьезно подойти к использованию Ajax
в вашей собственной разработке, то я предлагаю вам узнать больше
об этих других технологиях, чтобы вы могли
большинство из них.

В частности, JavaScript, HTML и CSS,
именно в таком порядке будет для вас наиболее ценным.

.

Что такое AJAX?

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

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

Технически AJAX означает асинхронный JavaScript и XML.
Это довольно сложно, так что давайте разберем это по частям.
Асинхронный означает, что клиент может запрашивать новые фрагменты информации из
сервер в любое время.Не нужно ждать перезагрузки страницы.
Новый запрос может быть вызван событием, например нажатием кнопки, наведением курсора
над изображением или чем-то еще.
J в AJAX означает JavaScript.
JavaScript — это то место, где происходит вся эта магия.
Он обрабатывает события, которые запускают новый запрос, делает запросы для новых
данные на сервер и заботится об обновлении только части документа
это нужно изменить.

JavaScript общается с сервером с помощью набора методов программирования, называемых
API и использует так называемый HTTP-запрос XHR или XML.
Отсюда X в AJAX.
XHR API позволяет браузеру отправлять и запрашивать данные с сервера.
Это может немного сбивать с толку, потому что многие люди думают об XML как о языке
используется для описания данных, очень похожих на HTML.Иногда люди предполагают, что X в AJAX означает, что данные из AJAX
запрос должен быть в формате XML, но данные, которые передаются в и из
сервер может быть в любом формате, обычно это текстовый файл, HTML или
Объект JavaScript, например JSON.

Итак, AJAX — это просто причудливый термин для технологии, которая позволяет создавать страницы.
это обновление без необходимости перезагрузки страницы.JavaScript выполняет большую часть тяжелой работы с AJAX и использует XHR API для
обрабатывать связь между клиентом и сервером.

.