Ajax запросы на сторонние вебсайты, как правило, невозможны из-за ограничений безопасности. Но есть несколько методов обхода данных ограничений.
Узнайте подробнее о них, вы можете из этого небольшого руководства.
JSONP
С помощью «JSON with padding» вы можете получать JSON данные со стороннего сервера при помощи тега <script>. Подробнее об этом вы можете узнать из Википедии.
Это позволяет отправлять запрос на любой сторонний API, который возвращает JSON с возможностью обратной связи. В этом примере мы сделаем запрос на Twitter API для получения кол-ва читателей аккаунта @usejquery.
$(document).ready(function() {
$.getJSON('http://twitter.com/users/usejquery.json?callback=?', function(json) { // получение информации о пользователе @ usejquery
$('#twitter_followers').text(json.followers_count); // получение числа фоллоуверов из json объекта и размещение в <span>
});
});
Для дальнейшего чтения рекомендуется прочитать статью «Как создать страничку MashUp с помощью jQuery»
“Screen Scraping” с помощью YQL
Эта техника стала возможной с тех пор, как Yahoo выпустила сервис «Yahoo! Query Language». Посмотрите статью «API для интернета: изучение YQL», если хотите узнать больше об YQL. Стандартно, мы получаем HTML код запрашиваемого вебсайта через YQL с обратной связью. Узнать больше об этом вы можете в статье «Кросс-доменные запросы с jQuery».
Яндекс.ДиректВсе объявления
50% скидки Мотоэкипировка Кожаные куртки, шлемы, мото перчатки, Кофры, чапсы, мотоботы Товар из США
mybikerstyle.com.ua
Джеймс Падолси, автор статьи указанной выше, также создал плагин «cross-domain-ajax», который расширяет возможности Ajax jQuery техникой YQL.
В этом небольшом примере мы получаем HTML-код последних сниппетов jQuery на основе Snipplr и вырезаем заголовки и href этих фрагментов. Далее полученные данные вставляются в ваш DOM.
<!—вставляет jQuery, cross-domain-ajax плагин и наш скрипт -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.xdomainajax.js"></script>
<script type="text/javascript" src="js/main.js"></script>
$(document).ready(function() {
$.get('http://snipplr.com/all/language/jquery', function(res) { // получение html-кода этого сайта $(res.responseText).find('.snippets li h3').each(function() { // циклически вырезаются все H3 заголовки var anchor = $(this).children('a:last'); // получение последней ссылки внутри текста
jQuery('<li/>', { // создаем LI
html: jQuery('<a/>', { // с A внутри
href: 'http://snipplr.com' + anchor.attr('href'), // указываем href для ссылки
text: anchor.text() // и текст
})
}).appendTo($('#jquery_snippets')); // добавляем к списку
});
$('#jquery_snippets li:first').remove(); // удаляем первый LI (“Loading...”) после завершения
});
});
Flash прокси
Для кросс-доменных запросов во Flash, вы должны описать доверенные домены в crossdomain.xml.
К примеру, поиск в Yahoo! допускает запрос от любого домена, в то время, как Twitter API допускает только от их основного или поддоменов.
Yahoo!
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only" />
<allow-access-from domain="*" />
</cross-domain-policy>
<!-- ws02.ydn.ac4.yahoo.com compressed/chunked Mon Jan 25 14:58:30 PST 2010 -->
Twitter
Яндекс.ДиректВсе объявления
Психология. Центр саморазвития!
Как включать Ваш ум в нужное время в нужном месте? Бесплатный мини-курс!
sheremetev.info
<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
<allow-access-from domain="twitter.com" />
<allow-access-from domain="api.twitter.com" />
<allow-access-from domain="search.twitter.com" />
<allow-access-from domain="static.twitter.com" />
<site-control permitted-cross-domain-policies="master-only"/>
<allow-http-request-headers-from domain="*.twitter.com" headers="*" secure="true"/>
</cross-domain-policy>
Это позволяет ограничить запросы на сторонние вебсайты, которые вы не контролируете.
Вы можете почитать про fiXHR и CrossXHR.
А что насчет стороны сервера?!
Кросс-доменные запросы вы также можете эмулировать с помощью сервера, например, используя PHP, как прокси. Советую ознакомиться со статьей «Загрузка контента через Ajax используя jQuery и YQL», Кристиана Хеилмана.
Лично я думаю, раз вы можете контролировать серверную часть кода, то должны на уровне сервера форматировать ответы и передавать их в готовом виде скрипту. К примеру, мой сайт получает число фоллоуверов по API твиттера и возвращает число в виде текста. Позже это число будет получено Ajax запросом.
class ThirdPartyStatsController < ApplicationController
#...
def twitter
response = Hash.from_xml open("http://twitter.com/users/show/usejquery.xml").read
render :text => response["user"]["followers_count"]
end
end
Заключение
Кросс-доменные запросы через Ajax возможны, но не должны быть бездумными. На этом все. Желаю удачного кодинга.
Если вы знаете еще какие-то способы кросс-доменных запросов, пожалуйста, сообщите в комментариях.
Данная статья является переводом статьи The jQuery Cross-Domain Ajax Guide подготовленным командой Internet-Technologies.Ru