Ajax запрос на другой домен. Выполняет Ajax-запрос к серверу, используя множество необязательных параметров для его настройки
Синтаксис и описание:
Возвращаемое значение: Экземпляр объекта XHR (XMLHttpRequest).
Параметры:
async – (boolean - логическое значение) По умолчанию имеет значение true, и тогда все запросы выполняются асинхронно (На то он и Ajax, чтобы операции выполнялись параллельно). Если установить зхначение false, что крайне нежелательно, то запрос будет выполняеться как синхронный (Другие действия браузера могут блокироваться на время, пока выполняется синхронный запрос. Да и вообще браузер может перестать реагировать и отвечать).
beforeSend(XHR ) – (функция) Функция, вызываемая перед отправкой запроса. Она используетсядля установки дополнительных (пользовательских) заголовков или для выполнения других предварительных операций. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает ложное значение (false), то происходит отмена запроса.
cache – (boolean - логическое значение) Если имеет значение false, то запрашиваемые страницы не кэшируются браузером. (Браузер может выдавать результаты из кэша. Например, когда данные в ответе сервера на Ajax запрос всегда новые, то кеширование мешает). По умолчанию имеет значение true для типов данных text, xml, html, json. Для типов данных "script" и "jsonp" имеет значение по умолчанию false.
complete(XHR, textStatus ) – (функция) Функция, вызываемая по окончании запроса независимо от его успеха или неудачи (а также после функций success и error, если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии "success" или "error" (в соответствии с кодом статуса в ответе на запрос).
contentType – (строка) Тип содержимого в запросе (при передаче данных на сервер). По умолчанию имеет значение "application/x-www-form-urlencoded" (подходит для большинства случаев и используется по умолчанию также при отправке форм).
context – (объект) Данный объект станет контекстом (this) для всех функций обратного вызова, связанных с данным Ajax-запросом (например, для функций success или error).
$.ajax({ url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}});data – (строка | объект) Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр processData).
Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.
Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.
Например, {Foo: [ "bar1", "bar2"]} станет "&Foo=bar1&Foo=bar2" .
dataFilter(data, type ) – (функция) Функция, которая вызывается в случае успеха запроса и используется для обработки данных, полученных в ответе сервера на запрос. Она возвращает данные, обработанные в соответствии с параметром "dataType", и передает их функции success. Данные типа text и xml передаются без обработки сразу функции success через свойство responseText или responseHTML объекта XMLHttpRequest. Функция dataFilter получает два аргумента:
- data - полученные данные (тело ответа сервера),
- type - тип этих данных (параметр "dataType").
dataType – (строка) Строка, определяющая название типа даных, ожидаемых в ответе сервера. Если тип данных не задан, jQuery сама пытается его определить, ориентируясь на MIME-тип ответа сервера. Допустимые значения:"xml", "html", "script", "json", "jsonp", "text". (Это необходимо для того, чтобы определить метод обработки данных, полученных в ответе на запрос, функцией dataFilter перед тем, как они будут переданы функции обратного вызова success.)
error(XHR, textStatus, errorThrown ) – (функция) Функция , которая вызывается при неудачном запросе (если код статуса в ответе сервера сообщает об ошибке). Функции передаются три аргумента:
- XHR - экземпляр объекта XMLHttpRequest,
- textStatus - строка, описывающая тип ошибки, которая произошла ("timeout", "error", "notmodified" или "parsererror"),
- errorThrown - необязательный параметр – объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR).
global – (boolean - логическое значение) По умолчанию имеет значение true (разрешен вызов глобальных обработчиков событий на различных этапах Ajax-запроса, например, функций ajaxStart или ajaxStop). Значение false устанавливается, чтобы предотвратить их срабатывание. (Используется для управления Ajax-событиями).
ifModified – (boolean - логическое значение) Если установлено значение true, то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка "Last-Modified" с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок "Etag" – строка с версией компонента). По умолчанию имеет значение false, т.е. успешность запроса не зависит от заголовков и от изменений в ответе.
jsonp – (строка) Переопределяет имя функции обратного вызова для кроссдоменного запроса jsonp. Заменяет собой ключевое слово callback в части "callback=?" строки GET запроса (добавляемой к URL) или передаваемой в теле запроса при передаче методом POST. По умолчанию jQuery автоматически генерирует уникальное имя для функции обратного вызова.
jsonpCallback – (строка) Определяет имя функции обратного вызова для jsonp-запроса. Это значение будет использоваться вместо случайного имени, автоматически генерируемого библиотекой jQuery. Использование данного параметра позволяет избегать пропусков кэширования браузером GET запросов. Желательно разрешать jQuery генерировать новое имя для каждого нового кроссдоменного запроса на сервер для удобства управления запросами и ответами.
password – (строка) Пароль, который будет использоваться в ответ на требование HTTP авторизации на сервере.
processData – (boolean - логическое значение) По умолчанию имеет значение true, и данные, передаваемые на сервер в параметре data, преобразовываются в строку запроса с типом содержимого "Application / X-WWW-форм-urlencoded" и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false.
scriptCharset – (строка) При выполнении запросов методом GET и запросов, ориентированных на получение данных типа "jsonp" или "script", указывает кодировку символов запроса (например "UTF-8" или "CP1251"). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.
success(data, textStatus, XHR ) – (функция) Функция, которая вызывается при успешном запросе (если код статуса в ответе на запрос сообщает об успехе). Функции передаются три аргумента:
- data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра dataType,
- textStatus - строку с кодом статуса, сообщающем об успехе,
- XHR - экземпляр объекта XMLHttpRequest.
timeout – (число) Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup. Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена). Это можно использовать, например, для того, чтобы назначить определенному запросу более длительное время ожидания, чем время, установленное для всех запросов.
traditional – (boolean - логическое значение) Необходимо установить значение true, чтобы использовать традиционную (упрощенную) сериализацию (преобразование) данных при отправке (без рекурсивного преобразования в URL-подобную строку объектов или массивов, которые вложены в другие массивы или объекты).
type – (строка) HTTP-метод передачи данных при выполнении запроса. По умолчанию данные передаются методом GET. Обычно используются GET или POST. Также можно использовать методы PUT и DELETE, но это не рекомендуется, ввиду того, что они поддерживаются не всеми браузерами.
url – (строка) Строка, содержащая URL-адрес, по которому посылается запрос. По умолчанию это текущая страница.
username – (строка) Имя пользователя, которое будет использоваться для HTTP авторизации на сервере.
xhr – (функция) Функция, вызываемая для создания экземпляра объекта XMLHttpRequest. По умолчанию создание объекта XHR реализовано через ActiveXObject в браузере IE, либо через встроенный объект типа XMLHttpRequest в остальных случаях.
options – (объект) Объект в виде набора свойств (пар ключ:"значение"), которые задают параметры для Ajax запроса. Возможных параметров (свойств объекта options) очень много, и обычно в большинстве случаев они используются далеко не все, а только некоторые из них. К тому же, все эти параметры являются необязательными, т.к. значение любого из них может быть установлено по умолчанию с помощью метода $.ajaxSetup() .
Для настройки Ajax-запроса доступны следующие свойства объекта options:
декабрь 2 , 2016
Однажды я писал статью как создавать встраиваемые виджеты на нативном javascript и php . И все бы хорошо, но в ней не затронул один момент. Такие виджеты использовать на собственном сайте можно, но интереснее создавать их для сторонних ресурсов. Но в таком случае нужные данные браузер должен подгружать с другого домена - это и есть кросс-доменные ajax-запросы.
С точки зрения фронтенд-программистов кросс-доменные запросы ничем не отличаются от обычных. А вот на бекенде разница есть. Почему с ними не все так просто и как их реализовать - об этом читайте в статье.
Пробуем получить данные с другого доменаДля простоты рассмотрим get-запросы. Допустим, на сервере лежит некий html-файлик, который нам край как нужно загрузить ajax-ом с другого домена..html. Откройте его и убедитесь, что он действительно доступен - (откроется в новой вкладке). Это обычный div с текстом "content from template.html".
А теперь давайте получим эту html-ку ajax-ом прямо из консоли браузера.
Не будем париться с нативным javascript-ом, а дернем запрос с помощью jQuery.get() и выведем в консоль то, что получили в ответ с сервера.
$..html", function(responce) {console.log(responce)});
Откройте прямо сейчас developer tools в браузере и на вкладке console выполните этот запрос.
Вы увидите примерно следующее
Все замечательно, отправили запрос, получили ответ. Казалось бы, что может быть проще? А теперь зайдите на любой другой сайт, где подключен jQuery и попробуйте проделать то же самое. Только не на https-сайт, почему - узнаете в конце статьи.
Я, например, проверял запросы на футбольном сайте bombardir.ru. И заодно подивился, какой только дряни не вываливается в консоль даже на таких достаточно известных сайтах. Впрочем, разговор не про это.
Выполните запрос с другого домена и Вы увидите в консоли уже не такую благостную картину. Говорит, невозможно загрузить, данных нет и вообще печаль.
Если откроете вкладку Network и найдете там соотвествующий запрос, то увидите, сервер даже вернул нам 200 ОК
А содержимого файла нет. В чем подвох?
Подвох в том, что политика интернетов не разрешает браузерам вытаскивать данные с каких угодно ресурсов.
Кроме тех случаев, когда эти ресурсы сами заинтересованы в раздаче конкретных данных.
Наш случай именно такой.
Чтобы дать разрешение на использование html-файлика откуда угодно, нужно при запросе оного файла отправлять http-заголовок Access-Control-Allow-Origin: *
Теперь вопрос, как это сделать. Если у Вас (или же у админов) есть доступ к nginx, то одним способом будет настроить прокидывание этого заголовка средствами веб-сервера. Вы идете к админам с соответствующей просьбой или гуглите сами нужные конфиги для Вашего веб-сервера.
Если же этого доступа нет, как например, у практически любого хостинг-провайдера на недорогом тарифе, то нужно выкручиваться самостоятельно. И здесь на помощь приходит php. Идея в том, чтобы закинуть нашу html-ку в php-файл, который и прокинет заголовок, и отдаст нужное содержимое.
Получится так, создаем файл template.php и первой строкой запишем php-команду
Header("Access-Control-Allow-Origin: *");
Content from template.php
То есть содержимое template.php будет таким, не забудьте про php-шные вопросы и скобки
Файл на webdevkin-е создан и лежит (откроется в новой вкладке). Давайте теперь попробуем запросить его с другого домена и посмотрим, что будет
$..php", function(responce) {console.log(responce)});
Как видно, все работает прекрасно - файл загружен!
Заглянем на вкладку Network.
Обратите внимание, в блоке Response Headers появился интересующий нас заголовок Access-Control-Allow-Origin: *
В целом статья закончена. Осталось собрать мысли в кучу и добавить еще немного информации.
Обобщаем и подводим итоги- 1. Нельзя просто так запросить ajax-ом любой ресурс с другого домена
- 2. Отправляйте заголовок Access-Control-Allow-Origin для всех ресурсов, к которым нужен доступ откуда угодно
- 3. Делайте это средствами веб-сервера или php
- 4. На php этот заголовок отправляется командой header("Access-Control-Allow-Origin: *")
- 5. Access-Control-Allow-Origin: * - разрешить доступ всем доменам, Access-Control-Allow-Origin: site.ru - только домену site.ru
- 6. Access-Control-Allow-Origin отправляется в самом начале php-файла, еще до вывода других данных (как впрочем, и любые другие http-заголовки)
- 7. "Ресурс" - это не только файл с html-разметкой, но и любой url, к которому идет ajax-запрос, например, получение json-данных или post-запрос на добавление строки в таблицу БД
И последнее, вынес отдельно. Я не зря просил выполнять запросы именно с http-сайта. С https не получится подгрузить данные с http по другой причине - mixed content. А сайт пока что http-сайт (updated: уже нет, перенес сайт на https)
Вот что увидите в консоли, попытавшись выполнить тот же запрос с любого https-сайта. Поэтому если Вы собираетесь заниматься встраиваемыми виджетами или чем-то подобным, Вам обязательно нужно поставить ssl-сертификат на своем сайте.
Иногда бывает нужно отправить ajax-запрос на другой домен , чтобы динамически подгрузить оттуда данные. Однако, ajax этого сделать не позволяет в целях безопасности. Но в этой статье я покажу, как это ограничение можно обойти.
В основе лежит то, что хоть ajax и не позволяет отправлять запрос на другой домен, но PHP позволяет отправлять что угодно и куда угодно. Итак, алгоритм следующий:
Вот такой простой алгоритм. Давайте его быстренько реализуем. Значит, сразу 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-метод передачи данных при выполнении запроса. Обычно используются GET или POST . Также можно использовать методы PUT и DELETE , но это не рекомендуется, ввиду того, что они поддерживаются не всеми браузерами.
$.ajax({ //... type: "POST", //... });
$.ajax({ //... url: "/path/to/script", //... });
Данные, отправляемые c запросом на сервер. Они преобразовываются в строку запроса и по умолчанию обязательно кодируются в URL-подобный вид (За автоматическое кодирование в формат URL отвечает параметр ).
Строка присоединяется к строке запроса URL, если запрос выполняется методом GET. Если же запрос выполняется методом POST, то данные передаются в теле запроса.
$.ajax({ //... data: "value1=1&value2=2&value3=3", //... });
Если данный параметр является объектом в виде набора пар имя_свойства/значение, а значение является массивом, то jQuery сериализует объект в последовательность нескольких значений с одним и тем же ключом.
{Foo: [ "bar1", "bar2"]}
&Foo=bar1&Foo=bar2
Флаг выполнения асинхронных запросов.
$.ajax({ //... async: false, //... });
Флаг кэширования ответа.
По умолчанию имеет значение true для типов данных text , xml , html , json . Для типов данных script и jsonp имеет значение по умолчанию false .
Если установлено значение true , то запрос считается успешным только в том случае, если данные в ответе изменились с момента последнего запроса (jQuery определяет, совпадает ли компонент в кэше браузера с тем, что находится на сервере, путем проверки заголовка Last-Modified с датой последней модификации содержимого, а в jQuery 1.4 также проверяется заголовок Etag – строка с версией компонента). По умолчанию имеет значение false , т.е. успешность запроса не зависит от заголовков и от изменений в ответе.
Имя пользователя, которое будет использоваться для HTTP авторизации на сервере.
Данные, передаваемые на сервер в параметре , преобразовываются в строку запроса с типом содержимого Application / X-WWW-форм-urlencoded и кодируются. Если такая обработка нежелательна (когда необходимо отправить на сервер другие данные, например DOMDocument или объект xml), то ее можно обойти, установив для данного параметра значение false .
При выполнении запросов методом GET и запросов, ориентированных на получение данных типа jsonp или script , указывает кодировку символов запроса (например UTF-8 или CP1251). Полезно при различиях между кодировками на стороне клиента и на серверной стороне.
Устанавливает максимальное время ожидания ответа сервера в милисекундах. Имеет приоритет над глобальной установкой предельного времени ожидания через $.AjaxSetup . Если лимит времени ожидания превышен, то выполнение запроса прерывается и вызывается функция обработки ошибок error (если она установлена).
| error | XHR, textStatus, errorThrown | Срабатывает при неудачном запросе. Функции передаются три аргумента: textStatus - строка, описывающая тип ошибки, которая произошла (timeout , error , notmodified или parsererror) errorThrown - необязательный параметр, объект-исключение, если таковой имеется (возвращается экземпляром объекта XHR) $.ajax({ //... error: function() { alert("Ошибка!"); }, //... }); |
| success | data, textStatus, XHR | Срабатывает при успешном запросе. Функции передаются три аргумента: data - данные, возвращаемые сервером в ответе, предварительно обработанные функцией dataFilter в соответствии со значением параметра textStatus - строку с кодом статуса, сообщающем об успехе XHR - экземпляр объекта XMLHttpRequest $.ajax({ //... success: function() { alert("Успех!"); }, //... }); |
| beforeSend | XHR | Срабатывает перед отправкой запроса. В качестве единственного аргумента ей передается экземпляр объекта XHR (XMLHttpRequest). Если функция возвращает false , то происходит отмена запроса. $.ajax({ //... beforeSend: function() { alert("Сработал beforeSend!"); }, //... }); |
| complete | XHR, textStatus | Срабатывает по окончанию запроса независимо от его успеха или неудачи (а также после функций и , если они заданы). Функция получает два аргумента: экземпляр объекта XHR (XMLHttpRequest) и строку, сообщающую о состоянии success или error (в соответствии с кодом статуса в ответе на запрос) |
Подробный пример:
function testAjax(id, pid) {
$.ajax({
type: "POST",
data: "id=" + id + "&pid=" + pid,
url: "/path/to/script/test.php",
success: function(data) {
var obj = $.parseJSON(data); //Преобразование json ответа сервера
if (obj.error == 0) {
alert("Запрос прошел успешно");
} else {
alert(obj.error);
}
}
});
return true;
}
Успешный запрос
Запрос с ошибкой
PHP скрипт (test.php):
Еще один пример, отличается выводом ответа:
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/
