Знакомство с Ajax. Основы Ajax


Содержание материала:

Знакомство с Ajax

В феврале 2005 года появился новый модный термин – Ajax. Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript И XML) и технологией в строгом смысле слова не является. Это просто аббревиатура, обозначающая подход к созданию Web-приложений с помощью следующих технологий:

  • стандартизированное представление силами XHTML и CSS;
  • динамическое отображение и взаимодействие с пользователем с помощью DOM;
  • обмен и обработка данных в виде XML и XSLT;
  • JavaScript;
  • асинхронные запросы с помощью объекта XMLHttpRequest.

Если в стандартном Web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник – движок Ajax. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер.

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

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

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

Теоретически Ajax-приложения можно было создавать еще лет десять назад. Все необходимые составляющие к тому времени уже были. Классические и, пожалуй, лучшие примеры использования Ajax – проекты Google Maps и Gmail — и это при том, что программисты Google во время работы над ними ни о каком Ajax и знать не знали. У Gmail с недавнего времени есть обычный HTML-интерфейс для совместимости со старыми браузерами, и любой желающий может убедиться в том, что работает он в несколько раз медленнее, чем классический интерфейс Gmail.

С Ajax проблема заключается в том, что писать такие приложения – задача трудоемкая. Нужно написать и отладить на JavaScript движок из десяти или двадцати тысяч строк кода плюс реализовать серверную часть. Причем копировать удачные решения практически не у кого: по большому счету, несколькими действительно масштабными Ajax-проектами может похвастаться только Google, но у них проекты довольно специфические — Google Suggest (сервис, подсказывающий наиболее популярные запросы), Gmail и Google Maps. Наиболее основательной переработке программисты Google подвергли почтовый интерфейс, тогда как Google Suggest и Google Maps удивляют не столько новизной подхода, сколько качеством реализации.

Изучаем Java

Обучающие курсы:

Основы ajax

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

Изучаем обмен данными с помощью тега iframe

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

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

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

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

Для создания фрейма используется тег iframe с нулевой высотой и шириной. Более того, обычно фрейм полностью скрывают от глаз пользователей, присваивая значение попе атрибуту display. Название этого фрейма указывается в параметре target тега form. После отправки формы скрипт на сервере должен вернуть фрагмент кода на языке JavaScript, который произведет изменения в текущей веб-странице.

Рассмотрим все на примере. Создадим документ с формой, который будет обмениваться данными с файлом ajах. php (листинг 10.2), расположенным на сервере.

Основы AJAX

Ajax.

Asynchronous Javascript and XML — асинхронный JavaScript и XML.

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

Ajax – это способ взаимодействия с HTML, JavaScript, CSS.

Запросы AJAX осуществляются с помощью объекта XMLHttpRequest, его методов и свойств.

Пример создания объекта: var per = new XMLHttpRequest();

Для работы некоторых примеров должна быть скачана библиотека jQuery.

У объекта XMLHttpRequest есть нужные нам для работы свойства:

onreadystatechange – присваиваем функцию, код которой исполнится при получении ответа от сервера.

readyState — Узнает состояние готовности сервера.

responseText — Ответ сервера в виде строки.

responseXML — Ответ сервера в виде XML.

status — код ответа сервера.

Запросы GET и POST в Ajax.

Запрос типа GET в Ajax можно отправить с помощью двух методов объекта XMLHttpRequest.

open(‘GET’, file, true) – Создаем Ajax запрос типа GET, указываем путь к файлу, true – указывает сделать асинхронный запрос.

send(‘data’) – передает запрос на сервер, data используется для POST запросов.

В POST обязателен заголовок Content-Type, содержащий кодировку — setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

Пособие написано специально для snakeproject.ru, критику, замечания и предложения Вы можете оставить через страничку «контакты» на сайте.

Давайте познакомимся с примерами:

  1. GETзапрос

Без передачи данных файлу.(В файле ‘test.txt‘ напишите несколько любых строк)

AJAX основы

Пробежимся по статьям об AJAX на сайте dnzl.ru
(некоторые статьи морально устарели и содержат неточности перевода):

    Парсим JSON: «Преобразуем строку формата JSON в объект и наоборот»
    http://dnzl.ru/view_post.php? >

Другие статьи:

  1. Динамическая (ajax) загрузка контента с jcarousel
    (http://dnzl.ru/view_post.php? >http://dnzl.ru/view_post.php? >http://dnzl.ru/view_post.php? >Получаем адрес студента при помощи метода jQuery $.ajax , по порядковому номеру студента и его имени.

Заголовки ответа PHP:

jQuery load

jQuery or Javascript

Загружаем только нужные элементы

Загружаем только нужные элементы. Для этого после url делаем пробел и перечисляем через запятую необходимые элементы (селекторы): http://dnzlru/demo/ajax/jquery_load_selector.html

jQuery or Javascript

$.load, получаем ответ от сервера сформированный на основе отправленных ему данных

jQuery or Javascript

Посылаем данные на сервер и вставляем ответ в нужный нам элемент

jQuery or Javascript

Метод jQuery $.getJSON

Загружаем JSON данные при помощи метода jQuery $.getJSON

jQuery or Javascript

Загружаем JSON данные при помощи метода jQuery $.getJSON с другого домена

jQuery or Javascript

Метод jQuery $.post

Отправляем данные на сервер; ответ вставляем в определенный элемент.

jQuery or Javascript

Методы jQuery $.ajax() и $.ajaxSetup()

  1. Отправляем данные на сервер
  2. Выполняем действия перед отправкой на сервер
  3. Контролируем max время ожидания ответа
  4. В случае успеха выполняем какое-либо действие

jQuery or Javascript

Ajax-запросы идентичны, но различие в отправляемых данных

Настройки используемые в $.ajaxSetup() будут использоваться для всех ajax-запросов страницы.

jQuery or Javascript

Локальные и глобальные события при AJAX-запросе

new Date().getTime() — время прошедшее с 1 января 1970 года, в мс.

jQuery or Javascript

Формируем запрос руками

GET и POST запросы

Чтоб избежать неожиданных запросов к серверу, вам следует вызывать encodeURIComponent для любых вводимых пользователем параметров, используемых как часть URI.
developer.mozilla.org: encodeURIComponent

Кросс-доменные запросы

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

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

Если сервер разрешает кросс-доменный запрос с этого домена – он должен добавить к ответу заголовок Access-Control-Allow-Origin , содержащий домен запроса (в данном случае « blalala.com ») или звёздочку * .

Вероятный ответ сервера:

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

По умолчанию браузер не передаёт с запросом куки и авторизующие заголовки.

Полезные статьи

При запросе с withCredentials сервер должен вернуть уже не один, а два заголовка:

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″ >

Технология AJAX, примеры скриптов

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

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

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

  1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
  2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
  3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

За интерактивностью будущее!

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

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

Концепция технологии AJAX

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

Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.

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

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

  1. Вводятся в браузер средствами пользовательского интерфейса;
  2. Отправляются на сервер;
  3. Обрабатываются на сервере, возможно, заносятся в БД;
  4. В это время браузер ожидает возвращение ответа;
  5. Пока браузер ждет, он не прекращает работу пользователя;
  6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

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

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

  1. XML(eXtensible Markup Language) — расширяемый язык разметки;
  2. JSON(JavaScript Object Notation) —текстовый формат основанный на JavaScript.

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

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

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

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

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

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

Пример структуры в формате XML

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

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции («XML Parser Functions») для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

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

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

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

AJAX пример №1 (Начало работы)

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

Исходный код HTML документа:

script type = «text/javascript» >
function startAjax ( url ) <
var request ;
if ( window. XMLHttpRequest ) <
request = new XMLHttpRequest ( ) ;
> else if ( window. ActiveXObject ) <
request = new ActiveXObject ( «Microsoft.XMLHTTP» ) ;
> else <
return ;
>

request. onreadystatechange = function ( ) <
switch ( request. readyState ) <
case 1 : print_console ( «
1: Подготовка к отправке. » ) ; break
case 2 : print_console ( «
2: Отправлен. » ) ; break
case 3 : print_console ( «
3: Идет обмен..» ) ; break
case 4 : <
if ( request. status == 200 ) <
print_console ( «
4: Обмен завершен.» ) ;
document. getElementById ( «printResult» ) . innerHTML = «» + request. responseText + «» ;
> else if ( request. status == 404 ) <
alert ( «Ошибка: запрашиваемый скрипт не найден!» ) ;
>
else alert ( «Ошибка: сервер вернул статус: » + request. status ) ;

break
>
>
>
request. open ( ‘GET’ , url , true ) ;
request. send ( » ) ;
>
function print_console ( text ) <
document. getElementById ( «console» ) . innerHTML += text ;
>
script >

В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

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

  • Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
  • Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
  • Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправки\получения данных может принимать четыре состояния (1подготовка к отправке, 2отправлен, 3идет обмен, 4получен ответ.)
  • В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200«OK» или 404«Not Found».
  • Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

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

AJAX пример №2 — отправка POST запроса на сервер

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

  • GET — передаёт пользовательских данные заданному ресурсу по URI.
  • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
  • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
  • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
  • DELETE — Удаляет указанный ресурс.
  • PUT — загружает содержимого запроса на указанный в запросе URI.

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

  • open – открывает соединение с сервером с указанием метода передачи данных.
  • setRequestHeader — устанавливает заголовок запроса.
  • send — отправляет запрос.

Откройте код примера №1 и замените в нем строки:

JavaScript — Синхронный AJAX запрос (XMLHttpRequest)

Урок, в котором на простых примерах разберем, как работать с технологией AJAX, а именно познакомимся с тем как с помощью объекта XMLHttpRequest (сокращённо XHR) создавать синхронные HTTP-запросы к серверу и получать от него ответы.

Основы AJAX

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

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

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

  1. Получение некоторой информации (данных) со страницы или формы (при необходимости)
  2. Отправление запрос на веб-сервер
  3. Получение ответа с веб-сервера
  4. Отображение результатов на странице, если ответ был успешен.

Основы создания синхронных AJAX запросов

Пример 1. Выполнение синхронного AJAX запроса

Рассмотрим пример выполнения синхронного AJAX запроса к серверу с помощью метода XMLHttpRequest. В данном примере запросим данные, находящиеся в файле data.txt на сервере и отобразим их на странице в элементе span .

Пример будет состоять из файлов index.html , script.js и data.txt , которые для простоты можно расположить на сервере в одном каталоге.

Начнём разработку с создания HTML-страницы, к которой подключим файл script.js . Этот файл, а точнее его содержимое будет выполнять всю основную работу. Но перед тем как перейти к его разработке, создадим на станице элементы div и span . Элемент div будет играть роль кнопки, при нажатии на которую будет выполняться AJAX запрос. А элемент span будет играть роль контейнера, который будет содержать ответ, пришедший с сервера.

Кроме этого добавим на страницу ещё стили CSS, чтобы немного её оформить. В итоге у нас должен получиться следующий HTML код:

После этого откроем файл data.txt и введём в него текст «Привет, мир!». Сохраним и закроем файл.

И наконец, перейдём к созданию файла script.js . Содержимое этого файла будет выполнять все основные действия, т.е. отправлять ajax запрос на сервер, принимать от сервера ответ и обновлять содержимое страницы (помещать ответ в элемент span ).

Рассмотрим создание данного файла поэтапно:

Получим элемент на событие click которого необходимо подписаться.

Подпишемся на событие click элемента с помощью метода addEventListener .

Создадим переменную request , которая будет содержать экземпляр объекта XMLHttpRequest .

Настроим HTTP-запрос к серверу с помощью метода open. Данный метод имеет 3 основных параметра. 1 параметр отвечает за метод, с помощью которого мы отправляем данные на сервер. Различают два основных метода: GET и POST. Метод GET передаёт данные в составе URL после знака ? (для отделения данных используется амперсанд & ).

Метод POST передаёт данные в теле HTTP-запроса.

2 параметр отвечает за адрес (URL), по которому посылается запрос. А 3 параметр определяет тип запроса: синхронный ( false ) или асинхронный ( true ).

Отправляем ajax запрос на сервер.

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

status (статус запроса). Если значение свойства равно 200, то запрос выполнен успешно. Если в status хранится другое число, значит, запрос завершился с ошибкой (например, 404, 500 и т.д.)

responseText – содержит текст ответа, который пришёл от сервера. Т.е. данное свойство всегда содержит то, что нам нужно, если статус ответа был 200.

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

Просмотр объекта XMLHttpRequest в консоли браузера

Получаем результат и отображаем его на странице.

Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHP

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

В данном примере страница будет состоять из 3 кнопок. Первая кнопка будет иметь текст 1, вторая кнопка текст 2 и третья кнопка текст 3. При нажатии на любую из кнопок будет выполняться синхронный запрос на сервер. В качестве метода передачи запроса будем использовать GET. А адрес, по которому будем посылать запрос и параметры ajax.php . Получать данные отправленные клиентом на сервере будем с помощью GET-переменной HTTP ($_GET). После этого полученные данные будем обрабатывать на сервере, и возвращать клиенту ответ (строку).

Пример 3. Передача синхронного AJAX запроса на сервер с помощью метода POST

В этом примере данные на сервер будем передавать с помощью метода POST (в теле HTTP-запроса). В методе POST данные (параметры) передаются не в составе URL (метод GET), а в теле, которое мы посылаем серверу через send() . Т.е. для того чтобы передать данные с помощью POST, мы их должны поместить в качестве параметра методу send() . Кроме того, при отправке данных с помощью POST необходимо также указать заголовок Content-Type, содержащий кодировку с помощью которой мы зашифровали данные. Это необходимо сделать для того чтобы сервер знал как обработать (расшифровать), пришедшие к нему данные (запрос).

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

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

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

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

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

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

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

Объект jqXHR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AJAX – это асихронный JavaScript и XML и он не является языком программирования.

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

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

Что делает браузер?

  • отображает веб-страницу
  • выполняет JavaScript код
  • содержит объект XMLHttpRequest

Какая роль у JavaScript?

  • инициирует обращение к серверу
  • обрабатывает ответ
  • добавляет новые данные на страницу

Чем занимается веб-сервер?

  • принимает запрос от браузера
  • отправляет ему информацию обратно

Как на практике происходит AJAX запрос?

1) Создается объект XMLHttpRequest

Благодаря этому объекту мы посылаем запрос и получаем ответ.

var xhttp = new XMLHttpRequest();

2) Пользователь отправляет запрос на сервер

С помощью методов open() и send(), объекта XMLHttpRequest, можно отправлять AJAX запросы. В методе open() первым параметром, мы должны указать способ отправки. Вторым параметром, указывается URL, куда будет отправлен запрос.

Непосредственно посылает на сервер запрос – метод send(). При GET запросе тело запроса остается пустым.

3) Сервер обрабатывает запрос

В большинстве случаев, сервер обрабатывает и возвращает запрос на языке PHP.

4) Принятие и обработка ответа

С помощью свойства readyState, можно узнать состояние запроса. При изменении состояния, срабатывает событие onreadystatechange.

Применим, полученные знания на практике.

Пример

Вместо текста в параграфе, загрузить другой текст, в фоновом режиме.

Позвольте AJAX изменить этот текст.

Вешаем функцию loadTxt(), на кнопку, при нажатии на которую произойдет замена текста.

Будет вызван обработчик события onreadystatechange, если состояние готовности запроса readyState равно 4 (прием ответа завершен) и код статуса HTTP, возвращенный сервером соответствует 200. Сервер возвращает новые данные в responseText, которые будут выведены внутри параграфа с идентификатором out. Open() настраивает запрос, send() открывает соединение и отправляет запрос на сервер. Новые данные подгружаются из текстового или XML файла.

Заключение

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

AJAX технологии на примере социальных сетей

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

JavaScript по протоколу HTTP посылает запрос на сервер. На сервере PHP формирует ответ с новыми постами, отдает их на сторону клиента и браузер отображает их на странице, используя HTML и CSS. Не существует отдельной технологии AJAX, это просто совместная работа нескольких технологий, где ведущая роль отведена JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Топ-пост этого месяца:  Как создать скриптовое уведомление OpenCart с помощью событий или OCMOD
    Добавить комментарий