Кросс-доменный Ajax в jQuery

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».

Джеймс Падолси, автор статьи указанной выше, также создал плагин «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

<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