JSONP用于跨站点书签指导

Question

I'm looking to build a cross-site bookmarklet that gets a highlighted word, passes it to a CodeIgniter method ( domain.com/controller/method ), and returns the definition via a dictionary API. 我正在寻找一个跨站点书签，它获取一个突出显示的单词，将其传递给CodeIgniter方法（ domain.com/controller/method ），并通过字典API返回定义。 I've got a skeleton working well on a single domain, but I'm looking to expand it to use JSONP cross-domain. 我有一个骨架在单个域上运行良好，但我希望扩展它以使用JSONP跨域。 But I feel unclear. 但我觉得不清楚。

I know I need to load a script from a remote location and inject it in the current context. 我知道我需要从远程位置加载脚本并将其注入当前上下文中。 And I believe I'll need to get the highlighted word on a page, then call a URL that looks like domain.com/controller/method/word to get that script. 我相信我需要在页面上显示突出显示的单词，然后调用一个类似于domain.com/controller/method/word的URL来获取该脚本。 Then it gets foggy. 然后它变得模糊。

I think I essentially have two questions: 我想我基本上有两个问题：

Where do I include the necessary javascript to handle the parsing and passing of the word via XMLHTTPRequest? 我在哪里包含必要的javascript来处理通过XMLHTTPRequest解析和传递单词？ I think this will be the SRC of the script that I'll inject in the new context. 我认为这将是我将在新环境中注入的脚本的SRC。 Is this somehow within my relevant CodeIgniter method? 这是否在我的相关CodeIgniter方法中？ Or does this new script come from a random location on the same server as the relevant method and simply call to it? 或者这个新脚本是否来自与相关方法在同一服务器上的随机位置，只需调用它？

Answer: This is not supplementary to XMLHTTPRequest, this is in lieu of it, so that step is completely removed. 答：这不是对XMLHTTPRequest的补充，这取代了它，因此完全删除了该步骤。 The new script calls to the method, passes requisite information via query strings, and receives the JSON array in response. 新脚本调用该方法，通过查询字符串传递必要信息，并接收响应中的JSON数组。

Am I correct in understanding I'll eventually pass the JSON response from the method back as word(json_encode($array)); 我是否正确理解我最终将该方法的JSON响应作为word(json_encode($array));传递回来word(json_encode($array)); ? ？

Answer: Yes, I'll pass that back as callbackFunctionName(json_encode($array)); 答：是的，我将它传回作为callbackFunctionName(json_encode($array)); . 。

Do I need to set headers, as done here ? 我是否需要设置标题，如此处所示？

Update 更新

I included the answers to two of my three answers above. 我把上面三个答案中的两个答案包括在内。 If someone can explain things thoroughly, of course I'll mark their answer as correct, else I'll elaborate my stumbling blocks in an answer. 如果有人能够彻底解释事情，我当然会将他们的答案标记为正确，否则我会在答案中阐述我的绊脚石。 I still have no idea where I write the callback function and what I'll be doing with that in JS. 我仍然不知道在哪里编写回调函数以及我将在JS中使用它做什么。

Thanks so much for any help you can give on this. 非常感谢您提供的任何帮助。

Answer 1

First set your bookmarklet with a link you can drop on the bookmark bar: 首先使用您可以放在书签栏上的链接设置书签：

<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>

Replace the url by your script, it will be loaded and running on the host page. 用脚本替换url，它将在主机页面上加载并运行。

However it sits now in the hosted page, and can't call your server with XMLHTTPRequest as the domains do not match. 但是它现在位于托管页面中，并且由于域不匹配而无法使用XMLHTTPRequest调用您的服务器。
Here comes JSONP. 这是JSONP。

In the loaded script, you can put a function eg: function srvCallback(json){...} 在加载的脚本中，您可以放置一个函数，例如： function srvCallback(json){...}

When you want to call your server you will inject it as a script using a similar function as in the bookmarklet above: 当您想要调用服务器时，您将使用与上面的书签类似的功能将其作为脚本注入：

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();
}

Inject your request, eg: 注入您的请求，例如：

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

The server should respond something like: 服务器应该响应如下：

srvCallback({word:'hello'});

And finally the function srvCallback is automatically called, inside the function you get your JSON and show the result to the user. 最后自动调用函数srvCallback ，在函数内部获取JSON并将结果显示给用户。

JSONP用于跨站点书签指导

问题描述

1 个解决方案

解决方案1
7 已采纳 2010-09-14 22:36:24

JSONP用于跨站点书签指导

问题描述

1 个解决方案

解决方案1 7 已采纳 2010-09-14 22:36:24

解决方案1
7 已采纳 2010-09-14 22:36:24