Что такое ajax запрос

Что такое ajax запрос

Ajax
Класс языка Web Application, HTML, JavaScript, DHTML, Domain Object Model, XMLHttpRequest, JSON, XML, XSLT, XHTML, Cascading Style Sheets
Появился в 2005
Автор Джесси Джеймс Гарретт [en]

AJAX, Ajax ( ˈeɪdʒæks , от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее. По-русски иногда произносится транслитом как «аякс». У аббревиатуры AJAX нет устоявшегося аналога на кириллице.

Содержание

Сравнение стандартного подхода и AJAX [ править | править код ]

В классической модели веб-приложения:

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

При использовании AJAX:

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

Технология [ править | править код ]

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

  • использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например с использованием XMLHttpRequest (основной объект);
  • через динамическое создание дочерних фреймов [1] ;
  • через динамическое создание тега

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

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

Многие технологии, которые используются в AJAX, известны еще с 1990-х годов. Так, в 1996 году в Internet Explorer 3 применялся HTML-элемент IFRAME, а в 1998 году компания Microsoft предложила подход Remote Scripting.

Непосредственно термин AJAX впервые был использован Джесси Джеймсом Гарретом 18 февраля 2005 года в статье «Ajax: A New Approach to Web Applications». Ее автор является одним из основателей и главой компании Adaptive Path. В своей статье он описал принцип разработки web-приложений, применяемый на тот момент в Google Maps и Gmail. По его словам, это стало «фундаментальным прорывом в возможностях, доступных в веб-приложениях».

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

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

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

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

Понять основной принцип работы AJAX помогает представленное ниже изображение:

В работе технологии можно выделить 4 основных этапа:

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

Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.

Читайте также:  Файл h264 конвертировать в avi

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

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

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

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

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

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

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

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

Недостатки AJAX

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

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

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

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

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

Индексирование AJAX поисковиками

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

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

Читайте также:  Программа йота для компьютера

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

  1. Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
    Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.
  2. Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).
  3. На странице AJAX нужно проставить тег: .
  4. Карта сайта в формате .xml ускорит индексацию его страниц.
  5. После индексации ресурса сравните его версию AJAX с сохраненной копией. Это позволит увидеть, все ли страницы проиндексированы ботами.

Влияние AJAX на ранжирование

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

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

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

Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».

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

Определение и применение

jQuery функция $.ajax() позволяет выполнить асинхронный AJAX запрос. AJAX (от англ. Asynchronous Javascript and XML — "асинхронный JavaScript и XML") — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в "фоновом" обмене данными браузера с веб-сервером.

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

jQuery синтаксис:

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

В самом простом виде функция $.ajax() может быть вызвана без параметров:

Обращаю Ваше внимание, что параметры по умолчанию могут быть установлены глобально с использованием jQuery функции $.ajaxSetup(). В этом примере функция $.ajax() используется без параметров и просто загружает содержимое текущей страницы, но ничего не делает с результатом. Чтобы использовать результат, вы можете определить одну из функций обратного вызова.

Добавлен в версии jQuery

Значения параметров

Параметр Описание
url Строка, содержащая URL адрес, на который отправляется запрос.
settings Набор пар ключ/значение, которые настраивают запрос AJAX. Все параметры являются необязательными. Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup().
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например:

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение "jsonp" не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

Тип: Function ( jqXHR jqXHR, PlainObject settings ).
Функция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest , объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false , то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true , для dataType "script" и "jsonp" false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

Тип: Function ( jqXHR jqXHR, String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий "success" или "error"). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса ("success", "notmodified", "nocontent", "error", "timeout", "abort", или "parsererror"). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: "application/x-www-form-urlencoded; charset=UTF-8").

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект. Например:

Значения по умолчанию:
Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param ).

Тип: Function ( String data, String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать "сырые" данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data — данные полученные от сервера в виде строки и type — тип этих данных (значение параметра dataType).

dataType (по умолчанию: xml, json, script, или html ).

Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

  • "xml" — возвращает XML документ, который может быть обработан с помощью jQuery.
  • "html" — возвращает HTML как обычный текст, теги Клик
Ссылка на основную публикацию
Adblock detector