Основы AJAX для начинающих. Живой пример на AJAX. Настройка параметров запросов перед их отправкой

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

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

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML ) - асинхронный JavaScript и XML, это механизм взаимодействия с сервером, посредствам которого происходит обмен данными с этим сервером, не перезагружая всю страницу целиком. Запрос на AJAX может быть не только асинхронный, но и просто синхронным, но такие запросы используются редко. Так как при таких запросах браузер зависает, до того момента пока не будет получен ответ с сервера, в отличие от асинхронного запроса, при котором посылается запрос и пользователь может делать на странице все что угодно, а когда будет получен ответ от сервера, сработает обработчик и появятся изменения на странице. Как посылать синхронные и асинхронные запросы научимся ниже в примерах.

Для чего нужен AJAX?

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

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

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

Недостатки AJAX

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

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

Пример использования AJAX

Хватит теории, перейдем к практике. Сразу скажу, что ajax - это не сложно, и если Вы разобрались с JavaScript, то разобраться с ajax будет очень просто, даже легче чем с JavaScript!

И начну я с того, что весь ajax строится на объекте XMLHttpRequest , у которого есть несколько свойств и несколько методов, которые легко освоить и запомнить. Объект XMLHttpRequest - это своего рода мини-браузер, от имени которого и будет посылаться запрос к серверному скрипту.

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

Var request = new XMLHttpRequest();

где, в переменной request и будет храниться наш объект.

Но если Ваше приложение могут использовать и в старых браузерах, то лучше использовать универсальный способ создания данного объекта, мне, например, нравится вот такой способ:

Function getXmlHttpRequest() { if (window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch (e){} } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } return null; }

Для создания объекта XMLHttpRequest мы просто вызовем функцию getXmlHttpRequest, которая вернет нам нужный объект.

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

Для того чтобы наш урок прошел полноценно, нам потребуется небольшой серверный скрипт, я буду использовать серверный язык программирования PHP, и наш скрипт будет просто возвращать текущие время на сервере. Назовем его mytime.php, его код:

Код mytime.php:

Здесь я думаю все понятно, мы проверяем параметр, пришедший к нам методом GET, т.е. MyTime, и если параметр действительно к нам пришел, то возвращаем текущие время на сервере. Советую при разработке ajax приложения на серверном скрипте делать больше проверок, так как ajax запрос можно подделать. Можно делать вот такие проверки, например:

можно дополнительно посылать заголовок X-REQUESTED-WITH , а на серверном обработчике проверять его;
также добавить проверку реферера, т.е. откуда пришел запрос;
еще можно осуществлять проверку с помощью сессий.

Код index.php:

//функция создания объекта XMLHttpRequest function getXmlHttpRequest(){ if (window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch (e){} } else if (window.ActiveXObject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } return null; } function serverTime(){ // Объект XMLHttpRequest var request = getXmlHttpRequest(); /*свойство onreadystatechange это обработчик события, которое реагирует на любое изменения данного объекта*/ request.onreadystatechange = function (){ /*свойство readyState - состояние объекта 0 - не инициализирован 1 - открыт, 2 - отправка данных, 3 - получение данных, 4 - данные загружены рекомендую использовать только 4*/ if (request.readyState == 4) { /*свойство status это HTTP-статус ответа: 200-OK, 404-Not Found*/ if (request.status == 200){ var result = document.getElementById("MyId"); // Чтение ответа result.firstChild.nodeValue = request.responseText; // Вывод на экран } else document.write("Произошла ошибка. Обнови страничку"); } } // Адрес серверного скрипта var url = "mytime.php?MyTime"; /* Запрос на сервер, true означает что это асинхронный запрос если было бы false, то это синхронный запрос*/ request.open("GET", url, true); request.setRequestHeader("Content-type", "charset=utf8"); request.send(null); // посыл данных }

Вот два файла (mytime.php и index.php ), с помощью которых Вы легко можете проверить работу ajax, код этих файлов представлен выше.

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

Код функции serverTime с передачей параметров методом post:

Function serverTime(){ var request = getXmlHttpRequest(); request.onreadystatechange = function (){ if (request.readyState == 4) { if (request.status == 200){ var result = document.getElementById("MyId"); result.firstChild.nodeValue = request.responseText; } else document.write("Произошла ошибка. Обнови страничку"); } } var url = "mytime2.php";//изменим адрес серверного обработчика var data = "MyTime=1";//задаем параметры request.open("POST", url, true); // указываем метод post //посылаем два заголовка: тип данных и размер данных request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.setRequestHeader("Content-Length", data.length); request.send(data); // посыл данных, вместо null вставляем переменную с параметрами }

Не забудьте изменить серверный обработчик, чтобы он проверял данные пришедшие методом post. Измените строку isset($_GET["MyTime"] на isset($_POST["MyTime"] и все будет работать точно так же, как и с помощью GET.

Как Вы заметили, ajax совсем не сложная штучка, хотя это только основы, но все равно если Вы разобрались, например, с JavaScript, то освоить ajax будет не проблема.

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

AJAX (аббревиатура от Asynchronous JavaScript and XML) – это технология взаимодействия с сервером без перезагрузки страницы. Поскольку не требуется каждый раз обновлять страницу целиком, повышается скорость работы с сайтом и удобство его использования.

История технологии

Многие технологии, которые используются в AJAX, известны еще с 1990-х годов. Так, в 1996 году в Internet Explorer 3 применялся HTML-элемент IFRAME, а в 1998 году компания Microsoft предложила подход Remote Scripting.

Непосредственно термин AJAX впервые был использован Джесси Джеймсом Гарретом 18 февраля 2005 года в статье «Ajax: A New Approach to Web Applications». Ее автор является одним из основателей и главой компании Adaptive Path. В своей статье он описал принцип разработки web-приложений, применяемый на тот момент в Google Maps и Gmail. По его словам, это стало «фундаментальным прорывом в возможностях, доступных в веб-приложениях».

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

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

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

Как работает AJAX

Понять основной принцип работы AJAX помогает представленное ниже изображение:

В работе технологии можно выделить 4 основных этапа:

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

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

Сервер получает ответ от базы данных и отправляет информацию в браузер.

JavaScript получает ответ, расшифровывает его и выводит пользователю.

Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.

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

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

В качестве ответа сервер использует простой текст, XML и JSON. В первом случае результат можно сразу же отобразить на странице. При получении XML-документа его обычно конвертируют в HTML и выводят на экран. Если ответ получен в формате JSON, клиенту следует выполнить полученный код. После этого будет сформирован объект JavaScript.

Преимущества технологии AJAX

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

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

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

Широкий спектр возможностей. Использование AJAX не ограничивается формами. Например, при прохождении регистрации на некоторых сервисах пользователь вводит логин – и через мгновение ему выдается информация о том, свободен он или нет. Также при введении поискового запроса в Google после каждой буквы или слова предлагается несколько вариантов запроса. Это значительно повышает комфорт работы с сайтами.

Недостатки AJAX

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

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

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

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

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

Индексирование AJAX поисковиками

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

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

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

Перепишите ссылки в URL. После каждой # необходимо поставить восклицательный знак.
Например, ссылку http://www.site.ru/#uslugi необходимо преобразовать в http://www.site.ru/#!uslugi.

Для всех страниц AJAX версию HTML следует сделать доступной по определенному адресу. В нем установленное нами сочетание «#!» Необходимо заменить на «?_escaped_fragment_=». (В нашем примере http://www.site.ru/?_escaped_fragment_=uslugi).

На странице AJAX нужно проставить тег: .

Карта сайта в формате.xml ускорит индексацию его страниц.

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

Влияние AJAX на ранжирование

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

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

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

Динамические страницы можно кэшировать и отображать их в качестве статических. Для вызова AJAX лучше воспользоваться классическим якорем, чем событием «onClick».

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

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

Технология AJAX базируется на использовании объекта XMLHttpRequest(), который позволяет отправлять и получать информацию в различных форматах включая XML и HTML. Реализация технологии состоит из клиентской и серверной частей. Клиентская часть выполняется в браузере пользователя и пишется на JavaScript, а серверная выполняется на веб-сервере и пишется на любом языке веб-программирования: php, asp, perl и др.

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

1. Создание объекта запроса XMLHttpRequest .
В Internet Explorer и других браузерах создание объекта XMLHttpRequest отличается. Во всех браузерах кроме Internet Explorer этот объект создается очень просто: xmlHttp = new XMLHttpRequest(); Браузер Internet Explorer для создания объекта запроса использует анализатор MSXML. Кроме того существует две разных версии MSXML. Универсальный метод создания объекта запроса XMLHttpRequest для всех браузеров выглядит следующим образом:

var xmlHttp=null;
try
{

}
catch (e)
{

try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

Создание объекта запроса происходит в строках xmlHttp = new XMLHttpRequest(); , xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); и xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); . Остальные строки обрабатывают ошибки.

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

Чтобы указать функцию которая будет обрабатывать ответ, необходимо свойству onreadystatechange присвоить имя JavaScript функции: xmlHttp.onreadystatechange = MyFunc; . Причем имя функции указывается без скобок.

Чтобы открыть соединение с сервером необходимо вызвать функцию open() . Эта функция имеет три обязательных параметра:

метод запроса HTTP - обычно используют "GET" или "POST" , но можно использовать любой другой метод в соответствии с HTTP стандартами ;
url запроса - адрес скрипта на сервере, который обрабатывает запрос;
асинхронность запроса - TRUE или FALSE, если TRUE, то запрос асинхронный и пользователь сможет продолжать работу со страницей.

Для отправки запроса необходимо вызвать метод send() , параметром которого могут быть любые данные, которые вы хотите отправить на сервер. Данные должны быть сформированы в строку запроса param1=1¶m2=2¶m3=3 .

Если данные отправляются методом POST, то необходимо изменить MIME-тип запроса: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); .

Выполнение запроса с использованием метода GET :

/*Устанавливаем соединение*/
xmlHttp.open("GET", "example.php?param1=1¶m2=2", true);
/*Указываем функцию*/

/*Отправляем запрос*/
xmlHttp.send(null);

И с использование метода POST :

/*Устанавливаем соединение*/
xmlHttp.open("POST", "example.php", true);
/*Меняем MIME-тип*/
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send("param1=1¶m2=2");

3. Обработка ответа сервера .
Отправляя запрос, мы указали имя функции, обрабатывающей ответ сервера: xmlHttp.onreadystatechange = MyFunc; . Для начала, эта функция должна проверять статус запроса. Это можно сделать с помощью свойства readyState . Если xmlHttp.readyState = 4 , то ответ от сервера получен и можно приступать к его обработке. Далее необходимо проверить статус HTTP-ответа с помощью свойства status . Если xmlHttp.status = 200 значит все в порядке и можно продолжить обработку данных. Получить доступ к данным можно с помощью свойств responseText - в виде текста, либо responseXML - в виде объекта XMLDocument.

Полный пример работы Ajax-приложения:

/*переменная для хранения объекта запроса*/
var xmlHttp=null;
/*создание объекта запроса*/
function createRequest()
{
try{
//создаем объект запроса для Firefox, Opera, Safari
xmlHttp = new XMLHttpRequest();
} catch(e){
//создаем объект запроса для Internet Explorer
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
xmlHttp = null;
}
}
}

If(xmlHttp == null)alert("Браузер не поддерживает AJAX!");
}

/*отправка запроса*/
function sendRequest()
{
/*получаем объект запроса*/
createRequest();
/*Устанавливаем соединение*/
xmlHttp.open("GET", "ajax.php?param1=1¶m2=2", true);
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send(null);
}

/*обрабатываем ответ*/
function MyFunc()
{
if(xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert(xmlHttp.responseText);
} else {
alert("Ошибка обработки запроса!");
}
}
}

Серверная часть может быть написана на чем угодно. Возвращаемое значение xmlHttp.responseText формируется стандартным выводом. Пример серверной части на php:

Попробуйте пример в действии:

И в дополнение некоторые справочные материалы по объекту XMLHttpRequest :
Методы класса XMLHttpRequest

Свойства класса XMLHttpRequest

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

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

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

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

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Что такое AJAX и чем он полезен?

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

Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

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

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке "A synchronous J avaScript A nd X ML" (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение - запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

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

$.get("http://example.com/getForecast.php");

Хотя можно также запросить статический документ:

$.get("http://example.com/mypage.html");

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

Var data = { city: "rome", date: "20120318" }; $.get("http://example.com/getForecast.php", data);

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Var data = "city=rome&date=20120318"; $.get("http://example.com/getForecast.php", data);

Получаем данные с сервера

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

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

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

Function myCallback(returnedData) { // Делаем обработку данных returnedData }

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Var data = { city: "rome", date: "20120318" }; $.get("http://example.com/getForecast.php", data, myCallback);

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML , JSON , JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

"xml"
"json"
"script"
"html"

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

$.get("http://example.com/getForecast.php", data, myCallback, "json");

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

{ "city": "Васюки", "date": "18 марта 2012", "forecast": "Зубодробительный холод и слякоть", "maxTemp": +1 }

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt:

Прогноз погоды $(function() { $("#getForecast").click(function() { var data = { city: "Васюки", date: "20120318" }; $.get("getForecast.txt", data, success, "json"); }); function success(forecastData) { var forecast = forecastData.city + " прогноз на " + forecastData.date; forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C"; alert(forecast); } }); Получить прогноз погоды

Открываем showForecast.html в браузере и нажимаем кнопку "Получить прогноз погоды". В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

showForecast.html содержит элемент button "Получить прогноз погоды" с ID getForecast .

JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.

Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.

Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.

Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.

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

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Набор пар ключ/значение, которые настраивают запрос AJAX . Все параметры являются необязательными . Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup() .
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType ).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например: $.ajax({ accepts : { mycustomtype: "application/x-some-custom-type " } , // указываем как обрабатывать ответ converters : { "text mycustomtype ": function (result ) { // возвращаем преобразованное значение ответа return newresult; } } , // Ожидаемый тип данных ("mycustomtype") dataType : "mycustomtype " } );

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение "jsonp" не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

jqXHR

settings

полную информацию

jQuery 1.5

cache (по умолчанию: true , для dataType "script" и "jsonp" false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

complete .

Тип: Function (jqXHR jqXHR , String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий "success" или "error" ). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) и строка соответствующая статусу запроса ("success" , "notmodified" , "nocontent" , "error" , "timeout" , "abort" , или "parsererror" ). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

contents .

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: "application/x-www-form-urlencoded; charset=UTF-8" ).

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

context .

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $(this ) будет ссылаться на определенный DOM элемент, или объект. Например: $.ajax({ url : "test.html ", context : $(".myClass "), // новый контекст исполнения функции success : function (){ // если запрос успешен вызываем функцию $(this ).html("Всё ок "); // добавлем текстовое содержимое в элемент с классом.myClass } } );

converters

Значения по умолчанию:
{ "* text ": window.String, // любой тип в текст "text html ": true , // текст в html "text json ": jQuery.parseJSON, // текст в JSON "text xml ": jQuery.parseXML // текст в XML } Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

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

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional , который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

dataFilter .

Тип: Function (String data , String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать "сырые" данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data - данные полученные от сервера в виде строки и type - тип этих данных (значение параметра dataType ).

dataType (по умолчанию: xml , json , script , или html ).

Тип: String .
Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML , с версии jQuery 1.4 json будет давать объект JavaScript , script будет выполнять скрипт, а все остальное будет возвращено в виде строки).

Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ):

"xml" - возвращает XML документ, который может быть обработан с помощью jQuery.
"html" - возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM ).
"script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _= , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов.
"json" - расценивает ответ как JSON и возвращает объект JavaScript . Кроссдоменные "json" запросы преобразуются в "jsonp" , если в параметрах запроса не указано jsonp : false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату , любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или {} .
"jsonp" - загружает данные в формате JSON , используя при этом формат загрузки JSONP . Добавляет дополнительный параметр "?callback=? " в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _= к URL адресу,даже если парамета cache имеет значение true .
"text" - обычная текстовая строка.
несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML : "jsonp text XML" . Следующая строка позволит сделать тоже самое: "jsonp XML" , jQuery будет пытаться конвертировать из JSONP в XML , после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML .

Тип: Function (jqXHR jqXHR , String textStatus , String errorThrown ).
Функция обратного вызова, которая вызывается если AJAX запрос не был выполнен. Функция получает три аргумента:
- jqXHR - объект jqXHR (в jQuery 1.4.х, объект XMLHttpRequest ).
- textStatus - строка, описывающую тип ошибки, которая произошла. Возможные значения (кроме null ) не "timeout" , "error" , "abort" и "parsererror" .
- errorThrown - дополнительный объект исключения, если произошло. При возникновении ошибки HTTP аргумент получает текстовую часть состояния, например, "Not Found" , или "Internal Server Error" .
Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь. Обратите внимание, что этот обработчик не вызывается для кроссдоменных скриптов и запросов JSONP .
global (по умолчанию: true ).
Тип: Boolean .
Логический параметр, который определяет допускается ли вызвать глобальные обработчики событий AJAX для этого запроса. Значением по умолчанию является true . Если Вам необходимо предотвратить вызов глобальных обработчиков событий, таких как.ajaxStart() , или.ajaxStop() , то используйте значение false .

headers (по умолчанию: { } ).
Тип: PlainObject .
Объект, который содержит пары ключ/значение дополнительных заголовков запроса, предназначенные для отправки вместе с запросом с использованием объекта XMLHttpRequest . Обращаю Ваше внимание, что заголовок X-Requested-With: XMLHttpRequest добавляется всегда, но значение XMLHttpRequest по умоланию допускается изменить с использованием этого параметра. Значения headers также могут быть переопределены параметром beforeSend . Добавлен в версии jQuery 1.5.

ifModified (по умолчанию: false ).
Тип: Boolean .
По умолчанию значение false , игнорирует поля заголовка HTTP запроса, а при значении true AJAX запрос переводится в статус успешно (success ), только в том случае, если ответ от сервера изменился с момента последнего запроса. Проверка производится путем проверки поля заголовка Last-Modified . Начиная с версии jQuery 1.4 , помимо заголовка Last-Modified производится проверка и "etag" (entity tag ) - это закрытый идентификатор, присвоенный веб-сервером на определенную версию ресурса, найденного на URL. Если содержание ресурса для этого адреса меняется на новое, назначается и новый etag.

isLocal (по умолчанию: зависит от текущего местоположения).
Тип: Boolean .
Используйте значение true для определения текущего окружения как "локального" (например, file:///url), даже если jQuery не распознает его таким по умоланию. Следующие протоколы в настоящее время признаются как локальные: file , *-extension и widget . Если Вам необходимо изменить параметр isLocal , то рекомендуется сделать это один раз при помощи функции $.ajaxSetup() . Добавлен в версии jQuery 1.5.1.

Тип: Boolean , или String .
Переопределяет имя функции обратного вызова в JSONP запросе. Это значение будет использоваться вместо "callback " ("http://domain.ru/test.php?callback=?" ) в составе части строки запроса в URL адресе. Например, значение { jsonp : "onLoad "} передастся на сервер в виде следующей строки запроса "http://domain/test.php?onLoad=?" .
Начиная с версии jQuery 1.5 при установке значения параметра jsonp в значение false предотвращает добавление строки "?callback " к URL адресу, или попытки использовать "=? " для преобразования ответа. В этом случае Вы дополнительно должны указать значение параметра jsonpCallback , например: { jsonp : false , jsonpCallback : "callbackName " } По соображениям безопасности, если Вы не доверяете цели ваших AJAX запросов, то рекомендуется установить значение параметра jsonp в значение false .

jsonpCallback .
Тип: String , или Function .
Задает имя функции обратного вызова для JSONP запроса. Это значение будет использоваться вместо случайного имени, которое автоматически генерируется и присваивается библиотекой jQuery. Рекомендуется, чтобы jQuery самостоятелно генерировало уникальное имя, это позволит легче управлять запросами и обрабатывать возможные ошибки. В некоторых случаях установка собственного имени функции позволит улучшить браузерное кеширование GET запросов.
Начиная с версии jQuery 1.5, вы можете в качестве значения параметра jsonpCallback указать функцию. В этом случае, в значение параметра jsonpCallback должно быть установлено возвращаемое значение этой функцией.

method (по умолчанию: "GET" ).
Тип: String .
Метод HTTP , используемый для запроса (например, "POST" , "GET" , "PUT" ). Добавлен в версии jQuery 1.9.0.

mimeType .
Тип: String .
MIME тип, который переопределяет MIME тип, указанынй в объекте XHR по умолчанию. Добавлен в версии jQuery 1.5.1.

password .
Тип: String .
Пароль, который будет использован с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

processData (по умолчанию: true ).
Тип: Boolean .
По умолчанию данные, передаваемые в параметр data в качестве объекта будут обработаны и преобразованы в строку запроса, подходящую для типа данных по умолчанию "application/x-www-form-urlencoded" . Если Вам необходимо отправить DOMDocument , или другие не обработанные данные, то установите значение этого параметра в false .

scriptCharset .
Тип: String .
Устанавливает атрибут charset (кодировка символов) на HTML тег , используемый в запросе. Используется, когда кодировка на странице отличается от кодировки удаленного скрипта. Обратите внимание, что параметр scriptCharset применяется только в кроссдоменных запросах с параметром type со значением "GET" (по умолчанию) и параметром dataType со значением "jsonp" , или "script" .

statusCode (по умолчанию: { } ).
Тип: PlainObject .
Объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP ). Например, следующая функция будет вызвана, если от сервера получен код ответа 404 , или "Not found" (стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу.): $.ajax({ statusCode : { 404: function (){ // выполнить функцию если код ответа HTTP 404 alert("страница не найдена "); } , 403: function (){ // выполнить функцию если код ответа HTTP 403 alert("доступ запрещен "); } } } );

success .
Тип: Function (Anything data , String textStatus , jqXHR jqXHR ).
Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Функции передаются три аргумента:
- data - данные возвращенные с сервера. Данные форматируюся в соответствии с параметрами dataType , или dataFilter , если они указаны
- textStatus - строка описывающая статус запроса.
- jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).
Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь.
timeout .
Тип: Number .
Устанавливает в миллисекундах таймаут для запроса. Значение 0 означает, что таймаут не установлен. Обращаю Ваше внимание, что этот параметр переопределяет значение таймаута, установленного с помощью функции $.ajaxSetup() . Таймаут ожидания начинается в момент вызова метода $.ajax() .

traditional .
Тип: Boolean .
Если вы планируете использовать традиционные параметры сериализации (подходит для использования в строке URL запроса или запроса AJAX ), то установите значение этого параметра в true .

type (по умолчанию: "GET" ).
Тип: String .
Псевдоним (алиас) для параметра method . Вы должны использовать type , если вы используете версии jQuery до 1.9.0 .

url (по умолчанию: текущая страница ).
Тип: String .
Строка, содержащая URL адрес, на который отправляется запрос.

username .
Тип: String .
Имя пользователя, которое будет использовано с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

xhr (по умолчанию: ActiveXObject , когда доступен (Internet Explorer ), в других случаях XMLHttpRequest .
Тип: Function() .
Обратный вызов для создания объекта XMLHttpRequest . С помощью этого параметра Вы можете переопределить объект XMLHttpRequest , чтобы обеспечить свою собственную реализацию.

xhrFields .
Тип: PlainObject .
Объект, содержащий пары имя_поля: значение_поля, которые будут установлены на объект XHR . Например, вы можете определить, должны ли создаваться кроссдоменные запросы с использованием таких идентификационных данных как cookie , авторизационные заголовки или TLS сертификаты: $.ajax({ url : "cross_domain_url ", // адрес, на который будет отправлен запрос xhrFields : { withCredentials: true // поддерживается в jQuery 1.5.1 + } } );