Главная » Мтс » JavaScript - Синхронный AJAX запрос (XMLHttpRequest). Простой пример использования PHP и AJAX

JavaScript - Синхронный AJAX запрос (XMLHttpRequest). Простой пример использования PHP и AJAX

AJAX - это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX - это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

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

Обобщим достоинства AJAX:

Возможность создания удобного Web-интерфейса
Активное взаимодействие с пользователем
Удобство использования

AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма.Обмен данными

Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

Обмениваться данными с сервером можно двумя способами. Первый способ - это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.

Методы объекта XMLHttpRequest

Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort() - отмена текущего запроса к серверу.

getAllResponseHeaders() - получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») - получить указаный заголовок.

open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») - инициализация запроса к серверу, указание метода запроса. Тип запроса и URL - обязательные параметры. Третий аргумент - булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию - true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») - послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,«значение») - установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange - одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState - число, обозначающее статус объекта.

responseText - представление ответа сервера в виде обычного текста (строки).

responseXML - объект документа, совместимый с DOM, полученного от сервера.

status - состояние ответа от сервера.

statusText - текстовое представление состояния ответа от сервера.

Следует подробнее расммотреть свойство readyState:

0 - Объект не инициализирован.
1 - Объект загружает данные.
2 - Объект загрузил свои данные.
3 - Объек не полностью загружен, но может взаимодействовать с пользователем.
4 - Объект полностью инициализирован; получен ответ от сервера.

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

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

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

Var Request = new XMLHttpRequest();

А для Internet Explorer`а используется следующее:

Var Request = new ActiveXObject("Microsoft.XMLHTTP");

Var Request = new ActiveXObject("Msxml2.XMLHTTP");

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

Function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko-совместимые браузеры, Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("Невозможно создать XMLHttpRequest"); } return Request; }

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

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

Проверка существования XMLHttpRequest.
Инициализация соединения с сервером.
Посылка запрса серверу.
Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3... r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) { //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз if (!Request) { return; } //Назначаем пользовательский обработчик Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } } //Проверяем, если требуется сделать GET-запрос if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Инициализируем соединение Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //Если это POST-запрос //Устанавливаем заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посылаем запрос Request.send(r_args); } else { //Если это GET-запрос //Посылаем нуль-запрос Request.send(null); } }

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

Function ReadFile(filename, container) { //Создаем функцию обработчик var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //Отправляем запрос SendRequest("GET",filename,"",Handler); }

Именно таким образом происходит взаимодействие с сервером.

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

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.

Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о загрузке } } ...

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { if (Request.status == 200) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о произошедшей ошибке } } else { //Оповещаем пользователя о загрузке } } ...

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

Обычный текст

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

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

Пример кода JSON:
{ "data": { "misc": [ { "name" : "JSON-элемент один", "type" : "Подзаголовок 1" }, { "name" : "JSON-элемент два", "type" : "Подзаголовок 2" } ] } }

При получении такого кода, производим следующее действие:

Var responsedata = eval("(" + Request.responseText + ")")

После выполнения данного кода вам будет доступен объект responsedata .

Работа с серверными языками программирования

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

По традиции, начнем с приветствия нашему замечательному миру:

Echo "Hello, World!";

При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.

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

JQuery это библиотека javascript, цель которой "пиши меньше, делай больше". jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.

jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.

Что такое AJAX?

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

Что насчет jQuery и AJAX?

Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.

jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.

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

В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме . Давайте начнем... Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.

Шаг 1. Создайте файл school.php и вставьте в него следующий код:

В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .

Your Name:
Roll Number:

Шаг 2: Создайте details.php и расположите в нем следующий код:

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

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

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

Returns: jqXHR

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

version added: 1.5 jQuery.ajax(url [, settings])
url
Тип : Строка
URL адрес, на который будет отправлен Ajax запрос

settings
Тип : Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из . Ниже приведен полный список всех настроек.
version added: 1.0 jQuery.ajax(settings)
settings
Тип : Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из .

settings:

Настройка	Тип данных
accepts По умолчанию: зависит от типа данных При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts . Если требуется его изменить, лучше сделать это с помощью метода $.ajaxSetup() .	объект
async По умолчанию: true По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: "jsonp" не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер.	логический
beforeSend(jqXHR jqXHR, объект settings) Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов. Возврат значения false в функции beforeSend вызовет отмену ajax-запроса. Начиная с jQuery 1.5 , beforeSend сработает вне зависимости от типа запроса.	функция
cache По умолчанию: true , false для типов данных "script" and "jsonp" Если false, запрашиваемая страница не будет кэшироваться браузером.	логический
complete(jqXHR jqXHR, строка textStatus) Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Функция принимает два аргумента: объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest) и строку, характеризующую статус запроса ("success", "notmodified", "error", "timeout", "abort", или "parsererror"). Начиная с jQuery 1.5 , complete может принимать массив функций.	функция или массив
contents Параметр задается в формате {строка:регулярное выражение} и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добалено в версии 1.5)	объект
contentType По умолчанию: "application/x-www-form-urlencoded; charset=UTF-8" При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется "application/x-www-form-urlencoded; charset=UTF-8". Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.	строка
context Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body: $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } });	объект
converters По умолчанию: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML} Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5)	объект
crossDomain По умолчанию: false для одного и того же домена, true для кроссбоменных запросов. Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)	логический
data Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение . Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, {foo:["bar1", "bar2"]} превращается в &foo=bar1&foo=bar2 .	объект или строка
dataFilter(строка data, строка type) Функция, с помощью которой будут обрабатываться сырые данные типа XMLHttpRequest, полученные от сервера. Ваша функция должна играть роль фильтра и возвращать очищенную строку. В функцию передаются два параметра: полученные данные и значение параметра dataType.	функция
dataType По умолчанию: автоматически определяемая строка (xml, json, script, или html) Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.	строка
error(jqXHR jqXHR, строка textStatus, строка errorThrown) Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента: объект jqXHR (в прошлом XMLHttpRequest), строку с описанием ошибки, а так же строку исключения, если оно было выбрашено. Второй аргумент может содержать следующие значения: null, "timeout", "error", "abort", и "parsererror". В случае если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус. К примеру, "Not Found" или "Internal Server Error.". Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций. Событие error не происходит при dataType равному script или JSONP.	функция или массив
global По умолчанию: true . Вызывать или нет глобальные обработчики событий Ajax для этого запроса (например ajaxStart или ajaxStop).	логический
headers По умолчанию: {} Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)	объект
ifModified По умолчанию: false Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение "etag", для отслеживания факта изменения данных.	логический
isLocal По умолчанию: в зависимости от текущей локации Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и widget) или нет (например по протоколу http). Данную настройку лучше менять с помощью метода $.ajaxSetup() . (добалено в версии 1.5)	логический
jsonp Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется "callback"). К примеру настройка {jsonp:"onJSONPLoad"} преобразуется в часть url строки "onJSONPLoad=?". Начиная с версии 1.5 , указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: {jsonp:false, jsonpCallback:"callbackName"}.	строка
jsonpCallback Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.	строка или функция
mimeType Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. (добалено в версии 1.5.1)	строка
password Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)	строка
username Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)	строка
processData По умолчанию: true ; По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как "application/x-www-form-urlencoded". Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.	логический
scriptCharset Применяется только для Ajax GET-запросов типов "JSONP" и "script ". Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.	строка
statusCode По умолчанию: {} Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран: $.ajax({ statusCode:{ 404:function(){ alert("Страница не найдена"); } } }); Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. (добалено в версии 1.5)	объект
success(объект data, строка textStatus, объект jqXHR) Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента - данные (data ), присланные сервером и прошедшие предварительную обработку; строка со статусом выполнения (textStatus); объект jqXHR (в версиях до 1.5 вместо jqXHR используетсяXMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.	функция или массив
timeout Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус "timeout".	число
traditional По умолчанию: false Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.	логический
type По умолчанию: GET Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.	строка
url По умолчанию: текущая страница. Страница, накоторую будет отправлен запрос.	строка
xhr По умолчанию ActiveXObject в IE, XMLHttpRequest в других браузерах. Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.	function
xhrFields Объект вида {имя:значене} для изменения значений соответствующих полей объекта XMLHttpRequest . $.ajax({ url: a_cross_domain_url, xhrFields: { withCredentials: true } }); (добалено в версии 1.5.1)	map

$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function(msg) { alert("Data Saved: " + msg); });

Получить последнюю версию HTML страницы

$.ajax({ url: "test.html", cache: false }).done(function(html) { $("#results").append(html); });

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false:

Var xmlDocument = ; var xmlRequest = $.ajax({ url: "page.php", processData: false, data: xmlDocument }); xmlRequest.done(handleResponse);

Var menuId = $("ul.nav").first().attr("id"); var request = $.ajax({ url: "script.php", type: "POST", data: {id: menuId}, dataType: "html" }); request.done(function(msg) { $("#log").html(msg); }); request.fail(function(jqXHR, textStatus) { alert("Request failed: " + textStatus); });

Загрузить и выполнить файл JavaScript:

$.ajax({ type: "GET", url: "test.js", dataType: "script" });

string GET

HTTP-метод передачи данных при выполнении запроса. Обычно используются GET или POST . Также можно использовать методы PUT и DELETE , но это не рекомендуется, ввиду того, что они поддерживаются не всеми браузерами.

$.ajax({ //... type: "POST", //... });

url string текущая страница

$.ajax({ //... url: "/path/to/script", //... });

data string | object

Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр ).

Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.

$.ajax({ //... data: "value1=1&value2=2&value3=3", //... });

Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.

{Foo: [ "bar1", "bar2"]}

&Foo=bar1&Foo=bar2

async boolean true

Флаг выполнения асинхронных запросов.

$.ajax({ //... async: false, //... });

dataType string Строка, определяющая название типа данных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения: xml , html , script , json , jsonp , text . (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.) cache boolean true

Флаг кэширования ответа.

По умолчанию имеет значение true для типов данных text , xml , html , json . Для типов данных script и jsonp имеет значение по умолчанию false .

contentType string application/x-www-form-urlencoded Тип содержимого в запросе (при передаче данных на сервер). context object Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным ajax-запросом (например, для функций success или error) $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } }); global boolean true Вызов глобальных обработчиков событий на различных этапах ajax-запроса, например, функций ajaxStart или ajaxStop ifModified boolean false

Если установлено значение true , то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка Last-Modified с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок Etag – строка с версией компонента). По умолчанию имеет значение false , т.е. успешность запроса не зависит от заголовков и от изменений в ответе.

username string

Имя пользователя, которое будет использоваться для HTTP авторизации на сервере.

password string Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере. processData boolean true

Данные, передаваемые на сервер в параметре , преобразовываются в строку запроса с типом содержимого Application / X-WWW-форм-urlencoded и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false .

scriptCharset string

При выполнении запросов методом GET и запросов, ориентированных на получение данных типа jsonp или script , указывает кодировку символов запроса (например UTF-8 или CP1251). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.

timeout integer

Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup . Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена).

Название Параметры Описание

error	XHR, textStatus, errorThrown	Срабатывает при неудачном запросе. Функции передаются три аргумента: textStatus - строка, описывающая тип ошибки, которая произошла (timeout , error , notmodified или parsererror) errorThrown - необязательный параметр, объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR) $.ajax({ //... error: function() { alert("Ошибка!"); }, //... });
success	data, textStatus, XHR	Срабатывает при успешном запросе. Функции передаются три аргумента: data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра textStatus - строку с кодом статуса, сообщающем об успехе XHR - экземпляр объекта XMLHttpRequest $.ajax({ //... success: function() { alert("Успех!"); }, //... });
beforeSend	XHR	Срабатывает перед отправкой запроса. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает false , то происходит отмена запроса. $.ajax({ //... beforeSend: function() { alert("Сработал beforeSend!"); }, //... });
complete	XHR, textStatus	Срабатывает по окончанию запроса независимо от его успеха или неудачи (а также после функций и , если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии success или error (в соответствии с кодом статуса в ответе на запрос)

Подробный пример:

PHP скрипт (test.php):

Еще один пример, отличается выводом ответа:

Ответ:

PHP скрипт (test.php):

Больше информации можно посмотреть по адресу: http://api.jquery.com/jquery.ajax/

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

url — адрес запроса.
settings — в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате {имя:значение, имя:значение...} . Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup() .

Список настроек

↓ название :тип (значение по умолчанию)

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

По умолчанию, все запросы без перезагрузки страницы происходят асинхронно (то есть после отправки запроса на сервер, страница не останавливает свою работу в ожидании ответа). Если вам понадобиться синхронное выполнение запроса, то установите параметр в false . Кроссдоменные запросы и запросы типа "jsonp" не могут выполняться в синхронном режиме.

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

Это поле содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.

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

При переводе этой настройки в true , запрос будет выполнен со статусом "успешно", лишь в случае, если ответ от сервера отличается от предыдущего ответом. jQuery проверяет этот факт обращаясь к заголовку Last-Modified. Начиная с jQuery-1.4, кроме Last-Modified проверяется и "etag" (оба они предоставляются сервером и необходимы для оповещения браузера о том, что запрашиваемые данные с сервера не изменены с предыдущего запроса).

Позволяет установить статус источника страницы локальным (как если бы это происходило по протоколу file), даже если jQuery распознал его иначе. Библиотека решает, что страница запущена локально в случае следующих протоколов: file, *-extension, и widget.

Рекомендуется устанавливать значение параметраisLocal глобально — с помощью функциии $.ajaxSetup() , а не в настройках отдельных ajax-запросов.

Определяет имя параметра, который добавляется в url при jsonp-запросе (по умолчанию, используется "callback" — "httр://siteName.ru?callback=...").

Начиная с jQuery-1.5, указав в этом параметре false , вы предотвратите добавление в url дополнительного параметра. В этом случае необходимо явно установить значение свойства jsonpCallback. Например так: {jsonp:false, jsonpCallback:"callbackName"} .

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

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

По умолчанию, все передаваемые на сервер данные, предварительно преобразуются в строку (url-формата: fName1=value1&fName2=value2&...) соответствующую "application/x-www-form-urlencoded". Если вам необходимо отправить данные, которые нельзя подвергать подобной обработке (например документ-DOM), то следует отключить опцию processData.

Этот параметр используется для кроссдоменных ajax-запросов типа GET, dataType при этом может быть или "jsonp", или "script". Определяет кодировку, в которой будет выполнен кроссдоменный запрос. Это необходимо, в случае, если сервер на чужом домене использует кодировку, отличную от кодировке на сервере родного домена.

(Эта настройка появилась в jQuery-1.5) набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

$.ajax ({ statusCode: { 404 : function () { alert ("Страница не найдена" ) ; } } } ) ;

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

Функция, которая будет вызвана в случае удачного завершения запроса к серверу. Ей будут переданы три параметра: данные, присланные сервером и уже прошедшие предварительную обработку (которая отлична для разных dataType). Второй параметр — строка со статусом выполнения. Третий параметр содержит объект jqXHR (в более ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Начиная с jQuery-1.5, вместо одной функции, этот параметр может принимать массив функций.

Время ожидания ответа от сервера. Задается в в миллисекундах. Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error (см. описание выше), которое будет иметь статус "timeout".

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

В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.

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

(Эта настройка появилась в jQuery-1.5.1) Набор пар {имя:значене} для изменения/добавления значений соответствующих полей объекта XMLHttpRequest . Например, можно установить его свойство withCredentials в true , при выполнении кроссдоменного запроса:

$.ajax ({ url: a_cross_domain_url, xhrFields: { withCredentials: true } } ) ;

В jQuery-1.5 свойство withCredentials не поддерживается нативным XMLHttpRequest и при кроссдоменном запросе это поле будет проигнорировано. Во всех следующих версиях библиотеки, это исправлено.

Обработчики событий

Настройки beforeSend, error, dataFilter, success и complete (их описание есть в предыдущем разделе) позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.

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

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

$.ajax ({ url: "ajax/test.html" , success: function () { alert ("Load was performed." ) ; } } ) ;

Начиная с jQuery-1.5, метод $.ajax() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred , что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и.then() , с помощью которых можно устанавливать обработчики, в jqXHR реализованы.success(), .error() и.complete() . Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования .

Для некоторых типов запросов, таких как jsonp или кроссдоменных GET-запросов, не предусматривается использование объектов XMLHttpRequest. В этом случае, передаваемые в обработчики XMLHttpRequest и textStatus будут содержать значение undefined .

Внутри обработчиков, переменная this будет содержать значение параметра context . В случае, если он не был задан, this будет содержать объект настроек.

Параметр dataType

Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType . Возможные значения этого параметра:

"xml" — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html). "html" — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах , то они будут автоматически выполнены, только когда html-текст будет помещен в DOM. "script" — полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR . "json", "jsonp" — полученные данные будут предварительно преобразованы в javascript-объект. Если разбор окажется неудачным (что может случиться, если json содержит ошибки), то будет вызвано исключение ошибки разбора файла. Если сервер, к которому вы обращаетесь, находится на другом домене, то вместо json следует использовать jsonp . Узнать о json и jsonp можно на википедии . "text" — полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.

Замечание 1 : когда запрос отправляется на сторонний домен (что возможно только с dataType равным jsonp или script), обработчики ошибки выполнения (error), а так же глобальные события не сработают.

Замечание 2 : тип данных, заданный в dataType не должен противоречить предоставляемой сервером MIME-информации. Например, xml-данные должны быть представлены сервером как text/xml или application/xml . Если это не будет выполнено, jquery попытается конвертировать полученные данные в указанный тип (подробнее об этом в разделе Converters).

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

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

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

Замечание: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего. Однако, это ограничение не распространяется на запросы типа jsonp и script .

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

Полученные от сервера данные, могут быть предоставлены в виде строки или объекта, в зависимости от значения параметра dataType (см. пункт dataType выше). Эти данные всегда доступны в первом параметре обработчика выполнения ajax-запроса:

$.ajax ({ url: "some.php" , success: function (data) { alert ( "Прибыли данные: " + data ) ; } } ) ;

Для типов text и xml , присланные сервером данные будут доступны так же и в jqXHR , а именно в его полях responseText или responseXML соответственно.

Продвинутые настройки

Используя параметр global можно отключать выполнение обработчиков событий (.ajaxSend(), .ajaxError() и др.) для отдельных запросов. Это может быть полезно, например в случае, если в этих обработчиках запускается/останавливается анимация загрузки. Тогда если некоторые запросы выполняются очень часто и быстро, то для них полезно будет отключить выполнение обработчиков. Для кроссдоменных script и jsonp запросов параметр global отключается автоматически.

Если для совершения запроса к серверу необходимы данные аутентификации (логин/пароль), то их можно указать в настройках username и password ajax-запроса.

На выполнение запроса к серверу отводится определенное время. Если в течении этого времени сервер не присылает ответ, то запрос завершается с ошибкой (статус "timeout"). Время ожидания ответа от сервера можно изменить, задав необходимое значение (в миллисекундах) в настройке timeout .

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

В большинстве случаев, ajax-запрос происходит асинхронно, однако в некоторых случаях может понадобиться последовательное выполнение запроса (когда дальнейшее выполнение скрипта невозможно, без получения ответа от сервера). Сделать запрос синхронным можно если отключить настройку async . Однако стоит помнить, что в таком случае станица будет "подвисать" при ожидании ответа от сервера.

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

Наиболее простым вариантом использования будет вызов $.ajax() без задания параметров:

$.ajax () ; // на сервер будет отправлен GET-запрос на url-адрес текущей страницы и без указания каких-либо параметров.

Если нужно подгрузить и выполнить js-файл, то это можно сделать следующим образом:

$.ajax ({ type: "GET" , url: "test.js" , dataType: "script" } ) ;

Сделаем POST-запрос на сервер, указав при этом два параметра и оповестим пользователя о удачно завершенном запросе:

$.ajax ({ type: "POST" , url: "some.php" , data: "name=John&location=Boston" , success: function (msg) { alert ( "Прибыли данные: " + msg ) ; } } ) ;

Обновим содержимое нужной html-страницы:

$.ajax ({ url: "test.html" , cache: false , success: function (html) { $("#results" ) .append (html) ; } } ) ;

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

// присланные от сервера данные, запишем в переменную html var html = $.ajax ({ url: "some.php" , async: false } ) .responseText ;

В качестве параметра, отправим на сервер xml-объект. Для его корректной передачи необходимо отменить предварительное преобразование параметров (processData:false). В качестве обработчика удачного завершения запроса укажем пользовательскую функцию handleResponse:

var xmlDocument = [ create xml document] ; $.ajax ({ url: "page.php" , processData: false , data: xmlDocument, success: handleResponse } ) ;

Расширенный подход

Начиная с jQuery-1.5 появились три новых направления, позволяющие использовать $.ajax() еще более глубоко. Первый из них (Prefilters) позволяет провести дополнительные манипуляции, непосредственно перед отправкой запроса. С помощью второго подхода (Converters) можно указать jQuery, как следует конвертировать полученные от сервера данные, если они не соответствуют ожидаемому формату. Третий подход (Transports) является наиболее низкоуровневым, он позволяет самостоятельно организовать запрос к серверу.

Prefilters

Этот подход состоит в установке обработчика, вызываемого перед выполнением каждого ajax-запроса. Этот обработчик предшествует выполнению любых других обработчиков ajax. Устанавливается он с помощью функции $.ajaxPrefilter() :

$.ajaxPrefilter (function (options, originalOptions, jqXHR) { } ) ;

Где
options — настройки текущего запроса,
originalOptions — настройки по умолчанию,
jqXHR — jqXHR-объект данного запроса.

В Prefilters удобно обрабатывать пользовательские настройки (т.е. новые, неизвестные библиотеке настройки, указанные в запросе). Например, можно ввести собственную настройку abortOnRetry , при включении которой незавершенные запросы будут сбрасываться, в случае, если на этот-же url поступает следующий запрос:

В ajaxPrefilter удобно обрабатывать и существующие настройки. Например так можно изменить кросс-доменный запрос на перенаправленный через сервер своего домена:

$.ajaxPrefilter (function (options) { if (options.crossDomain ) { options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; } } ) ;

Кроме этого, можно указывать значения dataType на которых сработает prefilter. Так, к примеру, можно указать типы json и script:

$.ajaxPrefilter ( "json script" , function (options, originalOptions, jqXHR) { // Изменяем настройки (options), проверяем базовые настройки (originalOptions) и объект jqXHR } ) ;

И наконец, можно изменить значение dataType , вернув необходимое значение:

$.ajaxPrefilter (function (options) { // изменим dataType на script, если url соответствует определенным условиям if (isActuallyScript(options.url ) ) { return "script" ; } } ) ;

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

Converters

Этот принцип заключается в установке обработчика, который сработает, если указанный в настройках dataType не совпадет с типом данных, присланных сервером.

Converters является настройкой ajax, поэтому может быть задан глобально:

// так можно задать обработчик, который сработает, если вместо // указанного вами в dataType типа mydatatype придут данные типа text $.ajaxSetup ({ converters: { "text mydatatype" : function ( textValue ) { if (valid( textValue ) ) { // обработка переданного текста return mydatatypeValue; } else { // если присланные сервером данные совсем не соответствуют ожидаемым, // можно вызвать исключение. throw exceptionObject; } } } } ) ;

Converters поможет при введении собственного (пользовательского) dataType. Важно отметить , что в названии такого dataType должны использоваться только строчные буквы! Запрос данных, упомянутого выше типа "mydatatype", мог бы выглядеть следующим образом:

$.ajax ( url, { dataType: "mydatatype" } ) ;

Просмотров