Принцип работы. О базе данных. Небольшие элементы управления

AJAX: С чего начать

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

1 Что такое AJAX?
2 Шаг 1 - Как послать HTTP запрос
3 Шаг 2 - Обрабатываем HTTP ответ
4 Шаг 3 - Простой пример
5 Шаг 4 - Работа с XML ответом

Что такое AJAX?

Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax - это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.

Две особенности, которые мы рассмотрим:

* Отправление запросов серверу без перезагрузки страницы
* Работа с XML документами

Шаг 1 - Как послать HTTP запрос

Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и другие броузеры был введен класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

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

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

}

(В целях наглядности код выше является немного упрощенным. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)

Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type. Чтобы решить эту проблему вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml.

http_request = new XMLHttpRequest();

Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете ее. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

http_request.onreadystatechange = function(){
// какой-нибудь код
};

http_request.open("GET", "http://www.example.org/some.file", true);
http_request.send(null);

* Первый параметр вызова функции open() - метод запроса HTTP (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами; иначе некоторые броузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу спецификации W3C
* Второй параметр - URL запрашиваемой страницы. Из соображений безопасности вы не можете запрашивать страницы сторонних доменов. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку "доступ запрещен" при вызове функции open(). Типичной ошибкой при доступе к сайту через site.ru является подача запросов на www.site.ru.
* Третий параметр указывает, является ли запрос асинхронным. Если он TRUE, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.

Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:

name=value&anothername=othervalue&so=on

Заметьте, что если вы хотите отправить данные методом POST, вы должны изменить MIME-тип запроса с помощью следующей строки:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Иначе сервер проигнорирует данные отправленные методом POST.

Шаг 2 - Обрабатываем HTTP ответ

Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.

http_request.onreadystatechange = nameOfTheFunction;

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

if (http_request.readyState == 4) {
// все в порядке, ответ получен
} else {
// все еще не готово
}

Полный список значений кодов readyState такой:

* 0 (uninitialized)
* 1 (loading)
* 2 (loaded)
* 3 (interactive)
* 4 (complete)

Следующее, что нужно проверить - это статус HTTP-ответа. Все возможные коды можно посмотреть на сайте W3C . Для наших целей нам интересен только код ответа 200 OK.

if (http_request.status == 200) {
// великолепно!
} else {
// с запросом возникли проблемы,
// например, ответ может быть 404 (Не найдено)
// или 500 (Внутренняя ошибка сервера)
}

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

* http_request.responseText – возвращает ответ сервера в виде строки текста.
* http_request.responseXML – возвращает ответ сервера в виде объекта XMLDocument, который вы можете обходить используя функции JavaScript DOM

Шаг 3 - Простой пример

Давайте соберем все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I"m a test." и выведет содержимое файла в диалоговом окне.

В этом примере:

* Пользователь нажимает на ссылку "Сделать запрос" в броузере;
* Это вызывает функцию makeRequest() с параметром test.html - именем HTML файла;
* Посылается запрос, после чего (onreadystatechange) выполнение передается alertContents();
* alertContents() проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла test.html выводится в диалоговом окне.

Вы можете попробовать пример в действии , а сам тестовый файл можно посмотреть .

Замечание: Строка http_request.overrideMimeType("text/xml"); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724 , если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.

Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml, IE будет сообщать об ошибке JavaScript, "Object Expected", после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кэшировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».

Замечание 3: Если переменная http_request используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной http_request локально в функции и передача ее в alertContent() предотвращает состязания.

Замечание 4: При привязывании функции обратного вызова к onreadystatechange нельзя указывать аргументов. По этой причине не работает следующий код:

http_request.onreadystatechange = alertContents(http_request); // (не работает)

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

http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (одновременный запрос)
http_request.onreadystatechange = alertContents; //2 (глобальная переменная)

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

Замечание 5: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной.status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. https://bugzilla.mozilla.org/show_bug.cgi?id=238559).

Шаг 4 - Работа с XML ответом
В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали responseText запрашиваемого объекта, который содержал данные файла test.html. Теперь давайте попробуем использовать свойство responseXML.

Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (test.xml) содержит следующее:

< ?xml version="1.0" ?>

I"m a test.

В скрипте нам всего лишь необходимо заменить строку запроса на:

...
onclick="makeRequest("test.xml")">
...

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);

Чтобы узнать больше о методах DOM, посмотрите

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 . Все параметры являются необязательными . Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.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 + } } );

Ajax - это подход к построению интерактивных пользовательских интерфейсов web-приложений, разработанный на javaScript, который в фоновом режиме (без перезагрузки всей страницы, как в PHP) позволяет обмениваться данными между браузером и сервером.

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

Из истории AJAX Первое упоминания об AJAX официально известно 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) Новый подход к веб-приложениям. Автор решил описать новый подход к web-технологиям и упрощённой связи сервера и клиента.

Большую популярность AJAX приобрёл после того, как Google использовал его в своих сервисах, таких как Gmail, Google Maps и Google Suggest .

Google поиск выдаёт варианты запроса

Как работает AJAX В начале хотелось бы сказать, что AJAX имеет вид всего лишь одного объекта под названием XMLHttpRequest .

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

Когда Вы используете Ajax нужно учитывать следующие правила:
1. вся информация передается/получается исключительно в кодировке UTF-8
2. в разных браузерах XMLHttpRequest вызывается по-разному

Основные преимущества и недостатки AJAXПреимущества

Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик.
Уменьшение нагрузки на сервер. Нет надобности обновлять страницу целиком, уходит конкретный запрос. Например, Вы захотели проголосовать на сайте. После нажатия кнопки отправляются данные на сервер по Вашему голосу, и возвращается ответ. При этом сама страница не обновляется. Меняется только результат.
Быстрая работа самого сервиса . Поскольку работа происходит с конкретным блоком, то и результат его работы можно увидеть намного быстрее.
Разнообразие в использовании . Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.
Недостатки

Требуется включенный Java Script. Если в настройках безопасности браузера будет выключен Java Script, то результата работы AJAX можно не увидеть.
Данные не доступны поисковикам. Что логично, динамически изменяемые данные, как и прочие в Java Script не видимы поисковым роботом.
Сложность самого проекта . Со временем, при частом использовании AJAX на сервисе могут возникнуть трудности в работе с программным кодом и масштабностью проекта. Поэтому использование 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 и в следующих уроках мы продолжим изучать этот механизм взаимодействия с сервером!