Ajax — Как работает 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 FAQ для Java-разработчиков

Нам всем доводилось использовать технологию AJAX (Asynchronous Java Technology and XML, Асинхронная технология Java и XML) и многие из нас открывают здесь для себя целый новый мир.
В то время как многие программисты лишь случайно столкнутся с AJAX в рамках существующих систем (так мы будем далее переводить термин framework), вы, возможно, захотите исследовать эту технологию глубже или расширить уже имеющиеся функциональности.
Этот FAQ предназначен для Java-разработчиков, которые хотели бы добавить AJAX-функциональность в свои приложения.

Следует ли использовать AJAX?

Вне всякого сомнения, AJAX сейчас популярен, но, может быть, он не совсем подходит именно вам: его использование ограничено web-браузерами самых последних версий, а также заставляет решать вопросы совместимости web-браузеров и требует новых знаний и навыков. Поэтому прежде чем вы с головой погрузитесь в AJAX, вам стоит прочитать очень хороший блог (blog) Алекса Босворта (Alex Bosworth) на странице AJAX Mistakes.
С другой стороны, AJAX позволяет создавать web-приложения с богатыми интерактивными возможностями, которые реагируют на действия пользователя и выполняются действительно быстро.
Хотя утверждение о том, что приложения, использующие AJAX, работают быстрее, может показаться спорным, нельзя отрицать тот факт, что пользователи испытывают чувство незамедлительной реакции приложения, так как AJAX обеспечивает для них активную обратную связь в то время, как обновление данных происходит в фоновом режиме «за кадром».
Если вы не боитесь решать вопросы совместимости web-браузеров и готовы к получению новых навыков, AJAX — именно то, что вам нужно.
Для начала попробуйте изменить с помощью AJAX лишь небольшие части или компоненты ваших приложений. Нам всем нравятся новые технологии, однако не стоит забывать, что применение AJAX должно улучшать взаимодействие с пользователем, а не быть ему помехой.

AJAX и Java: совместная работа возможна?

Конечно. Java прекрасно работает вместе с AJAX! Вы можете использовать JavaEE-серверы (Java Enterprise Edition), чтобы создавать AJAX-страницы для клиентских web-приложений и обслуживать поступающие от них AJAX-запросы, управлять на стороне сервера состоянием объектов, связанных с клиентскими приложениями, использующими AJAX, и предоставлять AJAX-клиентам различные серверные ресурсы.
Компонентная модель JavaServer Faces отлично подходит для определения и использования AJAX-компонентов.

Предоставляют ли серверные системы средства для работы с AJAX?

Вполне вероятно, что вы уже пользуетесь преимуществами AJAX: многие существующие системы на основе Java обеспечивают определенное AJAX взаимодействие, а новые системы и библиотеки компонентов создаются с улучшенной поддержкой AJAX.
Я не стану приводить здесь список всех систем, базирующихся на Java и обеспечивающих работу с AJAX, из опасения что-то пропустить. Хороший список приводится на сайте www.ajaxpatterns.org/Java_Ajax_Frameworks.

Если вы еще не выбрали подходящую систему, я бы рекомендовал вам рассмотреть использование технологии JavaServer Faces (JSF) и инструментарий на базе этой технологии. Создание и использование JSF-компонентов позволяет абстрагироваться от рассмотрения многих деталей генерации JavaScript-кода, AJAX-взаимодействия клиента и сервера, обработки DHTML-данных и, таким образом, упростить применение технологии AJAX как разработчиками JSF-приложений, так и плагинами в JSF-совместимых интегрированных средах разработки (Integrated Development Environment, IDE), таких как Sun Java Studio Creator.

С чего начать?

Если система, которую вы используете, не вполне подходит для решения ваших задач и вы хотите разработать свои собственные AJAX-компоненты или дополнительную функциональность, начните со статьи Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition.

Самый простой пример с исходным кодом приводится в статье Using AJAX with Java Technology. Более полный список AJAX-ресурсов приводится на странице Blueprints AJAX Home.

Полезно изучить статью AJAX libraries and frameworks, чтобы не изобретать велосипед при разработке собственных клиентских AJAX-скриптов.

Книга AJAX in Action, написанная Дейвом Крейном (Dave Crane) и Эриком Паскарело (Eric Pascarello) совместно с Дарреном Джеймсом (Darren James) полезна Java-разработчику, поскольку содержит готовые примеры JavaScript.
Что необходимо знать, чтобы создать свою собственную AJAX-функциональность?

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

Dynamic HTML (DHTML) — технология, которая является основой для AJAX. DHTML обеспечивает взаимодействие пользователя с приложением в режиме реального времени средствами браузера. DHTML — сочетает в себе JavaScript, Документную Объектную Модель (Document Object Model, DOM) и Каскадные Таблицы Стилей (Cascading Style Sheets, CSS).

* JavaScript — это нестрого типизированный объектно-ориентированный язык сценариев, поддерживаемый всеми наиболее популярными web-браузерами и необходимый для организации AJAX-запросов. JavaScript код вызывается на странице в ответ на некоторое событие, такое как завершение загрузки страницы, щелчок мыши или нажатие клавиши на элементе формы.
* DOM — это API для работы со структурированными документами такими как XML или HTML. В большинстве случаев DOM представляет структуру XML- или HTML- документов.
* CSS позволяет вам определить внешний вид страницы: шрифты, цвета, размеры и расположение. CSS предназначен для четкого разделения содержания от внешнего представления, которое может быть изменено программно с помощью JavaScript.

Также важно понимать, что сутью HTTP протокола является механизм запросов/ответов (request/response). Многие трудноуловимые ошибки могут возникнуть, если вы игнорируете различия между методами GET и POST при настройке клиентского объекта XMLHttpRequest или при обработке кодов HTTP-ответов во время обратных вызовов.

JavaScript соединяет воедино все остальные части клиентского интерфейса. Во-первых, он используется для создания объекта XMLHttpRequest и запуска асинхронных вызовов. Во-вторых, JavaScript позволяет анализировать и обрабатывать возвращаемые с сервера данные и сообщения. И наконец, JavaScript позволяет добавлять новое содержание в HTML документ и изменять CSS стили, используя DOM API.

Действительно ли надо изучать JavaScript?

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

С другой стороны, JSF-компоненты (JSF components) и их библиотеки могут скрывать детали, касающиеся JavaScript, DOM и CSS. Эти компоненты могут сгенерировать для вас все необходимые составные части для обеспечения поддержки взаимодействий с использованием AJAX. Визуальные средства разработки, такие как Java Studio Creator, также позволяют применять JSF-компоненты c поддержкой AJAX для создания эффективных web-приложений, позволяя при этом разработчикам не заботиться о специфичных деталях реализации AJAX.

Если вы планируете разрабатывать свои собственные JSF-компоненты или обрабатывать генерируемые ими события, важно, чтобы вы были знакомы с основами JavaScript. Существуют клиентские JavaScript-библиотеки (смотри ниже), которые можно вызывать из JavaScript на своей странице и которые автоматически решают проблему несовместимости браузеров.
Кроме этого существует интересный Internet-ресурс, знакомящий Java-разработчиков с объектами JavaScript: Иерархия объектов и наследование в JavaScript (Object Hierarchy and Inheritance in JavaScript).

Какие JavaScript-библиотеки и системы предлагаются в помощь Java-разработчику?

Существует множество JavaScript-библиотек и наборов компонентов (еще большее количество появляется новых), которые помогают справляться с такими малоприятными проблемами, как различия браузеров. Рекомендуется обратить внимание на 3 хорошие библиотеки — The Dojo Toolkit, Prototype и DWR.

* The Dojo Toolkit содержит API и набор элементов GUI для поддержки разработки web-приложений со сложным графическим интерфейсом.
Dojo включает в себя интеллектуальную систему для формирования структуры web-приложения (packaging system), различные UI-эффекты, API для реализации механизма «drag and drop», API элементов управления GUI, обработки событий, API для хранения проектов и API для реализации AJAX-взаимодействия. Dojo помогает решать общие проблемы пользователя (usability), такие как действия при навигации между web-страницами, способность распознать нажатие кнопки «Back» в браузере или изменения в строке ввода URL для создания закладки (bookmarking), способность отключать лишнюю функциональность, если AJAX/JavaScript не полностью поддерживаются клиентом-браузером.
По богатству возможностей, универсальности и удобству использования JavaScript-библиотеку Dojo можно сравнить со швейцарским армейским ножом. Она предоставляет широчайший набор опций и поддерживает как новые, так и старые браузеры.
* Prototype специализируется на AJAX-взаимодействиях и содержит AJAX-объект, который включает в себя несколько объектов, предназначенных для выполнения основных задач, таких как формирование HTTP-запросов, обновление части документа однократно или периодически, вставка нового содержимого в документ, периодическое обновление части документа. Кроме того, эта JavaScript-библиотека содержит набор объектов для представления AJAX запросов и набор функций для доступа к компонентам на странице и манипулирования DOM-объектами. Script.aculo.us и Rico являются надстройками над Prototype и предоставляют UI-эффекты, поддержку «drag and drop», а также включают общие элементы управления GUI, ориентированные на JavaScript.
Технологии Prototype достаточно в случаях, когда требуется только поддержка AJAX-взаимодействий и решение некоторых основных задач. Если же необходимы и UI-эффекты, подойдут Rico и Script.aculo.us.
* Yahoo UI Library — это библиотека утилит и набор элементов управления GUI, использующий API для поддержки сложных клиентских приложений. Она включает поддержку AJAX и событий, распространяемую на все виды браузеров, анимацию, DOM, реализацию механизма «drag and drop» и обмен событиями между браузерами. Yahoo UI Library хорошо документирована и содержит много примеров.
* DWR (Dynamic Web Remoting) — это система, включающая как клиентскую, так и серверную часть, который ориентирован на использование разработчиками механизма вызовов удаленных процедур (Remote Procedure Calls, RPC) между клиентскими сценариями на JavaScript и серверными Java-объектами (plain old Java objects, POJO) , развернутых на Java EE web-контейнере.
На серверной стороне DWR использует сервлеты для взаимодействия с Java-объектами и возвращает или объект-представление данного Java-объекта, или XML-документ.
DWR легко кооперируется с другими технологиями Java. Если вам нужна среда с тесно интегрированными клиентской и серверной частями, используйте DWR.
* Zimbra — клиент-серверная система, ориентированная на обмен сообщениями и доставку e-mail в сложных клиентских приложениях на базе JavaScript. Zimbra включает API для набора инструментов UI, учитывающий различия между браузерами и предоставляющий множество встроенных элементов управления GUI, API событий для обмена событиями как между элементами управления UI, так и между клиентом и сервером, вспомогательные классы, упрощающие разработку клиентской функциональности на JavaScript, надстройку над DOM, которая облегчает решение вопросов, касающихся несовпадения реализаций DOM в разных браузерах, и сетевые API, которые помогают JavaScript-клиентам общаться через AJAX и SOAP.

Цукерберг рекомендует:  Списки - Кортежи в Питоне. Помогите разобраться, pls

Существует множество устаревших библиотек и совершенно новых библиотек для JavaScript, но вышеприведенный список дает обзор только нескольких неспециализированных библиотек. Вы можете выбрать как одну библиотеку, так и использовать несколько в соответствии с вашими потребностями. Вот более широкий список клиентских систем: Survey of AJAX/JavaScript Libraries.

Какой тип возвращаемого значения — XML, plain text, JavaScript или HTML — следует использовать?

Понятно, что символ ‘X’ в слове «AJAX» означает «XML», но поклонники AJAX быстро обратили внимание, что, по существу, ничто в AJAX не мешает использовать другие типы выходных наборов данных: JavaScript, HTML или plain text.

* XML — web-сервисы и AJAX, кажется, созданы друг для друга. Вы можете использовать клиентский API c для загрузки и анализа XML-данных с web-сервиса, поддерживающего архитектуру REST (Representational State Transfer). (Однако имейте ввиду, что для некоторых web-сервисов, базирующихся на архитектуре SOAP, возвращаемые данные могут быть достаточно большими и сложными и, таким образом, не годиться для технологии AJAX).
* Plain Text — сгенерированный сервером текст может быть вставлен в документ или проанализирован приложением-клиентом.
* JavaScript — этот вариант является расширением предыдущего варианта plain text с тем лишь исключением, что сервер возвращает фрагмент сценария JavaScript, включая объявление объектов JavaScript. Используя JavaScript-функцию eval(), вы можете затем создать этот объект на стороне клиента. JSON, который представляет собой спецификацию по обмену данными на основе JavaScript-объектов, полагается именно на такую технику.
* HTML — включение сгенерированного сервером HTML-фрагмента непосредственно в web-документ обычно является весьма эффективной AJAX-техникой. Однако, бывает затруднительно сохранить соответствие между HTML-кодом, созданном на сервере, и тем, что будет показано в браузере клиента.

Mashup — это популярный термин, обозначающий создание совершенно нового web-приложения путем объединения данных от различных web-сервисов и другого online ПО. Хороший пример mashup — housingmaps.com, который наглядно объединяет объявления по жилью с craiglist.org и географические карты с maps.google.com.

Существуют ли в AJAX проблемы с удобством использования (так мы будем далее переводить термин usability)?


В результате использования техники динамического обновления web-страницы с помощью данных, полученных через AJAX-взаимодействие и DHTML, внешний вид страницы и ее структура могут сильно измениться.
Пользователь может захотеть в любое время нажать кнопки браузера «Back» или «Forward», создать закладку для страницы, скопировать URL страницы из строки URL браузера и поделиться ею с другом через e-mail или чат, распечатать страницу. Поэтому при проектировании AJAX-приложений вам необходимо все тщательно продумать, чтобы ожидаемое поведение при навигации, создании закладок, печати и прочих действий в браузере было бы таким, как описано ниже.

* Навигация (Navigation).
Какой ожидается реакция вашего приложения на кнопки браузера «Back», «Forward», «Refresh», «Bookmark»? Вы могли бы реализовать требуемое поведение самостоятельно (manually), но, может быть, проще использовать JavaScript-среду, такую как Dojo, которая предоставляет API для манипуляций с историей загрузки страниц в браузере и управления навигацией.
* Создание закладок и манипуляции с URL (Bookmarking and URL sharing).
Многие пользователи хотят создавать закладки или копировать/вставлять URL в соответствующую строку браузера. Dojo содержит API для выполнения этих действия.
* Печать (Printing).
В некоторых случаях печать динамически формируемых страниц может представлять сложность.

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

* Поддержка браузера (Browser Support).
Не все браузеры (и не все их версии) поддерживают полный набор функций AJAX/DHTML. Смотрите quirksmode.org со списком браузеров, поддерживающих AJAX, и возможными способами решения проблем.
* Запрет на выполнение JavaScript.
Вы должны предвидеть, что произойдет, если пользователь запретит выполнение JavaScript (может быть несколько законных причин, по которым поддержка JavaScript и CSS может отключаться в web-браузере пользователя).
* Задержка (Latency).
Помните о задержке при проектировании приложения. Уже работающее приложение будет отвечать на запросы гораздо быстрее, чем то, которое было только что запущено на сервере, но к которому еще не было обращений. Также помните о том, что если почти одновременно было сделано несколько клиентских запросов, такой же порядок ответов сервера не гарантирован. Более детальное обсуждение вопросов задержки можно найти на сайте Проблемы задержек в AJAX: миф или реальность?
* Accessibilty.
Предоставление доступа к вашему сайту людям с ограниченными возможностями (инвалидам) не только приветствуется, но также является требованием законодательства во многих случаях при продажах. Существуют некоторые удивительные адаптирующие технологии, которые помогают людям получать доступ к Web-ресурсам, несмотря на ограниченные возможности зрения, слуха, речи, физические ограничения. Изучив некоторые хорошо документированные методики и немного поразмышляв, вы сможете сделать свои приложения совместимыми с этими технологиями обеспечения доступа.

Degradability — это термин, используемый для описания технических приемов, предназначенных для адаптирования приложений к широкому диапазону web-браузеров. Многие AJAX-библиотеки имеют встроенную degradability. Но если вы будете создавать свою собственную AJAX-функциональность, просто следуйте практическим рекомендациям, предоставляемым организациями по выработке стандартов, такими как World Wide Web Conrsoritum (W3C), продвижению стандартов, такими как Web Standards-сообщество, и многими другими. В этом случае ваше приложение может работать эффективно в браузерах, которые не поддерживают AJAX, т.к. даже утратив часть своих эффектных возможностей при выполнении в таких менее «способных» браузерах, ваше приложение все равно будет готово к использованию.

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

Как отладить JavaScript?

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

* Firefox/Mozilla/Netscape — имеют очень полезный встроенный отладчик Venkman. Я изначально разрабатываю мои приложения в Firefox, а затем переношу их на другие браузеры.
* Safari — имеет отладчик, который требуется включить в работу. Подробности смотрите на: Safari FAQ.
* Internet Explorer — имеется документация по отладке JavaScript: MSDN Documentation. Также может быть полезна панель инструментов разработчика (developer toolbar) для Internet Explorer.

При использовании отладчиков может также применяться и знание общих технических приемов, как например отладочный вывод («Alert Debugging»). Вы просто помещаете вызов функции «alert()» внутри кода JavaScript подобно вызову System.out.println() в java-коде. Этот маленький фрагмент годится для большинства случаев.
Некоторые системы, такие как Dojo, предоставляют API для трассировки отлаживаемых операторов.

Какой HTTP-метод — GET или POST — надо использовать для AJAX-вызовов?

HTTP метод GET следует использовать для получения данных, возвращаемых по URL-запросу, параметры которого не будут меняться. Если же состояние обновляется на сервере, следует использовать HTTP-метод GET. Если же данные клиентского AJAX-запроса будут обновляться на сервере, должен использоваться HTTP-метод POST.
Эти правила согласуются с HTTP idempotency recommendations. Их настоятельно рекомендуется соблюдать для сохранения непротиворечивости архитектуры web-приложения.

Как предоставить многоязычную поддержку для AJAX-запросов?

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

* Присвойте набору символов (charset) на вашей web-странице ту кодировку, которая поддерживается выбранными вами языками. Я обычно использую UTF-8, поскольку она охватывает большинство языков. Вот мета-декларация для HTML/JSP-страницы, задающая кодировку данных:

* В JavaScript-сценариях необходимо кодировать все параметры, передаваемые на сервер. JavaScript имеет функцию escape(), которая возвращает escape-последовательность (текстовую строку) в кодировке Unicode, где все национальные символы заменены своим шестнадцатиричным представлением. Более подробно см.: Сравнение escape(), encodeURI(), and encodeURIComponent().
* На серверной стороне задайте кодировку символов с помощью метода HttpServletRequest.setCharacterEncoding() перед тем, как вы будете извлекать локализованный параметр с помощью вызова HttpServletRequest.getParameter(). В случае UTF это будет выглядеть так: request.setCharactherEncoding(«UTF-8»);.

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

Для дополнительной информации по применению AJAX с JEE технологиями см.: AJAX and Internationalization, а для разработки многоязычных приложений: Developing Multilingual Web Applications Using JavaServer Pages Technology.

Как обрабатывать параллельные AJAX-запросы?

Используя JavaScript, можно одновременно обрабатывать несколько AJAX-запросов. Чтобы гарантировать правильный порядок их последующей обработки, рекомендуется использовать технику JavaScript Closures.
Пример ниже показывает использование XMLHttpRequest-объекта, скрытого внутри другого JavaScript-объекта с именем AJAXInteraction. В качестве аргументов функции AJAXInteraction() вы передаете URL, на который посылается HTTP-запрос, и функцию (callback), которая вызывается после обработки запроса сервером.

Функция makeRequest() в приведенном примере создает объект AJAXInteraction с 2 параметрами: URL со значением «processme» и inline-функцию, которая будет показывать Alert-диалог с сообщением «Doing Post Process». Когда выполняется вызов ai.doGet(), инициируется AJAX-взаимодействие и, когда серверный компонент, связанный с URL «processme», возвратит документ, тот передается callback-функции, которая была определена при создании AJAXInteraction.

Применение техники » closures» гарантирует, что будет вызываться именно та callback-функции, которая связана с соответствующим AJAX-взаимодействием. Однако следует проявлять осторожность при создании большого числа closure-объектов в том смысле, что создание новых объектов XmlHttpRequests (как это сделано в примере) будет ограничено числом сокетов (sockets), используемых для передачи запросов в данный момент времени. Это происходит вследствие ограничения на число запросов, которые могут выполняться параллельно. Например, Internet Explorer разрешает только 2 одновременных AJAX-запроса в данный момент времени. Другие браузеры могут разрешать большее число запросов, но обычно от 3 до 5. Вы также можете использовать пул AJAXInteraction-объектов.

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

Много полезного можно почерпнуть из обсуждения, озаглавленного Ajaxian Fire and Forget Pattern.

Что надо сделать на сервере для взаимодействия с AJAX-клиентом?

Заголовку «Content-Type» должно быть присвоено значение «text/xml». В сервлете это можно сделать с помощью метода HttpServletResponse.setContentType() — надо передать ему значение «text/xml», когда возвращаемые данные имеют тип XML. Однако многие реализации XMLHttpRequest дадут ошибку, если будет указан заголовок «Content-Type». Фрагмент кода ниже показывает, как задать значение для «Content-Type»:

Вы можете также задать значение заголовка «Cache-Control», например, при использовании автозаполнения, чтобы дать понять proxy-серверу и браузеру не кэшировать полученные результаты:

Замечание для разработчиков: Internet Explorer автоматически будет использовать кэшированные результаты AJAX-ответов на HTTP-запросы по методу GET, если данный заголовок не задан, что может представлять трудность для разработчиков. При разработке это следует учитывать и присваивать значение этому заголовку.

Где следует хранить состояние клиента при использовании AJAX?

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

* На стороне клиента в cookies.
Размер данных в этом случае ограничен — примерно, 80 Кб (обычно около (4 Кб * 20 cookies) на домен). Кроме того, данные могут быть не защищены, если их не шифровать (при использовании JavaScript это трудно, но все же возможно).
* На стороне клиента в содержимом web-страницы.
Это более защищенный вариант, но он может затруднить работу. Подробности по этой теме можно найти на Storing State on the Client.
* На стороне клиента в файловой системе.
Это осуществимо лишь в том случае, если клиент предоставит приложениям, выполняемым в браузере, право доступа на запись в файлы локальной файловой системы. В зависимости от различных условий это может быть необходимо, но надо соблюдать осторожность.
* На сервере.
Это ближе всего к традиционной модели, где клиент служит лишь для визуализации данных, хранящихся на сервере. Поддержание синхронности данных между клиентом и сервером может оказаться проблематичным, но для этого есть решение: Refreshing Data.

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

При создании формы следует в элементе «form» назначить атрибуту «onSubmit» имя соответствующей JavaScript-функции, которая возвращает значение false:

Также для отправки формы можно использовать кнопку (input-элемент «button» в элементе «form»), назначив ей аналогичным образом соответствующую JavaScript-функцию:

Обратите внимание, что значение атрибута формы «onSubmit» задано и в этом примере. Это сделано для того, чтобы корректно обрабатывать ситуации, когда пользователь, например, во время редактирования текстового поля нажмет клавишу «Enter» и форма будет отправлена.

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

Кто должен управлять приложением — сервер или клиент?

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

* Управление сосредоточено на сервере.
Ключевая проблема при централизованном управлении — обеспечение синхронизации данных, представленных на клиентской web-странице, с аналогичными данными, хранящимися на сервере. Для решения этой проблемы можно, например, сделать так, что приложение будет хранить все свои данные на сервере и передавать все изменения в клиентском представлении (DOM) с помощью простого JavaScript-контроллера.
* Управление распределено между клиентом и сервером.
Эта архитектура использует JavaScript для обработки событий, манипуляций со страницей, управления внешним видом страницы и визуализации модели данных у клиента. Серверная же сторона отвечает за управление бизнес-логикой и передачей измененных данных модели клиенту. В этом случае сервер ничего не знает о внешнем представлении за исключением начальной страницы, данные для которой отсылаются им в ответ на клиентский запрос.

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

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

Есть ли проблемы с безопасностью при использовании AJAX?

Если пользователь выберет режим просмотра исходного текста HTML-страницы (view page source), он сможет увидеть все содержащиеся на этой странице JavaScript-сценарии в виде обычного текста.
Но JavaScript по умолчанию не имеет доступа к локальной файловой системе, если пользователь специально не предоставит такие права. AJAX-взаимодействие может осуществляться только с теми серверными компонентами, которые содержатся на том же сервере, откуда была загружена текущая web-страница. Для AJAX-взаимодействий с внешними сервисами следует использовать proxy-шаблоны.

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

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 для новичков. Вы хотите использовать Ajax функции, но не знаете как?

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

Что такое асинхронный вызов?

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

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

Благодаря Ajax вместо этого, сервер и клиент может общаться «в фоновом режиме» на интервалы времени или при возникновении определенного события.

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

Если у вас нет еще библиотеки JQuery , скачайте её с официального сайта.

Подготовка формы

Создадим веб-страницу ajax.html в которой будет находиться простая форма ввода в которой требуется ввести имя и фамилию.

Как вы можете видеть после формы, добавлен DIV блок с ID result в нем позже будет выводиться результаты обработки формы.

Теперь создадим страницу, result.php в которую будут отправляться данные из нашей формы. И поместим в неё следующее.

Данный код просто выводит на экран сообщение с подставленными данными, переданными из формы методом POST.

Включение JQuery и подготовка функции

Вернёмся теперь к файлу ajax.html подключим к нему библиотеку JQuery и пропишем необходимые функции.

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

И так в первой строке мы утверждаем:

В элементе с идентификатором “input_form“, при возникновении события “submit”, выполнить эту функцию.

Во второй и третьей линии:

var name = $(«#name»).attr(‘value’);

var lastname = $(«#lastname»).attr(‘value’);

Мы определяем переменные имя и фамилия, снятие атрибута ‘value’ из элементов с id “name” и “last name”.

Мы продолжаем реализовывать Ajax вызов. В JQuery есть три метода управления для асинхронных вызовов это $.post, $.get, и $.ajax. В этом первом примере мы будем использовать $.post, который отправляет данные на сервер методом POST.

— нам нужно сделать чтобы ответ, который будет прислан нам сервером, составил параметр «data».

В нашем случае, мы посылаем запрос в result.php, предоставляя данные в качестве параметра name и переменной name (ранее расширенной содержимым поля ввода name на форме), а также параметр и переменную last name.

В случае если использовать способ $.ajax то мы получим тот же результат, но только надо переписать функцию .

Этот способ имеет немного сложнее синтаксис, но и является более настраиваемым по сравнению с методом $.post и $.get. Полный список параметров можно найти в документации.

Как управлять ajax запросом с помощью json.

В этом примере у нас будет, кнопка при нажатии на которую будет выводиться текущее время и дата на сервере. Начнём с PHP страницы (result2.php).

Берём индикатор времени, время и дату, затем выводим его на экран в формате Json

Перейдем теперь к странице Ajax-json.html

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

Теперь заберём этот код более подробнее.

В элементе #input_form при возникновении события submit выполнить данную функцию. Далее сделать Ajax запрос на странице result2.php.

Теперь мы установили параметр dataType посредством значения json. Это сообщает jQuery о том, что ответ должен быть именно в таком формате, следовательно, ответ от сервера будет вставлен в объект «data». По этой причине, например, значение, которое мы отправили с названием дня (‘day’:’$day’), мы получим в виде data.day.


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

Ajax и удобство.

Мы должны уделять достаточно внимания работая с Ajax, учитывая разные факторы которые влияют на обмен данными с сервером. Предположим, что запрос является сложным или сервер перегружен, то процесс может занять некоторое время. В обычном запросе к серверу в окне браузера мы можем видеть сообщения “В ожидании открытия WWW” “Передача данных из сети . » и т.д. но если запрос делается в Ajax этого не произойдет. В следствии чего пользователь может подумать что нечего не происходит, что является ошибкой юзабилити .

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

Давайте возьмем последний пример (ajax-json.html) и кое-что в нём изменим:

Вставляем изображение рядом с кнопкой

Делаем изображение невидимым посредством данного класса в нашем CSS:

Шпаргалка по jQuery функциям работающим с Ajax

Отредактировано: 23 Октября 2020

Asynchronous Javascript And Xml — полное название технологии AJAX. Это технология обращения к серверу без перезагрузки страницы.

jQuery функции работающие с технологией Ajax:

    $.ajax() — детальная настройка ajax параметров. Эта функция лежит в основе всех Ajax jQ запросов.

settings — объект с настройками, заданный в формате

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.
  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.
  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
  • dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.

Частичная вставка данных

Если в url адресе установлен селектор, то код будет вставлен частично.

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в объектом, в формате: .
  • callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (до jQuery 1.5, использовался XMLHttpRequest).

jQuery.getScript(url, [success(data, textStatus)])

  • url — url-адрес, url-адрес js-файла.
  • success(data, textStatus) — пользовательская функция, которая будет вызвана после удачного выполнения загруженного js-файла.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
  • $.param() — преобразует объект, массив или массив объектов в строку, пригодную для передачи через url.
  • $().serialize() — преобразует данные формы в строку, пригодную для передачи через url.
  • $().serializeArray() — преобразует данные формы в массив объектов, содержащий данные элементов формы.

Функция $.ajax()

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

jQuery.ajax( url [, settings] ) — запись для JQ начиная с версии 1.5

jQuery.ajax( [settings] ) — запись для JQ начиная с версии 1.0

url — URL адрес, на который будет отправлен Ajax запрос. Тип: Строка.
settings — набор параметров вида «ключ: значение», которые настраивают запрос Ajax. Все настройки опциональны. Настройки по умолчанию устанавливаются с помощью $.ajaxSetup(). Тип: Объект.

Возвращает объект jqXHR (надмножество объекта XMLHTTPRequest).

Список возможных настроек параметров $.Ajax()

По умолчанию: зависит от параметра DataType

При выполнении запроса, в заголовках (header) указываются допустимые MIME-типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts.

По умолчанию: true

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

Чтобы включить синхронный запрос, укажите в параметре- false, но имейте в виду, что выполнение запросов в синхронном режиме может привести к блокировке страницы, пока запрос не будет полностью выполнен. А также, что кроссдоменные запросы и запросы типа «jsonp» не могут выполняться в синхронном режиме.

Содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.

Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.

По умолчанию: boolean

Тип: true, false для типов данных ‘script’ and ‘jsonp’

Если false, запрашиваемая страница не будет кэшироваться браузером

Тип: функция или массив

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Принимает два аргумента:

  • объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest);
  • textStatus — cтроку, характеризующую статус запроса: «success», «notmodified», «error», «timeout», «abort», или «parsererror» (начиная с jQuery 1.5, complete может принимать массив функций).

Параметр задается в формате <строка:регулярное выражение>и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добавлено в версии 1.5)

По умолчанию: ‘application/x-www-form-urlencoded; charset=UTF-8’

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

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

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

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

Тип: объект или строка

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса.

Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, превращается в &foo=bar1&foo=bar2.

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

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента:

  • объект jqXHR (в прошлом XMLHttpRequest);
  • строку с описанием ошибки. Может содержать:
    • null
    • timeout
    • error
    • abort
    • parsererror
  • строку исключения, если оно было выброшено. если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус. К примеру, «Not Found» или «Internal Server Error». Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

Событие error не происходит при dataType равному script или JSONP.

По умолчанию: true

Вызывать или нет глобальные обработчики событий Ajax для этого запроса.

  • $.ajaxStart() — начало.
    • $.ajaxError() — ошибка.
    • $.ajaxSuccess() — успешное выполнение.
    • $.ajaxComplete() — завершение запроса.
    • $.ajaxSend() — отправка.
  • $.ajaxStop() — конец.

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение ‘etag’, для отслеживания факта изменения данных.

По умолчанию: зависит от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http).

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется «callback»). К примеру настройка преобразуется в часть url строки ‘onJSONPLoad=?’. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

Тип: строка или функция

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

По умолчанию: GET

Метод передачи данных который надо использовать («POST», «GET», «PUT»). Добавлено в версии 1.9.0.

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. Добалено в версии 1.5.1.

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

По умолчанию: true

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как «application/x-www-form-urlencoded». Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

Применяется только для Ajax GET-запросов типов ‘JSONP’ и ‘script ‘. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. Добалено в версии 1.5

Тип: функция или массив

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента:

  • data — данные, присланные сервером и прошедшие предварительную обработку;
  • textStatus — строка со статусом выполнения;
  • объект jqXHR.
    • В версиях до 1.5 вместо jqXHR используется XMLHttpRequest.
    • В версиях после 1.5, вместо одной функции, этот параметр может принимать массив функций.

Если в качестве параметра dataType указан JSON, данная функция может не обрабатываться, по многим причинам, но в основе большинства причин лежит ошибка. Чтобы понять почему не обрабатывается функция:

  • проверьте консоль в браузере на наличие ошибок;
  • проверьте логи CMS или иной платформы;
  • проверьте логи сервера.

Ошибка не обязательно должна быть связана с тем что указано в блоке.

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

По умолчанию: GET


Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

По умолчанию: текущая страница

Страница, накоторую будет отправлен запрос.

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

По умолчанию: ActiveXObject в IE, XMLHttpRequest в других браузерах

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

По умолчанию: значение

Объект вида <имя:значене>для изменения значений соответствующих полей объекта XMLHttpRequest. Добалено в версии 1.5.1.

$.ajaxPrefilter() — устанавливает обработчик, вызываемый перед выполнением каждого ajax-запроса. Предшествует выполнению любых других обработчиков ajax.

Объект jqXHR

Объект jqXHR является надмножеством объекта XMLHTTPRequest, и содержит в себе:

  • responseTextсвойство;
  • responseXMLсвойство;
  • getResponseHeader() метод.
  • overrideMimeType()метод (до JQuery 1.5.1), может использоваться в функции beforeSend(), например, для изменения content-type заголовка.

Примеры jQuery Ajax функций

Пример установки глобальных параметров с помощью $.ajaxSetup():

Пример функции .get():

Пример функции .post():

Пример функции .load():

Пример обработки 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 документ. Вот структура кода:

Освоение Ajax: Часть 1. Введение в Ajax

Освоение Ajax: эффективный подход к созданию Web-сайтов и знакомство с тем, как работает эта технология

Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения. Автор, эксперт по Ajax, демонстрирует совместную работу этих технологий (от общего обзора до детального изучения), цель которой – сделать чрезвычайно эффективную Web-разработку повседневной реальностью. Он также раскрывает основные концепции Ajax, включая объект XMLHttpRequest.

Брэт Маклафлин, автор и редактор, O’Reilly Media Inc.

Брэт Маклафлин (Brett McLaughlin) работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies, фактически, над созданием сервера приложений, а с недавних пор работает в O’Reilly Media, Inc., где продолжает писать и редактировать книги по данной тематике. В готовящейся Брэтом вместе с популярными авторами Эриком и Бет Фриманами книге Быстрый штурм Ajax использован общепризнанный и передовой подход к Ajax по методу Head First. Его недавняя книга «Java 1.5 Tiger: Заметки разработчика», является первой доступной книгой по новейшей технологии Java, а его классическая «Java и XML» остается одной из наиболее авторитетных работ по использованию технологий XML в языке программирования Java.

  • Содержание

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

Однако, Ajax – это далеко не чья-то прихоть, а мощный подход к созданию Web-сайтов, который не так трудно изучить, как полностью новый язык.

Перед тем, как я погружусь в детали Ajax, давайте потратим пару минут на осмысление того, что же делает Ajax. Когда в наше время вы пишете приложение, у вас есть два основных варианта:

  • Настольные приложения
  • Web-приложения

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

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

С другой стороны, Web-приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon.com и eBay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы.

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

Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web-интерфейсов в чувствительные Ajax-приложения.

Старая технология, новые хитрости

Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby).

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

Между прочим, Ajax – это аббревиатура от Asynchronous JavaScript and XML (и DHTML, и т.д.). Фраза была придумана Джессе Джеймсом Гарретом из Adaptive Path (см. раздел Ресурсы) и, по словам Джессе, не предназначалась быть аббревиатурой.

Вот основные технологии, вовлеченные в Ajax-приложения:

  • HTML используется для создания Web-форм и указания полей для использования в вашем приложении.
  • JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div , span и другие динамические HTML-элементы для разметки вашего HTML.
  • DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера.

Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web-приложений).

Объект XMLHttpRequest

Первый объект, о котором вы хотите узнать, возможно, самый новый для вас; он называется XMLHttpRequest . Это объект JavaScript, и он создается так же просто, как показано в листинге 1.

Листинг 1. Создание нового объекта XMLHttpRequest

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

В нормальных Web-приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий (обычно PHP или Java, возможно, CGI-процесс или что-то в этом роде), а потом передает назад всю новую страницу. Эта страница может быть HTML-страницей с новой формой с некоторыми заполненными данными, либо страницей подтверждения, либо, возможно, страницей с какими-то выбранными вариантами, зависящими от введенных в оригинальную форму данных. Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера. Вот где проявляется низкая интерактивность – пользователи не получают немедленной обратной реакции и определенно чувствуют себя не так, как при работе с настольными приложениями.

Ajax по существу помещает технологию JavaScript и объект XMLHttpRequest между вашей Web-формой и сервером. Когда пользователи заполняют формы, данные передаются в какой-то JavaScript-код, а не прямо на сервер. Вместо этого JavaScript-код собирает данные формы и передает запрос на сервер. Пока это происходит, форма на экране пользователя не мелькает, не мигает, не исчезает и не блокируется. Другими словами, код JavaScript передает запрос в фоновом режиме; пользователь даже не замечает, что происходит запрос на сервер. Более того, запрос передается асинхронно, а это означает, что ваш JavaScript-код (и пользователь) не ожидают ответа сервера. То есть, пользователи могут продолжать вводить данные, прокручивать страницу и работать с приложением.

Затем сервер передает данные обратно в ваш JavaScript-код (все еще находящийся в вашей Web-форме), который решает, что делать с данными. Он может обновить поля формы «на лету», придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм. JavaScript-код может даже получить данные, выполнить какие-либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttpRequest . Он может общаться с сервером по своему желанию, а пользователь даже не догадывается о том, что происходит на самом деле. В результате мы получаем динамичность, чувствительность, высокую интерактивность настольного приложения вместе со всеми возможностями интернет.

Добавление JavaScript-кода

После того, как вы разберетесь с XMLHttpRequest , оставшийся JavaScript-код превращается в рутинную работу. Фактически, вы будете использовать JavaScript-код для небольшого числа основных задач:

  • Получить данные формы: JavaScript-код упрощает извлечение данных из вашей HTML-формы и передает их на сервер.
  • Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений «на лету».
  • Выполнить анализ HTML и XML: Вы будете использовать JavaScript-код для управления DOM (см. следующий раздел) и для работы со структурой вашей HTML-формы и всеми XML-данными, возвращаемыми сервером.

Для выполнения первых двух задач вы должны очень хорошо знать метод getElementById() , приведенный в листинге 2.

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода

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

Завершение с DOM

И последнее, хотя и не менее важное, — это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML-дизайнерами и даже немного не свойственна кодировщикам на JavaScript (пока вы действительно не решаете каких-либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения.

К счастью, использование DOM в технологии JavaScript является делом легким и в основном интуитивным. Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где-то здесь. Когда вы начнете передавать XML-данные вперед и назад между вашим JavaScript-кодом и реальными изменениями HTML-формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени.

Получение объекта Request

Вооруженные этим общим обзором, вы готовы к более пристальному изучению. Поскольку XMLHttpRequest является центральным для Ajax-приложений (и, возможно, нов для многих из вас) я начну с него. Как вы видели в листинге 1, создать этот объект и использовать его должно быть просто, не правда ли? Подождите минуточку.

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

Работа с браузерами Microsoft

Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML (ссылки на дополнительную информацию по MSXML вы можете найти в разделе Ресурсы). Поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом.

Однако, это не так то и легко. На самом деле в ходу две различных версии MSXML. Версия MSXML зависит от версии технологии JavaScript, установленной в Internet Explorer, поэтому вам нужно написать код, подходящий для обеих версий. Взгляните на листинг 3, в котором приведен код для создания XMLHttpRequest в браузерах Microsoft.

Листинг 3. Создание объекта XMLHttpRequest в браузерах Microsoft

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

xmlHttp = new ActiveXObject(«Msxml2.XMLHTTP»);

xmlHttp = new ActiveXObject(«Microsoft.XMLHTTP»); .

В двух словах, этот код пытается создать объект, используя одну версию MSXML; если это не получится, создается объект для второй версии. Изящно, да? Если ничего не сработало, переменная xmlHttp устанавливается в false, для того чтобы указать вашему коду, что что-то не так. В этом случае вы, возможно, работаете с браузером не от Microsoft и должны использовать другой код для выполнения работы.

Работа с Mozilla и браузерами не от Microsoft

Если Internet Explorer не ваш браузер, либо вы пишете код для браузеров не от Microsoft, вам нужен другой код. Фактически, это простая строка, которую вы видели в листинге 1:

var xmlHttp = new XMLHttpRequest object; .

Эта намного более простая строка создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и в большой степени в каждом браузере не от Microsoft, поддерживающем Ajax в любой форме или разновидности.

Объединение

Мы хотим поддерживать все браузеры. Кто хочет писать приложение, работающее только в Internet Explorer, или приложение, работающее только во всех остальных браузерах? Еще хуже, хотите ли вы написать ваше приложение дважды? Конечно, нет! Итак, объединим поддержку для Internet Explorer и для остальных браузеров. В листинге 4 приведен код, делающий это.

Листинг 4. Создание объекта XMLHttpRequest для всех браузеров

Пока проигнорируйте комментарии и непонятные теги, типа @cc_on ; это специальные команды JavaScript-компилятора, которые мы рассмотрим детально в моей следующей статье, которая будет полностью посвящена XMLHttpRequest . Основу этого кода можно разделить на три шага:

  1. Создайте переменную xmlHttp для ссылки на объект XMLHttpRequest , который вы создадите.
  2. В блоке try создайте объект в браузерах Microsoft:
    • В блоке try создайте объект с использованием объекта Msxml2.XMLHTTP .
    • Если это не получится, В блоке try создайте объект с использованием объекта Microsoft.XMLHTTP .
  3. Если xmlHttp все еще не установлен, создайте объект для остальных браузеров.

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

Пара слов о защите

Как насчет защиты? Современные браузеры предлагают пользователям возможность повысить уровень безопасности, отключить технологию JavaScript и запретить множество настроек в своих браузерах. В этих ситуациях ваш код, вероятно, не будет работать ни при каких обстоятельствах. Для таких ситуаций вы должны элегантно решить проблемы – есть, по крайней мере, одна статья об этом, а одну я напишу позднее (это, наверное, будет длинная серия, но не беспокойтесь – вы все освоите до окончания этой серии статей). Пока же вы пишете устойчивый, но не совершенный код, который отлично подходит для изучения Ajax. Вы вернетесь к более качественному коду позже.

Запрос/ответ в мире Ajax

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

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

Выполнение запроса

У вас есть ваш превосходный новый объект XMLHttpRequest ; приведем его в движение. Во-первых, нам понадобится JavaScript-метод, который ваша Web-страница может вызвать (например, когда пользователь вводит текст или выбирает вариант из меню). Затем, нужно следовать одной и той же основной схеме практически во всех ваших Ajax-приложениях:

  1. Получить какие-либо данные из Web-формы.
  2. Создать URL для подключения.
  3. Открыть соединение с сервером.
  4. Установить функцию для сервера, которая выполнится после его ответа.
  5. Передать запрос.

В листинге 5 приведен пример Ajax-метода, который выполняет именно эти операции и именно в этом порядке:

Листинг 5. Выполнить запрос с Ajax

Многое из этого не требует пояснений. Первая часть кода использует базовый JavaScript-код для сбора значений из нескольких полей формы. Затем код устанавливает PHP-сценарий в качестве URL для подключения. Обратите внимание, как указывать URL и как добавлять к нему city и state (из формы), используя простые GET-параметры.

Затем открывается соединение; это первое место, где вы опять увидели в действии XMLHttpRequest . Указывается метод соединения (GET) и URL. Последний параметр, когда установлен в true , запрашивает асинхронное соединение (то есть, делает это способом, сооветствующим названию Ajax). При использовании false код ждал бы выполнения запроса и не продолжал бы работу до получения ответа. При использовании true ваши пользователи могут работать с формой (и даже вызывать другие JavaScript-методы) пока сервер обрабатывает этот запрос в фоновом режиме.

Свойство onreadystatechange xmlHttp (вспоминайте, это ваш экземпляр объекта XMLHttpRequest ) позволяет вам информировать сервер о том, что следует делать после завершения работы (что может быть через пять минут или через пять часов). Поскольку код не собирается ждать сервер, вы должны дать серверу знать, что делать, так чтобы вы смогли среагировать. В данном случае будет инициирован конкретный метод (называемый updatePage() ) после завершения сервером обработки вашего запроса.

Наконец, вызывается send() со значением null . Поскольку вы добавили данные для передачи на сервер (city и state) в URL запроса, вам не надо передавать что-либо в запросе. Таким образом, передается ваш запрос, и сервер может делать то, что вы указали ему делать.

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

Код в листинге 5 очень прост. Данные являются простым текстом и могут быть включены как часть URL-запроса. GET посылает запрос вместо более сложного POST. Не добавляется XML, заголовки контента, не передаются данные в теле запроса – можно сказать, Ajax-утопия.

Не переживайте — ситуация станет более сложной по мере выпуска статей этой серии. Вы научитесь передавать POST-запросы, устанавливать заголовки запроса и типы содержимого, кодировать XML в вашем сообщении, добавлять защиту в ваш запрос – список довольно большой! Не беспокойтесь пока о сложных вещах; узнайте основы и вскоре вы освоите полный арсенал Ajax-средств.

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

Теперь вы должны разобраться с ответом сервера. Пока вы должны знать только два момента:

  • Не делать ничего, пока свойство xmlHttp.readyState не будет равно 4.
  • Сервер будет записывать свой ответ в свойстве xmlHttp.responseText .

Первый момент (состояния готовности) готовится стать основным объемом следующей статьи; вы узнаете о стадиях HTTP-запроса столько, сколько никогда даже и не хотели знать. Пока вы просто проверяйте на равенство определенному значению (4), и все будет работать (и вы будете знать, что искать в следующей статье). Второй момент (использование свойства xmlHttp.responseText для получения ответа от сервера) является простым. В листинге 6 приведен пример метода (который сервер может вызвать), основанного на значениях, переданных в листинге 5.

Листинг 6. Обработка ответа от сервера


Опять же, код не является трудным или сложным. Он ожидает, пока сервер не вызовет его с нужным состоянием готовности, и затем использует значение, которое сервер возвращает (в данном случае ZIP-код для введенного пользователем города и штата), для установки другого поля формы. В результате поле zipCode неожиданно появляется с ZIP-кодом, но пользователь ни разу не щелкнул по кнопке! Это поведение настольного приложения, о чем я говорил ранее. Оперативность, ощущение динамичности и т.д., а все с маленьким Ajax-кодом.

Наблюдательные читатели, возможно, заметят, что поле zipCode является обычным текстовым полем. После возврата сервером ZIP-кода и установки этого поля методом updatePage() в значение ZIP-кода города/штата пользователи могут переопределить это значение. Так сделано умышленно по двум причинам: сохранить этот пример простым и показать вам, что иногда нужно, чтобы пользователи имели возможность переопределить значения, возвращенные сервером. Помните об обоих моментах; они важны при хорошем дизайне пользовательского интерфейса.

Перехват в Web-формах

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

Листинг 7. Запуск Ajax-процесса

Если это выглядит как еще один кусок в рутинном, в некоторой степени, коде – вы правы, так и есть! Когда пользователь вводит новое значение для любого из полей city или state, запускается метод callServer() , и Ajax-функция начинается. Вам кажется, что вы начинаете понимать суть вещей? Отлично!

В заключение

В настоящий момент вы, возможно, не готовы взять и написать ваше первое Ajax-приложение, по крайней мере, пока не исследовали раздел Ресурсы. Однако, вы уже можете начать понимать основную идею о том, как работают такие приложения и что такое объект XMLHttpRequest . В готовящихся статьях вы изучите этот объект, а также то, как контролировать взаимодействие JavaScript-to-server и работать с HTML-формами, и даже разберетесь с DOM.

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

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

AJAX. Так что же это?

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

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

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

По ходу изложения под термином «браузер» мы будем понимать браузеры: Internet Explorer 5.0+, Safari 1.3 и 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (плюс означает данную версию и более новые). Если речь станет заходить о других версиях, об этом будет упоминаться отдельно.»Что это такое? Как это работает и в чем преимущества?»

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

Пользователь в браузере открывает какую-либо страницу page. На странице есть гиперссылки, которые ведут на другие страницы. При нажатии на любую из них браузер посылает запрос URL на сервер, с которым связана эта ссылка. Если в природе не существует сервера, связанного с этой ссылкой (например, когда, набирая URL в адресной строке, вы ошиблись при написании имени ресурса), или имеются проблемы связи с интернетом, то браузер сгенерирует страницу, подобную показанной на картинке (так она выглядит в Operа-е):

В случае существования сервера, но отсутствии на нем документа, указанного в запросе сервер сам создаст HTML страницу с описанием ошибки. Например, это может быть всем известная 404-ая ошибка (документ не найден). Или, если все верно, в ответ сервер отдаст новую страницу. В любом случае, в браузер будет загружена новая страница new_page, даже если по сравнению со старой на ней изменилась лишь пара слов. Довольно существенный минус данной технологии. Кроме того, работа ведется в синхронном режиме. То есть после того как браузер отослал на сервер запрос он ожидает от него ответ, и пока ответ не получен ничего предпринимать не будет. А порой ответ, и загрузка новой страницы может длиться слишком долго. Настолько долго, что пользователь может не дождаться загрузки страницы и просто закрыть её. Поэтому веб-программмисты прибегают к некоторым уловкам.

Например, используя DOM методы языка JavaScript [1], можно динамически изменять фоновый рисунок блока без перезагрузки страницы. Это обеспечивает необходимую интерактивность. При наведении курсора мыши на ячейку таблицы исходная фоновая картинка pic_1.gif заменяется pic_2.gif. При уходе курсора с ячейки происходит обратный процесс.

Или такой пример. В файл с изображением в формате JPEG можно записать (и прочитать) метаданные EXIF. Многие интернет фоторесурсы позволяют для отображаемой фотографии показать и эти данные. Но они появляются только после нажатия соответствующей кнопки на экране. При этом обновление страницы не происходит. Делается это очень просто. EXIF данные находятся на странице, но расположены в скрытом блоке с помощью CSS (display: none). При нажатии на кнопку блок становится видимым (display: block). Минусы очевидны: вместе со страницей передаются данные, которые, возможно, не будут использованы; отобразить можно лишь те данные, которые были присланы вместе со страницей.

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

Широкое распространение этого понятия началось с публикации в англоязычной части интернета статьи Джесси Джеймса Гарретта «Новый подход к веб-приложениям» в феврале 2005 года [2]. Статья писалась проектировщиком и для проектировщиков. Но со статьей ознакомилось много человек, в том числе и программисты. Которые и поспешили забросать автора электронными посланиями с вопросами о технических деталях реализации данного подхода. Писем, видимо, было настолько много, что уже в декабре того же года Гаррету в предисловии одной из книг по AJAX пришлось дать пояснения, что он не является программистом, и вопросы по конкретной реализации AJAX-приложений не к нему («The truth is, I’ve never built an Ajax application. Sure, I’ve worked on Ajax projects. . «).

Так в чем ключевое отличие AJAX технологии от классической клиент-серверной? Это наличие AJAX-движка, состоящего из двух частей: клиент-приложение (написанное на языке JavaScript) и сервер-приложение (написанное на любом серверном языке). Также немного другой логикой общения приложения-клиента с сервером (рис. 2).

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

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

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

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

AJAX расшифровывается как Asynchronous JavaScript + XML (асинхронный JavaScript+XML) и уже это указывает, на что опирается технология. А опирается практически на все то же самое, что и другие веб-приложения:

  • HTML/XHTML [3]/[4] для написания разметки страницы;
  • CSS [5] для визуального оформления страницы;
  • DOM [1] для динамического изменения страницы в ответ на действия пользователя;
  • XML [6, 7] для обмена данными между клиентской и серверными частями;
  • JavaScript [8] собственно для написания AJAX движка, для обеспечения интерактивности;
  • XMLHttpRequest объект [9] для осуществления запросов к серверу.

Когда я решил поработать с AJAX-приложением, то подумал, что для поддержки нужно что-то поставить на сервер. Какой-либо модуль, может, в виде dll. Но как потом понял, ничего никуда устанавливать не нужно. Требуется лишь корректно написать движок и все. Возникает вопрос, а что за AJAX-движки распространяются в сети? Ответ прост: это уже готовые приложения, которые предназначены для каких-либо задач, и которые в готовом виде можно использовать на своем сайте. Например, существует библиотека для PHP, которая называется xAjax. Она включает в себя как клиентский скрипт, написанный на JavaScript, так и серверный скрипт, с которым JavaScript взаимодействует. Помните об этом! У меня был случай, когда человек думал, что AJAX-приложение это только JavaScript, использующий XMLHttpRequest объект, и все. Но это далеко не все. Есть еще скрипт на стороне сервера, логику работы которого также придется проектировать, а потом писать код.

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

Основа любого AJAX-приложения — это XMLHttpRequest объект, с его рассмотрения и начнем.

У данного объекта немало свойств и методов [10], но не все из них поддерживаются ведущими браузерам. Полная поддержка есть только в FireFox-е. Поэтому привожу только то, что будет работать в современных браузерах [9].

СВОЙСТВА:

readonly onreadystatechange function

Указывает функцию обратного вызова (callback function), которая будет вызываться каждый раз, когда будет изменяться readyState свойство. Несмотря на то, что вызывается функция, параметры передать в нее не получиться. Но об этом чуть позже в примере.

readonly readyState integer

Состояние запроса. Может принимать значения:

  • — не неинициализированный (uninitialized), метод open() еще не был вызван;
  • 1загружается (loading), метод send() еще не вызван;
  • 2загружен (loaded), метод send() был вызван и ответные заголовки/статус (свойство status) получены;
  • 3интерактивный (interactive), идет прием данных, которые доступны через свойство responseText;
  • 4завершенный (completed), в ответ на запрос получены не только все заголовки и статус, но и приняты все данные от сервера, ответ завершен.

readonly responseText string

Ответ сервера в виде обыкновенного текста. Только чтение.

readonly responseXML object

Ответ сервера в виде объекта DOM Document. Используется, если ответ сервера является корректным XML документом. Если документ не корректный, данные не получены или еще не оправлены, то свойство равно NULL. Только чтение.

readonly status string

Статус ответа. Например: 200 (ОК), 404 (документ не найден), 503 (временная перегрузка сервера).

МЕТОДЫ:

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

Возвращает все заголовки ответа сервера в виде отформатированной строки. Каждый новый заголовок начинается с новой строки.

string getResponseHeader(string header)

Вернуть заголовок с именем header.

void open(string method, string uri, [boolean asynch])

Подготавливает запрос по адресу uri методом method (POST или GET) с указанием режима asynch, асинхронный режим или нет. В результате вызова свойство readyState становиться равным 1.

Инициирует запрос к серверу. В запросе передаются данные data.

void setHeader(string header, string value)

Присваивает заголовку с именем header, значение value. Перед началом использования этого метода не забудьте вызвать open()!

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

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

Структуру БД выбираю следующую:

Листинг БД файл data.xml: ATI 9600 128 DDR (128bit) ATI 9600 256 DDR (128bit) ATI 9600XT 256 DDR (128bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 512 DDR(128bit) ATI X1300 256 DDR (128bit) NVidia 6600 128 DDR (128bit) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128bit) ATI X1600Pro 256 DDR (128bit) ATI X1800GTO 256 DDR (256bit) ATI X1600Pro 256 DDR (128bit) ATI X1900XT 512 DDR (256bit) NVidia 6600 Silencer 128 DDR (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR(256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) PCI-E ATI X550 128 DDR (128bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolution 5.1 Audiophile Audiophile Fast Track PIXMA iP 90 PIXMA iP4200 PIXMA iP6600D Picture Mate 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 DeskJet 5443 Photo Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE60 Perfection 1270 Perfection 3590 Perfection 4990 Bear Paw 2400CU Perfection 4990

Как в этой БД человек ведет поиск? Скорее всего, он от корневого элемента шел бы по дереву документа до тех пока в нужной ветви не нашел ссылку или убедился, что драйвера для данного устройства нет в базе. Также поступим и мы, используя для нахождения нужного узла или набора узлов выражения языка XPath [11].

Листинг формы для отправки данных index.htm:

В форме есть две переменные: path и flag. В первой хранится запрашиваемый путь, который отправляется на сервер. Так как один элемент в форме уже есть, то у этой переменной уже есть начальное значение. Вторая переменная служит для того, чтобы указать серверному скрипту, что из документа нужно извлечь определенный элемент Device. Кроме того, формат возвращаемых данных с сервера изменится.

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

А теперь разберем по шагам работу движка.

При наступлении события onblur (элемент select потерял фокус) вызывается функция sendData(), которая и подготавливает POST данные для оправки запроса. Кроме того, она формирует XPath выражение в зависимости от значения переменной flag=0 (например, //Devices/V ]).

Далее вызываем функцию sendRequest(), в которую передаем URL серверного скрипта, а также переменную типа строка, в которой содержатся готовые POST-данные. И первым делом создаем XMLHttpRequest объект, ссылку на который храним в переменной requestObj. Функция httpRequest() является кросс-браузерной, и будет работать во всех браузерах.

Когда-то обращение к функции httpRequest() я делал сразу при загрузке страницы через и больше не создавал XMLHttpRequest объект. Но как оказалось, это работает для всех браузеров кроме IE, который каждый раз требует создавать новый объект. Поэтому вызов данной функции делается каждый раз перед отправкой данных.

После отправки данных браузер ждет ответа с сервера. При каждом изменении свойства readyState будет вызываться функция responseServer(). Если статус ответа пришел с кодом «200» (все нормально), то будет вызвана функция addSelect(), которая и добавит полученный данные в DOM текущего документа. Все браузеры будут ждать ответа от сервера. Однако по истечении некоторого времени (time-out) принудительно назначат XMLHttpRequest.readyState = 4 и перестанут ожидать ответа с сервера. Например, для Opera значение тайм-аута составляет 10 секунд. Используя другие статусы, можно добавить в движок обработчик ошибок в ответах сервера.

Функция addSelect() добавляет в DOM текущего документа еще один узел DIV, в который и помещает ответ с сервера. Может возникнуть вопрос, почему используется свойство responseText, а не responseXML? У кого-то обязательно возникнет желание, используя это свойство, импортировать ответ сервера (а серверный скрипт в ответ присылает XML документ) прямо в DOM документа. Возникло такое желание и у меня. Я хотел импортировать корневой элемент присланного XML файла и все его потомки методом importNode. Но браузер импортировал элемент без потомков, даже несмотря на то, что второй параметр данного метода был установлен в true: importNode(Object importedNode,true). Поэтому не точная реализация этого метода пока исключает его использование.

Равнозначное решение было найдено, используя innerHTML метод элемента.

На этом работа клиентской части заканчивается. Оставшаяся нерассмотренной функция reset() призвана вернуть DOM документа к начальному виду. Достичь того же можно, обновив страницу по F5, но AJAX-движок как раз и пишется для того, чтобы избежать перезагрузки страницы. Поэтому все элементы, добавленные в документ скриптом, должны быть удалены из него также скриптом.

В ответ на запрос серверный скрипт формирует XML данные вида: childrenElementName_1 . childrenElementName_1

Если запрашиваемый узел имеет имя Device, то возвращается обычный отформатированный текст. Серверный скрипт написан на PHP V5 и не будет работать на более ранних версиях этого интерпретатора, так как расширение для работы с DOM было введено в этот язык только с пятой версии, и заменило собой расширение DOM XML, интерфейс которого не соответствовал спецификации. А теперь посмотрим на код серверного скрипта.

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? Например, я хочу иметь ссылку на моей странице, так что, когда пользователь нажимает на эту ссылку, некоторая информация отправляется на мой сервер без перезагрузки текущей страницы. Это AJAX?

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

Однако, я думаю, что это не изящный способ достичь цели. Я думаю, мне нужно использовать AJAX. Как это работает? Может ли использование XHTML решить эту проблему элегантным способом? Или мне нужно использовать JavaScripts?

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

Если вы совершенно не знакомы с AJAX (который обозначает асинхронный Javascript и XML), запись AJAX в википедии является хорошим началом точка:

Как и DHTML и LAMP, AJAX — это не технология сама по себе, а группа технологий. AJAX использует комбинацию:

  • HTML и CSS для разметки и информация о стиле.
  • DOM доступ с помощью JavaScript для динамически отображать и взаимодействовать с представленная информация.
  • Метод для обмена данными асинхронно между браузером и сервером, тем самым избегая перезагрузки страниц. Объект XMLHttpRequest (XHR) обычно используется, но иногда объект IFrame или динамически добавленный тег используется вместо этого.
  • Формат данных отправлено в браузер. Общие форматы включая XML, предварительно отформатированный HTML, простой текст и обозначение объекта JavaScript (JSON). Эти данные могут быть созданы динамически в той или иной форме серверные скрипты.

Как вы можете видеть, с чистой технологической точки зрения здесь нет ничего нового. Большинство частей AJAX уже были там в 1994 году (1999 для объекта XMLHttpRequest ). Настоящая новинка заключалась в том, чтобы использовать эти части вместе, как Google с GMail (2004) и Google Maps (2005). Фактически, оба сайта внесли большой вклад в продвижение AJAX.

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

Для оранжевой части вы можете делать все вручную (с помощью объекта XMLHttpRequest ), или вы можете использовать известные библиотеки JavaScript, такие как jQuery, Prototype, YUI и т.д. на «AJAXify» клиентскую сторону вашего приложения. Такие библиотеки стремятся скрыть сложность разработки JavaScript (например, кросс-браузерную совместимость), но могут быть излишними для простой функции.

На стороне сервера могут помочь некоторые фреймворки (например, DWR или RAJAX, если вы используете Java), но все, что вам нужно сделать, это в основном открыть службу, которая возвращает только требуемую информацию для частичного обновления страницы (сначала как XML/XHTML — X в AJAX — но JSON часто предпочтительнее в наши дни).

Цукерберг рекомендует:  Javascript - Не могу закрепить панель навигации
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих