JSONP для межсайтового руководства по букмарклетам - PullRequest
Новая
       7

JSONP для межсайтового руководства по букмарклетам

6 голосов
/ 15 сентября 2010

Я собираюсь создать межсайтовый букмарклет, который получает выделенное слово, передает его методу CodeIgniter ( domain.com / controller / method ) и возвращает определение через API словаря. , У меня есть скелет, хорошо работающий на одном домене, но я хочу расширить его для использования междоменного домена JSONP. Но я чувствую неясно.

Я знаю, что мне нужно загрузить скрипт из удаленного места и вставить его в текущем контексте. И я считаю, что мне нужно получить выделенное слово на странице, а затем вызвать URL, который выглядит как domain.com / controller / method / word , чтобы получить этот скрипт. Тогда становится туманно.

Мне кажется, у меня два вопроса:

  • Где включить необходимый javascript для обработки разбора и передачи слова через XMLHTTPRequest? Я думаю, что это будет SRC сценария, который я добавлю в новом контексте. Это как-то в моем соответствующем методе CodeIgniter? Или этот новый сценарий происходит из случайного расположения на том же сервере, что и соответствующий метод, и просто вызывает его?

Ответ: Это не дополнение к XMLHTTPRequest, это вместо него, так что этот шаг полностью удален. Новый скрипт вызывает метод, передает необходимую информацию через строки запроса и получает в ответ массив JSON.

  • Правильно ли я понимаю, что в конечном итоге ответ JSON от метода будет возвращен как word(json_encode($array));?

Ответ: Да, я передам это как callbackFunctionName(json_encode($array));.

Обновление

Я включил ответы на два из трех моих ответов выше. Если кто-то может объяснить вещи полностью, конечно, я отмечу их ответ как правильный, иначе я укажу свои камни преткновения в ответе. Я до сих пор понятия не имею , где Я пишу функцию обратного вызова и что я буду делать с этим в JS.

Большое спасибо за любую помощь, которую вы можете оказать в этом.

1 Ответ

7 голосов
/ 15 сентября 2010

Сначала установите букмарклет со ссылкой, которую вы можете перетащить на панель закладок: 

<html>
<head></head>
<body>
    <a href="javascript:(function(src, cb){var s = document.createElement('script');s.charset = 'UTF-8';document.body.insertBefore(s, document.body.firstChild);s.src = src;if(typeof cb === 'function'){s.onload = cb;s.onreadystatechange = function(){(/loaded|complete/).test(s.readyState)&&cb(s);};}return s;}('http://github.com/pure/pure/raw/master/libs/pure.js', function(e){alert('loaded');}))">load</a>
</body>
</html>

Замените URL вашим скриптом, он будет загружен и запущен на странице хоста.

Однако теперь он находится на размещенной странице и не может вызвать ваш сервер с XMLHTTPRequest, так как домены не совпадают.
Вот идет JSONP.

В загруженном скрипте вы можете поместить функцию, например: function srvCallback(json){...}

Когда вы хотите вызвать свой сервер, вы добавите его в виде скрипта, используя функцию, аналогичную приведенной выше в букмарклете: 

function jsonp(src){
    var s = document.createElement('script');
        old = document.getElementById('srvCall');
    old && document.body.removeChild(old);
    s.charset = 'UTF-8';
    s.id = 'srvCall';
    document.body.insertBefore(s, document.body.firstChild);
    s.src = src + '?' + new Date().getTime();
}

Введите ваш запрос, например: 

jsonp('http://domain.com/controller/method/word')

Сервер должен ответить примерно так: 

srvCallback({word:'hello'});

И, наконец, автоматически вызывается функция srvCallback, внутри функции вы получаете свой JSON и показывает результат пользователю.

...