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


Содержание

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

В предыдущей статье мы познакомились с прямыми методами jQuery для работы с Ajax (такими как get(), post() и load()). В этой статье описан низкоуровневый программный интерфейс .

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

Простые Ajax-запросы

Создавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax(), простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):

Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар «ключ-значение», каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.

В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR

Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс. Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль.

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

Задание URL-адреса запроса

Одним из наиболее важных доступных параметров является параметр url, позволяющий указать URL-адрес для запроса. Можно использовать этот параметр как альтернативу передаче URL-адреса в качестве аргумента метода ajax(), как показано в примере ниже:

Создание POST-запроса

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

Здесь я не буду подробно описывать этот пример, т.к. мы его рассмотрели подробно в предыдущей статье (только с использованием метода post()). Отмечу только, что здесь дополнительно к type мы использовали еще несколько параметров. Для указания цели POST-запроса используется описанный ранее параметр url. Пересылаемые данные указываются с помощью параметра data, значение которого устанавливается с помощью метода serialize(), описанного в предыдущей статье. Тип данных, получаемых от сервера указывается в параметре dataType.

Работа с событиями Ajax

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

Параметры событий Ajax

Параметр Описание
beforeSend Задает функцию, которая будет вызываться перед запуском Ajax-запроса
complete Задает функцию, которая будет вызываться при успешном или неудачном завершении Ajax-запроса
error Задает функцию, которая будет вызываться при неудачном завершении запроса
success Задает функцию, которая будет вызываться при успешном выполнении запроса

Обработка успешных запросов

В примерах выше, при использовании параметра success, в вызове функции были опущены два аргумента — сообщение, описывающее результат запроса, и объект jqXHR. Пример использования функции, которая принимает эти аргументы, приведен ниже:

Аргумент status — это строка, описывающая исход запроса. Функция обратного вызова, которую мы задаем, используя параметр success, выполняется лишь для успешных запросов, и поэтому значением данного аргумента обычно является success. Исключением является случай, когда вы используете параметр ifModified, описанный далее.

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

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

В данном случае результат имеет следующий вид (в зависимости от того, какой сервер вы используете, у вас может быть другой набор заголовков):

Обработка ошибок

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

Здесь запрашивается отсутствующий на сервере файл NoSuchFile.json, и поэтому запрос заведомо не сможет быть выполнен, в результате чего будет вызвана функция, заданная с помощью параметра error. Аргументами этой функции являются объект jqXHR, а также сообщение о состоянии ошибки и сообщение об ошибке, полученное в ответе сервера. Внутри этой функции в документ добавляется элемент div, отображающий значения аргументов status и errorMsg, как показано на рисунке:

Настройка параметров запросов перед их отправкой

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

Аргументами указанной функции являются объект jqXHR (который может пригодиться для настройки заголовков запроса или отмены запроса, прежде чем он будет отправлен) и объект, содержащий параметры, переданные методу ajax(). В данном примере URL-адрес для Ajax-запроса задается с помощью параметра beforeSend.

Задание нескольких обработчиков событий

В предыдущих примерах мы реагировали на наступление событий, связанных с Ajax-запросами, вызовом одной функции, но в параметрах success, error, complete и beforeSend можно задавать массив функций, каждая из которых будет выполняться при запуске соответствующего события. Простой пример этого приведен ниже:

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

Настройка контекста для событий

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

Здесь параметр context устанавливается на объект jQuery, содержащий элементы h1 документа. В функции, определяемой параметром complete, мы выделяем рамкой выбранные элементы (в данном случае — элемент, поскольку в документе есть только один элемент h1) путем вызова метода css() для объекта jQuery (на который ссылаемся через this). Цвет рамки определяется на основании состояния запроса.

С помощью параметра context можно установить в качестве контекста любой объект, и ответственность за выполнение только допустимых для этого объекта операций лежит на вас. Например, если вы задаете в качестве контекста элемент HTMLElement, то до того, как вызывать для него какие-либо методы jQuery, вы должны передать этот объект функции $().

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Базовые конфигурационные параметры Ajax-запроса

Параметр Описание
accepts Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType Устанавливает для запроса значение заголовка content-туре
dataType Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout Задает длительность тайм-аута (в миллисекундах) для запроса
userName Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

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

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

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

Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.

Использование дополнительных конфигурационных параметров

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

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

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

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

Игнорирование данных, оставшихся неизменными

С помощью параметра ifModified можно обеспечить получение данных лишь в том случае, если с момента последнего запроса они были изменены. Такое поведение определяется заголовком Last-Modified. Благодаря этому удается избежать бесполезной пересылки данных, которая не даст пользователю никакой новой информации по сравнению с той, которой он уже располагает. По умолчанию параметр ifModified имеет значение false, указывающее jQuery на необходимость игнорирования заголовка Last-Modified и предоставления данных в любом случае.

Пример использования этого параметра приведен ниже:

В этом примере значение параметра ifModified устанавливается равным true. Функция success вызывается всегда, но если с того момента, когда содержимое запрашивалось в последний раз, оно не изменилось, то аргумент data будет иметь значение undefined, а аргумент status — значение notmodified.

В данном случае выполняемые действия определяются значением аргумента status. Если значением этого аргумента является success, то аргумент data используется для добавления элементов в документ. Если же аргумент status имеет значение notmodified, то мы используем метод css() для выделения рамкой элементов, которые уже имеются в документе.

В ответ на событие click, связанное с кнопкой, вызывается метод ajax(). Это дает возможность многократно повторять один и тот же запрос, чтобы продемонстрировать влияние параметра ifModified, как показано на рисунке:

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

Представьте, что вы запрашиваете данные, но в методе, указанном в параметре success, содержится ошибка, которая препятствует правильному обновлению содержимого документа. Тогда вашим следующим действием будет попытка щелкнуть на кнопке еще раз, чтобы добиться ожидаемого результата. Непродуманно используя параметр ifModified, можно проигнорировать действия пользователя, вынуждая его предпринимать более серьезные действия для устранения проблемы.

Обработка кода ответа

Параметр statusCode позволяет выбирать варианты дальнейших действий в зависимости от кода ответов на HTTP-запросы. Его можно использовать либо вместо параметров success и error, либо в дополнение к ним. Пример самостоятельного использования параметра statusCode приведен ниже:

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

Если код (например, 200) соответствует успешному запросу, то аргументы совпадают с теми, которые передавались бы функции, определяемой параметром success. В противном случае (например, при коде ответа 404, означающем, что запрашиваемый файл не найден) аргументы совпадают с теми, которые передавались бы функции, определяемой параметром error.

Как видите, это средство не дает непосредственной информации о кодах ответа. Я часто пользуюсь им в процессе отладки взаимодействия браузера с сервером, обычно для того, чтобы выяснить, почему jQuery ведет себя не так, как мне хотелось бы. При этом я использую параметр statusCode в дополнение к параметрам success и error и вывожу информацию на консоль. Если эти параметры используются совместно, то сначала будут выполнены функции success и error, а затем уже — функции, определяемые параметром statusCode.

Предварительная очистка ответных данных

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

Это средство мне очень помогает при работе с серверами Microsoft ASP.NET, присоединяющими лишние данные к данным JSON. Удаление таких данных с помощью параметра dataFilter требует лишь минимальных усилий. Пример использования параметра dataFilter приведен ниже:

Функции передаются данные, полученные с сервера, и значение параметра dataType. Если параметр dataType не используется, то второму аргументу присваивается значение undefined. Ваша задача заключается в том, чтобы вернуть отфильтрованные данные. В этом примере предмет нашего внимания — данные в формате JSON:

Для повышения иллюстративности примера в нем выполняются некоторые дополнительные операции. Во-первых, данные JSON преобразуются в массив JavaScript с помощью метода jQuery parseJSON. Затем из массива удаляется первый элемент с помощью метода shift(), а порядок следования остальных его элементов обращается с помощью метода reverse().

Все, что требуется от функции, — вернуть строку, и поэтому мы вызываем метод JSON.stringify(), зная, что jQuery преобразует данные в объект JavaScript, прежде чем вызвать функцию success. В данном примере была продемонстрирована возможность удаления элемента из массива, однако, в зависимости от ситуации, мы могли бы выполнить любой другой вид обработки.

Конечный результат представлен на рисунке:

Управление преобразованием данных

Рассмотрение одной из самых любимых своих настроек я приберег напоследок. Должно быть, вы обратили внимание, что при получении определенных типов данных jQuery автоматически выполняет некоторые удобные преобразования. Например, получая данные JSON, jQuery предоставляет функцию success, использующую объект JavaScript, а не исходную необработанную строку JSON.

Для управления подобными преобразованиями используется параметр converters. Значением этого параметра является объект, устанавливающий соответствие между типами данных и функциями, используемыми для их обработки. В примере ниже показано, как использовать этот параметр для автоматического преобразования HTML-данных в объект jQuery:

В этом примере регистрируется функция для типа данных text html. Обратите внимание на пробел между компонентами указываемого MIME-типа (в отличие от формы записи text/html). Функция принимает данные, полученные от сервера, и возвращает преобразованные данные. В этом случае преобразование данных заключается в передаче HTML-фрагмента, содержащегося в файле flowers.html, функции $() и возврате результата. Отсюда следует, что к объекту, передаваемому в качестве аргумента data функции success, применимы обычные методы jQuery.

Илон Маск рекомендует:  Проверка блокировки всплывающих окон

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

Настройка и фильтрация Ajax-запросов

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

Определение параметров, используемых по умолчанию

Метод ajaxSetup() позволяет установить значения параметров, которые будут применяться по умолчанию во всех Ajax-запросах, тем самым освобождая вас от необходимости настраивать параметры при каждом запросе. Пример использования этого метода приведен ниже:

Метод ajaxSetup() вызывается с помощью функции jQuery $ аналогично тому, как это делалось в случае вызова метода ajax(). Аргументом метода ajaxSetup() является объект, содержащий значения параметров, которые вы хотите использовать по умолчанию для всех Ajax-запросов. В этом примере мы устанавливаем значения по умолчанию для параметров timeout, global, error и converters.

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

Фильтрация запросов

Метод ajaxSetup() определяет базовые значения конфигурационных параметров, применимые ко всем запросам Ajax. Возможности динамической настройки параметров для отдельных Ajax-запросов обеспечиваются методом ajaxPrefilter(). Пример использования этого метода приведен ниже:

Указанная вами функция будет выполняться для каждого нового Ajax-запроса. Аргументами, передаваемыми функции, являются параметры запроса (включая любые значения по умолчанию, установленные вами с помощью метода ajaxSetup()), а также исходные параметры, переданные методу ajax() (исключая любые значения по умолчанию) и объекту jqXHR запроса.

Мы вносим изменения в объект, передаваемый в качестве первого аргумента, как показано в примере. В данном сценарии, если среди параметров, передаваемых методу ajax(), присутствует параметр dataType, то длительность тайм-аута устанавливается равной двум секундам. Чтобы предотвратить отправку всех остальных запросов, для объекта jqXHR вызывается метод abort().

AJAX (Асинхронный JavaScript + XML)

Последняя модификация: 10.08.2014 г

Давно забытый AJAX

Технология AJAX (Асинхронный JavaScript + XML), являющаяся одной из основных технологий, лежащей в основе, так называемого, WEB 2.0, была известно еще, чуть ли не, со времен каменного века. Однако, благодаря появлению термина AJAX, который ввел Джис Джеймс Гаррет (Jesse James Garrett), она стала необычайно модной. И если раньше, о ней могли говорить только наиболее продвинутые программисты, то теперь, благодаря появлению специального термина, сказать о ней может каждый, кому не лень. Достаточно просто произнести «AJAX», и ты уже о ней говоришь.

Суть технологии AJAX

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

Истоки AJAX

Первые приемы динамической подзагрузки данных на WEB-страницу появился в спецификации HTML 4.0 от 18 декабря 1997 года. В этой спецификации впервые были определены:

  • семантика для элемента SCRIPT,
  • элементы IFRAME и OBJECT,
  • элемент FRAME.

Так же, был введен атрибут target для элементов, создающих ссылки (A, LINK), навигационных карт (AREA) и форм (FORM).

В результате этих революционных нововведений, стало возможным, не перезагружая всю страницу, менять часть ее содержимого. Например, целую страницу можно было разделить на несколько фреймов и, указав в одном из них ссылки, цель которых определялась атрибутом target, менять содержимое другого фрейма, не перезагружая оглавления (эта возможность применяется на сайте webdesign.site3k.ru). Аналогично можно было поступить с IFRAME и OBJECT, меняя их содержимое щелчком по ссылке (эта возможность применяется на сайте bosportour.com – содержимое гостевой книги заключено в собственном IFRAME, отдельно от оглавления и общего оформления). Благодаря JavaScript, стало возможным еще больше: Произвольно менять SRC рисунков, таблиц стилей и скриптов, загружая новые элементы в уже загруженную страницу и, даже, менять содержимое статического текста (эта возможность применяется на сайте praktika.net.ua – в страницу вставляется выбранный посетителем рисунок и в соответствии с ним меняется подпись к рисунку; применение динамически загружаемых скриптов впервые упомянуто мной в 2003 году на странице http://discoverer.h11.ru/webdesig/menus.html, теперь это webdesign.site3k.ru/conjuncture/append/d/menus.html).

Так же, в 1997 году появились Каскадные таблицы стилей (CSS), с их атрибутом display, позволяющим скрывать или отображать отдельные части страницы, что, во взаимодействии с JavaScript, могло мгновенно частично или полностью изменять ее видимое содержимое (применяется в древовидном меню сайта webdesign.site3k.ru).

Компании Netscape этого показалось мало и в свой браузер, они добавили тег LAYER, содержимое которого отображалось так же, как содержимое тега DIV, но могло иметь атрибут SRC и грузится из отдельного файла, благодаря чему, не перегружая страницу, можно было загрузить данные, привязанные к ссылке, даже не в отдельный фрейм или OBJECT, а прямо в один из элементов текущей страницы – совсем как это делается сейчас на AJAX.

Просто раньше никому в голову не приходила придумать этому особое название.

Окончательное формирование всех вариаций технологии AJAX произошло в 1998 году, когда в браузере Internet Explorer 5.0 появился новые объекты ActiveX – XMLHttpRequest, DTC, RDC и другие (использование TDC описано на старице Обработка баз данных браузером посетителя, для обработки прайсов и применено на cmk.net.ua – если вы используете IE, вам удастся его увидеть). Однако именно XMLHttpRequest приобрел наибольшую популярность и поддержку в других браузерах.

XMLHttpRequest приобрел популярность благодаря тому что, значительно ускорял загрузку данных, позволяя включать в уже загруженную страницу данные любого типа. Его применение позволяло без особых ухищрений вставлять в страницу ответы сервера и, таким образом, использовать технологию AJAX смогли даже люди, не отличающиеся особыми талантами (LAYER от Netscape позволял делать это с еще большей легкостью, но, поскольку последний проиграл войну браузеров, победили именно стандарты Микрософта). Эта популярность вынудила производителей других браузеров включить поддержку XMLHttpRequest в свои продукты (Mozilla Firefox, начиная с версии 1.0, Opera, начиная с версии 8.0, Safari ) и применение AJAX стало повсеместным. Вскоре появился и сам термин. Использование AJAX стало модным и о нем вдруг все заговорили. Произошло это в начале 2005 года и, таким образом, официальное признание технология получила спустя 8 лет с момента появления.

Современное состояние AJAX

Поскольку AJAX – это по сути, только разнообразное применение компонента XMLHttpRequest, то чтобы понять работу AJAX, требуется разобраться с синтаксисом XMLHttpRequest. Сделаем это на примере:

Условие window.XMLHttpRequest определяет, каким образом работает объект в данном браузере (можно добавить проверку, работает ли он вообще и если window.ActiveXObject так же дает ложный результат, данный метод вообще не поддерживается браузером). Затем создается объект одного из поддерживаемых типов, после чего событию onreadystatechange (изменение состояния) назначается обработчик. Так же, назначаются параметры методу open. Первый из них определяет тип запроса: POST или GET, второй определяет адрес (в данном случае адрес берется из значения текстового поля), третий, если истинен, определяет что, запрос должен выполнятся асинхронно, то есть, отправив запрос не ждать ответа сервера, а продолжать работу, ожидая ответа в фоновом режиме.

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

При обработке события onreadystatechange нужно проверить код состояния объекта (свойство readyState). Определено 4 состояния:

0 – объект не инициализирован

1 – идет загрузка

2 – объект уже загружен

3 – Загружен частично

4 – завершение загрузки

Как только код становится равен 4, данные сервера можно использовать и выводить в браузер. Однако, не мешало бы проверить, что именно вытащили наши сети, используя код ответа сервера, сохраняющийся в req.status. Если код равен 200 (см. коды ошибок ВЕБ сервера), данные действительно можно выводить, иначе, можно вывести сообщение об ошибке, сохраняющийся в свойстве req.statusText. Вместо стандартного текста ошибки, можно вывести свой, что удобно сделать, создав массив определений, ключи которого будут соответствовать номерам ошибок:

err[400]=”Запрос содержит синтаксическую ошибку”;

err[401]=”Для доступа требуется авторизация”;

Все довольно просто (хотя менять src для IFRAME еще проще). Однако данным методом можно обращаться только к ресурсам того же сайта, с которого закачана запрашивающая страница. Чтобы обратиться к другим интернет-ресурсам, придется использовать серверный скрипт, вроде такого:

И тут задумаешься: А может послать этот AJAX к чертям и использовать более простой и всеядный IFRAME? Но IFRAME нельзя использовать непосредственно внутри форм. В этом случае, применение AJAX окажется вполне разумным, и будет выглядеть примерно так:

Но это не решает всех проблем. Потому что:

  1. При использовании AJAX не срабатывает навигация по ссылкам: заполняя многостраничную форму стандартного образца, вы можете обнаружить ошибку, допущенную на предыдущей странице, и вернутся назад. Если в форме используется AJAX никакой «Назад» не сработает. Аналогичная неудача постигнет, если на AJAX построена вся навигация сайта.
  2. Поисковые роботы не интерпретируют JavaScript и не будут ходить по AJAX ссылкам.
  3. AJAX поддерживается только новыми браузерами, в связи с чем, его поклонники требуют чтобы «Юзеры меняли брузеры». Но, это же наглость. Я, конечно, понимаю что, нет смысла добиваться полной совместимости с браузерами 10 летней давности, но терять часть посетителей только оттого, что вам хочется применить AJAX? Глупо. Для кого вы делаете сайт? Если для себя, то ладно. Если для посетителей, то постарайтесь сделать так, чтобы максимально большее их число смогло им пользоваться.

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

Альтернативы AJAX

Полное отсутствие AJAX

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

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

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

Чтобы приблизить это к AJAX, можно поместить меняющуюся часть страницы (с формой или без), в IFRAME (например, как сделал я на странице http://kazantip.net.ua/zajavka.html). Но можно пойти еще дальше:

AJAX на старых дрожжах

Как говорилось в начале статьи, технологии AJAX, на самом деле, просто давно забыли и для этой «технической революции» никакой XMLHttpRequest или ActiveXObject не требуются. А значит, приведенный ниже код будет работать В ЛЮБОМ браузере:

Если в браузере не работает JavaScript, событие onsubmit не будет обработано и атрибут target не будут переназначен. В этом, а так же, в том случае, если браузер не поддерживает iframe, данные загрузятся в новую страницу, как при обычном использовании серверного скрипта. Однако, если мы имеем нормальный браузер, поддерживающий HTML 4.0, по нажатию кнопки submit, на сервер отправится запрос. Когда же от туда вернется ответ, сработает событие onLoad в iframe и пришедший текст отобразится в div >Осталось только придумать этому название, например, JAI (JavaScript and iframe) и гордо трубить об изобретении новой, более совершенной технологии.

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

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

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

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

В такой ситуации AJAX значительно ускорит процесс. Вот только какой AJAX? С использованием ActiveXObject или JavaScript + iframe? Исходя из того что, все, кто понимает недостатки AJAX, пытаются свести их до минимума, добавляя к нему еще и iframe, рекомендую сразу переходить к iframe и не пытаться угодить моде.

Примеры применения AJAX

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

Ещё один пример применения AJAX можно увидеть в комментариях к статьям (ссылка «рекомендую читать»).

Блог Евгения Крыжановского

Я научу вас ремонтировать свой компьютер!

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

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

AJAX: общая информация

Как расшифровывается комбинация AJAX? Что она означает? Данное сокращение представляет собой аббревиатуру. Расшифровывается она как «Asynchronous Javascript and XML». Часто в интернете можно найти информацию о том, что данная технология является новой. Однако на самом деле это не совсем так. Дело в том, что XML иJ avascript существуют уже довольно продолжительное время. AJAX является своеобразным синтезом данных технологий. Обычно он используется вместе с термином Web 2.0. AJAX подразумевает под собой использование передовых методов разработки. В чем же состоит особенность данной технологии?


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

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

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

Обмен информацией

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

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

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

AJAX: ответ сервера

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

Запрос к серверу и обработка ответа

Последовательность действий в данном случае будет следующей. Первоначально необходимо создать запрос и убедиться в том, что XML Http Request существует. После этого инициализируется соединение с сервером. К нему нужно направить запрос. Теперь необходимо дождаться, когда придут данные и обработать их. Необходимо сказать о некоторых особенностях, которые касаются создания объекта. Он может быть инициирован в любом месте, где это возможно в рамках программирования. Если присвоить ему статус глобального, то в один прекрасный момент, для него будет возможна работа только с одним запросом. Необходимо уделить пристальное внимание данному моменту. Относительно обработки стоит сказать, что тут необходимо ориентироваться по выбранному инструменту. При XML данные нужно обработать при помощи функций DOM, а пользователю конечный результат предоставить уже в HTML. Но что же делать с JSON? Необходимо понимать, что он является объектной нотацией Javascript. Это означает, что благодаря JSON объект можно представлять как строку. Однако при этом необходимо учитывать, что данный способ не является в полной мере безопасным. Нужно учитывать одновременно множество различных факторов. Но в целом такой метод можно считать довольно легким.

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

Любые веб-приложения в той или иной степени используют серверные языки программирования. Наиболее популярным языком программирования для передачи данных является PHP. Обычно на нем пишут файлы для сайтов, где скорость передачи информации не является критически важным параметром. Для таких сайтов предпочтение отдается балансу между скоростью и надежностью. Выше рассматривались методы передачи XML Http Request.

Илон Маск рекомендует:  WideString - Тип Delphi

Настройка сервера

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

— HTML/XHTML: необходимы для того, чтобы сервер распознал разметку страницы;

— CSS: данный инструмент необходим для визуального подбора оформления страницы;

— DOM: необходим для обеспечения динамических изменений на странице как ответ на действия пользователя;

— XML: требуется для пересылки данных между сервером и клиентом;

— JavaScript: требуется для создания движка AJAX и обеспечения интерактивности;

— XML Http Request: представляет собой объект, посредством которого запросы будут пересылаться к серверу.

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

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

О базе данных

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

Работа движка

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

AJAX: особенности

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

Запись опубликована 20.07.2020 автором katrinas11 в рубрике Фишки. Отблагодари меня, поделись ссылкой с друзьями в социальных сетях:

AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON

27.02.2020

AJAX запрос это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы.

Рассмотрим примеры AJAX запросов:

XMLHttpRequest , — экземпляр данного класса включает в себя набор методов для работы в протоколах HTTP и HTTPS. AJAX запрос, — это комплекс выполняемых задач, в режиме «запрос-ответ».

Каждый запрос к серверу, включает в себя ->

  • Указание метода HTTP (GET POST)
  • Запрашиваемого URL (пути до файла на сервере, который будет обрабатывать наш запрос)
  • Установка заголовков на пример: «application/x-www-form-url» или «application/x-www-form-urlencoded» или «application/json» или «text-plain»
  • Данные передаваемые на сервер (тело запроса)

Каждый ответ от сервера включает в себя

  • Код статуса (успешно или нет отработала сторона сервера)
  • Заголовки HTTP/HTTPS
  • Данные передаваемые от сервера к клиенту (браузеру)

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

XMLHttpRequest , — это класс, для работы AJAX.

request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.

url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.

.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.

.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.

.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.

onreadystatechange – это событие которое случится когда нам придет ответ от сервера.

readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения которые он может дать:

Получено тело ответа

Значение Описание
Метод open() не вызван
1 Метод open() вызван
2 Получены заголовки ответа
3
4 Передача ответа выполнена

status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.

.responseText – данные, которые придут от сервера в виде строки.

.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.

.text() – используется в запросе fetch, возвращает строку.

.json() – используется в запросе fetch, возвращает json обращенный в объект.

1. GET AJAX запрос на чистом JavaScript

Делаем запрос на чистом JavaScript, например к файлу ajax_quest.php, который находится на сервере, и будет возвращать то что мы ему передали.

2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере

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

3. JSON AJAX POST запрос к серверу, на чистом Javascript

Запрос на чистом Javascript. Получаем данные в JSON формате.

4. JQuery GET & POST AJAX запрос к PHP на сервере

Работаем с сервером через фреймворк JQuery.

5. Fetch GET на чистом Javascript

Fetch обертка над XHR

6. Запрос на чистом Javascript «Vanila» Fetch + POST метод

7. Fetch POST + JSON

Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.

8. Кросдоменный запрос JSONP Fetch + GET метод в github

Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Дата публикации: 2020-02-15

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

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

Что такое AJAX?

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

«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.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

jQuery функция $.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 как обычный текст, теги Клик

Краткое руководство по AJAX

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

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

AJAX основывается на JavaScript и запросах HTTP .

AJAX = Асинхронный JavaScript и XML

AJAX является сокращением от «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).

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

AJAX использует JavaScript для отправки и получения данных при взаимодействии Web-браузера и Web-сервера.

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

AJAX является технологией браузера

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


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

AJAX является технологией Web-браузера, которая не зависит от программного обеспечения Web-сервера.

AJAX основан на открытых стандартах

AJAX использует следующие открытые стандарты:

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

Технология AJAX улучшает приложения Интернет

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

Однако приложения Интернет не всегда бывают достаточно «богаты» свойствами и удобны для использования по сравнению с традиционными приложениями.

С помощью AJAX приложения Интернет можно сделать богаче (меньше, быстрее, и легче в использовании).

AJAX можно использовать прямо сейчас

Нет ничего нового, что требует изучения.

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

Большинство существующих Web-приложений можно легко переписать с помощью технологии AJAX вместо традиционных форм HTML.

AJAX использует XML и запросы HTTP

Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). После обработки данных Web-сервер возвращает пользователю совершенно новую Web-страницу.

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

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

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

Как это делается, будет показано далее в этом кратком руководстве.

Пример использования AJAX

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

Пример AJAX

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

Описание примера

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

Форма HTML

Пусть на Web-странице имеется форма HTML со следующим кодом:

Как можно видеть, это простая форма HTML с полем ввода с именем «txt1».

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

Параграф ниже формы содержит тег span с именем «txtHint». Тег span используется в качестве поля для подстановки данных, получаемых с Web-сервера.

Когда пользователь вводит данные, выполняется функция с именем «showHint()». Выполнение функции запускается событием «onkeyup». Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция showHint .

Функция showHint()

Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка страницы HTML.

Функция имеет следующий код:

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

Если имеется какой-то ввод в текстовое поле ( str.length > 0 ), то функция выполняет следующее:

  • Определяет url (имя файла) для отправки на сервер
  • Добавляет к url параметр ( q ) с содержимым поля ввода
  • Добавляет случайное число, чтобы сервер не использовал кэшированный файл
  • Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем stateChanged , когда произойдет изменение.
  • Открывает объект XMLHTTP с заданным url.
  • Посылает запрос HTTP на сервер

Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки txtHint .

Функция stateChanged()

Функция stateChanged() содержит следующий код:

Функция stateChanged() выполняется всякий раз, когда изменяется состояние объекта XMLHTTP.

Когда состояние будет равно 4 (или «complete»), поле для подстановки txtHint получает содержимое текста пришедшего ответа.

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

В Википедии имеется статья по теме «AJAX»

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

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

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

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

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

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

AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин ‘AJAX’ для асинхронного JavaScript + XML):

  • Стандартно-базированная презентация с использованием XHTML и CSS;
  • Динамическое отображение и взаимодействие с использованием объектной модели документа;
  • Взаимообмен данными и манипуляция с задействованием XML и XSLT;
  • Асинхронное извлечение данных с использованием XMLHttpRequest;
  • JavaScript, связывающий все вместе.

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

Содержание

Как работает AJAX [ править ]

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

В основе технологии AJAX лежит объект XMLHttpRequest. Изначально он появился в Internet Explorer, а затем — в Mozilla/Safari, и позже — в Opera.

AJAX в действии [ править ]

Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.

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

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

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

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

Создаем портлет для просмотра почты в Сети [ править ]

Для начала необходимо создать веб-страничку, имитирующую типичный портлет для веб-почты, и встроить события onMouseOver JavaScript, запускающие вызовы AJAX

В этом случае события «onMouseOver» прилагаются к полям таблицы (ПТ) с именами отправителей. Выбор полей с данными и запуск событий для вызовов AJAX предназначены строго для иллюстративных целей:

Обратите внимание на то, что поле ввода «messageBody» — единственное, которое будет наполнено методом displayMessageBody, принимающим ID сообщения как параметр. Вызов AJAX будет использовать этот параметр для запроса деталей сообщения с сервера.

Вызов AJAX [ править ]

Ключевым моментом нашего примера является вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest:

В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.

Асинхронная загрузка данных [ править ]

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

Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:

  • Метод POST или GET;
  • URL плюс любой ушедший параметр (в этом случае передается только > Обработка данных [ править ]

Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы.

HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:

  • 0 = не инициализирован
  • 1 = открыт
  • 2 = отправка запроса
  • 3 = получение данных
  • 4 = завершенный (в нашем примере внимание фокусируется на этом состоянии.)

Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному усложнению простых сценариев извлечения данных, подобно описанному выше.

Повышаем устойчивость AJAX-приложения [ править ]

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

  • Проверьте, чтобы ваше приложение работало в режиме без AJAX.
  • Проверьте код ответов из вызовов AJAX, перед обработкой результатов. API XMLHttpRequest поддерживает коды HTTP (200, 400, …) К ним можно получить доступ через свойство status (вместе со свойством statusText, которое удерживает сообщение, связанное с состоянием ответа:

Написание приложения с использованием клиентского сallback-менеджера ASP.NET 2.0 [ править ]

После ознакомления с такими приложениями, как Google Map, создается впечатление, что многие поняли богатство возможностей AJAX. Но мало кто знает о том, что создание приложений в стиле AJAX, частично обновляющие страничку без обращения к серверу, можно без сложностей осуществить с помощью ASP.NET. В этом деле поможет встроенный клиентский сallback-менеджeр.

Всем известный ASP.NET 2.0 включает в себя клиентский сallback-менеджер, позволяющий разработчикам создавать веб-приложения в стиле AJAX. Клиентский сallback-менеджер использует XMLHTTP, при этом не акцентируя внимания на отправке данных в прямом и обратном направлении от сервера и клиента. (поэтому для того, чтобы это сработало, необходимо, чтобы веб-браузер поддерживал XMLHTTP; в настоящее время клиентский сallback-менеджер работает исключительно с Microsoft Internet Explorer.

Эта часть расскажет вам, как использовать клиентский callback-менеджер для написания приложений в стиле AJAX.

Отображение книжных обложек [ править ]

Чтобы показать, как работает клиентский сallback-менеджер ASP.NET 2.0, мы создадим веб-приложение, позволяющее пользователям просматривать книжные обложки при загрузке их с веб-службы Amazon. Пользователю остается лишь ввести ISBN номер книги, после чего страница сама загрузит изображение обложки с Amazon.com без необходимости обновления страницы.

Для начала запустим Visual Studio и создадим новый проект веб-сайта. Назовем проект C:\ClientCallBack. Наполним веб-форму по умолчанию (Default.aspx) элементами управления, как показано на рисунке, включая элементы управления панели, текстового окна, кнопок и изображений.

Для элемента управления можно применить Internet Explorer, чтобы загрузить домашнюю страничку Amazon.com, перетащить картинку логотипа и поместить его на элемент управления панелью. Элемент автоматически добавляет его на панель, после чего отображается логотип Amazon.com.

Переключаем Default.aspx на Source View и заключаем элемент в элемент :

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

В окне Properties выставьте ShowCover для свойства OnClientClick. Как только пользователь щелкнет на этой кнопке, будет выполняться функция клиентского сценария ShowCover() (в нашем случае это — короткий написанный нами сценарий JavaScript).

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 страницы пропишите тег:
  4. Создайте xml карту. Это ускорит индексацию страниц сайта.
  5. После того, как сайт попадет в индекс, посмотрите разницу между AJAX версией и копией. Так вы сможете проконтролировать, какие страницы роботы не внесли в базу данных поисковиков. Как проверить индексацию сайта, читайте здесь.

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

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

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

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

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

Заключение

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

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

Что такое Ajax технология?

AJAX или асинхронный Javascript и XML – это ряд технологий, применяемых в веб-разработке, которые позволяют HTML-странице связываться с сервером без перезагрузки. Используя AJAX, приложения в Интернете смогут обмениваться данными с сервером без вмешательства в существующие веб-страницы. Однако, несмотря на то, что он используется для XML, для обмена данными лучше использовать JSON.

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

Стоит понимать, что AJAX – это не одна технология, а целый ряд технологий, которые работают сообща для создания единого HTTP или HTTPS запроса. Создатель AJAX Дж. Гарретт под данным термином объединил следующие технологии:

  • HTML
  • CSS
  • Document Object Model
  • XML
  • XMLHttpRequest Object
  • Javascript

Как работает технология Ajax (Аякс)?

Принцип всей его работы можно увидеть на простой схеме:

Крупные гиганты, такие как Google, Youtube, Gmail и Facebook используют активно эту технологию в своей работе, не перегружая серверы.

Примеры использования Ajax

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

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

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

Илон Маск рекомендует:  Wml и wap
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL