Кросс-доменные коммуникации с помощью JSONP

[Wott]

А собственно где JSONP? :)

[Traveler]

JSONP — JSON with Padding.

Собственно это код нашего файла ticker.js

showPrice({symbol: 'IBM', price: 91.42});

[Wott]

эммм, вообще-то это несколько больше:

в URL скрипта подставляется имя функции eg
some_another_domain.com/script_generator.php?param1=data1¶m2=data2&callback=showPrice

а серверный скрипт на другом домене оборачивает данные, как было указано в виде функции с хэшем в параметре.

Смысл в том что домен чужой, класть туда свой скрипт нет возможности, поэтому ответ на запрос к нему нужно обернуть в вызов нашей функции. Имя которой и передается.

Именно в таком виде он и поддерживается jQuery и mootools, например. Причем в jQuery достаточно добавить =? в параметры и библиотека сама обернет success call-back в публичную функцию и передаст его в этот параметр. Впрочем dataType: 'jsonp' добавляет '=?' за Вас :)

[Traveler]

Эмм. Вообще-то JSON — это формат данных и JSONP — тоже формат данных.

Передача удаленному скрипту параметра callback не является обязательной или необходимой. Самое главное это, чтобы функция в которую скрипт оборачивает JSON была определена в документе.

[lauri]

Эх… А все-таки хотелось бы поддержки XML. Часто API разных сервисов используют именно XML, а не JSON.

[Traveler]

Поддержки XML в чем?

[Mel]

code.google.com/p/crossxhr/wiki/CrossXhr

Библиотека использует флеш, позволяет совершать кроссдоменные запросы и использовать любые типы данных. Но там тоже свои недостатки с разрешением кроссдоменных запросов для флеша.

[skorney]

почти все js-api которые я видел имеют формат данных json (flickr, rutube, ...)
если нет, то нет никакой сложности разгрести строку регулярками (понятно что этот метод может возвращать и обычную строку вместо json)

[Traveler]

Да. Насколько я понимаю, JSON просто легковеснее чем XML. В случае же, если нужно работать с XML, то там работает обычный DOM. Если интересно кому-то, могу написать об этом.

[skorney]

да, пользуюсь этим методом уже не один год=) отлично работает.
главные недостатки:
1) только GET запросы
2) нет метода xhr.abort() [но можно эмулировать]

[Traveler]

Можно подробнее? Для чего этот метод нужен? И как его эмулировать?

[skorney]

Для чего нужно: смотри, если пользователь будет очень часто кликать на элементах которые посылают запрос — у тебя будет образовываться очередь запросов… в которой актуален только последний запрос. То есть перед отсылкой нового запроса нужно «прибить» предыдущий, для того чтобы всегда был один единственный и последний запрос. В XMLHttpRequest() для этого служит метод abort()

Ну понятно, что в JSONP .abort() нет. Один из способов эмуляции — это, например, дописывать к добавляемому скрипту атрибут id. И потом смотреть — если есть элемент с таким id — то .abort() будет означать $(id).parentNode.removeChild($(id)). То есть удаляем тег скрипта с head.

Добавлением id к элементу script можно решить проблему с очередью — не добавлять постоянно элемент в head, а просто менять src у уже существующего тега.

Еще, в таком виде как ты написал, пользоваться идеей сложно. Ну представь, человек попользовался функционалом… представил свой head с пару сотнями добавленных тегов script? В общем нужно после отработки скрипта этот тег обязательно удалять. Лучше всего реализацию смотреть в jQuery.getJSON

[Arris]

Просто и доступно. Спасибо.

[Traveler]

С помощью xhr иы можешь получить только данные в формате JSONP. Т.е. в любом случае скрипт на стороннем домене должен отдавать данные в этом формате.

[Traveler]

Какого именно? Клиентского или серверного.

Твой клиентский JS добавляет скрипт в хедер. Если ты это сделаешь без JS то будет выглядеть вот так:

<script type=«text/javascript» href=«some_another_domain.com/script_generator.php?param1=data1¶m2=data2&callback=showPrice»></script>

script_generator.php должен вернуть данные не в формате html, а в формате jsonp.
Если очень нужен html, то его тоже можно засунуть в JSONP.

[Traveler]

<script type=«text/javascript»>showPrice({some_html: '...'});</script>

[Traveler]

<script type=«text/javascript»>showPrice({some_html: '<хтмл></хтмл>});</script>

[Traveler]

Мне такие способы не известны.