Ajax что это в программировании

Введение в AJAX и COMET

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/fetch.

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

Она будет полезна для понимания, что такое AJAX и с чем его едят.

Что такое AJAX?

AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.

За счёт этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Несмотря на то, что в названии технологии присутствует буква X (от слова XML), использовать XML вовсе не обязательно. Под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.

Что я могу сделать с помощью AJAX?

Элементы интерфейса

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

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

Динамическая подгрузка данных

Например, дерево, которое при раскрытии узла запрашивает данные у сервера.

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

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

Код, который это обеспечивает, работает следующим образом.

1. Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).

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

Технически, с помощью AJAX можно обмениваться любыми данными с сервером.

Обычно используются форматы:

• JSON – для отправки и получения структурированных данных, объектов.
• XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
• HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
• Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.

Что такое COMET?

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

Можно сказать, что AJAX – это «отправил запрос – получил результат», а COMET – это «непрерывный канал, по которому приходят данные».

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

На текущий момент технология COMET удобно реализуется во всех браузерах.

Об этом разделе

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

Существуют библиотеки и фреймворки, добавляющие удобства, например Socket.io, CometD и другие.

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

AJAX: что это такое и как он работает

Начинающие программисты рано или поздно сталкиваются со словом AJAX. Его слышали даже те, кто не связан с программированием. Но что оно значит?

Ниже мы подробно разберемся, что это за технология.

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

Получи грант, покрывающий 50% стоимости обучения
И обучайся новой профессии онлайн из любой точки мира
Получить грант

Что это такое

AJAX (аякс) – это аббревиатура, полное название пишется: Asynchronous Javascript and XML. Представляет собой синтез указанных в названии технологий и ассоциируется с термином Web 2.0.

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

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

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

О преимуществах мы поговорим дальше, сейчас же рассмотрим основные положительные моменты технологии.

К таким моментам относятся:

• проектирование комфортного web-интерфейса;
• полное взаимодействие с пользователем;
• частичная перезагрузка страницы;
• удобное использование технологии.

Для работы с web-страницей применяются 2 метода:

1. Изменение страницы без перезагрузки.
2. Динамическое обращение к серверу.

Далее рассмотрим, как работает технология.

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

Весь принцип работы Аякс подробно указан в этой схеме:

В функционировании системы можно выделить 4 ключевых этапа:

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

Процесс передачи данных реализуется с помощью объекта XMLHttpRequest. Он выполняет функцию посредника между сервером и браузером. Отправляемые запросы имеют 2 типа:

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

Второй тип применяется для больших информационных массивов.

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

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

Для ответа сервер использует обычный текст в форматах XML и JSON.

Первый формат позволяет сразу отображать информацию от сервера на странице. Он сразу же конвертируется в HTML и выводится на экран.

Второй формат предлагает пользователю выполнить полученный от сервера код. После выполнения код сразу сформировывается в объект JS.

87% наших выпускников уже работают в IT
Оставь заявку, и мы поможем с выбором новой профессии
Оставить заявку

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

Рассмотрим все преимущества данной технологии:

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

Ниже подробнее расскажем об использовании технологии AJAX на примерах.

Практические примеры применения технологии

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

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

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

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

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

Технология AJAX делает многозадачность намного проще.

Вопросы – Ответы

Ответим на самые популярные вопросы.

Где можно хранить состояние клиента при работе AJAX?

Есть несколько мест, где можно хранить состояния:

• на стороне клиента в Cookies;
• на стороне клиента в содержимом web-страницы;
• в файловой системе со стороны клиента;
• на самом сервере.

Можно ли делать экспорт таблиц PHP с помощью AJAX?

Да, технология позволяет делать подобный экспорт.

Как в PHP-скрипте узнать, что запрос AJAX завершен или прерван?

Это делается на стороне клиента с помощью таймера в JavaScript. Если по истечении 20 секунд не получено никакого ответа, то закрываем всю операцию.

Заключение

Мы разобрались, что такое AJAX и для чего он предназначен. Кроме этого, мы рассмотрели примеры его применения.

Вспомним, какую информацию мы получили из статьи:

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

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

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

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

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

Не теряйте время, набор студентов на курсы ограничен.

Запишитесь уже сегодня и начните постепенно менять вашу жизнь в лучшую сторону.

Начни обучение сегодня
FrontEnd разработчик

Профессия Frontend-разработчик — лидер по количеству запросов от работодателей. Без этого специалиста не может обойтись ни одна современная компания, у которой есть сайт. Хотите стать Frontend-разработчиком и создавать сайты, интернет-магазины, маркетплейсы и прочее? Записывайтесь на наш курс!

QA Automation Engineer

QA Automation Engineer — это специалист, который обеспечивает качество продукта и контролирует все этапы разработки с момента появления идеи до релиза. Он имеет компетенции и тестировщика, и разработчика. Он участвует во всех процессах разработки: от подготовки стандартов и требований до самой разработки продукта. А также владеет ручным тестированием и пишет скрипты для автоматизации этого процесса, докладывает о проблемах и контролирует их исправление.

Project Manager

Project Manager — специалист, без которого не может обойтись ни один IT-проект. Если вы хотите войти в сферу IT-технологий, но учить языки программирования это не для вас, тогда профессия Project Manager — то, что вам нужно! Запишитесь на курс Project Management и начните свой путь в IT!

Популярное

10 задачек, которые дают на собеседованиях в IT-компании

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

Frontend разработчик: главные навыки

Что такое AJAX

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

• вы вводите сообщение и нажимаете «отправить»;
• загружается новая страница с подтверждением отправки.

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

AJAX (программисты называют его «аякс») — это сокращение от Asynchronous Javascript and XML, а на русский это переводится как «Асинхронный JavaScript и XML». Смысл здесь — в асинхронности действий браузера и сервера. Разберём эти понятия.

Синхронные запросы

Обычные запросы к серверу, чтобы получить и сформировать страницу, работают так:

1. Посетитель нажимает в форме обратной связи кнопку «Отправить».
2. Браузер видит, что по кнопке нужно отправить запрос на сервер. Он пакует запрос и отправляет.
3. Сервер получает запрос, обрабатывает и даёт ответ в виде новой веб-страницы.
4. Браузер загружает эту новую страницу с нуля. На ней уже все нужные пользователю данные, но есть ощущение «вспышки»: ты был на одной странице, потом экран побелел, и ты оказался на новой странице.

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

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

Асинхронные запросы

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

В нашем примере с формой AJAX будет работать так:

1. Посетитель нажимает в форме обратной связи кнопку «Отправить».
2. Браузер запускает скрипт, привязанный к кнопке.
3. Этот скрипт отправляет запрос на сервер и получает в ответ новую порцию информации от сервера. Страница не перезагружается, всё происходит внутри скрипта.
4. Скрипт смотрит, что ответил сервер, и вживляет новую информацию в старую страницу.
5. Страница не перезагрузилась, посетитель остался там же, где и был, только с новыми данными.

Примеры таких запросов:

• Получить список новых сообщений в чате, не перезагружая весь чат.
• Подгрузить новых товаров на витрину магазина, не перезагружая витрину.
• Получить новые рекламные баннеры на странице, не заставляя пользователя перезагружать страницу.
• Получить новые сообщения на стене (Дуров, верни!), не дожидаясь, пока пользователь сам её перезагрузит. (Стена, дети, это то, как раньше называлась лента.)
• Ютуб этим пользуется, чтобы свернуть видео в маленький плеер в углу.
• Яндекс — чтобы показать поисковые подсказки.
• Службы доставки — чтобы в режиме реального времени показывать статус заказа.
• Бесконечные ленты в соцсетях — тоже отсюда. Когда вы доскролливаете до конца, на сервер улетает новый AJAX-запрос, и в ответ приходит новый контент.

Как устроен AJAX

Основа AJAX — объект XMLHttpRequest, который и отвечает за все запросы. Раньше его поддерживали не все браузеры, поэтому нужно было подключить отдельно библиотеку jQuery, в которой этот объект есть. Сейчас почти все браузеры научились поддерживать этот объект напрямую.

Вся магия асинхронных запросов AJAX основана на работе с DOM-объектами страницы в браузере:

• Когда браузер получает исходный код страницы, он внутри себя строит много виртуальных элементов на основе этого кода: заголовки, картинки, абзацы, ссылки и всё остальное.
• К каждому элементу модели можно обратиться отдельно, чтобы поменять его свойства или содержимое. Например, через JavaScript можно поменять текст в заголовке или перекрасить фон страницы, не перезагружая страницу.
• JavaScript делает запрос на сервер, получает ответ и дальше творит со страницей то, что нужно, в зависимости от самой программы. Отправить запрос и получить ответ ничем принципиально не отличается от чтения и записи переменных.

Плюсы и минусы AJAX

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

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

✅ Можно снизить нагрузку на сервер. Если сайт формирует все страницы на лету, например, с помощью PHP, то можно один раз загрузить стандартные части страницы (шапку, меню и подвал), а остальное подгружать по необходимости. Меньше данных в запросе — быстрее ответ от сервера и базы.

❌ Нужен включённый JavaScript. Если в браузере выключить JS, то ничего не сработает — данные не придут с сервера и интерактивной страницы не получится.

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

❌ Растёт сложность проекта. Работа с такими запросами требует определённой квалификации от программиста, чтобы он мог предусмотреть разные нештатные ситуации и обработать их заранее. А ещё нужно продумать бэкенд — поведение сервера в ответ на разные запросы.

❌ Ошибки при нестабильной связи. Если интернет работает с перебоями, то AJAX может не дождаться ответа от сервера или не сможет отправить свой запрос. В итоге логика работы страницы может нарушиться — в итоге придётся перезагружать её полностью и начинать работу с нуля.

Что дальше

Чтобы посмотреть, как AJAX работает и показывает новые данные без перезагрузки, сделаем пару небольших проектов. Заодно попрактикуемся в PHP — он будет отвечать за новые данные с сервера.

AJAX

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

История технологии

Идеи, отдаленно напоминающие AJAX, использовались в веб-разработке еще в 90-х годах. К ним можно отнести Remote Scripting – инструмент Microsoft для удаленного вызова серверных процедур с помощью клиентского скрипта. Механизм был придуман еще в 1998 году, а тег iframe, позволяющий встраивать один HTML-документ в другой, появился даже раньше – в 1996-м. Но эти способы не давали тех широких возможностей, которые обеспечила разработчикам технология AJAX. В 2005 году глава компании Adaptive Path Джесси Джеймс Гарретт написал книгу о принципе, который на тот момент использовали почтовые клиенты, дал ему название AJAX и подробно описал его работу. С тех пор технология стала инструментом широкого использования: она дает возможность работать с интернет-страницей как с обычным приложением, не обновляя ее. Это удобно и для владельца сайта, и для пользователя.

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

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

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

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

Обмен данными. Он происходит за счет объекта XMLHttpRequest, своеобразного буфера между сервером и браузером. К серверной части обращается POST- или GET-запрос. Первый используется для больших объемов данных, второй обращается к конкретному документу на сервере и передает как аргумент ссылку на страницу. После того как сервер получит запрос, он формирует ответ в формате XML или JSON.

• XML сразу переводится в HTML;
• в случае с JSON браузер запускает полученный код, создается объект JavaScript;
• иногда ответ – простой текст, тогда он сразу же выводится на странице без лишних преобразований.

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

Преимущества технологии AJAX

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

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

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

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

Недостатки AJAX

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

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

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

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

Необходимость в JavaScript. Без включенного в браузере JavaScript технология просто не будет работать. JS поддерживают все современные браузеры, но, если пользователь решил отключить его выполнение, он не сможет нормально пользоваться сайтом. Это мешает и поисковым системам: из-за того что часть содержимого показывается только при выполнении запроса, поисковик не может ее проиндексировать.

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

Как снизить влияние AJAX на ранжирование

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

• Ключевую часть, которая особенно важна для индексирования, лучше сделать статической и размещать в самом начале страницы.
• Еще один прием – кеширование динамических страниц, что позволяет отображать их в качестве статических.
• Вызывать AJAX лучше не событием onClick, а якорем.
• Иметь на сайте sitemap.xml практически обязательно, это ускоряет и облегчает индексацию.

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

• URL-адреса динамических страниц содержат в себе символ #. Их следует переписать, добавив после каждого восклицательный знак. Вот так: «#!».
• После этого нужно прописать для каждой такой страницы HTML-версию, доступную по определенному адресу. Адреса создаются с помощью замены сочетаний «#!» на «?_escaped_fragment_=».
• На каждой странице AJAX следует прописать метатег ‘ meta name=»fragment» content=»!» ‘.

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