Запрос на http://name.my/ajax.php
(буду писать везде php, чтобы всем было удобно, сам же работал с java) вернет нам ответ без проблем
Запрос на http://google.com/
завершится ошибкой доступа
Попытка достучаться до https://name.my/ajax.php
тоже окончится неудачей, сменился протокол
http://name.my:81/ajax.php
и другой порт в адресе испортит малину
Задача: найти кроссбраузерное решение для отправки запросов которое будет работать: ie7+, opera 9.6+, ff 3+, chrome, safari. А также так как обращаться мне приходилось также с http на https не должно быть сообщения “mixed content” в ie.
В качестве библиотеки на сайте использовалась jQuery и встроенного механизма кросс доменных запросов в ней нет (появилася в 1.5 возможность организовать jsonp но это не всегда подходит), поиск плагинов также не дал результатов. Поэтому, обломавшись с простыми путями (что в принципе и ожидалось), отправился в Google, который тоже не дает очевидного ответа - я больше находил описание методов или же вещи которые мне не подходили (например в dojo есть релизая таких запросов, но менять весь js на сайте очень трудозатратно).
В качестве решения проблемы могли бы использоваться следующие техники:postMessage
JSONP
document.domain methods
window.name Transport
Server-side proxy
CRAZY IFRAME STUFF
flash
Новичок, при виде этого списка ужаснётся (в принципе я тоже не в восторге был). Итак наша задача - найти оптимальный путь решения проблемы, который не создавал бы лишних костылей на сайте.
1) postMessage – это новая возможность стандарта HTML5, позволяет отсылать сообщения из одного окна в другое, при этом контент окон может быть с разных доменов. Примерная реализация targetWindow.postMessage(message, targetOrigin); targetWindow - окно куда шлём запроc, message - сообщение, targetOrigin целевой домен который должен быть открыт в окне, допускается указания “*” в качестве домена, при этом домен может быть любой.
2) JSONP (JSON Padding) или «JSON с подкладкой» является расширением JSON, когда имя функции обратного вызова указывается в качестве входного аргумента. Использовав тэг, мы можем обратиться к другим доменам, однако результат придет в виде json ответа, который мы не сможем обработать, jsonp предлагает следующее решение: передавая серверу имя функции, мы получаем в ответе не голые данные, а parseResponse({«paper»: «A4», «count»: 5}), что вызовет функцию parseResponse.
3)CORS тема большая, поэтому расскажу вкратце, кому интересно велкам в w3c документацию. XMLHTTPRequest 2 - это новая спецификация запросов, работает и вызывается как обычный XMLHTTPRequest (в ie это XDomainRequest), но теперь в http заголовок добавляется следующее:
Access-Control-Allow-Origin определяет каким доменам разрешено соединение
Access-Control-Allow-Credentials указывает полномочия на выполнения запроса (Access-Control-Allow-Credentials: «Access-Control-Allow-Credentials» ":" true true: %x74.72.75.65; «true», case-sensitive)
Access-Control-Max-Age - как долго результаты будут кэшироваться.
Также можно определить доступные методы (GET, POST), все дополнительные поля заголовка вы можете посмотреть в спецификации.
Главная проблема метода - его поддерживают далеко не все браузеры, а тем кто захотят использовать реализация от IE - XDomainRequest, не стоит забывать, что IE в своем репертуаре и не позволит вам сделать запрос с протокола http на https, хотя по спецификации запрещены только запросы с https на http), но это ie.
4) document.domain нам подойдет, если мы хотим общаться с 2 сайтами на общем наддомене, то есть test1.name.my и test2.name.my. Между этими сайтами нормальный запрос не сделать, однако у document есть свойство domain, которое мы можем сменить для обоих окон на name.my и общаться обычным способом через iframe.
5) window.name Transport - заключается в изменении свойста name у windows и передачи таким образом через текст свойства наших сериализованных данных.
6) Server-side proxy - самое простое решение - это проксирование запроса сервером. То есть, name.my делает специальный запрос, например, на особенный URL типа name.my/proxy/name2.my/test.html , и сервер name.my проксирует его на name2.my/test.html .
7) CRAZY IFRAME STUFF - суть метода в том, что ифреймы, даже находясь на разных доменах, могут общаться друг с другом при помощи изменения идентификаторов фрагментов адресов (идентификатор – то, что стоит в адресе после "#") Путем последовательных изменений #фрагмента образуется поток данных, который может передаваться в обе стороны. Т.к идентификатор фрагмента - текст, то все данные для передачи приходится (де)сериализовать, т.е превращать в JSON + понадобится 2 iframe, дабы не затрагивать адрес видимого окна.
8) flash - использовать флеш в качестве промежуточного интерфейса (отдельная тема, все тонкости которой также тянут на статью)
Поискав в интернете нашел замечательную библиотеку easyxdm.net/wp . Самое вкусное заключается в методе работы, выбирается самый быстрый и современные метод основываясь на браузере и его версии.- IE6 and IE7 – используется связка с флешем (Microsoft Security Bulletin MS11-018)
- IE8+ – используется postMessage
- Opera 9+ – используется postMessage
- Firefox 1-2 – используются ifame
- Firefox 3+ – используется postMessage
- Safari 4+ – используется postMessage
- Chrome 2+ – используется postMessage
Для остальных браузеров которые не поддерживают postMessage будет использоваться технология основанная на обмене #hash Функции библиотеки не ограничиваются только ajax но разговор будет в основном о нем.
Итак начну c реализации ajax запроса при помощью easyxdm.
Создаем непосредственно прокси объект для отсылки запросов:
var xhr = new easyXDM.Rpc({
remote: "http://name.my/cors/index.html" // путь к провайдеру
}, {
remote: {
request: {}
}
});
EasyXDM – это, если так можно назвать статический класс, который не имеет конструктора и реализует паттерн синглтон.
Шлем сам запрос:
xhr.request({
url: "pathRelativeToRemote/getrest/", //адрес нашего запроса
method: "POST",
data: {foo:"bar"}
}, function(response) { // функция обработки результата ответа
alert(response.status);
alert(response.data);
});
Теперь более подробно: первым параметром мы задаем основные настройки, в частности тут указываем путь к заранее подготовленному файлу “провайдеру” (лежит в архиве с сборкой в папке cors), который должен находи
Я на удаленном сервере, он будет проксировать запросы на нужный нам url и посылать нам ответы одним из доступных методов.
Однако не стоит забывать что сюда также надо будет вписать путь до флешки (флешка также прикладывается к либе), через которую будут устанавливать соединение старые версии IE.
Далее мы создаем структуру удаленных методов, сейчас там объявлен request
(в файле name.my/cors/index.html также должна быть создана аналогичная структура методов)
Вызовом функции xhr.request
мы отсылаем запрос нашему прокси файлу name.my/cors/index.html , который стучится по url и передает туда параметр data
, используя обычный ajax, получив ответ, он шлёт данные (при необходимости разбивая ответ на части) обратно к нашему хосту, где вызывается callback, который мы передали последним параметром.
Немного затронем файл name.my/cors/index.html он является незаменимой частью нашего запроса, во-первых он организует обратный транспорт и прием данных. Во вторых у него есть замечательная плюшка - он реализует CORS своими средствами:
var useAccessControl = true;
// разрешаем (true) или запрещаем (false) принимать заголовки от сервера (чтобы случайно сервером не разрешить отсылку данных на сторонний домент)
var alwaysTrustedOrigins = [(/\.?easyxdm\.net/), (/xdm1/)];
// список разрешенных серверов
var remote
- объект easyXDM, в котором мы должны реализовать структуру удаленных методов.
А также не забываем подключать маленькую “библиотечку” json2.js которая для старых браузером реализует объект JSON, активно использующийся в easyXDM (при этом easyXDM не мешает вам создать свой сериализатор и передать его в качестве параметра, хотя мне кажется это очень редкая потребность).
У меня в проекте стояла задача слать по аяксу много разных форм, соответственно нужен был удобный инструмент который сериализует и шлет по ajax указанную форму. Выход нашелся сразу в лице плагина jQuery Form, но плагин завязан на jq и следовательно слать кросс доменные запросы отказывается.
Приведу простой способ как внедрить наш кросс доменный запрос в плагин не затронув структуры и оставив jQuery в качестве обработчика обычного ajax.
Имеем в html форму (то что внутри формы нас мало волнует этим займется плагин):
...
Заранее подготовим наш объект для кросс доменного запроса:
crossAjax = new easyXDM.Rpc({
remote: "name2.my/cors", // наш провайдер на удаленном сервере
swf: "name.my/easyxdm.swf"
}, {
remote: {
request: {}
}
});
Далее приведен код подключения плагина, в котором все поля формы автоматически сериализуются, а url на который мы шлем форму берется из action самой формы (как и метод)
$("#myform").ajaxForm({
beforeSubmit: beforeSubmit,
success: showResponse
});
Это метод в котором мы обрабатываем результат, его мы вообще не затрагиваем:
showResponse = function(responseText, statusText, xhr, form){
тут мы что-то делаем с нашим ответом
}
А вот главный фокус будет в beforeSubmit, метод вызывается перед отправкой формы, соответственно тут мы можем как получить уже сериализованные данные так и прервать дальнейшую отправку запроса (что нам и надо):
beforeSubmit = function(arr, form, options) {
if (options.url.indexOf(location.host)
Всё, теперь при нажатии на кнопку "Отправить
" у Вас будет открываться страница "http://ya.ru/?a=5
". Как видите, отправить ajax-запрос
на другой домен не составляет никакого труда.
jQuery.ajax() — осуществляет запрос к серверу без перезагрузки страницы. Это низкоуровневый метод, обладающий большим количеством настроек. Он лежит в основе работы всех ajax, которые, зачастую, легче понять и использовать, но которые все же предоставляют ограниченную функциональность по сравнению с данным методом.
$.ajax() возвращает объект XMLHttpRequest. В большинстве случаев Вам не понадобится работать непосредственно с этим объектом, но он все же доступен, в случае, если Вам необходимо прервать запрос вручную.
В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом.
Ajax-запрос имеет два варианта использования:
jQuery.ajax(url [, settings ])
Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.
Список настроек (settings)
accepts
(по умолчанию: зависит от DataType)
Тип: объект.
При выполнении запроса, в заголовках (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"
}
)
;
|
async
(по умолчанию: true)
Тип: логическое значение.
По умолчанию, все запросы отсылаются асинхронно (то есть после отправки запроса на сервер, страница не останавливает свою работу в ожидании ответа). Если Вам необходимо посылать запросы синхронно, установите данную опцию в false. Кроссдоменные запросы и запросы типа «jsonp» не могут выполняться в синхронном режиме. Обратите внимание, что синхронные запросы могут на время выполнения запроса заблокировать браузер.
beforeSend(jqXHR, settings)
Тип: функция.
Содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.
beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.
cache
(по умолчанию: true, false для dataType "script" и "jsonp")
Тип: логическое значение.
если вы хотите, чтобы браузер не кэшировал производимый запрос, то установите этот параметр в false. Обратите внимание, что если параметр установлен в false, то в URL будет добавлена строка «_=».
complete(jqXHR, textStatus)
Тип: функция.
Функция, которая исполняется всякий раз после завершения запроса AJAX (после того, как выполнились success и error). В функцию передаются два параметра: jqXHR (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest) и статус выполнения запроса (строковое значение:»success», «notmodified», «error», «timeout», «abort», или «parsererror»).
Начиная с jQuery-1.5, в параметр complete можно передать не одну функцию, а массив функций. Все функции будут вызваны в той очередности, в которой заданы в этом массиве.
contents
Тип: объект.
Параметр появился в jQuery-1.5 Задается объектом в формате {строка:регулярное выражение} и определяет, как jQuery будет разбирать (парсить) ответ от сервера, в зависимости от его типа.
contentType
Тип: логическое значение или строка.
При отправлении запроса на сервер, данные передаются в формате, указанном в contentType. По умолчанию используется ‘application/x-www-form-urlencoded; charset=UTF-8’, который подходит в большинстве случаев. Если указать этот параметр явно, то он будет передан серверу (даже если туда не были отправлены никакие данные).
С jQuery-1.6 можно передавать false чтобы не устанавливать заголовок.
context
Тип: объект.
Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную 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"
)
;
}
)
;
|
converters
(по умолчанию: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML})
Тип: объект.
Параметр появился в jQuery-1.5 Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой.
crossDomain
(по умолчанию: false для одного и того же домена, true для кроссдоменных запросов)
Тип: логическое значение.
Параметр появился в jQuery-1.5 Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен.
data
Тип: объект, строка или массив.
Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, {foo:["bar1", "bar2"]} превращается в &foo=bar1&foo=bar2 .
dataFilter (data, type)
Тип: функция.
Функция, которая будет осуществлять предварительную обработку данных, присланных сервером, т.е. она должна играть роль фильтра и возвращать очищенную строку. В эту функцию передаются два параметра: упомянутые данные и значение параметра dataType
. Указанная в dataFilter функция, должна возвращать обработанные данные.
dataType
(по умолчанию: определяется автоматически (xml, json, script, или html))
Тип: строка.
Тип данных, в котором ожидается получить ответ от сервера. Если он не задан, jQuery попытается определить его автоматически с помощью полученного от сервера MIME.
error
Тип: функция
Функция, которая будет вызвана в случае неудачного завершения запроса к серверу. Ей предоставляются три параметра: jqXHR (до 1.5 используется XMLHttpRequest), строка с описанием произошедшей ошибки, а так же объект исключения, если такое произошло. Возможные значения второго аргумента: «timeout», «error», «notmodified» и «parsererror» (в непредвиденных случаях, может быть возвращено значение null). Начиная с jQuery-1.5, этот параметр может принимать как одну функцию, так и массив функций.
Событие error не происходит при dataType равному script или JSONP.
global
(по умолчанию: true)
Тип: логическое значение.
Отвечает за работу глобальных событий ajax-запроса (например ajaxStart или ajaxStop). Если задать этому параметру значение false , глобальные события для данного запроса вызываться не будут.
headers
Тип: объект.
Параметр появился в jQuery-1.5 Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки.
ifModified
Тип: логическое значение.
При переводе этой настройки в true , запрос будет выполнен со статусом «успешно», лишь в случае, если ответ от сервера отличается от предыдущего ответом. jQuery проверяет этот факт обращаясь к заголовку Last-Modified. Начиная с jQuery-1.4, кроме Last-Modified проверяется и ‘etag’ (оба они предоставляются сервером и необходимы для оповещения браузера о том, что запрашиваемые данные с сервера не изменены с предыдущего запроса).
isLocal
Тип: логическое значение.
Параметр появился в jQuery-1.5.1 Позволяет установить статус источника страницы локальным (как если бы это происходило по протоколу file), даже если jQuery распознал его иначе. Библиотека решает, что страница запущена локально в случае следующих протоколов: file, *-extension, и widget .Рекомендуется устанавливать значение параметра isLocal глобально - с помощью функциии $.ajaxSetup() , а не в настройках отдельных ajax-запросов.
jsonp
Тип: строка или логическое значение.
Определяет имя параметра, который добавляется в url JSONP-запроса (по умолчанию, используется «callback»). К примеру настройка {jsonp:"onJSONPLoad"} преобразуется в часть url строки "onJSONPLoad=?" . Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: {jsonp:false, jsonpCallback:"callbackName"} .
jsonpCallback
Тип: строка или функция.
Определяет имя функции, которая будет вызвана при ответе сервера на jsonp-запрос. По умолчанию, jQuery генерирует произвольное название этой функции, что является более предпочтительным вариантом, упрощающим работу библиотеки. Один из причин, при котором стоит указывать собственную функцию обработки jsonp-запроса, является улучшение кеширования GET-запросов.
Начиная с jQuery-1.5, вы можете указать функцию в этом параметре, для того, чтобы обработать ответ сервера самостоятельно. В этом случае, указанная функция должна возвращать полученные от сервера данные (в указанной функции они будут доступны в первом параметре).
method
(по умолчанию: "GET")
Тип: строка.
Параметр появился в jQuery-1.9.0 Позволяет указать тип запроса к серверу ("POST" , "GET" , "PUT")
mimeType
Тип: строка.
Параметр появился в jQuery-1.5.1 В этом поле можно указать тип данных, в котором ожидается ответ от сервера вместо XHR
password
Тип: строка.
Пароль для аутентификации на сервере, если это требуется.
processData
(по умолчанию true)
Тип: логическое значение.
По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса (url-формата: fName1=value1&fName2=value2&...) и отправляются как "application/x-www-form-urlencoded" . Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false .
scriptCharset
Тип: строка.
Применяется только для Ajax GET-запросов, dataType при этом может быть или «jsonp», или «script». Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.
statusCode
Тип: объект.
Параметр появился в jQuery-1.5.0 Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:
$.ajax({
statusCode: {
404: function() {
alert("page not found");
}
}
});
|
$
.
ajax
({
statusCode
:
{
404
:
function
()
{
alert
("page not found"
)
;
}
)
;
|
Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что функции-обработчики удачного выполнения запроса (указанные в параметре success), а при ошибке такие же, как и у error-функций.
success (data, textStatus, jqXHR)
Тип: функция, массив.
Функция, которая будет вызвана в случае успешного завершения запроса к серверу. Принимает 3 аргумента:
- данные (data), присланные сервером и прошедшие предварительную обработку;
- строка со статусом выполнения (textStatus);
- объект jqXHR (в версиях до 1.5 вместо jqXHR используется XMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.
timeout
Тип: число.
Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус «timeout».
Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.
В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.
traditional
Тип: логическое значение.
Установите значение этого параметра в true, для того, чтобы использовать традиционные параметры преобразования (сериализации).
type
(по умолчанию: "GET")
Тип: строка.
Аналог параметру method . Параметр используется в jQuery младше 1.9.0
url
(по умолчанию: адрес текущей страницы
)
Тип: строка.
Определяет адрес, на который будет отправлен запрос.
username
Тип: строка.
Имя пользователя для аутентификации на сервере, если это требуется.
xhr
(по умолчанию: ActiveXObject в IE, the XMLHttpRequest в других браузерах)
Тип: функция.
Функция, которая предоставит объект XMLHttpRequest. По умолчанию, для браузеров IE этим объектом является ActiveXObject, а в остальных случаях это XMLHttpRequest. С помощью этого параметра вы можете внедрить собственную версию этого объекта.
xhrFields
Тип: объект.
Параметр появился в 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() без задания параметров:
Обработчики событий
Настройки beforeSend, error, dataFilter, success and complete позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.
- beforeSend
происходит непосредственно перед отправкой запроса на сервер;
- error
происходит в случае неудачного выполнения запроса;
- dataFilter
происходит в момент прибытия данных с сервера. Позволяет обработать «сырые» данные, присланные сервером;
- success
происходит в случае удачного завершения запроса;
- complete
происходит в случае любого завершения запроса.
success
:
function
()
{
alert
("Данные успешно отправлены."
)
;
}
)
;
Внимание!
Рассмотренные выше настройки.success(), .error() и.complete() были добавлены в jQuery-1.5 помимо стандартных для объекта deferred методов.done(), .fail() и.then(), с помощью которых можно устанавливать обработчики, однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования.
Параметр dataType
Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType
. Возможные значения этого параметра:
- «xml»
- полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).
- «html»
- полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах , то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.
- «script»
- полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.
- «json», «jsonp»
- полученные данные будут предварительно преобразованы в javascript-объект. Если разбор окажется неудачным (что может случиться, если json содержит ошибки), то будет вызвано исключение ошибки разбора файла. Если сервер, к которому вы обращаетесь, находится на другом домене, то вместо json следует использовать jsonp.
- «text»
- полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.
Отправка данных на сервер
По умолчанию, запрос к серверу осуществляется 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
)
;
}
)
;
24.04.2015
3
11696
Межсайтовый (cross-domain) ajax запрос подразумевает получение данных с сайта site2.ru для сайта site1.ru. Обычные ajax запросы работать не будут в связи с политикой безопасности , но в jQuery начиная с версии 1.5 появилась возможность отправлять кросс доменные запросы на ajax и получать ответ в JSON.
При использовании JSON мы можем обращаться к любому домену но результат прийдет в виде json ответа и мы не как не сможем его обработать. JSONP предлагает передавать серверу имя функции и получать не голые данные, а обернутые в эту же функцию данные. Например при отправки запроса на http://site2.ru/data.json?callback=parseFunction мы отправляем название callback функции - parseFunction и получаем некий ответ parseFunction({"result": 2, "error": false}), после чего jQuery вызовет функцию parseFunction для парсинга результата.
Рассмотрим все это детально на примере, сделаем запрос который будем отправлять с сайта site1.ru на site2.ru и получать некий ответ в json.
HTML
Создадим простую страничку и подключим библиотеку jQuery: