Что возвращает ajax. JavaScript - Асинхронные AJAX запросы на примерах

Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.

Что такое асинхронный запрос AJAX?

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

При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.

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

Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.

Создание асинхронного AJAX запроса (метод GET)

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

Для этого необходимо создать на сервере 2 файла в одном каталоге:

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

processing.php – PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ. Начнём разработку с создания основной структуры файла welcome.html

Пример работы AJAX Пример работы AJAX // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

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

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

Настроим запрос с помощью метода open() .

Указываются следующие параметры:

• Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
• URL-адрес, который будет обрабатывать запрос на сервере.
• Тип запроса: синхронный (false) или асинхронный (true).
• Имя и пароль при необходимости.

Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .

Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).

Отправим запрос на сервер с помощью метода send() .

Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

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

// 2. Создание переменной request var request = new XMLHttpRequest(); // 3. Настройка запроса request.open("GET","processing.php",true); // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции request.addEventListener("readystatechange", function() { // если состояния запроса 4 и статус запроса 200 (OK) if ((request.readyState==4) && (request.status==200)) { // например, выведем объект XHR в консоль браузера console.log(request); // и ответ (текст), пришедший с сервера в окне alert console.log(request.responseText); // получить элемент c id = welcome var welcome = document.getElementById("welcome"); // заменить содержимое элемента ответом, пришедшим с сервера welcome.innerHTML = request.responseText; } }); // 5. Отправка запроса на сервер request.send();

В итоге файл welcome.html будет иметь следующий код:

Пример работы AJAX Пример работы AJAX window.addEventListener("load",function() { var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener("readystatechange", function() { if ((request.readyState==4) && (request.status==200)) { var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; } }); request.send(); });

На сервере (с помощью php):

Получим данные. Если данные посланы через метод GET , то из глобального массива $_GET["имя"] . А если данные переданы с помощью метода POST , то из глобального массива $_POST["имя"] .

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

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

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

Надеюсь, эта статья будет вам полезна.

Большинство современных сайтов используют технологию, которая называется 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() .

Описание: Выполняет асинхронный HTTP (Ajax) запрос.

• Добавлен в версии: 1.5

  settings

  $.ajaxSetup() . Ниже приведен полный список всех настроек.

• Добавлен в версии: 1.0

  settings

  Ассоциативный массив для конфигурации Ajax запроса. Все настройки не обязательные к заполнению (опциональны). Значения по умолчанию могут быть установлены при помощи метод $.ajaxSetup() .

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

    Ассоциативный массив отображающий заданный dataType его типу MIME, который отправляется полем Accept в заголовке HTTP запроса. Этот заголовок сообщает серверу какой формат ответа будет принят. Например, следующий пользовательский тип данных mycustomtype будет отправлен в запросе: Важно: Вы должны дополнительно указать соотвествующие типу converters для корректной обработки Ajax ответа.

    async

    По умолчанию, все зпросы отпрвляются асинхронно (т.е. это значение установленное в true по умолчанию). Если Вам нужен синхронный запрос, установите значение параметра false . Кросс-доменные и dataType: "jsonp" запросы не поддерживают синхронные операции. Обратите внимние, что синхронные запросы могут временно блокировать браузер или приостанавливать какие то активные операции в моменты выполнения запроса. Начиная с jQuery 1.8 , использование async: false с jqXHR ($.Deferred) не рекомендуется ; Вы должны использовать обработчики success / error / complete вместо соотвествующих методов объекта jqXHR, таких как jqXHR.done() .

    beforeSend

    Обработчик вызываемый перед совершения запроса, в котором Вы можете модицифировать объект jqXHR (В версиях jQuery 1.4.x и ниже, XMLHTTPRequest) перед тем как Ajax запрос будет отправлен. Использовать пользовательские заголовки и т.д. The jqXHR and settings objects are passed as arguments. This is an Ajax Event . Returning false in the beforeSend function will cancel the request. As of jQuery 1.5 , the beforeSend option will be called regardless of the type of request.

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

    Если устновлено значение false , то принудительно запрошенные страницы не будут закешированы браузером. Важно: Значение false параметра cache будет корректно работать только с запросами HEAD и GET. Это работает путем добавления "_={timestamp}" к адресу GET запроса. Этот параметр не нужендля других типов запросов, исключая случай с IE8 когда POST запрос осуществляется к тому же адресу URL к которому уже выполнялся GET запрос.

    complete

    Функция которая вызывается когда запрос завершается (после того как success или error обработчики будут вызваны). Функция принимает два аргумента: объект jqXHR (в версии jQuery 1.4.x и ниже, XMLHTTPRequest) и строка статуса запроса ("success" , "notmodified" , "nocontent" , "error" , "timeout" , "abort" или "parsererror"). Начиная с jQuery 1.5 , параметр complete может принимать массив функций. Каждая функция будет вызывана в свою очередь. Является Ajax событием .

    contents

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

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

    Когда отправляются данные на сервер, используется этот тип контента Content-Type . Значение по умолчанию "application/x-www-form-urlencoded; charset=UTF-8", которое прекрасно подходит для большинства случаев. Если Вы явно передаете content-type в метод $.ajax() , то он всегда будет отправлен на сервер (даже если никакие данные не будут отправлены на сервер). Начиная с jQuery 1.6 Вы можете указать значени false чтобы jQuery не передавал в заголовке поле Content-Type совсем. Важно: Стандарт W3C XMLHttpRequest specification предписывает всегда использовать кодировку UTF-8; указание другой кодировки не вынудит браузер изменить кодировку. Важно: Для кросс-доменных запросов, установка тип контента в значение отличающегося от application/x-www-form-urlencoded , multipart/form-data или text/plain вынудит браузер отправить подготовительный OPTIONS запрос на сервер.

    Это объект будет контекстом для всех обработчиков этого Ajax запроса. По умолчанию контекстом является объект представляющий Ajax настройки используемые при вызове ($.ajaxSettings объединеные с настройками переданными в $.ajax). Например, указав DOM элемент как контекст сделает его контекстом в обработчике запроса complete:

    url: "test.html" , context: document.body }).done(function () { $(this ).addClass("done" );

  • converters (значение по умолчанию: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML})

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

    Если Вы хотите выполнить запрос к тому же домену вынужденно как кросс-доменный (например JSONP), установите значение в true . Это позволяет, например, вернуть от сервера редирект н другой домен. (Добавлено в версии: 1.5)

    Данные отправляемые на сервер. Они будут преобразованы в строку, если еще не являются строкой. Для GET запроса эта строка будет добавлена к URL адресу. Смотрите праметр processData для предотвращения этой автоматической обработки. Объект должен быть ассоциативным массивом (пары ключ/значение). Если значение является массивом, то jQuery сериализирует значения массива с тем же самым ключем на основе значения параметра traditional (описан ниже).

    dataFilter

    Функция используемая для обработки исходных данных от XMLHttpRequest. Это предварительная функция для проверки и чистки данных ответа. Вы должны вернуть очищенные данные. Функция принимает два аргумента: исходные данные отданные сервером и значение параметра dataType .

    dataType (значение по умолчанию: Общеиспользуемые типы (xml, json, script, или html))

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

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

  • Функция вызывается если запрос закончится ошибкой. Функция принимает три аргумента: объект jqXHR (в jQuery 1.4.x, XMLHttpRequest), строка описывающая тип произошедшей ошибки и необязательный объект исключения, если он был вызван. Возможные значения второго аргумента (кроме null): "timeout" , "error" , "abort" и "parsererror" . При возникновении HTTP ошибки, аргумент errorThrown примет текстовую часть HTTP статуса, такие как "Not Found" или "Internal Server Error." Начиная с jQuery 1.5 , параметр error может принять массив функций. Каждая функция будет вызвана в своем порядке. Важно: Этот обработчик не вызывается для кросс-доменных скриптовых и кросс-доменных JSONP запросов. Являетсяе Ajax событием .

    global (значение по умолчанию: true)

    Параметр регулирует вызывать ли глобальные Ajax события для этого запроса. По умолчанию значение равно true . Установка значения в false предотвратит вызов таких глобальных обработчиков как ajaxStart или ajaxStop . Это можно использовать для управления различными Ajax событиями .

    headers (значение по умолчанию: {})

    Объект с дополнительными полями заголовка HTTP запроса для отправки через XMLHttpRequest. Заголовок X-Requested-With: XMLHttpRequest добавляется всегда, но его значение по умоланию XMLHttpRequest можно изменить через этот параметр. Значения в headers также может быть переписаны в функции beforeSend . (добавлен в версии: 1.5)

    ifModified (значение по умолчанию: false)

    Разрешает запросу быть успешным только если ответ изменился с момента последнего запроса. Это делается путем проверки поля заголовка Last-Modified . Значение по умолчанию false , игнорирует поля заголовка HTTP запроса. В jQuery 1.4 и ниже этот алгоритм также проверяет поле заголовка ответа "etag" указанное сервером, что найти неизменненные данные.

    isLocal (значение по умолчанию: зависит от текущего локального протокола)

    Разрешает текущему окружение как "локальное" (например файловая система), даже если jQuery не распознает его таким по умоланию. Следующие протоколыв в настоящее время признаются как локальные: file , *-extension и widget . Если опция isLocal требует изменения, то рекомендуется сделать это один раз при помощи метода $.ajaxSetup() . (добавлен в версии: 1.5.1)

    Переопределяет имя функции обратного вызова в JSONP запросе. Это значение используется вместо названия функциии "callback" в URL-параметре "callback=?". Так {jsonp:"onJSONPLoad"} передастся на сервер в виде "onJSONPLoad=?" . Начиная с jQuery 1.5 , значение параметра jsonp равное false предотвращает jQuery от добавления строки "?callback" к URL-адресу или попытки использовать "=?" для преобразования ответа. В этом случае, Вы должны явно указать значение параметра jsonpCallback . Например, { jsonp: false, jsonpCallback: "callbackName" } . Если Вы не доверяете целям Ваших Ajax запросов, то рекомендуется по соображениям безопасности установить значение параметра jsonp в false .

    jsonpCallback

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

    method

    mimeType

    password

    Пароль для использования с XMLHttpRequest в ответ на запрос basic http авторизации.

    processData (значение по умолчанию: true)

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

    scriptCharset

    Применяется только при использовании "script" в качестве транспорта (например, кросс-доменные запросы с "jsonp" или "script" dataType и методом "GET"). Устанавливает аттрибут charset используемого тэга script в запросе. Используется, когда кодировка символов на текущей странице отличается от кодировки символов удаленного скрипта.

    statusCode (значение по умолчанию: {})

    Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:

    404 : function () { alert("страниц не найдена" );

    Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .

    (добавлен в версии: 1.5)

  • Функция вызываемая если запрос успешен. Функция принимает три аргумента: data - данные возвращенные с сервера, отформатированные в соответствии с параметром dataType или dataFilter если они указаны; строка описывающая статус; и объект jqXHR (в версии jQuery 1.4.x и ниже XMLHttpRequest). Начиная с jQuery 1.5 , Этот параметр может принимать массив функций. Каждая функция будет вызывана в свою очедерь. Является Ajax событием .

    Задает таймаут запроса (в милисекундах). Этот параметр переопределяет глобальный таймаут, устанавливаемый при помощи метода $.ajaxSetup() . Этот таймаут запускается в момент запуска метода $.ajax ; если несколько других запросов в процессе работы и браузер не имеет сетевого подключения, то возможен запрос на таймаут, прежде чем он будет отправлен. В версии jQuery 1.4.x и ниже, объект XMLHttpRequest будет находиться в недопустимом состоянии если время ожидния будет превышено; обращение к любым методам объекта сгенерирует исключение. В Firefox 3.0+, script и JSONP запросы не могут быть отменены по таймауту; скрипт будет работать, даже если он прийдет после таймаута.

    traditional

    type (значение по умолчанию: "GET")

    Синоним для параметра method . Вы должны использовать type если Вы используете версию jQuery до 1.9.0.

    url (значение по умолчанию: Текущий URL-адрес)

    username

    Имя пользователя используемое с XMLHttpRequest в ответ на запрос basic http авторизации.

    xhr (значение по умолчанию: ActiveXObject когда доступен (IE), иначе XMLHttpRequest)

    Функция обратного вызова для создания объекта XMLHttpRequest. По умолчанию используется ActiveXObject когда доступен (для IE), иначе используется XMLHttpRequest. У Вас есть возможность переопределить создание этого объекта и вернуть свою реализацию XMLHttpRequest или улучшить создание этого объекта.

    xhrFields

    Объект с парами fieldName-fieldValue для установки в нативный объект XHR . Например, Вы можете использовать значение withCredentials равное true для кросс-доменных запросов в случае необходимости.

    url: a_cross_domain_url, withCredentials: true

    В jQuery 1.5 , свойство withCredentials не будет распространено на нативный объект XHR и таким образом CORS запросы требуя его будет игнорировать этот флаг. По этой причине, мы рекомендуем использовать jQuery 1.5.1+.

    (добавлен в версии: 1.5.1)

Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load() , которые более простые в использовании. Если требуется менее распространенные варианты, через, $.ajax() Вы можете более гибко скофигурировать запрос.

В простейшем виде, функция $.ajax() может быть вызвана без аргументов:

Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup() .

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

Объект jqXHR

Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML , а также метод getResponseHeader() . Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.

Начиная с jQuery 1.5.1 , объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод.overrideMimeType() может быть использован в обработчике beforeSend() , например, для изменения поля заголовка content-type:

url: "http://fiddle.jshell.net/favicon.png" , beforeSend: function (xhr) { xhr.overrideMimeType("text/plain; charset=x-user-defined" ); Done(function (data) { if (console && console.log) { console.log("Sample of data:" , data.slice(0 , 100 ));

Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise . Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

• jqXHR.done(function(data, textStatus, jqXHR) {});
• jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
• jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); (добавлен в версии jQuery 1.6)

  Альтернатива создания обработчика complete , метод.always() заменяет устаревший метод.complete() .

• jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});

Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.

Для обеспечения обратной совместимости с кодом XMLHttpRequest , в объекте jqXHR предоставляет следующие свойства и методы:

• readyState
• status
• statusText
• responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
• setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
• getAllResponseHeaders()
• getResponseHeader()
• statusCode()
• abort()

Механизма onreadystatechange не предусмотрено, так как done , fail , always и statusCode охватывает все возможные требования.

Очередность функций обратного вызова

Все параметры beforeSend , error , dataFilter , success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.

С версии jQuery 1.5 функции fail и done , и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы , которые реализуют внутренности обработчиков метода $.ajax() .

Функции обратного вызова предоставленные методом $.ajax() следующие:

beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.

error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR , строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: "abort", "timeout", "No Transport".

dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success .

success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR .

Promise обработчик - .done() , .fail() , .always() и.then() - выполняются, в том порядке в котором зарегистрированы.

complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR , отформатированную строку со статусом успеха или ошибки.

Типы данных

Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success . Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type , но может быть явно указан при помощи опции dataType . Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.

Возможны следующие типы данных: text , html , xml , json , jsonp и script .

Если указан text или html , никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR .

Если указан xml , то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success . XML документ доступен через свойство responseXML объекта jqXHR .

Если указан json , то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success . Полученный JSON объект доступен через свойство responseJSON объекта jqXHR .

Если указан script , то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success .

Если указан jsonp , $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=? . Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success .

Отправка данных на сервер

По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type . Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.

Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект {key1: "value1", key2: "value2"} . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData . Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.

Расширенные настройки

Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend() , .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false .

Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.

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

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

Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг (то есть тип данных script или jsonp). Это применимо в случае если удаленный скрипт и Ваша текущая страница используют разные кодировки.

Первая буква в слове Ajax означает "асинхронный", что означает что операция происходит параллельно и порядок ее выполнения не гарантируется. Параметр async метода $.ajax() по умолчанию равен true , что указывает что выполнение кода может быть продолжено после совершения запроса. Установка этого параметра в false (и следовательно, не делая Ваш вывод более асинхронным) настоятельно не рекомендуется, так как это может привести к тому что браузер перестанет отвечать на запросы.

Метод $.ajax() вернет объект XMLHttpRequest который и создает. Обычно jQuery обрабатывает создание этого объекта внутри, но можно указать при помощи параметра xhr функция которая переопределит поведение по умолчанию. Возвращаемый объект обычно может быть отброшен, но должен обеспечивать интерфейс низкого уровня для манипуляции и управления запросом. В частности, вызов.abort() на этом объекте должен будет остановить запрос до его завершения.

Расширение Ajax

Начиная с jQuery 1.5 , реализация Ajax в jQuery включает предварительные фильтры , транспорты и преобразователи, которые позволят Вам очень гибко настроить Ajax запросы под любые нужды.

Использование преобразований

$.ajax() преобразователи поддерживают трансформацию одних типов данных другие. Однако, если Вы хотите трансформировать пользовательский тип данных в известный тип данных (например json), Вы должны добавить добавить соответствие между Content-Type ответа и фактическим типом данных, используя параметр contents:

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

Script и JSONP запросы не подвергаются ограничениям этой политики.

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

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

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

jQuery - JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

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

Содержимое файла index.html.

function show() { $.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } }); } $(document).ready(function(){ show(); setInterval("show()",1000); });

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

Сам файл jquery.js - находится в той же папке, что и файлы примера.

2. В теле документа создается контейнер, в который мы будем загружать контент.

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

$(document).ready(function(){ show(); setInterval("show()",1000); });

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

$.ajax({ url: "time.php", cache: false, success: function(html){ $("#content").html(html); } });

Рассмотрим используемые параметры функции $.ajax().

Url: "time.php" Обращается к файлу time.php для получения контента. cache: false Результаты запросов не кэшируются. success: function(html){ $("#content").html(html); } При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
$("#content").html(html);

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

Смысл работы файла time.php - выводим текущее время на экран.

Скачать исходные файлы примера (16,6 кб):

Пример 2. Динамическое обновление контента по выбору пользователя

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

Содержимое файла index.html.

Какую страницу желаете открыть?

$(document).ready(function(){ $("#btn1").click(function(){ $.ajax({ url: "page1.html", cache: false, success: function(html){ $("#content").html(html); } }); }); $("#btn2").click(function(){ $.ajax({ url: "page2.html", cache: false, success: function(html){ $("#content").html(html); } }); }); });

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

Событие нажатия на кнопку "Страница 1" обрабатывается функцией $("#btn1").click(), а событие нажатия на кнопку "Страница 2" обрабатывается функцией $("#btn2").click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Скачать исходные файлы примера (18,4 кб):

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

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

Содержимое файла index.html.

Введите имя:


$(document).ready(function(){ $("#myForm").submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; }); });

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку "Отправить", выступает функция $("#myForm").submit(). Рассмотрим эту функцию.

$("#myForm").submit(function(){ $.ajax({ type: "POST", url: "greetings.php", data: "username="+$("#username").val(), success: function(html){ $("#content").html(html); } }); return false; });

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

Type: "POST" Тип передачи данных. data: "username="+$("#username").val() Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username - имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:
data: "username=Vasya&age=18&sex=male"

Обратим внимание, что в конце написана строка:

Return false; Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

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

Выводим на экран приветствие и подсчитываем количество символов в имени.

Скачать исходные файлы примера (16,8 кб):

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

1. На страницах с динамическим обновлением контента, кнопка "Назад" в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.