Cross-domain «ajax» — простое решение. Отправка 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() без задания параметров:

$ . 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 ) ;

} ) ;

Иногда бывает нужно отправить ajax-запрос на другой домен , чтобы динамически подгрузить оттуда данные. Однако, ajax этого сделать не позволяет в целях безопасности. Но в этой статье я покажу, как это ограничение можно обойти.

В основе лежит то, что хоть ajax и не позволяет отправлять запрос на другой домен, но PHP позволяет отправлять что угодно и куда угодно. Итак, алгоритм следующий:

Отправить ajax-запрос скрипту на нашем домене.

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

ajax принимает ответ от нашего скрипта с ответом от другого домена.

Вот такой простой алгоритм. Давайте его быстренько реализуем. Значит, сразу ajax :

/* Данная функция создаёт кроссбраузерный объект XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function send() {
var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
xmlhttp.open("POST", "test.php", true); // Открываем асинхронное соединение
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Отправляем кодировку
xmlhttp.send("site=" + encodeURIComponent("http://ya.ru/?a=5")); // Отправляем POST-запрос
xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
if (xmlhttp.readyState == 4) { // Ответ пришёл
if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
document.getElementById("yandex").innerHTML = xmlhttp.responseText; // Выводим ответ сервера
}
}
};
}

А теперь файл test.php , который и занимается отправкой запроса на другой домен:

Всё, теперь при нажатии на кнопку "Отправить " у Вас будет открываться страница "http://ya.ru/?a=5 ". Как видите, отправить ajax-запрос на другой домен не составляет никакого труда.

Запрос на 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) function testAjax(id, pid) { $.ajax({ type: "POST", data: "id=" + id + "&pid=" + pid, url: "/path/to/script/test.php", success: function(data) { $("#content").html(data); } }); return true; } Успешный запрос
Запрос с ошибкой

Ответ:

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

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