APPOSSUM - ТЕХ. ПОДРОБНОСТИ

Все аппы

↓ Громкость: 80 % ↑

Громкость: 80 %

ГЕНЕРАТОР РРРИТМОВ ПОСТУЧАТЬ Кто не умеет играть на этнических барабанах — узнает многое о ритмах, даже сможет их сочинять. Кто умеет — получит инструмент, чтобы делиться барабанными знаниями. Но больше всего Генератор ррритмов Drrrums подойдёт тем, кто учится и экспериментирует. МАНДАЛА НЕЛЬСОНА НАРИСОВАТЬ Просто двигайте мышью (можно под музыку). Если действовать намеренно — это будет рисованием в необычном графическом редакторе. Если вы просто позволите визуальным образам возникать и исчезать, это может стать медитацией. ДИКТАНТЫ КАТАЛОГ (558 ЗАДАНИЙ) Апп диктует слова — вы пишете. Если пишете грамотно, то цель достигнута. В некоторых заданиях надо сразу переводить слова на другой язык. Сейчас работают три словаря: русский, английский, немецкий . E.MEMORY КАТАЛОГ (281 ЗАДАНИЙ) Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников. ЧИСЛА КАТАЛОГ (14 ЗАДАНИЙ) Генератор математических примеров пригодится тем, кто учит своих или чужих детей арифметике. Примеры можно распечатать или решать онлайн, тогда апп сам всё проверит. YOBEL ХОЧУ ПРАЗДНИК Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

Кто не умеет играть на этнических барабанах — узнает многое о ритмах, даже сможет их сочинять. Кто умеет — получит инструмент, чтобы делиться барабанными знаниями. Но больше всего Генератор ррритмов Drrrums подойдёт тем, кто учится и экспериментирует.

МАНДАЛА НЕЛЬСОНА НАРИСОВАТЬ Просто двигайте мышью (можно под музыку). Если действовать намеренно — это будет рисованием в необычном графическом редакторе. Если вы просто позволите визуальным образам возникать и исчезать, это может стать медитацией.

Просто двигайте мышью (можно под музыку). Если действовать намеренно — это будет рисованием в необычном графическом редакторе. Если вы просто позволите визуальным образам возникать и исчезать, это может стать медитацией.

ДИКТАНТЫ КАТАЛОГ (558 ЗАДАНИЙ) Апп диктует слова — вы пишете. Если пишете грамотно, то цель достигнута. В некоторых заданиях надо сразу переводить слова на другой язык. Сейчас работают три словаря: русский, английский, немецкий .

Апп диктует слова — вы пишете. Если пишете грамотно, то цель достигнута. В некоторых заданиях надо сразу переводить слова на другой язык. Сейчас работают три словаря: русский, английский, немецкий .

E.MEMORY КАТАЛОГ (281 ЗАДАНИЙ) Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников.

Апп-игра для запоминания любых соответствий, в первую очередь иностранных слов. Например, стол — это table , про Монте-Кристо написал Дюма , Сеул — столица Южной Кореи . Много заданий из школьных и институтских учебников.

ЧИСЛА КАТАЛОГ (14 ЗАДАНИЙ) Генератор математических примеров пригодится тем, кто учит своих или чужих детей арифметике. Примеры можно распечатать или решать онлайн, тогда апп сам всё проверит.

Генератор математических примеров пригодится тем, кто учит своих или чужих детей арифметике. Примеры можно распечатать или решать онлайн, тогда апп сам всё проверит.

YOBEL ХОЧУ ПРАЗДНИК Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

Вычисление необычных юбилеев. Узнайте, когда вам стукнет миллиард секунд или сто тысяч лет в двоичной системе — и отпразднуйте! Или найдите повод поздравить кого-то другого.

ТЕХ. ПОДРОБНОСТИ ПРАВИЛА И ИНСТРУКЦИИ КОНТАКТЫ ПОСЛЕДНИЕ ИЗМЕНЕНИЯ ТЕХ. ПОДРОБНОСТИ Вернуться к списку статей JSONP. Объяснение принципов, корни технологии. Автор: А. Смирнов Текст опубликован: 22.01.2010 Твитнуть см. также: Работа с JSON средствами PHP. Основные положения и лично пройденные грабли. Работа с JSON средствами JavaScript. Кодировки и Content-Type. Основные положения и лично пройденные грабли. JSONP. Объяснение принципов, корни технологии. JSONP или "JSON with padding" является расширением JSON, позволяющим выполнять в единообразном стиле асинхронные запросы к сервисам, расположенным на другом домене . Первоначально идея была предложена в блоге MacPython в 2005м году, и в настоящее время используется многими Web 2.0 приложениями и библиотеками, в том числе jQuery . Напомню, что для объекта XMLHTTPRequest, в соответствии с политикой единства происхождения , существует ограничение на междоменные взаимодействия. То есть, если сайт расположен по адресу alexsite.com и страница получена с него, то AJAX-запрос на сервер vovasite.com выполнить не удастся, он будет отсечен браузером по соображениям безопасности. Политика единства происхождения (Same origin policy) В тех случаях, когда содержимое из нескольких источников каким-либо образом объединяется в одной HTML-странице, эти источники могут иметь различные уровни доверия. Поэтому естественным требованием является изолирование содержимого различных источников для минимизации их взаимного влияния. Политика единства происхождения (same-origin policy) является частью механизма защиты современных браузеров, который изолирует Web-контент, приходящий из разных доменов. То есть, если контент в нескольких окнах или фреймах загружен с разных серверов, они не могут иметь доступ к данным и сценариям друг друга. При этом политика единства происхождения применяется к динамически подгружаемым объектом XMLHTTPRequest данным, но не применяется к JavaScript-файлам, импортированным в HTML-документ тегами <script src="..." >. Эта политика реализована во всех широко используемых браузерах. Суть технологии считается довольно простой и обычно объясняется в двух-трех словах, что ведет к ее повальному недопониманию. Именно поэтому эти два-три слова я говорить не буду, а объясню все по возможности обстоятельно и последовательно. Важно отметить , что применение технологии JSONP требует специальной поддержки на сервере-источнике данных . Разберемся с описываемой технологией при помощи комплексного примера, отработанного на тестовом стенде. Тестовый стенд В качестве серверной части использовался Lotus Domino под ОС Windows XP, возврат формировался агентами на LotusScript (считайте это маленькой причудой автора, на его месте вполне могла быть связка Apache-PHP, концептуально это не важно) В качестве клиентской части использовался браузер Firefox 3 под ОС Windows XP Кроссдоменность системы обеспечивалась загрузкой основных страниц с локального диска. Шаг 1. Постановка проблемы. Допустим, что ваша HTML-страница (важная часть сложного и прекрасного Портала) отображает карточки пользователей, выдаваемые вашим же веб-сервером в формате JSON. Напишем простейший прототип такой системы. Карточка пользователя выглядит следующим образом: name.json { "name" : "Иванов" , "phoneNumbers" : [ "812 123-4567" , "916 123-4567" ] } Страница, отображающая данные пользователя, выглядит так: Test.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < title > JSONP < / title > < script type = "text/javascript" src = "jquery-1.3.2.js" >< / script > < script > function fillUI ( data ) { $ ( "#json_name" ) . text ( data. name ) ; for ( phone_index in data. phoneNumbers ) $ ( "<li></li>" ) . appendTo ( "#json_phones" ) . text ( data. phoneNumbers [ phone_index ] ) ; } $ ( document ) . ready ( function ( ) { $. getJSON ( "name.json" , function ( data ) { fillUI ( data ) ; } ) ; } ) ; < / script > < / head > < body > JSONP Test < br >< br > Имя:   < span id = "json_name" >< / span >< br > Телефоны: < ul id = "json_phones" >< / ul > < / body > < / html > Результат вызова страницы в браузере Firefox 3 выглядит следующим образом: Данные были успешно загружены и выведены. Предположим, что с развитием бизнеса был организован специальный Центр Хранения Карточек Пользователей ( ЦХК ) со своим веб-сервером, один на несколько организаций со своими Порталами. При этом формат хранения и выдачи карточек не изменился. Перенесем файл name.json на сервер ЦХК и попробуем считать его оттуда: Test.html … $ ( document ) . ready ( function ( ) { //$.getJSON("name.json", function(data){ $. getJSON ( "http://www.цхк.ru/WebTests.nsf/name.json" , function ( data ) { fillUI ( data ) ; } ) ; } ) ; … К сожалению, такой запрос не будет выполнен и приведет к возникновению Ошибки: Ошибка: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "file:///E:/eclipse33/workspace/JSONP/WebContent/jquery-1.3.2.js Line: 3517"] Источник: file:///E:/eclipse33/workspace/JSONP/WebContent/jquery-1.3.2.js Строка: 3517 Шаг 2. Подход к решению проблемы. На заре Новой эры веба, когда слово AJAX еще не было придумано, широко использовался альтернативный подход к запрашиванию данных на лету: передача данных с помощью элементов <script> (то есть, проще говоря, динамическая подгрузка и исполнение кода JavaScript). На загрузку JavaScript с чужого сервера ограничения не накладываются (на этом, например, строится тактика встраивания на страницы баннеров и счетчиков внешних систем). Таким образом, по сравнению с методом использования объекта XMLHttpRequest он имеет одно существенное преимущество: возможность направлять AJAX-запросы не только к собственному, но и к чужим серверам. Это преимущество, правда, может обернуться существенным недостатком, если вы обеспокоены вопросами безопасности и не хотите, чтобы на ваших страницах исполнялся код, находящийся вне вашего контроля (выбранный вами AJAX-провайдер сможет в любой момент внедрить на вашу страницу любой, в том числе и вредоносный, код). Перепишем нашу систему, используя данный подход. Выдачу JSON-файла на сервере ЦХК надо заменить выдачей кода JavaScript, передающей вам данные через, например, заранее оговоренную между поставщиком и потребителем данных переменную… Remote.js var data = { "name" : "Кузнецов" , "phoneNumbers" : [ "812 123-4567" , "916 123-4567" ] } ; …которую вы используете на своей странице: Test_ext.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < title > JSONP < / title > < script type = "text/javascript" src = "jquery-1.3.2.js" >< / script > < script type = "text/javascript" src = "http://www.цхк.ru/WebTests.nsf/remote.js?OpenAgent" >< / script > < script > function fillUI ( data ) { $ ( "#json_name" ) . text ( data. name ) ; for ( phone_index in data. phoneNumbers ) $ ( "<li></li>" ) . appendTo ( "#json_phones" ) . text ( data. phoneNumbers [ phone_index ] ) ; } $ ( document ) . ready ( function ( ) { fillUI ( data ) ; } ) ; < / script > < / head > < body > JSONP Test < br >< br > Имя:   < span id = "json_name" >< / span >< br > Телефоны: < ul id = "json_phones" >< / ul > < / body > < / html > Внимание: параметр ?OpenAgent привлекает внимание к тому, что страница remote.js не является статической, а формируется динамически (например кодом PHP, а в моем случае – агентом HTTP-сервера Lotus Domino) на сервере с использованием данных файла name.json. Как и следовало ожидать, наша страница снова корректно отображается в браузере: При таком сценарии на построение клиентской части накладывается ограничение, инициируемое серверной частью: зарезервированное имя переменной с результатом (в нашем случае data ), что не всегда приемлемо (можно себе представить клиента, у которого переменная с именем data уже играет важную роль в системе и не может быть переименована). Здесь клиент вынужден подстраиваться под манеру выдачи информации сервером. Возможен и другой вариант, когда сервер подстраивается под манеру обработки данных клиентом, вызывая (кодируя вызов в выдаваемом JavaScript’е) функцию, ранее определенную на клиенте: Remote.js fillUI ( { "name" : "Кузнецов" , "phoneNumbers" : [ "812 123-4567" , "916 123-4567" ] } ) ; Test_ext.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < title > JSONP < / title > < script type = "text/javascript" src = "jquery-1.3.2.js" >< / script > < script > function fillUI ( data ) { $ ( "#json_name" ) . text ( data. name ) ; for ( phone_index in data. phoneNumbers ) $ ( "<li></li>" ) . appendTo ( "#json_phones" ) . text ( data. phoneNumbers [ phone_index ] ) ; } $ ( document ) . ready ( function ( ) { $. getScript ( "http://www.цхк.ru/WebTests.nsf/remote_ext.js?OpenAgent" ) ; } ) ; < / script > < / head > < body > JSONP Test < br >< br > Имя:   < span id = "json_name" >< / span >< br > Телефоны: < ul id = "json_phones" >< / ul > < / body > < / html > Этот подход приводит к тем же положительным результатам, обладая теми же недостатками. Наша система работает, но все клиенты ЦХК вынуждены называть свои функции обработки данных JSON одинаково – fillUI . Шаг 3. Рождение JSONP. Нетрудно видеть, что избежать такого неудобства можно передачей имени функции обработки данных серверу ЦХК в запросе: сервер получает (например через параметр callback) имя функции, определенной на странице клиента и оборачивает (при наличии доброй воли и готовности к сотрудничеству) именно им, а не фиксированным именем свои данные JSON. Клиентская часть кода при этом выглядит так: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < title > JSONP < / title > < script type = "text/javascript" src = "jquery-1.3.2.js" >< / script > < script > function fillUI ( data ) { $ ( "#json_name" ) . text ( data. name ) ; for ( phone_index in data. phoneNumbers ) $ ( "<li></li>" ) . appendTo ( "#json_phones" ) . text ( data. phoneNumbers [ phone_index ] ) ; } $ ( document ) . ready ( function ( ) { $. getJSON ( "http://www.цхк.ru/WebTests.nsf/remote_ext.js?OpenAgent&callback=?" , function ( data ) { fillUI ( data ) ; } ) ; } ) ; < / script > < / head > < body > JSONP Test < br >< br > Имя:   < span id = "json_name" >< / span >< br > Телефоны: < ul id = "json_phones" >< / ul > < / body > < / html > Соответственно, ответ сервера ЦХК, поддерживающего соглашения JSONP, будет оформлен как: jsonp1248687199053 ( { "name" : " Кузнецов" , "phoneNumbers" : [ "812 123-4567" , "916 123-4567" ] } ) ; Для более полного понимания рисков использования технологии JSONP добавим в ответ сервера ЦХК Вредоносный Код , предваряющий вызов callback-функции: alert ( 'Please, type format c: in DOS Prompt to continue...' ) ; jsonp1248687375557 ( { "name" : "Dr. No" , "phoneNumbers" : [ "812 123-4567" , "916 123-4567" ] } ) ; Как и следовало ожидать, наша атака окажется успешной и пользователь получит заманчивое предложение: Таким образом, применение JSONP является потенциально слабым местом в системе защиты приложения от XSS-атак (от cross-site scripting - межсайтовые сценарии). Сервисы, поддерживающие использование технологии JSONP: Google (поисковый движок и большинство сервисов, см. http://code.google.com/apis/ajaxsearch/documentation/reference.html ) Yahoo (поисковый движок и большинство сервисов, см. http://developer.yahoo.com/search/ ) Flickr (см. http:/www.flickr.com/services/api/ ) Wikipedia и прочие разработки на основе движка MediaWiki (см. http://en.wikipedia.org/w/api.php ) Digg (см. http://apidoc.digg.com/ ) … и многие другие. Примечание: в документации к публичным API, предусматривающим использование JSONP, эта технология может упоминаться как JSON-P (Google), а может быть вообще не поименована, проявляя себя наличием параметра callback в запросах данных JSON-формата (Digg). В качестве примера JSONP-запроса к одному из популярных сетевых ресурсов рассмотрим поиск изображений на сайте Flickr.com, взятый (с минимальными модификациями) непосредственно из документации jQuery (преимущество этого ресурса в том, что запрос его не требует предварительной подготовки и получения ID, в отличии, например, от сервисов Google или Yahoo). test_flickr.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < script type = "text/javascript" src = "jquery-1.3.2.js" >< / script > < script > var oppo_amount = 3 ; $ ( document ) . ready ( function ( ) { $. getJSON ( "http://api.flickr.com/services/feeds/photos_public.gne?tags=opossum&tagmode=any&format=json&jsoncallback=?" , function ( data ) { $. each ( data. items , function ( i , item ) { $ ( "<img/>" ) . attr ( "src" , item . media . m ) . appendTo ( "#images" ) ; if ( i >= ( oppo_amount - 1 ) ) return false ; } ) ; } ) ; } ) ; < / script > < / head > < body > < div id = "images" >< / div > < / body > < / html > На этой странице мы можем видеть 3 фотографии опоссумов , полученные при помощи Flickr JSONP API (те же, кому опоссумов недостаточно, или, наоборот, слишком много, могут регулировать их численность при помощи переменной oppo_amount). Это результат отображения следующего ответа Flickr: jsonp1248686040720 ( { "title" : "Recent Uploads tagged opossum" , "link" : "http://www.flickr.com/photos/tags/opossum/" , "description" : "" , "modified" : "2009-07-27T03:08:46Z" , "generator" : "http://www.flickr.com/" , "items" : [ { "title" : "Opossum 46/365" , "link" : "http://www.flickr.com/photos/25165847@N04/3759954163/" , "media" : { "m" : "http://farm3.static.flickr.com/2449/3759954163_6220767806_m.jpg" } , "date_taken" : "2009-07-22T10:25:34-08:00" , … } )

ТЕХ. ПОДРОБНОСТИ

ПРАВИЛА И ИНСТРУКЦИИ

КОНТАКТЫ

ПОСЛЕДНИЕ ИЗМЕНЕНИЯ

JSONP или "JSON with padding" является расширением JSON, позволяющим выполнять в единообразном стиле асинхронные запросы к сервисам, расположенным на другом домене . Первоначально идея была предложена в блоге MacPython в 2005м году, и в настоящее время используется многими Web 2.0 приложениями и библиотеками, в том числе jQuery .

Напомню, что для объекта XMLHTTPRequest, в соответствии с политикой единства происхождения , существует ограничение на междоменные взаимодействия. То есть, если сайт расположен по адресу alexsite.com и страница получена с него, то AJAX-запрос на сервер vovasite.com выполнить не удастся, он будет отсечен браузером по соображениям безопасности.

В тех случаях, когда содержимое из нескольких источников каким-либо образом объединяется в одной HTML-странице, эти источники могут иметь различные уровни доверия. Поэтому естественным требованием является изолирование содержимого различных источников для минимизации их взаимного влияния.

Политика единства происхождения (same-origin policy) является частью механизма защиты современных браузеров, который изолирует Web-контент, приходящий из разных доменов. То есть, если контент в нескольких окнах или фреймах загружен с разных серверов, они не могут иметь доступ к данным и сценариям друг друга. При этом политика единства происхождения применяется к динамически подгружаемым объектом XMLHTTPRequest данным, но не применяется к JavaScript-файлам, импортированным в HTML-документ тегами <script src="..." >. Эта политика реализована во всех широко используемых браузерах.

Суть технологии считается довольно простой и обычно объясняется в двух-трех словах, что ведет к ее повальному недопониманию. Именно поэтому эти два-три слова я говорить не буду, а объясню все по возможности обстоятельно и последовательно.

Важно отметить , что применение технологии JSONP требует специальной поддержки на сервере-источнике данных .

Разберемся с описываемой технологией при помощи комплексного примера, отработанного на тестовом стенде.

В качестве серверной части использовался Lotus Domino под ОС Windows XP, возврат формировался агентами на LotusScript (считайте это маленькой причудой автора, на его месте вполне могла быть связка Apache-PHP, концептуально это не важно)

В качестве клиентской части использовался браузер Firefox 3 под ОС Windows XP

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

Допустим, что ваша HTML-страница (важная часть сложного и прекрасного Портала) отображает карточки пользователей, выдаваемые вашим же веб-сервером в формате JSON. Напишем простейший прототип такой системы.

Карточка пользователя выглядит следующим образом:

name.json

Страница, отображающая данные пользователя, выглядит так:

Test.html

Результат вызова страницы в браузере Firefox 3 выглядит следующим образом:

Данные были успешно загружены и выведены.

Предположим, что с развитием бизнеса был организован специальный Центр Хранения Карточек Пользователей ( ЦХК ) со своим веб-сервером, один на несколько организаций со своими Порталами. При этом формат хранения и выдачи карточек не изменился.

Перенесем файл name.json на сервер ЦХК и попробуем считать его оттуда:

К сожалению, такой запрос не будет выполнен и приведет к возникновению Ошибки:

Ошибка:

[Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "file:///E:/eclipse33/workspace/JSONP/WebContent/jquery-1.3.2.js Line: 3517"]

Источник: file:///E:/eclipse33/workspace/JSONP/WebContent/jquery-1.3.2.js

Строка: 3517

На заре Новой эры веба, когда слово AJAX еще не было придумано, широко использовался альтернативный подход к запрашиванию данных на лету: передача данных с помощью элементов <script> (то есть, проще говоря, динамическая подгрузка и исполнение кода JavaScript). На загрузку JavaScript с чужого сервера ограничения не накладываются (на этом, например, строится тактика встраивания на страницы баннеров и счетчиков внешних систем). Таким образом, по сравнению с методом использования объекта XMLHttpRequest он имеет одно существенное преимущество: возможность направлять AJAX-запросы не только к собственному, но и к чужим серверам. Это преимущество, правда, может обернуться существенным недостатком, если вы обеспокоены вопросами безопасности и не хотите, чтобы на ваших страницах исполнялся код, находящийся вне вашего контроля (выбранный вами AJAX-провайдер сможет в любой момент внедрить на вашу страницу любой, в том числе и вредоносный, код).

Перепишем нашу систему, используя данный подход. Выдачу JSON-файла на сервере ЦХК надо заменить выдачей кода JavaScript, передающей вам данные через, например, заранее оговоренную между поставщиком и потребителем данных переменную…

Remote.js

…которую вы используете на своей странице:

Test_ext.html

Внимание: параметр ?OpenAgent привлекает внимание к тому, что страница remote.js не является статической, а формируется динамически (например кодом PHP, а в моем случае – агентом HTTP-сервера Lotus Domino) на сервере с использованием данных файла name.json.

Как и следовало ожидать, наша страница снова корректно отображается в браузере:

При таком сценарии на построение клиентской части накладывается ограничение, инициируемое серверной частью: зарезервированное имя переменной с результатом (в нашем случае data ), что не всегда приемлемо (можно себе представить клиента, у которого переменная с именем data уже играет важную роль в системе и не может быть переименована). Здесь клиент вынужден подстраиваться под манеру выдачи информации сервером.

Возможен и другой вариант, когда сервер подстраивается под манеру обработки данных клиентом, вызывая (кодируя вызов в выдаваемом JavaScript’е) функцию, ранее определенную на клиенте:

Этот подход приводит к тем же положительным результатам, обладая теми же недостатками. Наша система работает, но все клиенты ЦХК вынуждены называть свои функции обработки данных JSON одинаково – fillUI .

Нетрудно видеть, что избежать такого неудобства можно передачей имени функции обработки данных серверу ЦХК в запросе: сервер получает (например через параметр callback) имя функции, определенной на странице клиента и оборачивает (при наличии доброй воли и готовности к сотрудничеству) именно им, а не фиксированным именем свои данные JSON. Клиентская часть кода при этом выглядит так:

Соответственно, ответ сервера ЦХК, поддерживающего соглашения JSONP, будет оформлен как:

Для более полного понимания рисков использования технологии JSONP добавим в ответ сервера ЦХК Вредоносный Код , предваряющий вызов callback-функции:

Как и следовало ожидать, наша атака окажется успешной и пользователь получит заманчивое предложение:

Таким образом, применение JSONP является потенциально слабым местом в системе защиты приложения от XSS-атак (от cross-site scripting - межсайтовые сценарии).

Сервисы, поддерживающие использование технологии JSONP:

Google (поисковый движок и большинство сервисов, см. http://code.google.com/apis/ajaxsearch/documentation/reference.html )

Yahoo (поисковый движок и большинство сервисов, см. http://developer.yahoo.com/search/ )

Flickr (см. http:/www.flickr.com/services/api/ )

Wikipedia и прочие разработки на основе движка MediaWiki (см. http://en.wikipedia.org/w/api.php )

Digg (см. http://apidoc.digg.com/ )

… и многие другие.

Примечание: в документации к публичным API, предусматривающим использование JSONP, эта технология может упоминаться как JSON-P (Google), а может быть вообще не поименована, проявляя себя наличием параметра callback в запросах данных JSON-формата (Digg).

В качестве примера JSONP-запроса к одному из популярных сетевых ресурсов рассмотрим поиск изображений на сайте Flickr.com, взятый (с минимальными модификациями) непосредственно из документации jQuery (преимущество этого ресурса в том, что запрос его не требует предварительной подготовки и получения ID, в отличии, например, от сервисов Google или Yahoo).

test_flickr.html

На этой странице мы можем видеть 3 фотографии опоссумов , полученные при помощи Flickr JSONP API (те же, кому опоссумов недостаточно, или, наоборот, слишком много, могут регулировать их численность при помощи переменной oppo_amount).