Главная » Полезные статьи » Язык JavaScript » Кросс-доменный Ajax в jQuery
Распечатать статью

Кросс-доменный 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 возможны, но не должны быть бездумными. На этом все. Желаю удачного кодинга.

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи