AJAX с помощью jQuery. Руководство для начинающих


Содержание

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

Цукерберг рекомендует:  Работа - верстщик 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().

PHP и AJAX для начинающих на простом примере

Что такое jQuery?

jQuery это библиотека javascript, цель которой «пиши меньше, делай больше». jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.

jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.

Что такое AJAX?

AJAX — это асинхронный (т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.) JavaScript и XML. Он используется для создания динамических и быстрых веб-страниц. AJAX позволяет нам обновлять часть веб-страницы без перезагрузки страницы целиком.

Что насчет jQuery и AJAX?

Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.

jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.

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

В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме. Давайте начнем. Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.

Шаг 1. Создайте файл school.php и вставьте в него следующий код:

В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .

Шаг 2: Создайте details.php и расположите в нем следующий код:

В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.

Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.

AJAX для новичков

Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.

Что такое AJAX?

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

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

Обобщим достоинства AJAX:

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

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

Обмен данными

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

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.

Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

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

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.

Методы объекта XMLHttpRequest

Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») — получить указаный заголовок.

open(«тип_запроса»,»URL»,»асинхронный»,» имя_пользователя»,» пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,»значение») — установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState — число, обозначающее статус объекта.

responseText — представление ответа сервера в виде обычного текста (строки).

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера.

statusText — текстовое представление состояния ответа от сервера.

Следует подробнее расммотреть свойство readyState:

  • 0 — Объект не инициализирован.
  • 1 — Объект загружает данные.
  • 2 — Объект загрузил свои данные.
  • 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
  • 4 — Объект полностью инициализирован; получен ответ от сервера.

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

Создание объекта XMLHttpRequest

Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

А для Internet Explorer`а используется следующее:

Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:

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

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

  • Проверка существования XMLHttpRequest.
  • Инициализация соединения с сервером.
  • Посылка запрса серверу.
  • Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

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

Именно таким образом происходит взаимодействие с сервером.

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

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

Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

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

JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.

Пример кода JSON:

При получении такого кода, производим следующее действие:

После выполнения данного кода вам будет доступен объект responsedata.

Работа с серверными языками программирования

Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.

По традиции, начнем с приветствия нашему замечательному миру:

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

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

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

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:

Ajax jQuery для начинающих + видеоурок

Приветствую вас, уважаемый читатель моего блога.

Данная статья посвящена изучению основ работы с Ajax посредством jQuery.

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

Видеоурок Ajax jQuery:

В первой статье курса по ООП в PHP я пояснял термины класс, метод и свойство. Для совершенствования понимания работы с объектами рекомендую просмотреть весь видеокурс по PHP и Kohana.

Работать с Ajax можно двумя способами:

  • Чистый Ajax (создание экземпляра класса, реализующего функции Ajax в выбранном браузере и манипуляция его методами и свойствами). Данный способ интересен с точки зрения полного контроля и понимания происходящего процесса. Однако он обладает существенным минусом — необходимо учитывать множество специфических фич различных браузеров. Избавиться от данного минуса позволяет второй способ.
  • Взаимодействие с Ajax-возможностями браузера посредством библиотеки jQuery. В этом случае соблюдение всех браузерных особенностей мы оставляем на откуп разработчикам jQuery. При этом программный код значительно упрощается.

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

Итак, наш выбор пал на библиотеку jQuery и ее видение Ajax.

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

Чуть-чуть теории Ajax

Ajax работает следующим образом:

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

Практика использования Ajax+jQuery

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

Листинг 1: PHP-скрипт, получающего из базы данных значения и передающего их ajax-запросу:

Пояснение к коду:

2-я строка — соединились с базой данных (пользователь: root, пароль: root).

4-я строка — в случае безуспешной попытки соединения прекратить выполнение скрипта.

Цукерберг рекомендует:  Php notice undefined offset - PHP Notice Undefined offset

6-я строка — выбираем базу данных test.

7-я строка — выбираем все из таблицы test_table базы данных test (визуально структура test_table представлена на рис. 1).

8-я строка — текущая строка выборки из базы данных возвращается в виде ассоциативного массива.

9-я строка — выводится перекодированный в формат json ассоциативный массив.

Структура таблицы test_table:

Рис. 1: Струтура таблицы test_table.

Все, что отправляется на вывод PHP-скрипта, будет передано ajax-запросу (Листинг 2), в том числе и содержимое базы данных, преобразованное в json в виде объекта с именем data. Для доступа к полям id и content таблицы базы данных необходимо обратиться к соответствующим полям объекта data: data.id и data.content

Листинг 2: Ajax jQuery-код определенной страницы (раздел head HTML-документа):

Пояснения к коду:

2-я строка — дожидаемся загрузки всего документа и лишь после этого выполняем код асинхронного запроса (пояснение необходимости ожидания загрузки документа см. в первом видеоуроке по jQuery).

4-я строка — способ отправки данных в файл с PHP-скриптом (POST или GET) (пока мы PHP-скрипту ничего отправлять не будем, но тип глобального массива отправки все равно укажем).

5-я строка — путь к файлу с PHP-скриптом (PHP-скрипт представлен в Листинге 1).

6-я строка — тип принимаемых от PHP-скрипта данных. Да-да, именно json.

7-я строка — если запрос к серверу успешно обработан (PHP-скрипт вернул данные), то метод success выполнит инструкции, расположенные в инициализируемой на лету функции. Обратите внимание, в качестве аргумента функции передается массив data, именно он будет содержать данные, полученные из PHP-скрипта (так уж устроен jQuery).

9-я строка — размещение значения поля >

10-я строка — в абзац с >
Рис. 2: Структура проекта.

Ajax-отправка данных PHP-скрипту

Постановка задачи: после нажатия на кнопку организовать отправку данных методом POST из поля ввода формы PHP-скрипту и получить асинхронный ответ.

Немного преобразуем наш HTML (jquery.html) — добавим поле ввода . Из него мы будем забирать значение для отправки PHP-скрипту.

Ajax-запрос будет запускаться после нажатия на вновь добавленную кнопку .

Листинг 3: раздел BODY HTML-документа

Листинг 4: PHP-скрипт, отвечающий на Ajax-запрос

Пояснения к коду листинга 4:

2-я строка — получение содержимого поля key глобального массива POST (переданного Ajax-запросом) в переменную $key.

10-я строка — к массиву $res добавляется поле key, в которое записывается значение переданного методом POST параметра.

11-я строка — сформированный массив, включая поле key, отправляется в Ajax-запрос.

Листинг 5: Ajax-запрос с отправкой данных методом POST:

Обратите внимание, теперь код Ajax-запроса спрятан внутри функции runajax(). Это приведет к тому, что Ajax-запрос будет обрабатываться только после вызова данной функции, а не сразу после загрузки документа, как это было в предыдущем примере.

Пояснение к коду листинга 5:

4-я строка — получение содержимого поля ввода с >

7-я строка — формируются данные для отправки PHP-скрипту. В глобальном массиве пост создается поле key со значением равным содержимому поля ввода >

13-я строка — сохраняем в переменную $temp содержимое полей data.content и data.key, разделенных пробелами.

14-я строка — содержимое переменной $temp выводится в абзац >

18-я строка — дожидаемся загрузки всего документа полностью.

19-я строка — демонстрируется интересный подход к обработке клика по кнопке >

Дело в том, что задачу можно решить установкой обработчика событий onClick кнопке: , но такой подход смешивает во едино JavaScript и HTML, что философски неправильно.

Отправка Ajax-формы при помощи jQuery Form Plugin

Постараемся решить задачу номер 2 более простым способом. Для этого существует дополнение jQuery Form Plugin.

Скачаем и подключим данное дополнение к нашему проекту:

Необходимо изменить HTML-код раздела BODY (добавить тег формы и кнопке ):

Листинг 6: Изменение jQuery-кода для применения jQuery Form Plugin

Пояснение к листингу 6:

4-я строка — под идентификатором , вместо этого выполняется Ajax-запрос к файлу PHP-скрипта, указанного в теге формы myForm.

Технология 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 , передав в качестве параметра адрес ресурса. И итоговый результат будет тот же самый.

Форум

Справочник

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

Введение в Ajax

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

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

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

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

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

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

Вот код кнопки в примере выше:

При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div ‘е под кнопкой:

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:


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

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote :

Поток выполнения, использованный vote, довольно типичен и выглядит так:

  1. Функция создает объект XmlHttpRequest
  2. назначает обработчик ответа сервера onreadystatechange
  3. открывает соединение open
  4. отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange )
  5. показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .

Смысл AJAX — в интеграции технологий

Технология AJAX использует комбинацию:

  • (X)HTML, CSS для подачи и стилизации информации
  • DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
  • XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт .
  • JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

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

Смысл AJAX — в интерактивности и быстром времени отклика.

Небольшие элементы управления

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

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

Например, дерево, узлы которого подгружаются по мере раскрытия.

Незаметные для пользователя действия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Непрерывная подзагрузка информации с сервера.

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

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

Пример. Google suggest.

Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

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

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
    • Для «программистской» скорости — каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
    • при нажатии на «удалить», обращения к серверу не происходит
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии — запросы идут чаще.

Пример. Gmail.

Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.

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

    Проверка ошибок ввода формы ДО сабмита

Результат: обширная популярность, высокий спрос на account’ы с момента открытия.

Синхронная модель VS Асинхронная модель

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

Условно говоря, мы действуем так:

  1. закидываем удочку
  2. ждем, когда клюнет
  3. клюнуло — включаем подтяжку спиннинга

При асинхронном подходе мы:

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

Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы — последовательный процесс.

В асинхронном варианте — мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.

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

Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом — в отдельной статье.

Синхронная и асинхронная модель в AJAX

Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.

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

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

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

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

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

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

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

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

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

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

Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.

Особенности асинхронной модели

  • Сложность в реализации
    • Недостаточные возможности браузера (javascript)
    • Асинхронная модель сложнее для отладки
  • Race conditions
    • Неопределена последовательность выполнения
    • Можно делать много одновременных задач («удочек»), но задача, начатая первой, может окончиться последней.
  • Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
    • Ошибок коммуникации — разрыв связи, и т.п.
    • Пользовательских ошибок — например, не хватило привилегий
  • Контроль целостности (bugproof)
    • Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
  • Интерактивность
  • Быстрый интерфейс

Плюсов всего два, зато какие! Овчинка стоит выделки.

Асинхронный drag’n’drop.

Иногда для асинхронных операций необходимо делать различные «финты ушами». Например, хочется сделать drag’n’drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.

Drag’n’drop — это «взял мышей объект — положил куда надо — готово». Но в асинхронной модели не может быть все прям сразу «готово».
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.

Надо как-то показать, что процесс пошел, но результат «ща будет..». А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.

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

Stale context, устаревший контекст

В примере с drag’n’drop также затронута проблема «stale context» — устаревшего контекста.

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

Как правило, для преодоления таких казусов используются следующие средства:

Политика редактирования

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

Локинг и/или версионный контроль

Локинг — блокирование редактируемых документов.

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

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

Автообновление контекста

Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.

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

Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс — новые письма.

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

Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+

Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?

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

Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!

А что Вы хотите научиться делать? Поконкретнее, если можно.

Интересует очевидное — считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title=’не знаю ответа’ . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера — выводить его в , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ :-D

в примере, который указан выше есть все ответы.
запрос отсылается на «/ajax_intro/vote.html»
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML

или Вы не об этом?

1. Содержимое файла «/ajax_intro/vote.html» ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.

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

2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.

3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.

По поводу источника — вы читаете оригинал статьи.

Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение «Ожидается ответ сервера»?

PS. Не спорю, что в Вашем варианте оно работает «без гвоздей». А у меня движок, в котором кое-как сваяли модуль поддержки Ajax.

Не заметил сразу прямую выдачу в div через innerHТМL — прошу прощения

Спасибо, все фукционирует

А например кнопку подгружаемую по условию можно сделать ?

// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо

«Вешаем на удило специальный детектор клева»
Я плачу Браво )))

все прекрасно понятно =)
только вот чего начать изучение?
допустим php . поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?

Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).

оч клево написано

Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза «Ожидаю ответа сервера. «. Это можно решить как-то?

Единственный вариант, который приходит в голову — send(null) вернуло закешированный ответ, который тут же обработался — и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.

Классно всё расписано . а где взять пример аякса для генерации дерева ?

Примеры дерева — в программе Visual DataFlex 16.1 — после установки и загрузки библиотеки AJAX Library 2.3 — есть примеры в директории Examples

Спасибо за статью. Но вот на мне тоже хотелось бы посмотреть на пример дерева. Ну или отпишите плиз коды функций по обавлению и удалению веток дерева.
Заранее спасибо

Классно написано, автору респект!

Хорошая статья мне понравилось и про ajax теперь все ясно стало

Зе бест!
Суть аякса я понял.
теперь думается — нужно разобраться с синтаксисом языка и попробовать сделать замену фрэймов.

Вопрос-уточнение! я нуб! Если я хочу скачать контент с конкретного сайта, используя свою html-форму (то есть ту, которая на моем компе), а не форму этого сайта, то это подпадает под кросс-доменный скриптинг? или это можно закрыть типовым XmlHttpRequest.

Спасибо за статью!
Отлично разжеванный материал, наконец-то мне стало все ясно с этим аяксом

Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2

как тогда строить req.send
?

В данном случае просто делаешь URL: /test.php?key1=var1&key2=var2

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP.

А не могли бы написать для примера с голосованием скрипт PHP? Я поняла, что отправка идет методом GET, а вот как это «ловить» на сервере…
Спасибо

Направлять запрос соответствующему скрипту и в нем все делать. Скажем, /ajax/vote.php

То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?

Убейся, что ты здесь вообще делаешь??

Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.

Присоединяюсь к предыдущему вопросу

Добавил в статью информацию, содержащую ответ на ваш вопрос.

У автора статьи есть чувство юмора)

Спасибо за статью. Все бы так писали. Надо ещё разок почитать. хочется влезть в детали.

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

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

XmlHttpRequest всегда приходит в UTF. Тут уж ничего не поделаешь — либо переходить на UTF-8, либо перегонять iconv .

В php.ini
default_character_set=cp1251
подобная строчка должна быть где-то в файле.

Все преимущества использования AJAX на лицо. Очень хорошо статья написана.

день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место —

А туда нужно ajax’oм подгрузить не просто текст, а несколько «виджетов» mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.

Передай вместо тек4ста ссылки на виджеты с параметрами

Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья

В чем суть Ajax? Вижу только конструкции явыскрипт и пиашпи!

Отличная статья! Спасибо автору

ajax все больше укрепляет свои позиции в реализации интерактивности сайта
Статья 5+

Скопировал ваш код с кнопкой «Голосовать», на страничку, которая у меня на винчестере. Запустил — надпись «ОК» в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?

Я изменил строчку адреса на такую:

Или что я не правильно делаю?

$en ? echo ‘privet’ : echo ‘paka’;

У меня вопрос. как изменить кодировку сообщения, приходящего с сервера.
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе «Сервер ответил: (тут куча непонятных иероглифов)»

p.s. все файлы сохранены в кодировке Windows-1251

Извиняюсь, так не получится.

Хотя, если посылать заголовок скриптом, то прекрасно работает

всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax
)
можно сделать кнопку Просмотр в диве через Ajax)

Sniper
внимательно вчитываемся ‘частые проблемы > кеширование’ на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности

там же, чуть ниже, можно посмотреть разбор кода

а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера. и тишина.

отвте как увидел позже есть))

Используйте запросы POST, потому что браузер их не кеширует и они более защищены!

Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax — это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ — для профессионалов рыбной ловли :-)

почему не вылетает alert .

Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??

Вы пишете «Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу»

Можно поподробнее, что значит «держит постоянное соединение»? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax — это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?

Не понял юмора насчет проблем со «старым контентом». Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?

Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.

Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?

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

Как решить проблему с использованием серверных компонент (на сервере крутится ASP) — примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).

Буду ОЧЕНЬ признателен, если кто подскажет!

Спасибо большое. Перелистав почти десяток «учебников» только на этой статье наконец «въехал» в технологию.

Ам.. не понятно откуда берутся вот эти цифры?

if (req.readyState == 4)
.
if(req.status == 200)

пардон, вопрос снят )) У кого будут такие же глупые вопросы, смотреть http://xmlhttprequest.ru/

Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name=»test», то в скрипте бы я обратился $_POST[«test»]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы http://xmlhttprequest.ru/, там тоже ничего не сказано

Я тоже был на http://xmlhttprequest.ru/
читаем внимательнее:

send()
Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

// Пример с POST
.
var params = ‘name=’ + encodeURIComponent(name) + ‘&surname=’ + encodeURIComponent(surname)
xmlhttp.open(«POST», ‘script.php’, true)
.
xmlhttp.send(params)

Вопрос только в том остался, что когда я в script.php
выполняю
echo $_POST[«name»]
выводится пустая строка .

установи http-заголовок вот так вот: req.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?

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

у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом.
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp .

Не подскажите,как мне при помощи ajax сделать, чтобы при нажатии ссылки в меню слева(меню новостей например), новость отображалась в главной таблице

Отличная статья! Спасибо!

Автор, большое спасибо за чудесную статью! Всё очень толково разьяснено. Респект

> Пример. Google suggest.
DIV заполняется ответом сервера

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

Как перехватывать нажатия клавиш? В строке поиска Яндекса так же можно перемещаться по выданным возможным вариантам с помощью клавиш курсора. Но я никак не могу разобраться как это реализовано? Подскажите в каком направлении копать.

Вот у меня такой вопос.

Я все сделал, работает супер! но есть одна фигня. Текст с сервера не выводиться. в вместо него одно слово: undefined.

В сервере содержиться:

Не подскажет, где я ошибся?

Ошибся почти в каждом предложении:

«не выводиться»;
«содержиться».

Может сначала в школу, а потом текст с сервера выводить?

помоему респонс текст должен идти со стартом, а не с инком

Отличная статья!
«Смысл AJAX — в интерактивности и быстром времени отклика.»
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?

Думаю скомпилированные приложения все равно будут работать быстрее (Flash)

Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: ‘null’ — есть null или не является объектом
Строка: 35
Символ: 5
Код: 0

Вот тебе по легче,тоже создаём XMLHttpRequest

А вообще статья чёткая,понравилась 5+

Ramzil_Nixon, я статью еще не доконца прочел, пока разбираюсь. Мне показалось что правильней назначать обработчик перед отправкой запроса:

у Вас:

start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;
start.onreadystatechange = function() .

Мне кажется, лучше так:
start.onreadystatechange = function() .
start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;

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

срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо

Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать «для начинающих». После прочтения учебника по JS этот материал кажется слишком сжатым и «не измельченным», непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой — большая HTML-форма из 50 разных элементов (поля, списки, флажки. ) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным

а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь «5», сервер возвращает «Вы выбрали 5» и т.д.

Здравствуйте, а как ajax применять в ASP.NET, не MVC? Что служит обработчиком, вместо страница.php?

Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы — если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память. Что происходит с объектом XMLHttpRequest после того как он отработал.
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.

jQuery — Использование сокращённых AJAX методов (с примерами)

В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery — метод load

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

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

1. Вставить содержимое файла asidenav.tpl в блок c после загрузки DOM страницы:

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Контент файла demo.html :

3. Загрузить в элемент, имеющий ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

На сервере (файл content.php ):

4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.

На сервере (файл content.php ):

jQuery — функция get

Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.

Синтаксис функции get :

По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

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

В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

Примеры использования функции get

1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl :

2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

Содержимое фала random-image.php :

3. Пример, в котором реализуем AJAX подгрузку контента.

Данные для загрузки представим на сервере в виде массива $contents . Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset . Обработку полученных с сервера данных будем осуществлять посредством Promise метода done .

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

jQuery — функция getJSON

Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.

Функция getJSON — идентична get , у которой в качестве значения параметра dataType установлено значение «json».

Синтаксис функции getJSON :

Пример c использованием функции getJSON

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

Содержимое файла pages.json :

jQuery — функция getScript

Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.

Синтаксис функции getScript :

Пример c использованием функции getScript

После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

Содержимое скрипта script.js :

jQuery — функция post

Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.

Синтаксис функции post :

Применение post ничем не отличается от использования jQuery-функции get . Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get — в составе URL (метод GET).

Примеры c использованием функции post

1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post . На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error . На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success , будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».

Содержимое файла guess-color.php :

2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post ). На стороне сервера сохранять имя пользователя будем посредством ссесий.

Создание 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-дизайн Технология AJAXизучаем Ajax на примере

Основы HTML
Структура документов
Создание web-страницы
Задаем стили текста
Вставляем картинку
Гиперссылки
Таблицы
Списки
Теги HTML
Специальные символы
Основы CSS
Свойства CSS
Технология Ajax
Основы AJAX
Изучаем AJAX на примере
SEO
SEO учебники
ТИЦ и как его повысить
Заработок в интернете
Заработок в интернете для новичков
Заработок в соц. сетях с помощью Prospero
GetGoodLinks – заработок на продаже ссылок.
Реклама

Изучаем AJAX на примерах.

AJAX расшифровывается как Asynchronous Javascript And XML, что означает Асинхронный JavaScript и XML. AJAX позволяет обновлять данные HTML-страницы без полной её перезагрузки. Кроме этого технология позволяет работать с интернет-страницами асинхронно. То есть пока JavaScript взаимодействует с Web-сервером, пользователь может продолжать работать с web-страницей.

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

Для рассмотрения принципов работы технологии AJAX, реализуем на своем сайте механизм подобный Google Suggest. Допустим, у нас есть сайт туроператора. На сайте есть поле поиска предложений по названию страны. Добавим к этому полю раскрывающийся список с автозаполнением по введенным буквам. Приступим к решению этой задачи. Сразу оговорюсь, что для реализации этой задачи необходимо знание HTML и немного JavaScript(знатоком быть не обязательно). В качестве серверного языка будет использован php.

Для начала создадим форму поиска. Для этого на вашем web-сервере создайте файл index.html, откройте его при помощи любого текстового редактора и введите следующий html-код.

Поиск предложений.
http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ >

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