Урок, в котором на простых примерах разберем, как работать с технологией AJAX, а именно познакомимся с тем как с помощью объекта XMLHttpRequest (сокращённо XHR) создавать синхронные HTTP-запросы к серверу и получать от него ответы.
Знакомство с технологией AJAX начнём с рассмотрения примера (для начинающих), который будет запрашивать информацию с сервера посредством синхронного запроса.
Синхронный запрос в отличие от асинхронного, после его отправки и до получения ответа, замораживает веб-страницу, т.е. делает её недоступной для пользователя. Синхронные запросы на сайтах используются довольно редко, но изучать технологию AJAX начинающим лучше именно с них.
Перед тем как перейти к созданию примера, рассмотрим основные этапы, сопровождающие разработку фрагмента страницы, работающей в соответствии с технологией AJAX. При этом все действия в основном осуществляются в коде JavaScript после наступления какого-либо события на странице (пользователь нажал кнопку и т.п.) и состоят из следующих этапов:
Рассмотрим пример выполнения синхронного AJAX запроса к серверу с помощью метода XMLHttpRequest. В данном примере запросим данные, находящиеся в файле data.txt на сервере и отобразим их на странице в элементе span .
Пример будет состоять из файлов index.html , script.js и data.txt , которые для простоты можно расположить на сервере в одном каталоге.
Начнём разработку с создания HTML-страницы, к которой подключим файл script.js . Этот файл, а точнее его содержимое будет выполнять всю основную работу. Но перед тем как перейти к его разработке, создадим на станице элементы div и span . Элемент div будет играть роль кнопки, при нажатии на которую будет выполняться AJAX запрос. А элемент span будет играть роль контейнера, который будет содержать ответ, пришедший с сервера.
Кроме этого добавим на страницу ещё стили CSS, чтобы немного её оформить. В итоге у нас должен получиться следующий HTML код:
JavaScript AJAX #myDiv { height: 30px; width: 100px; background-color: lightgreen; }
Ответ (AJAX):
После этого откроем файл data.txt и введём в него текст "Привет, мир!". Сохраним и закроем файл.
И наконец, перейдём к созданию файла script.js . Содержимое этого файла будет выполнять все основные действия, т.е. отправлять ajax запрос на сервер, принимать от сервера ответ и обновлять содержимое страницы (помещать ответ в элемент span).
Рассмотрим создание данного файла поэтапно:
JavaScript AJAX
Нажмите на светло-зелёный блок и получите ответ с сервера "Пример, мир!".
Ответ (AJAX):
// получить элемент, имеющий id="myDiv" var myDiv = document.getElementById("myDiv"); // подпишемся на событие click этого элемента myDiv.addEventListener("click", function() { // создадим объект XMLHttpRequest var request = new XMLHttpRequest(); //настраиваем запрос: GET - метод, data.txt - URL-адрес по которому будет посылаться запрос, false - синхронный запрос request.open("GET","data.txt",false); // отправляем данные на сервер с помощью метода send request.send(); // если статус ответа 200 (OK) то if (request.status==200) { // выведем в элемент, имеющий id="answer", ответ сервера document.getElementById("answer").innerHTML = request.responseText; } })
Привет, мир!
Пример 2. Обработка синхронного AJAX запроса на сервере с помощью PHPПример, который будет по технологии AJAX передавать серверу запрос, содержащий параметр и отображать ответ на странице.
В данном примере страница будет состоять из 3 кнопок. Первая кнопка будет иметь текст 1, вторая кнопка текст 2 и третья кнопка текст 3. При нажатии на любую из кнопок будет выполняться синхронный запрос на сервер. В качестве метода передачи запроса будем использовать GET. А адрес, по которому будем посылать запрос и параметры ajax.php . Получать данные отправленные клиентом на сервере будем с помощью GET-переменной HTTP ($_GET). После этого полученные данные будем обрабатывать на сервере, и возвращать клиенту ответ (строку).
JavaScript AJAX span { font-weight: bold; color: red; }
Нажмите на одну из кнопок и получите ответ с сервера посредством технологии AJAX.
1 2 3Ответ (AJAX):
// получить все элементы button на странице var buttons = document.getElementsByTagName("button"); // подпишемся на событие click все элементов button for (var i=0; i
Всем привет! Сегодня мы разберём важную тему, а именно как отправлять AJAX запросы на JQuery .
Если вы используете на своём сайте библиотеку JQuery , то вам больше не нужно писать огромный код, чтобы отправить запрос AJAX , а потом ещё беспокоится о кроссбраузерности, потому что библиотека сделает всё за вас! Давайте сразу перейдём к практике. Пример возьмём самый банальный: отправляем 2 числа на сервер, а он возвращает нам их сумму.
Для начала напишем наш простой сервер server.php
$a = $_POST["a"];
$b = $_POST["b"];
echo $a+$b;
Теперь перейдём к HTML
JQuery AJAX
Отправить!
HTML до безобразия прост: 2 текcтовых поля, блок, куда будут выведены данные с сервера и кнопка для отправки данных.
Теперь перейдём к нашему файлу main.js , где и напишем наш скрипт.
$("#submit").click(function() {
var fnumb = $("#a").val();
var snumb = $("#b").val();
alert(fnumb + " : " + snumb);
});
});
Вот, что у нас пока получилось. Когда документ полностью загружен, мы вешаем на нашу кнопку событие клик, в котором отбираем значения с полей функцией val() . Чтобы проверить, что у нас всё правильно, выведем эти значения функцией alert() . Обязательно проверьте меня, вдруг ошибся;)
Что ж, когда вы убедились, что всё сработало нормально, перейдём к следующему этапу: отправке асинхронного запроса
$(document).ready(function() {
$("#submit").click(function() {
var fnumb = $("#a").val();
var snumb = $("#b").val();
$.ajax({
url: "server.php",
type: "POST",
dataType: "text",
data: ("a="+fnumb+"&b="+snumb),
success: function(data){
$("#block").text(data);
}
});
});
});
Итак, разберём, что мы тут сделали. Мы вызвали метод ajax объекта jquery и передали туда объект со свойствами. Что же эти свойства значат?
Вот и всё. Теперь, если вы введёте 2 числа в тектовые поля и нажмёте кнопку "отправить", то получите сумму этих чисел без перезагрузки страницы. Конечно, параметров больше, и мы разобрали далеко не всё, но вы получили базу, используя которую уже можно сделать классные вещи! Если вы испытываете трудности с пониманием данной статьи, то посмотрите
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, можно использовать любой другой серверный язык программирования.
Returns: jqXHR
Выполняет асинхронный HTTP (Ajax) запрос
url
Тип
: Строка
URL адрес, на который будет отправлен Ajax запрос
settings
Тип
: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из . Ниже приведен полный список всех настроек.
settings
Тип
: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из .
| Настройка | Тип данных |
|
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" });
Примечание : Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
Начнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:
При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:
http://api.domain.com/?type=jsonp&query=test&callback=?
Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().
