Разработка интерактивных веб-приложений с использованием JQUERY+AJAX. Часть II


Содержание

Использование 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.

Цукерберг рекомендует:  Создание и оформление вкладок при помощи CSS3 и jQuery

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

Управление режимом выполнения запросов осуществляется с помощью параметра 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: Новый подход к веб-приложениям

Если и можно назвать «гламурным» что-то в современном проектировании интерфейсов, то это создание веб-приложений. В конце концов, когда в последний раз вы слышали чтобы кто-то восхищался интерфейсом продукта не размещённого в Интернете? ( Ладно, кроме iPod.) Все самые свежие и новаторские работы находятся в сети.

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

Этот разрыв сокращается. Взгляните на Google Suggest. Посмотрите, предполагаемые предложения почти непрерывно обновляются по мере того как вы вводите текст. Теперь зайдите на Google Maps. Увеличьте масштаб. Захватите курсором карту и подвигайте её туда-сюда. Опять же, всё происходит почти мгновенно, без всякого ожидания перезагрузки страницы. Google Suggest и Google Maps — вот два примера нового подхода к проектированию веб-приложений, который мы в компании Adaptive Path называем Ajax. Это понятие образовано как сокращение от и представляет собой фундаментальный прорыв наших представлений о возможностях веба.

Что такое Ajax

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

  • стандартизованное представление с использованием XHTML и CSS;
  • динамическое отображение и взаимодействие при помощи Document Object Model;
  • обмен и управление данными через XML и XSLT;
  • асинхронные получение данных с использованием XMLHttpRequest;
  • и JavaScript, связывающий всё это воедино.

Классическая модель веб-приложения действует следующим образом: большинство действий пользователя отправляют обратно на сервер HTTP-запрос. Сервер производит необходимую обработку — получает данные, обрабатывает числа, взаимодействует с различными унаследованными системами и затем выдаёт HTML страницу клиенту. Эта модель заимствована из первоначального применения веба как гипертекстовой среды, но те кто читали книгу знают, то что делает веб подходящим для гипертекста не обязательно делают его хорошим для программных приложений.

Рисунок 1: Сравнение традиционной модели веб-приложений (слева) с моделью Ajax (справа).

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

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

В чём отличие Ajax

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

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

Рисунок 2: Сравнение диаграмм взаимодействия традиционного веб-приложения (сверху) и асинхронного приложения Ajax (снизу).

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

Кто использует Ajax

Огромные инвестиции в разработку подхода Ajax делает Google. Все самые крупные продукты анонсированные за последний год — Orkut, Gmail, последние бета-версии Google Groups, Google Suggest, и Google Maps — приложения Ajax. (За техническими подробностями реализации Ajax обратитесь к отличным исследованиям Gmail, Google Suggest и Google Maps.) Остальные не отстают: многие любимые всеми свойства сервиса Flickr полагаются на Ajax, а механизмы поиска A9.com от Amazon используют похожую технологию.

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

Работая с Ajax последние несколько месяцев, мы в Adaptive Path поняли, что открыли только верхушку айсберга того богатства взаимодействия и скорости отклика, которые предоставляют приложения Ajax. Сейчас это важное направление развития веб-приложений, и его важность будет только расти. И учитывая большое количество разработчиков, которые уже умеют использовать эти технологии, мы ожидаем увидеть как всё больше организаций последуют примеру Google и используют конкурентные выгоды, которые предлагает Ajax.

Что дальше

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

Вопросы и ответы.

13 марта 2005: После публикации эссе Джесси мы получили громадное количество писем от читателей с вопросами об Ajax. Здесь Джесси отвечает на некоторые наиболее общие вопросы.

Цукерберг рекомендует:  Cc++ - Проблема с MFC

Вопрос. Изобрела ли Ajax компания Adaptive Path или это сделала Google? Участвовала ли компания Adaptive Path в создании Ajax-приложений Google?

Ответ. Ни Adaptive Path ни Google не изобретали Ajax. Последние работы Google просто лучшие примеры приложений Ajax. Adaptive Path не была вовлечена в разработку Ajax-приложений Google, но мы делали это для других своих клиентов.

Вопрос. Продаёт ли Adaptive Path компоненты Ajax или является владельцем зарегистрированного товарного знака? Где их можно скачать?

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

Вопрос. Является ли Ajax ещё одним названием для XMLHttpRequest?

Ответ. Нет. XMLHttpRequest только часть уравнения Ajax. XMLHttpRequest — это технический компонент, который делает возможными асинхронные взаимодействия с сервером; Ajax мы называем общий подход описанный в статье, который основывается не только на XMLHttpRequest, но также на CSS, DOM, и других технологиях.

Вопрос. Для чего нужно было давать всему этому название?

Ответ. Нужно было что-то более короткое чем для обсуждения этого подхода с клиентами.

Вопрос. Способы асинхронного взаимодействия с сервером существуют уже много лет. В чём же новизна подхода Ajax?

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

Вопрос. Ajax это технологическая платформа или всего лишь стиль проектирования?

Ответ. И то и другое. Ajax это набор технологий используемых вместе определённым образом.

Вопрос. Для приложений какого типа больше всего подходит Ajax?

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

Вопрос. Означает ли это что Adaptive Path это анти-Flash?

Ответ. Совсем нет. Macromedia является клиентом Adaptive Path, и мы долгое время поддерживали Flash-технологию. Как специалисты в Ajax мы ожидаем что иногда для каких-то конкретных задач именно Ajax станет наиболее проходящим решением, а иногда лучшим решением будет Flash. Также мы заинтересованы в изучении способов комбинирования этих технологий (как в случае с Flickr, который использует и то и другое).

Вопрос. Есть ли у Ajax значительные ограничения доступности или совместимости с браузерами? Отключают ли приложения Ajax кнопку ? Совместим ли Ajax с REST? Существуют ли мнения о безопасности разработки в Ajax? Могут ли быть разработаны Ajax-приложения для работы при выключенном JavaScript?

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

Вопрос. Некоторые из приведённых вами примеров Google не используют XML вообще. Должен ли я использовать XML и/или XSLT в приложении Ajax?

Ответ. Нет. XML это один из наиболее развитых способов ввода и вывода данных из клиентской части Ajax, но ничто не мешает вам достигнуть того же эффекта при помощи таких технологий структурирования данных для обмена как JavaScript Object Notation или тому подобных.

Вопрос. Проще ли разработать приложение Ajax по сравнению с традиционным веб-приложением?

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

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

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

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

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

jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

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

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

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

Содержимое файла index.html.

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.
Сам файл jquery.js — находится в той же папке, что и файлы примера.

2. В теле документа создается контейнер, в который мы будем загружать контент.

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

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

Рассмотрим используемые параметры функции $.ajax().

Обращается к файлу time.php для получения контента.

Результаты запросов не кэшируются.

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

Содержимое файла time.php.

Смысл работы файла time.php — выводим текущее время на экран.

Пример 2. Динамическое обновление контента по выбору пользователя

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

Содержимое файла index.html.

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

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

Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

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

Содержимое файла index.html.

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

Тип передачи данных.

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

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

Содержимое файла greetings.php.

Выводим на экран приветствие и подсчитываем количество символов в имени.

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

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

1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

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

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

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

Разработка современных веб-приложений на jQuery (JavaScript)

Объем курса: 64 ак. часа,
16 занятий по 3 астр. часа,
6 недель (3 раза в неделю)

Стоимость курса: 24 900 руб

На кого рассчитан курс

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

Формат обучения

Обучение ведется 100% онлайн, на нашей собственной онлайн платформе. Наше онлайн обучение максимально приближено к традиционному академическому обучению в ВУЗе. Обязательные опросы, совместные обсуждения, онлайн диалоги (а не просто тупые вебинары, как на многих других онлайн курсах).

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

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

Плюшки и бонусы

Скидка 10% на любой другой наш онлайн курс обучения.

Бесплатный доступ ко всем записям следующего потока этого же курса.

Возможность для лучших учеников попадания в нашу команду фрилансеров.

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

Возможность получения бесплатной помощи и консультаций по Вашим проектам после окончания курса.

Преподаватель курса

Полная программа курса

Тема 1. Закомство со структурой курса. Подготовка к работе.

Подключение jQuery, подключаемые библиотеки jQuery UI и jQuery mobile, листинги примеров, исходные коды примеров. Библиотека jQuery, HTML-редактор, Веб-браузер, Веб-сервер, node.js, изображения для сайта.

Тема 2. Введение в HTML.

Базовый HTML-документ, структура элементов HTML, атрибуты, атрибуты id и class, содержимое элементов, пустые элементы. Структура документа, элементы метаданных, элементы содержимого, иерархия элементов. Отношения “родители-дети”, отношения “предки-потомки”, “Сестринские” отношения. Объектная модель документа. Использование DOM, изменение DOM.Изменение стилей. Обработка событий.

Тема 3. Введение в CSS.

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

Тема 4. Введение в JavaScript.

Знакомство с JavaScript, использование инструкций, определение и использование функций, определение функций с параметрами, определение функций, возвращающих результат,
использование переменных и типов, использование примитивных типов, создание объектов, работа с объектами, использование операторов JavaScript, использование условных операторов, логические операции равенства и тождественности, явное преобразование типов, работа с массивами, использование литеральных массивов, считывание и изменение содержимого массива, перечисление содержимого массива, использование встроенных методов объекта Array, обработка ошибок, значения undefined и null.

Тема 5. Основы jQuery.

Установка библиотеки jQuery, первый сценарий jQuery, Функция $(), ожидание готовности DOM-модели, последствия пропуска ключевого слова function при вызове метода ready, использование альтернативной нотации, задержка срабатывания события ready, выбор элементов, сужение области поиска с помощью контекста. Что собой представляет выбранный набор элементов, определение селектора, определение контекста, работа с DOM-объектами, изменение нескольких элементов и создание цепочки вызовов методов. Обработка событий.

Тема 6. Работа с набором выбранных элементов.

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

Тема 7. DOM-манипуляции.

Создание новых элементов, создание элементов с использованием функции $(), создание новых элементов путем клонирования существующих, создание элементов средствами DOM API,
вставка дочерних элементов и элементов-потомков, вставка содержимого в начало элементов, вставка одних и тех же элементов в разные места документа, вставка элементов из объекта jQuery, вставка элементов с использованием функции, вставка родительских элементов и элементов-предков, обертывание набора элементов. Обертывание содержимого элементов, обертывание элементов с использованием функции, вставка сестринских элементов, вставка сестринских элементов из объекта jQuery, вставка сестринских элементов с использованием функции, замена элементов, замена элементов с использованием функции. Удаление элементов, удаление элементов с сохранением данных, очистка элементов. Метод unwrap().

Тема 8. Манипуляции элементами.

Работа с атрибутами и свойствами, установка значений атрибутов, установка нескольких атрибутов, динамическая установка значений атрибутов, удаление атрибутов, работа со свойствами, работа с классами, добавление и удаление классов с помощью функции, переключение отдельного класса, переключение одновременно нескольких классов, переключение всех классов, одностороннее переключение классов, динамическое переключение классов. Pa6oтa c CSS, установка одновременно нескольких свойств CSS, установка относительных значений, установка свойств с помощью функции, использование специализированных методов для работы со свойствами CSS. Работа с содержимым элементов, изменение содержимого элементов, изменение содержимого элементов с помощью функции, работа с элементами формы, изменение значений элементов формы, изменение значений элементов формы с помощью функции, связывание данных с элементами, работа с атрибутами данных HTML5.

Цукерберг рекомендует:  Usability - Работа для Дизайнера

Тема 9. Работа с событиями.

Обработка событий, регистрация функции для обработки нескольких типов событий, передача данных обработчику событий, отмена поведения браузера по умолчанию, удаление обработчиков событий, установка разового обработчика событий. Установка обработчиков событий с помощью метода live(). Управление распространением “живьк” событий по дереву узлов DOM, вызов обработчиков событий вручную, использование объекта Event, использование метода triggerHandler(). Использование прямых методов для работы с событиями, прямые методы для работы с событиями документа, использование прямых методов для работы с событиями браузера, использование прямых методов для работы с событиями мыши,
использование прямых методов для работы с событиями формы, использование прямых методов для работы с событиями клавиатуры.

Тема 10. Использование эффектов jQuery.

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

Тема 11. Использование шаблонов данных.

Для чего нужны шаблоны. Настройка библиотеки jQuery Templates, первый пример шаблона данных. Определение данных, определение шаблона, применение шаблона, вычисление выражений, использование переменных шаблона, использование переменной $data, использование функции $() внутри шаблона, использование переменной $item, использование вложенных шаблонов, использование вложенных шаблонов с массивами, использование условных шаблонов, управление обработкой массивов, поэлементная обработка результата вычисления выражения, отключение HTML-кодирования, манипулирование шаблонами из обработчиков событий, изменение данных, используемых шаблоном.

Тема 12. Работа с формами.

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

Тема 14. Использование AJAX.

Использование прямых методов Ajax, выполнение GET-запросов Ajax, выполнение POST-запросов Ajax, указание ожидаемого типа данных, коварная ловушка при работе с Ajax,
использование вспомогательных методов для работы с конкретными типами данных, получение HTML-фрагментов, получение и выполнение сценариев, получение данных в формате JSON,
использование подключаемого модуля Ajax Forms. Создание простого Ajax-3anpoca средствами низкоуровневого API. Задание URL-адреса запроса, создание POST-запроса,
работа с событиями Ajax, обработка успешных запросов, обработка ошибок, обработка завершенных запросов, настройка параметров запросов перед их отправкой. Задание нескольких обработчиков событий, настройка контекста для событий, использование глобальных событий Ajax, управление глобальными событиями, настройка базовых параметров А)ах-запросов,
задание тайм-аутов и заголовков, отправка данных в формате JSON на сервер, использование дополнительных конфигурационных параметров, создание синхронных запросов,
игнорирование данных, оставшихся неизменными, обработка кода ответа, предварительная очистка ответных данных, управление преобразованием данных, настройка и фильтрация Аjах-запросов, определение параметров, используемых по умолчанию. Фильтрация запросов.

Тема 15. Расширение jQuery с помощью собственных модулей.

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

Тема 16. Замечательные, мощные и практичные расширения.

Form Plugin. Получение значений элементов формы. Очистка и сброс значений в элементах формы. Отправка формы с применением технологии AJAX. Выгрузка файлов. Dimensions Plugin. Улучшенные методы width и height. Определение размеров прокручиваемых областей, смещение и позиция. LiveQuery Plugin. Упреждающая установка обработчиков событий. Определение обработчиков событий начала и конца периода соответствия. Принудительный запуск обработчиков Live Query. Введение в UI Plugin. Взаимодействие с мышью, визуальные компоненты и эффекты.

Создание AJAX запросов в jQuery

С помощью JavaScript Вы можете создавать асинхронные запросы и отправлять их на сервер.

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

Техника использования асинхронных запросов называется AJAXAsynchronous JavaScript And XML (Асинхронный JavaScript и XML).

Создание AJAX запросов на «чистом» JavaScript имеет несколько недостатков:

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

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

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

url адрес файла, который будет запрошен у сервера с помощью AJAX.

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

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

Теперь приведем пример запроса, который пересылает данные.

В примере ниже мы пересылаем скрипту add.php переменную x со значением 4 и переменную y со значением 5 скрипт в свою очередь принимает эти переменные, производит их сложение и отправляет результат обратно.

Сопровождающие функции

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

Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса.

Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет).

Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно.

Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой.

Методы ajaxStart и ajaxStop используются для сопровождения группы AJAX запросов.

Метод ajaxStart выполняет переданный в него код при отправлении первого запроса из группы.

Метод ajaxStop выполняет переданный в него код при завершении последнего запроса из группы.

Низкоуровневые AJAX запросы

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

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

Синтаксис высокоуровневого AJAX запроса:

Синтаксис аналогичного низкоуровневого AJAX запроса:

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

Скачать книгу Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS)

Программирование, Изучение компьютерных программ. Photoshop. Web. >> Скачать книгу Информация о фильме:
Название: Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY
Автор: Станислав Бойко
Год издания: 2011
Продолжительность: 6 часов 5 минут
Язык: русский
Формат: MP4
Размер: 900 МБ (в распакованном виде)
Архив разбит на 2 части по 500 Мб

Изучив курс «Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY» Вы сможете создавать скрипты, обрабатывать формы и отправлять данные без перезагрузки странички.

Содержание:
Урок 1- Введение
Урок 2- Интерактивная валидация [1]
Урок 3- Интерактивная валидация [2]
Урок 4- Интерактивная валидация [3]
Урок 5- Технология drag-and-drop[1]
Урок 6- Технология drag-and-drop[2]
Урок 7- Разбор корзины онлайн покупок
Урок 8- Работа с JQuery
Урок 9- Работа с AJAX

Ссылки для ознакомления:

Другие новости, похожие на книгу Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS):

автор: gritan Комментарии (0)

Вы можете разместить ссылку на книгу Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS) на своем сайте, блоге, любимом форуме или просто поделиться ей с друзьями:

HTML ссылка на книгу Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS):

Ссылка для форума книга Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS):

Ссылка на книгу Бойко С. — Создание интерактивных WEB-приложений с помощью PHP+AJAX+JQUERY (2011г., RUS):

Помощь по использованию электронной библиотеки книг:

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

ДОКУМЕНТАЛЬНОЕ ВИДЕО
( BBC. Discovery
National Geographic
Познавательные телепередачи )

Школа программирования | Javascript Интерактивные веб-приложения

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

  • Курс охватывает основы создания интерактивных веб-страниц с помощью языка JavaScript и объектно-ориентированному программированию.
  • Основной упор в курсе сделан на практических заданиях, что позволяет лучше усвоить материал и закрепить полученные знания.
  • Вы получите навыки использования современной технологии AJAX, которые позволят вывести Ваши веб-приложения на принципиально новый уровень интерактивности, соизмеримый с лучшими представителями современных интернет-сервисов.
  • Использование фреймворка JQuery и JQuery UI позволит легко и элегантно организовать логику работы веб-приложений любой сложности на стороне клиента.
  • Вы также научитесь основным средствам коммуникации в HTML 5 с использованием новых технологий Web-sockets, Server-sent events и Web-workers.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Ajax и PHP: Разработка динамических веб-приложений

  • AJAX и будущее веб-приложений
  • Клиентские технологии на основе JavaScript
  • Технологии, применяемые на стороне сервера: РНР и MySQL
  • Верификация заполнения форм в AJAX
  • Чат AJAX
  • Подсказки и функция автодополнения в AJAX
  • Построение диаграмм в реальном времени средствами SVG и AJAX
  • Таблицы в AJAX
  • Чтение лент новостей в AJAX
  • Технология drag-and-drop в AJAX
  • AJAX и будущее веб-приложений
    • Предоставление функциональности через Интернет
    • Разработка веб-сайтов до 1990 года
    • Что такое AJAX
    • Создание простого приложения на основе AJAX и РНР
    • Подведение итогов
  • Клиентские технологии на основе JavaScript
    • JavaScript и объектная модель документа (DOM)
    • События в JavaScript и DOM
    • И еще о DOM
    • JavaScript, DOM и CSS
    • Использование объекта XMLHttpRequest
    • Работа со структурой XML
    • Подведение итогов
  • Технологии, применяемые на стороне сервера: РНР и MySQL
    • РНР и DOM
    • Передача параметров и обработка ошибок в РНР
    • Соединение с удаленным сервером и безопасность сценариев JavaScript
    • Доверенный сценарий на стороне сервера
    • Основные принципы выполнения повторяющихся асинхронных запросов
    • Работа с MySQL
    • Технология обертывания и разделения функциональности
    • Подведение итогов
  • Верификация заполнения форм в AJAX
    • Реализация проверки правильности в AJAX
    • Подведение итогов
  • Чат AJAX
    • Введение в технологию прямого общения по сети
    • Реализация чата на основе технологии AJAX
    • Подведение итогов
  • Подсказки и функция автодополнения в AJAX
    • Введение в подсказки и функцию автодополнения на базе AJAX
    • Реализация подсказок и функции автодополнения средствами AJAX
    • Подведение итогов
  • Построение диаграмм в реальном времени средствами SVG и AJAX
    • Реализация построения диаграмм в реальном времени
    • Подведение итогов
  • Таблицы в AJAX
    • Реализация таблиц данных на стороне клиента средствами AJAX и XSLT
    • Подведение итогов
  • Чтение лент новостей в AJAX
    • Работаем с RSS
    • Структура документа RSS
    • Реализация чтения лент RSS с помощью технологии AJAX
    • Подведение итогов
  • Технология drag-and-drop в AJAX
    • Применение механизма перетаскивания во Всемирной паутине
    • Создание приложения с поддержкой механизма перетаскивания
    • Подведение итогов
    • А. Подготовка рабочего окружения

Мне книга очень понравилась, очень доходчива написана, кто не знает что такое аякс и пишет на пхп, советую.

Технология AJAX

Введение в AJAX

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

Первоначально возможность асинхронного взаимодействия с сервером была использована в виде объекта ActiveX в компании Microsoft. В последствии идея асинхронного взаимодействия была подхвачена и другими компаниями. И в настоящее время функционал асинхронных запросов в браузерах доступен веб-разработчикам через объект XMLHttpRequest.

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

Итак, прежде всего для работы с AJAX нам нужен веб-сервер. Это может быть Node.js, IIS, Apache, nginx. В дальнейшем я буду использовать веб-сервер Apache.

Создадим веб-страничку, где будет использоваться XMLHttpRequest:

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

Все основное действие у нас происходит в функции ajaxload. Во-первых, мы создаем объект XMLHttpRequest: var xhr=new XMLHttpRequest(); .

Через этот объект мы будем отправлять запросы. При получении ответа будет срабатывать событие onreadystatechange. И для обработки данного события мы присваиваем свойству xhr.onreadystatechange функцию обработки ответа.

В функции обработки мы, во-первых, смотрим на готовность ответа через свойство readyState (состояние this.readyState==4 означает, что запрос завершен). Далее мы проверяем статусный код ответа: если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно.

И затем мы передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText .

В строке xhr.open(‘GET’, ‘ajax.php’); мы устанавливаем метод запроса и ресурс, к которому будет идти запрос.

Ну и последней строчкой xhr.send() отправляем запрос. В итоге мы написали очень много кода, чтобы выполнить простой запрос.

Пусть у нас на сервере находится обработчик запросов на языке php. Я сделаю его предельно простым. Он будет просто передавать в ответ разметку html:

Теперь по нажатию по кнопке будет происходить ajax-запрос, результаты которого будут загружаться на страницу:

Теперь перепишем код страницы с использованием jQuery:

Таким образом, код становится чище и проще за счет использования библиотеки jQuery. Нам достаточно применить метод load , передав в качестве параметра адрес ресурса. И итоговый результат будет тот же самый.

5 примеров использования jQuery для AJAX

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

Для реализации технологии используется метод $.ajax или jQuery.ajax:

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

url – адрес запрашиваемой страницы;

properties – свойства запроса.

Полный список параметров приведен в документации jQuery.

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

success (функция) – данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) – пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) – возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) – тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) – адрес URL для запроса.