Новый сайт по новому адресу ignatiev.su - Игнатьев Иван
Если вы что-то искали и не нашли, или у вас возникли вопросы, пишите на e-mail: ivan@ignatiev.su

Новый блог по адресу Блог об ИТ и программировании на русском. Если вы хотите, чтобы я обновил, какие-либо статьи, пожалуйста напишите мне на email.


jQuery и JSON, в чем подвох?

На днях разбирался с использованием связки jQuery + JSON, ведь с многими  Веб-API (vkontakte, flickr etc.), если так можно выразиться, можно легко и удобно работать запрашивая с них результаты в виде JSON.

Сам по себе JSON – это объект JavaScript, для подробного изучения материала лучше послать в вики.

Так вот подвох работы jQuery.getJSON() : для того, чтобы забрать JSON с удаленного сайта необходимо использовать его расширение JSONP.  Пока не столкнулся с этим сам, даже не подозревал что такое может быть.

Вкратце описание вышесказанного кодом:

есть сайт http://example.ru , на нем файл http://example.ru/user.php который возвращает :

{'name':'Ivan','status':'Administrator'}

примерный код самого скрипта:

<?php
$user  = array('name'=>'Ivan','status'=>'Administrator');
print json_encode($user);
?>

браузер даст его получить, если сам скрипт будет лежать на http://example.ru/ , но если мы сделаем

$.getJSON('http://example.ru/user.php', function(data) {
// работа с объектом data
});

с сайта http://test.ru , браузер выкинет нам Permission-denied, чтобы этого не произошло доработаем скрипт, чтобы он выдавал нам не только JSON, но и JSONP когда нужно:

<?php
$user  = array('name'=>'Ivan','status'=>'Administrator');
if (isset($_GET['callback']) {
//
// ....  здесь различные проверки $_GET['callback']
//
print $_GET['callback'].'('.json_encode($user).')';  // JSONP
} else  {
print json_encode($user); // JSON
}
?>

теперь при запросе GET http://example/user.php?callback=user получим:

 user({'name':'Ivan','status':'Administrator'})

А в JavaScript к URL добавим:

$.getJSON('http://example.ru/user.php?callback=?', function(data) {
// работа с объектом data
});

Tags: , ,

RSS 2.0 - Узнай первым, о обновлениях в комментариях к этой записи

10 комментария

  1. Спасибо! Очень помогло!

    • Иван Игнатьев

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

  2. Ни чего не понял.
    Обработка получается через вызов callback функции на клиентской стороне?
    То есть функция user должна существовать?

    • Да функция user должна существовать и выполняется на клиентской стороне , в данном случае, jQuery создают свою функцию и её имя подставляет вместо знака “?” (… callback=? …)
      callback функция условно выглядит :

      function user(data) {
        return data;
      }

      а при долучении данных с сервера, они “компилируются ” функцией eval

      eval("var data = user({'name':'Ivan','status':'Administrator'});"); //но до произведения подобной операции, обычно полученная с сервера строка еще проверяется, чтобы там не было вредоносного кода
      • Евгений

        С чего бы ей компилироваться функцией eval? Клиент получает сами данные, а не строку, которую надо преобразовывать.
        1) клиент запрашивает данные. Функция getJSON вставляет в такой элемент

        2) сервер обрабатывает запрос и взовращает в ответе:
        user( {‘name’:’Ivan’,’status’:’Administrator’} );

        3) Браузер получает ответ, и обрабатывает его как скрипт – вызывается функция user с некими данными. Никаких eval’ов не вызывается. Сервер может вернуть что угодно и это будет выполнено сразу, без всяких проверок.

  3. Огромная благодарность! Как раз то что я искал.

  4. Спасибо, Ваня, огромное! Просношался, извините за выражение, с JSONP неделю, уже в упор не мог понять почему не работает. В конце на сервере стал формировать функцию, которая есть на клиенте, и ей передавать объект с данными, но что-то мне подсказывало что это не совсем корректно))

    А насчет eval() не соглашусь с тобой – во всех нормальных скриптах используется JSON.parse() или его эмуляция(в jQuery – $.parseJSON()). И не надо проверять на “вредоносный код”.

  5. Здравствуйтею Могли бы подсказать.
    Когда мы при запросе теперь при запросе GET http://example/user.php?callback=user
    получили строку, как с ней можно работать, что бы например,
    Ivan вставить в один абзац, а Administator в другой или в спан.

    Вобщем как работать с полученной строкой, никак не разберусь(

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