Низкоуровневые запросы. Метод ajax
AJAX - это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX - это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
- Возможность создания удобного Web-интерфейса
- Активное взаимодействие с пользователем
- Удобство использования
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект 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:
- 0 - Объект не инициализирован.
- 1 - Объект загружает данные.
- 2 - Объект загрузил свои данные.
- 3 - Объек не полностью загружен, но может взаимодействовать с пользователем.
- 4 - Объект полностью инициализирован; получен ответ от сервера.
Как уже говорилось выше, создание данного объекта для каждого типа браузера - уникальный процесс.
Например, для создания объекта в 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.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
/* Функция посылки запроса к файлу на сервере 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.ajax() — осуществляет запрос к серверу без перезагрузки страницы. Это низкоуровневый метод, обладающий большим количеством настроек. Он лежит в основе работы всех ajax, которые, зачастую, легче понять и использовать, но которые все же предоставляют ограниченную функциональность по сравнению с данным методом.
$.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.
В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.
Ajax-запрос имеет два варианта использования:
jQuery.ajax(url [, settings ])
Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.
Список настроек (settings)Тип: объект.
При выполнении запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts. Например, в следующем примере указываются допустимые типы customtype:
$.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" } ) ; |
Тип: логическое значение.
По умолчанию, все запросы отсылаются асинхронно (то есть после отправки запроса на сервер, страница не останавливает свою работу в ожидании ответа). Если Вам необходимо посылать запросы синхронно, установите данную опцию в false. Кроссдоменные запросы и запросы типа «jsonp» не могут выполняться в синхронном режиме. Обратите внимание, что синхронные запросы могут на время выполнения запроса заблокировать браузер.
Тип: функция.
Содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.
beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.
Тип: логическое значение.
если вы хотите, чтобы браузер не кэшировал производимый запрос, то установите этот параметр в false. Обратите внимание, что если параметр установлен в false, то в URL будет добавлена строка «_=».
Тип: функция.
Функция, которая исполняется всякий раз после завершения запроса AJAX (после того, как выполнились success и error). В функцию передаются два параметра: jqXHR (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest) и статус выполнения запроса (строковое значение:»success», «notmodified», «error», «timeout», «abort», или «parsererror»).
Начиная с jQuery-1.5, в параметр complete можно передать не одну функцию, а массив функций. Все функции будут вызваны в той очередности, в которой заданы в этом массиве.
Тип: объект.
Параметр появился в jQuery-1.5 Задается объектом в формате {строка:регулярное выражение} и определяет, как jQuery будет разбирать (парсить) ответ от сервера, в зависимости от его типа.
Тип: логическое значение или строка.
При отправлении запроса на сервер, данные передаются в формате, указанном в contentType. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’, который подходит в большинстве случаев. Если указать этот параметр явно, то он будет передан серверу (даже если туда не были отправлены никакие данные).
С jQuery-1.6 можно передавать false чтобы не устанавливать заголовок.
Тип: объект.
Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:
$.ajax({ url: "test.html", context: document.body }).done(function() { $(this).addClass("done"); });
$ . ajax ({ url : "test.html" , context : document . body } ) . done (function () { $ (this ) . addClass ("done" ) ; } ) ; |
Тип: объект.
Параметр появился в jQuery-1.5 Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой.
Тип: логическое значение.
Параметр появился в jQuery-1.5 Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен.
Тип: объект, строка или массив.
Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, {foo:["bar1", "bar2"]} превращается в &foo=bar1&foo=bar2 .
Тип: функция.
Функция, которая будет осуществлять предварительную обработку данных, присланных сервером, т.е. она должна играть роль фильтра и возвращать очищенную строку. В эту функцию передаются два параметра: упомянутые данные и значение параметра dataType . Указанная в dataFilter функция, должна возвращать обработанные данные.
Тип: строка.
Тип данных, в котором ожидается получить ответ от сервера. Если он не задан, jQuery попытается определить его автоматически с помощью полученного от сервера MIME.
Тип: функция
Функция, которая будет вызвана в случае неудачного завершения запроса к серверу. Ей предоставляются три параметра: jqXHR (до 1.5 используется XMLHttpRequest), строка с описанием произошедшей ошибки, а так же объект исключения, если такое произошло. Возможные значения второго аргумента: «timeout», «error», «notmodified» и «parsererror» (в непредвиденных случаях, может быть возвращено значение null). Начиная с jQuery-1.5, этот параметр может принимать как одну функцию, так и массив функций.
Событие error не происходит при dataType равному script или JSONP.
Тип: логическое значение.
Отвечает за работу глобальных событий ajax-запроса (например ajaxStart или ajaxStop). Если задать этому параметру значение false , глобальные события для данного запроса вызываться не будут.
Тип: объект.
Параметр появился в jQuery-1.5 Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки.
Тип: логическое значение.
При переводе этой настройки в true , запрос будет выполнен со статусом «успешно», лишь в случае, если ответ от сервера отличается от предыдущего ответом. jQuery проверяет этот факт обращаясь к заголовку Last-Modified. Начиная с jQuery-1.4, кроме Last-Modified проверяется и ‘etag’ (оба они предоставляются сервером и необходимы для оповещения браузера о том, что запрашиваемые данные с сервера не изменены с предыдущего запроса).
Тип: логическое значение.
Параметр появился в jQuery-1.5.1 Позволяет установить статус источника страницы локальным (как если бы это происходило по протоколу file), даже если jQuery распознал его иначе. Библиотека решает, что страница запущена локально в случае следующих протоколов: file, *-extension, и widget .Рекомендуется устанавливать значение параметра isLocal глобально - с помощью функциии $.ajaxSetup() , а не в настройках отдельных ajax-запросов.
Тип: строка или логическое значение.
Определяет имя параметра, который добавляется в url JSONP-запроса (по умолчанию, используется «callback»). К примеру настройка {jsonp:"onJSONPLoad"} преобразуется в часть url строки "onJSONPLoad=?" . Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: {jsonp:false, jsonpCallback:"callbackName"} .
Тип: строка или функция.
Определяет имя функции, которая будет вызвана при ответе сервера на jsonp-запрос. По умолчанию, jQuery генерирует произвольное название этой функции, что является более предпочтительным вариантом, упрощающим работу библиотеки. Один из причин, при котором стоит указывать собственную функцию обработки jsonp-запроса, является улучшение кеширования GET-запросов.
Начиная с jQuery-1.5, вы можете указать функцию в этом параметре, для того, чтобы обработать ответ сервера самостоятельно. В этом случае, указанная функция должна возвращать полученные от сервера данные (в указанной функции они будут доступны в первом параметре).
Тип: строка.
Параметр появился в jQuery-1.9.0 Позволяет указать тип запроса к серверу ("POST" , "GET" , "PUT")
Тип: строка.
Параметр появился в jQuery-1.5.1 В этом поле можно указать тип данных, в котором ожидается ответ от сервера вместо XHR
Тип: строка.
Пароль для аутентификации на сервере, если это требуется.
Тип: логическое значение.
По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса (url-формата: fName1=value1&fName2=value2&...) и отправляются как "application/x-www-form-urlencoded" . Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false .
Тип: строка.
Применяется только для Ajax GET-запросов, dataType при этом может быть или «jsonp», или «script». Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.
Тип: объект.
Параметр появился в jQuery-1.5.0 Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:
$.ajax({ statusCode: { 404: function() { alert("page not found"); } } });
$ . ajax ({ statusCode : { 404 : function () { alert ("page not found" ) ; } ) ; |
Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что функции-обработчики удачного выполнения запроса (указанные в параметре success), а при ошибке такие же, как и у error-функций.
Тип: функция, массив.
Функция, которая будет вызвана в случае успешного завершения запроса к серверу. Принимает 3 аргумента:
- данные (data), присланные сервером и прошедшие предварительную обработку;
- строка со статусом выполнения (textStatus);
- объект jqXHR (в версиях до 1.5 вместо jqXHR используется XMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.
Тип: число.
Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».
Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.
В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.
Тип: логическое значение.
Установите значение этого параметра в true, для того, чтобы использовать традиционные параметры преобразования (сериализации).
Тип: строка.
Аналог параметру method . Параметр используется в jQuery младше 1.9.0
Тип: строка.
Определяет адрес, на который будет отправлен запрос.
Тип: строка.
Имя пользователя для аутентификации на сервере, если это требуется.
Тип: функция.
Функция, которая предоставит объект XMLHttpRequest. По умолчанию, для браузеров IE этим объектом является ActiveXObject, а в остальных случаях это XMLHttpRequest. С помощью этого параметра вы можете внедрить собственную версию этого объекта.
Тип: объект.
Параметр появился в jQuery-1.5.1 Набор пар {имя: значене} для изменения/добавления значений соответствующих полей объектаXMLHttpRequest. Например, можно установить его свойство withCredentials в true , при выполнении кроссдоменного запроса:
$.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-запроса.
- beforeSend происходит непосредственно перед отправкой запроса на сервер;
- error происходит в случае неудачного выполнения запроса;
- dataFilter происходит в момент прибытия данных с сервера. Позволяет обработать «сырые» данные, присланные сервером;
- success происходит в случае удачного завершения запроса;
- complete происходит в случае любого завершения запроса. success : function () {
- «xml» - полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).
- «html» - полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах , то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.
- «script» - полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.
- «json», «jsonp» - полученные данные будут предварительно преобразованы в javascript-объект. Если разбор окажется неудачным (что может случиться, если json содержит ошибки), то будет вызвано исключение ошибки разбора файла. Если сервер, к которому вы обращаетесь, находится на другом домене, то вместо json следует использовать jsonp.
- «text» - полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.
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 ) ;
} ) ;
Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.
Что такое асинхронный запрос AJAX?Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос - это такой запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей.
При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.
Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.
Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.
Создание асинхронного AJAX запроса (метод GET)Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода open() .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .
Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода send() .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.
Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента script:
// 2. Создание переменной request var request = new XMLHttpRequest(); // 3. Настройка запроса request.open("GET","processing.php",true); // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции request.addEventListener("readystatechange", function() { // если состояния запроса 4 и статус запроса 200 (OK) if ((request.readyState==4) && (request.status==200)) { // например, выведем объект XHR в консоль браузера console.log(request); // и ответ (текст), пришедший с сервера в окне alert console.log(request.responseText); // получить элемент c id = welcome var welcome = document.getElementById("welcome"); // заменить содержимое элемента ответом, пришедшим с сервера welcome.innerHTML = request.responseText; } }); // 5. Отправка запроса на сервер request.send();
В итоге файл welcome.html будет иметь следующий код:
Пример работы AJAX Пример работы AJAX window.addEventListener("load",function() { var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener("readystatechange", function() { if ((request.readyState==4) && (request.status==200)) { var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; } }); request.send(); });
На сервере (с помощью php):