Синтаксис и описание:
Возвращаемое значение: Экземпляр объекта XHR (XMLHttpRequest).
Параметры:
options – (объект) Объект в виде набора свойств (пар ключ:"значение"), которые задают параметры для Ajax запроса. Возможных параметров (свойств объекта options) очень много, и обычно в большинстве случаев они используются далеко не все, а только некоторые из них. К тому же, все эти параметры являются необязательными, т.к. значение любого из них может быть установлено по умолчанию с помощью метода $.ajaxSetup() .
Для настройки Ajax-запроса доступны следующие свойства объекта options:
async – (boolean - логическое значение) По умолчанию имеет значение true, и тогда все запросы выполняются асинхронно (На то он и Ajax, чтобы операции выполнялись параллельно). Если установить зхначение false, что крайне нежелательно, то запрос будет выполняеться как синхронный (Другие действия браузера могут блокироваться на время, пока выполняется синхронный запрос. Да и вообще браузер может перестать реагировать и отвечать).
beforeSend(XHR ) – (функция) Функция, вызываемая перед отправкой запроса. Она используетсядля установки дополнительных (пользовательских) заголовков или для выполнения других предварительных операций. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает ложное значение (false), то происходит отмена запроса.
cache – (boolean - логическое значение) Если имеет значение false, то запрашиваемые страницы не кэшируются браузером. (Браузер может выдавать результаты из кэша. Например, когда данные в ответе сервера на Ajax запрос всегда новые, то кеширование мешает). По умолчанию имеет значение true для типов данных text, xml, html, json. Для типов данных "script" и "jsonp" имеет значение по умолчанию false.
complete(XHR, textStatus ) – (функция) Функция, вызываемая по окончании запроса независимо от его успеха или неудачи (а также после функций success и error, если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии "success" или "error" (в соответствии с кодом статуса в ответе на запрос).
contentType – (строка) Тип содержимого в запросе (при передаче данных на сервер). По умолчанию имеет значение "application/x-www-form-urlencoded" (подходит для большинства случаев и используется по умолчанию также при отправке форм).
context – (объект) Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным Ajax-запросом (например, для функций success или error).
$.ajax({ url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}});
data – (строка | объект) Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр processData).
Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.
Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.
Например, {Foo: [ "bar1", "bar2"]} станет "&Foo=bar1&Foo=bar2" .
dataFilter(data, type ) – (функция) Функция, которая вызывается в случае успеха запроса и используется для обработки данных, полученных в ответе сервера на запрос. Она возвращает данные, обработанные в соответствии с параметром "dataType", и передает их функции success. Данные типа text и xml передаются без обработки сразу функции success через свойство responseText или responseHTML объекта XMLHttpRequest. Функция dataFilter получает два аргумента:
dataType – (строка) Строка, определяющая название типа даных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения:"xml", "html", "script", "json", "jsonp", "text". (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.)
error(XHR, textStatus, errorThrown ) – (функция) Функция , которая вызывается при неудачном запросе (если код статуса в ответе сервера сообщает об ошибке). Функции передаются три аргумента:
global – (boolean - логическое значение) По умолчанию имеет значение true (разрешен вызов глобальных обработчиков событий на различных этапах Ajax-запроса, например, функций ajaxStart или ajaxStop). Значение false устанавливается, чтобы предотвратить их срабатывание. (Используется для управления Ajax-событиями).
ifModified – (boolean - логическое значение) Если установлено значение true, то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка "Last-Modified" с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок "Etag" – строка с версией компонента). По умолчанию имеет значение false, т.е. успешность запроса не зависит от заголовков и от изменений в ответе.
jsonp – (строка) Переопределяет имя функции обратного вызова для кроссдоменного запроса jsonp. Заменяет собой ключевое слово callback в части "callback=?" строки GET запроса (добавляемой к URL) или передаваемой в теле запроса при передаче методом POST. По умолчанию jQuery автоматически генерирует уникальное имя для функции обратного вызова.
jsonpCallback – (строка) Определяет имя функции обратного вызова для jsonp-запроса. Это значение будет использоваться вместо случайного имени, автоматически генерируемого библиотекой jQuery. Использование данного параметра позволяет избегать пропусков кэширования браузером GET запросов. Желательно разрешать jQuery генерировать новое имя для каждого нового кроссдоменного запроса на сервер для удобства управления запросами и ответами.
password – (строка) Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере.
processData – (boolean - логическое значение) По умолчанию имеет значение true, и данные, передаваемые на сервер в параметре data, преобразовываются в строку запроса с типом содержимого "Application / X-WWW-форм-urlencoded" и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false.
scriptCharset – (строка) При выполнении запросов методом GET и запросов, ориентированных на получение данных типа "jsonp" или "script", указывает кодировку символов запроса (например "UTF-8" или "CP1251"). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.
success(data, textStatus, XHR ) – (функция) Функция, которая вызывается при успешном запросе (если код статуса в ответе на запрос сообщает об успехе). Функции передаются три аргумента:
timeout – (число) Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup. Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена). Это можно использовать, например, для того, чтобы назначить определенному запросу более длительное время ожидания, чем время, установленное для всех запросов.
traditional – (boolean - логическое значение) Необходимо установить значение true, чтобы использовать традиционную (упрощенную) сериализацию (преобразование) данных при отправке (без рекурсивного преобразования в URL-подобную строку объектов или массивов, которые вложены в другие массивы или объекты).
type – (строка) HTTP-метод передачи данных при выполнении запроса. По умолчанию данные передаются методом GET. Обычно используются GET или POST. Также можно использовать методы PUT и DELETE, но это не рекомендуется, ввиду того, что они поддерживаются не всеми браузерами.
url – (строка) Строка, содержащая URL-адрес, по которому посылается запрос. По умолчанию это текущая страница.
username – (строка) Имя пользователя, которое будет использоваться для HTTP авторизации на сервере.
xhr – (функция) Функция, вызываемая для создания экземпляра объекта XMLHttpRequest. По умолчанию создание объекта XHR реализовано через ActiveXObject в браузере IE, либо через встроенный объект типа XMLHttpRequest в остальных случаях.
Статья написана очень давно — 03.08.2010
Как и обещал, продолжаю цикл статей по JQuery — прекрасному JavaScript фреймворку, с помощью которго можно делать всё!
В прошлой статье мы поговорили о JQuery в общем — рассмотрели принцип его работы, были приведены простейшие примеры. В этой статье мы затронем такую тему, как AJAX с помощью JQuery (с примерами).
xmlHttpRequestВы знаете что такое xmlHttpRequest? XmlHttpRequest — это объект, позволяющий браузеру делать запросы к серверу без перезагрузки страницы. Да и это, собственно, понятно из названия: http request — запрос по http протоколу. А вот с xml интересней: несмотря на указание этого языка в названии, объект XHR (это сокращение от xmlHttpRequest) работает с данными произвольного формата, не только с XML. Собственно, технология Ajax и основана на этом компоненте. Более углублённо о нём можно почитать на сайте xmlhttprequest.ru, посмотреть примеры использования можно в статье о CURLe , но это нас сейчас мало интересует. Сейчас разберем Ajax с помощью JQuery .
JQuery AJAXКак всегда — от простого к сложному:
$.ajax({ url: "/ajax.php?act=jquery_test", //УРЛ, к которому мы обращаемся type: "GET", //тип: может быть GET или POST (о нём чуть ниже) success: function(response){ //success - функция, которая вызывается, когда запрос прошёл успешно и данные (data) получены alert("Сервер вернул ответ: " + response); } });
Это самый простейший пример использования ajax в JQuery. Теперь посмотрим, как можно отдать сереверу данные методом POST:
$.ajax({ url: "/ajax.php?act=ajax_jquery_post", type: "POST", contentType: "application/x-www-form-urlencoded", //Тип передаваемых данных data: "text="+$("#text").val() +"&id=282&c=w", //а это, собственно, данные (произвольные) success: function(response){ alert("Данные отправлены! Сервер вернул ответ: " + response); } });
Это был пример отправки данных на сервер с помощью JQuery AJAX. Теперь немного о других форматах:
$.ajax({ url: "ajax.php?act=ajax_jquery", type: "POST", dataType : "JSON", //форматы могут быть: JSON, XML, HTML, text и некоторые другие data: someData, success: function(response){ //какие-нибудь действия } });
Кроме того, что мы можем повесить обработчик события "успех" (success), мы также можем повесить обработку других событий:
Лично я, чаще всего пользуюсь success и error, и иногда complete, а остальные юзаю о-очень редко.
Теперь пример:
$.ajax({ url: "ajax.php?act=something", type: "GET", //что-нибудь получим success: function(response, code){ //да, мы пропустили последний параметр — он нам не нужен if (code==200){ alert("Сервер вернул: " + response); }else{ alert("Сервер вернул какой-то непонятный код ответа: " + code); } }, error: function(xhr, str){ alert("Возникла ошибка: " + xhr.responseCode); } complete: function(){ //а тут ничего из предложенных параметров не берем:) $("#something").hide(); //например, спрятали какую-то кнопочку, которая вызывала запрос } });
Это уже пример посерьёзней, по профессиональней, так сказать — с обработкой ошибок.
jQuery.ajaxSetup()Есть в JQuery такой замечательный метод - ajaxSetup . С его помощью можно глобально во всём скрипте задать все необходимые опции. Пример:
$(document).ready(function(){ $.ajaxSetup({ url: "ajax.php", type: "POST", success: function(data){ $("#somefield").val(data); } error: function(){ $("#somebutton").addClass("error"); } }); $("#somebutton1").click(function(){ $.ajax({data: "act=1"}); }); $("#some2").click(function(){ $.ajax({data: "act=2"}); }); });
Опции $.ajaxА теперь, попрактиковавшись немного, расскажу теор.часть - про опции JQuery Ajax
Вот мы и разобрались с Ajax на JQuery. Ождайте следующую статью — в ней будет рассмотрено что-то вкусненькое на JQuery ;)
AJAX - это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX - это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект 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(«имя_заголовка»,«значение») - установить значения заголовка запроса.
Свойства объекта XMLHttpRequestonreadystatechange - одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState - число, обозначающее статус объекта.
responseText - представление ответа сервера в виде обычного текста (строки).
responseXML - объект документа, совместимый с DOM, полученного от сервера.
status - состояние ответа от сервера.
statusText - текстовое представление состояния ответа от сервера.
Следует подробнее расммотреть свойство readyState:
Как уже говорилось выше, создание данного объекта для каждого типа браузера - уникальный процесс.
Например, для создания объекта в 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; }
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверуАлгоритм запроса к серверу выглядит так:
/* Функция посылки запроса к файлу на сервере 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 { //Оповещаем пользователя о загрузке } } ...
Варианты ответа от сервераОт сервера можно получить данные нескольких видов:
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 .
function getdetails(){ var name = $("#name").val(); var rno = $("#rno").val(); $.ajax({ type: "POST", url: "details.php", data: {fname:name, id:rno} }).done(function(result) { $("#msg").html(" Address of Roll no " +rno +" is "+result); }); }
| Your Name: | ||
| Roll Number: | ||
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
jQuery.ajax() — осуществляет запрос к серверу без перезагрузки страницы. Это низкоуровневый метод, обладающий большим количеством настроек. Он лежит в основе работы всех ajax, которые, зачастую, легче понять и использовать, но которые все же предоставляют ограниченную функциональность по сравнению с данным методом.
$.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.
В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.
Ajax-запрос имеет два варианта использования:
jQuery.ajax(url [, settings ])
Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.
Список настроек (settings)$.ajax({ accepts: { mycustomtype: "application/x-some-custom-type" }, converters: { "text mycustomtype": function(result) { return newresult; } }, dataType: "mycustomtype" });
$ . ajax ({ accepts : { mycustomtype : "application/x-some-custom-type" converters : { "text mycustomtype" : function (result ) { return newresult ; dataType : "mycustomtype" } ) ; |
$.ajax({ url: "test.html", context: document.body }).done(function() { $(this).addClass("done"); });
$ . ajax ({ url : "test.html" , context : document . body } ) . done (function () { $ (this ) . addClass ("done" ) ; } ) ; |
$.ajax({ statusCode: { 404: function() { alert("page not found"); } } });
$ . ajax ({ statusCode : { 404 : function () { alert ("page not found" ) ; } ) ; |
$.ajax({ url: a_cross_domain_url, xhrFields: { withCredentials: true } });
$ . ajax ({ url : a_cross_domain_url , xhrFields : { withCredentials : true } ) ; |
Как было сказано выше, $.ajax() самый основной метод, а все последующие методы лишь его обертки. Очень часть нет необходимости вызывать эту функцию, т.к. есть альтернативы более высокого уровня, такие как , и . Они легче в понимании и использовании, хотя $.ajax() является более гибким решением.
Наиболее простым вариантом использования будет вызов $.ajax() без задания параметров:
$ . ajax () ; |
Настройки beforeSend, error, dataFilter, success and complete позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.
alert ("Данные успешно отправлены." ) ;
} ) ;
Внимание! Рассмотренные выше настройки.success(), .error() и.complete() были добавлены в jQuery-1.5 помимо стандартных для объекта deferred методов.done(), .fail() и.then(), с помощью которых можно устанавливать обработчики, однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования.
Параметр dataTypeФункция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType . Возможные значения этого параметра:
По умолчанию, запрос к серверу осуществляется 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
url : "test.php" ,
success : function (data ) {
alert ("Получены данные: " + data ) ;
} ) ;
