Что такое ajax запросы
AJAX для новичков
Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.
Что такое AJAX?
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обмен данными
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект 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 — текстовое представление состояния ответа от сервера.
Создание объекта XMLHttpRequest
Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
var Request = new ActiveXObject(«Microsoft.XMLHTTP»);
var Request = new ActiveXObject(«Msxml2.XMLHTTP»);
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверу
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
Именно таким образом происходит взаимодействие с сервером.
Обработка ответа
В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Варианты ответа от сервера
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
При получении такого кода, производим следующее действие:
var responsedata = eval(«(» + Request.responseText + «)»)
После выполнения данного кода вам будет доступен объект responsedata.
Работа с серверными языками программирования
Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Литература по теме
Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.
Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.
Что такое AJAX
Как добавить что-то новое на страницу без перезагрузки
Когда мы делали форму обратной связи на сайте, то она работала так:
Часто это неудобно: хочется оставить посетителя на странице, а не показывать что-то новое. Чтобы сделать именно так, используют AJAX.
AJAX (программисты называют его «аякс») — это сокращение от Asynchronous Javascript and XML, а на русский это переводится как «Асинхронный JavaScript и XML». Смысл здесь — в асинхронности действий браузера и сервера. Разберём эти понятия.
Синхронные запросы
Обычные запросы к серверу, чтобы получить и сформировать страницу, работают так:
Синхронность здесь в том, что все данные кучей отправляются на сервер, а потом вся страница такой же охапкой возвращается пользователю.
Именно так работает наша форма обратной связи: вы нажимаете на кнопку и браузер, чтобы показать новые данные, начинает загружать новую страницу. Но есть и другой способ.
Асинхронные запросы
AJAX работает иначе: вместо того чтобы синхронно загружать новые данные с новой страницей, он запрашивает у сервера недостающую информацию и добавляет её на страницу. А сама страница не перезагружается.
В нашем примере с формой AJAX будет работать так:
Примеры таких запросов:
Как устроен AJAX
Основа AJAX — объект XMLHttpRequest, который и отвечает за все запросы. Раньше его поддерживали не все браузеры, поэтому нужно было подключить отдельно библиотеку jQuery, в которой этот объект есть. Сейчас почти все браузеры научились поддерживать этот объект напрямую.
Вся магия асинхронных запросов AJAX основана на работе с DOM-объектами страницы в браузере:
Плюсы и минусы AJAX
✅ Удобство для посетителя и быстрый интерфейс. Гораздо лучше видеть моментальное обновление данных на той же странице, чем загружать новую при каждой новой порции данных.
✅ Меньше трафика. Если нужно показать что-то новое, браузер получает с сервера не всю страницу целиком, а только то, чего нет на исходной странице.
✅ Можно снизить нагрузку на сервер. Если сайт формирует все страницы на лету, например, с помощью PHP, то можно один раз загрузить стандартные части страницы (шапку, меню и подвал), а остальное подгружать по необходимости. Меньше данных в запросе — быстрее ответ от сервера и базы.
❌ Нужен включённый JavaScript. Если в браузере выключить JS, то ничего не сработает — данные не придут с сервера и интерактивной страницы не получится.
❌ Поисковые движки не видят AJAX-контент. Если содержимое страницы формируется на AJAX-запросах, то поисковые роботы не смогут его увидеть. Смысл в том, что поисковики смотрят на исходный код, а не на то, что приходит с сервера. Поисковая оптимизация таких страниц — головная боль для сеошника.
❌ Растёт сложность проекта. Работа с такими запросами требует определённой квалификации от программиста, чтобы он мог предусмотреть разные нештатные ситуации и обработать их заранее. А ещё нужно продумать бэкенд — поведение сервера в ответ на разные запросы.
❌ Ошибки при нестабильной связи. Если интернет работает с перебоями, то AJAX может не дождаться ответа от сервера или не сможет отправить свой запрос. В итоге логика работы страницы может нарушиться — в итоге придётся перезагружать её полностью и начинать работу с нуля.
Что дальше
Чтобы посмотреть, как AJAX работает и показывает новые данные без перезагрузки, сделаем пару небольших проектов. Заодно попрактикуемся в PHP — он будет отвечать за новые данные с сервера.
С чего начать
В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.
Что такое AJAX?
Две особенности, которые мы рассмотрим:
Шаг 1 — Как послать HTTP запрос
В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:
(В целях наглядности, код выше является немного упрощённым. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)
Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путём присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:
Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:
Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса open() и send() :
Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:
Иначе сервер проигнорирует данные отправленные методом POST.
Шаг 2 — Обрабатываем ответ сервера
Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.
Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать.
Полный список значений кодов readyState такой:
Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, всё что угодно. Есть два способа получить доступ к данным:
Шаг 3 — Простой пример
Вы можете попробовать пример в действии здесь, а сам тестовый файл можно посмотреть здесь.
Замечание: Строка httpRequest.overrideMimeType(‘text/xml’); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.
Замечание 3: Если переменная httpRequest используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной httpRequest локально в функции и передача её в alertContent() предотвращает состязания.
Замечание 4: При привязывании колбэк-функции к onreadystatechange нельзя указать аргументы. По этой причине не работает следующий код:
Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя httpRequest как глобальную переменную. Вот пример:
Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная httpRequest является глобальной.
Шаг 4 — Работа с XML ответом
Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ ( test.xml ) содержит следующее:
В скрипте нам всего лишь необходимо заменить строку запроса на:
Далее в alertContents() нам нужно заменить строку alert(httpRequest.responseText); на:
Чтобы узнать больше о методах DOM, посмотрите реализация DOM в Mozilla.
Что такое ajax запросы
В Википедии имеется статья по теме «AJAX»
AJAX — это модное название для набора техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.
AJAX обеспечивает динамичность и асинхронность web-разработок при отсутствии необходимости обновления страниц. Наша статья познакомит вас с возможностями нововведений в web-разработках за счет комбинаций технологий, уже давно знакомых и любимых.
Пожалуй, любой разработчик мечтает о том, чтобы превратить обычную, неновую web-страничку во что-то более захватывающее. Сейчас можно попробовать вдохнуть немного жизни в web-технологии десятилетней давности. Если у вас появилась необходимость освежить, обогатить и сделать более интерактивными свои творения, познакомьтесь с AJAX.
При использовании Google или web-клиента Gmail вам уже приходилось сталкиваться с решением, основанном на AJAX. Это технология-конгломерат, которая обеспечивает динамическое и асинхронное поведение, где исключается обновление страниц. Посредством AJAX пользователь может взаимодействовать с web-страницами, подобно работе с клиентами с более богатыми возможностями.
В настоящее время многие говорят о AJAX. Технология, следующая за AJAX, вряд ли является новшеством, однако недавно стали появляться некоторые мощные новые приложения, использующие объект XMLHttpRequest, они вдохнули новую жизнь в концепцию обновления образа клиентской части.
Самым примечательным из этих новых приложений является Google Maps. Пользуясь им, можно находить определенную местность на карте планеты, затем переходить к более мелким объектам, прокручивать, перетягивать карту без необходимости обновления страницы.
AJAX — это коллекция технологий, существующих с момента появления Web. А вот и возможности, предоставляемые AJAX (как это представил Джис Джеймс Гаррет (Jesse James Garrett), он первым ввел термин ‘AJAX’ для асинхронного JavaScript + XML):
Вкратце AJAX позволяет писать быстрореагирующие веб-приложения, в которых не нужно постоянно обновлять страницы. AJAX — простая технология, поддерживаемая всеми основными браузерами. Как можно вкратце отметить, единственным предварительным условием для внедрения AJAX является знание JavaScript.
Содержание
Как работает AJAX [ править ]
Если вы когда-либо пользовались веб-контентом Gmail или Google Maps, то замечали возможность проверки правописания и прокрутки по всему изображению, соответственно, без обновления страниц. AJAX — это технология, созданная на языке JavaScript, которая асинхронно запрашивает и получает с сервера данные, предоставляющие желаемый результат.
AJAX в действии [ править ]
Действие AJAX легче всего показать на портальном сценарии: просмотр сообщений электронной почты. Большинство веб-порталов позволяют пользователям предварительно просматривать содержимое почтового ящика с основной страницы. Однако, чтобы просмотреть содержимое сообщения, необходимо отдельно щелкнуть на каждом сообщении, при этом страница должна обновляться каждый раз. На этом примере можно увидеть возможность осуществления более богатого поведения, подобно аналогичному в Outlook Express и Mozilla Thunderbird, при этом задействовав существующие веб-технологии AJAX.
Чтобы получить доступ к содержимому сообщения, нужен серверный компонент, предоставляющий доступ к сообщениям. В нашем примере есть простой сервлет в качестве имитатора, который показывает сообщения через запятую в следующем формате: от кого, тема, дата и тело сообщения:
Следующий пример на С# для ASP.NET. Функционально он аналогичен сервлету и приводим мы его лишь для того, чтобы убедить читателей, что для работы с AJAX не важно на каком языке написана ваша серверная часть.
В портале будет находиться окошко/портлет портала по просмотру почты с упрощенным списком входящих сообщений слева и панелью просмотра справа. Если щелкнуть мышью на сообщении слева, то на панели просмотра будет виден запрос к серверу и вывод текста сообщения на экран в реальном времени, в этом процессе задействован AJAX.
Создаем портлет для просмотра почты в Сети [ править ]
Для начала необходимо создать веб-страничку, имитирующую типичный портлет для веб-почты, и встроить события onMouseOver JavaScript, запускающие вызовы AJAX
В этом случае события «onMouseOver» прилагаются к полям таблицы (ПТ) с именами отправителей. Выбор полей с данными и запуск событий для вызовов AJAX предназначены строго для иллюстративных целей:
Обратите внимание на то, что поле ввода «messageBody» — единственное, которое будет наполнено методом displayMessageBody, принимающим ID сообщения как параметр. Вызов AJAX будет использовать этот параметр для запроса деталей сообщения с сервера.
Вызов AJAX [ править ]
Ключевым моментом нашего примера является вызов AJAX. Обратите внимание на то, что для различных браузеров требуются разные методы реализации для объекта XMLHttpRequest:
В данном коде используются аннотации Internet Explorer для реализации объекта AJAX. Другие браузеры, выполняющие данный сценарий, будут просто игнорировать разделы с аннотациями к функции getHTTPRequestObject(). Помните о том, что ваш браузер должен поддерживать JavaScript v1.5 и более поздние версии.
Асинхронная загрузка данных [ править ]
Теперь мы выполним асинхронную активизацию веб-ресурсов. Ниже представлены действия, необходимые для асинхронной загрузки веб-ресурсов из функции JavaScript:
Для вывода сообщения на экран метод displayMessageBody принимает ID этого сообщения. Посредством передачи следующих трех параметров для объекта XMLHttpRequest определяется получение доступа к URL:
Обработка данных [ править ]
Вышеупомянутый метод processResponse активизируется как callback. Он извлекает вывод объекта XMLHttpRequest, проводит синтаксический анализ и присваивает вывод объектам страницы.
HttpRequester.readyState является индикатором завершенности кода URL. Он может принимать следующие значения:
Обратите внимание на то, что здесь доступ к ответу рассматривается как доступ к текстовому содержимому. XMLHttpRequest может без затруднений извлекать содержимое как в XML-формате, так и в не XML-формате. Если необходимо извлечь содержимое XML, то строка прочтёт responseXML и вы сможете получить доступ к нему как к объекту XML DOM. Такое разнообразие текстовых форматов — приятная новость, поскольку XML может привести к чрезмерному усложнению простых сценариев извлечения данных, подобно описанному выше.
Повышаем устойчивость AJAX-приложения [ править ]
При разностороннем использовании JavaScript автоматически возникает вопрос о степени устойчивости и надежности приложения. Оно с трудом может положиться на этот язык сценариев, отличающийся своей «расслабленностью» и «всепрощением». При наличии AJAX, ситуация все более усложняется. AJAX проводит удаленные вызовы, что в свою очередь создает дополнительную проблемную грань и возможность появления ошибок. Особенно, учитывая, что встроенная поддержка при ошибках, поступающих с серверной стороны, очень ограничена. Принимая это во внимание, можно предложить следующие варианты предотвращения ошибок:
Написание приложения с использованием клиентского сallback-менеджера ASP.NET 2.0 [ править ]
После ознакомления с такими приложениями, как Google Map, создается впечатление, что многие поняли богатство возможностей AJAX. Но мало кто знает о том, что создание приложений в стиле AJAX, частично обновляющие страничку без обращения к серверу, можно без сложностей осуществить с помощью ASP.NET. В этом деле поможет встроенный клиентский сallback-менеджeр.
Всем известный ASP.NET 2.0 включает в себя клиентский сallback-менеджер, позволяющий разработчикам создавать веб-приложения в стиле AJAX. Клиентский сallback-менеджер использует XMLHTTP, при этом не акцентируя внимания на отправке данных в прямом и обратном направлении от сервера и клиента. (поэтому для того, чтобы это сработало, необходимо, чтобы веб-браузер поддерживал XMLHTTP; в настоящее время клиентский сallback-менеджер работает исключительно с Microsoft Internet Explorer.
Эта часть расскажет вам, как использовать клиентский callback-менеджер для написания приложений в стиле AJAX.
Отображение книжных обложек [ править ]
Чтобы показать, как работает клиентский сallback-менеджер ASP.NET 2.0, мы создадим веб-приложение, позволяющее пользователям просматривать книжные обложки при загрузке их с веб-службы Amazon. Пользователю остается лишь ввести ISBN номер книги, после чего страница сама загрузит изображение обложки с Amazon.com без необходимости обновления страницы.
Для начала запустим Visual Studio и создадим новый проект веб-сайта. Назовем проект C:\ClientCallBack. Наполним веб-форму по умолчанию (Default.aspx) элементами управления, как показано на рисунке, включая элементы управления панели, текстового окна, кнопок и изображений.
Для элемента управления можно применить Internet Explorer, чтобы загрузить домашнюю страничку Amazon.com, перетащить картинку логотипа и поместить его на элемент управления панелью. Элемент автоматически добавляет его на панель, после чего отображается логотип Amazon.com.
Переключаем Default.aspx на Source View и заключаем элемент в элемент :
По существу, мы создаем гиперссылку на обложку книги, итак пользователь может щелкнуть мышью на изображении книги, выйти на Amazon.com и получить более детальную информацию о книге.
В окне Properties выставьте ShowCover для свойства OnClientClick. Как только пользователь щелкнет на этой кнопке, будет выполняться функция клиентского сценария ShowCover() (в нашем случае это — короткий написанный нами сценарий JavaScript).