Кросс-доменный запрос Ajax в jQuery стал возможным на сторонних вебсайтах

Опубликовано: 05.09.2018

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 объекта и размещение в }); });

Для последующего чтения с большим пониманием рекомендуем изучить следующий материал «Как создавать страничку MashUp благодря jQuery»

“Screen Scraping” , используя YQL

Этот прием стал возможным с того момента, как Yahoo была реализована услуга «Yahoo! Query Language». Будет полезной также эта информация «API для интернета: изучаем YQL», при желании больше узнать об YQL. В стандартном случае, мы получаем HTML код вебсайта, который запрашиваем благодаря YQL с функцией обратной связи. Получить больше информации об этом вы сможете из статьи «К-Д запросы с jQuery».

Кроме того, автор данной статьи (Джеймс Падолси) смог создать модуль «cross-domain-ajax», расширяющий возможности Ajax jQuery системой YQL.

Этот небольшой пример позволяет нам получать HTML-код новых сниппетов jQuery (см. Затухающее меню: урок CSS и jQuery ), основываясь на Snipplr и вырезать href и заголовки данных фрагментов. Затем нужно вставить в ваш DOM полученные данные.

$(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 html: jQuery('', { // с 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!

Twitter

Это позволяет ограничивать запросы на не контролируемые вами сторонние вебсайты.

Можно узнать более подробно про CrossXHR и fiXHR.

Со стороны сервера.

Эмулировать К-Д запросы можно также с помощью сервера, к примеру, использовать PHP в виде прокси. Ознакомьтесь с материалом статьи Кристианы Хеилмана «Загрузка контента посредством Ajax и использованием jQuery и YQL».

Если вы имеете возможность осуществлять контроль над серверной частью кода, то нужно форматировать ответы и в готовом виде передавать их скрипту на уровне сервера. Например, сайт может получаеть число фоллоуверов через API твиттера и возвращать число отображаемое текстом. В дальнейшем это число будет получено через Ajax запрос

class ThirdPartyStatsController response["user"]["followers_count"] end end

В заключении.

Посредством Ajax К-Д запросы возможны, однако они не должны носить бездумный характер. На этом завершаем наш экскурс. Желаем успешного кодинга.