用于跨站点书签指南的 JSONP答案

【问题标题】：JSONP for cross-site bookmarklet guidance用于跨站点书签指南的 JSONP
【发布时间】：2011-04-12 10:01:18
【问题描述】：

我正在寻找构建一个跨站点书签，它可以获取突出显示的单词，将其传递给 CodeIgniter 方法 (domain.com/controller/method)，然后通过字典返回定义API。我有一个框架在单个域上运行良好，但我希望将其扩展为使用 JSONP 跨域。但我感觉不清楚。

我知道我需要从远程位置加载脚本并将其注入当前上下文。而且我相信我需要在页面上获取突出显示的单词，然后调用类似于 domain.com/controller/method/word 的 URL 来获取该脚本。然后就起雾了。

我想我基本上有两个问题：

在哪里包含必要的 javascript 以通过 XMLHTTPRequest 处理单词的解析和传递？我认为这将是我将在新上下文中注入的脚本的 SRC。这是否在我的相关 CodeIgniter 方法中？或者这个新脚本是否来自与相关方法相同的服务器上的随机位置并简单地调用它？

答案： 这不是对 XMLHTTPRequest 的补充，而是取而代之，所以完全去掉了这一步。新脚本调用该方法，通过查询字符串传递必要的信息，并接收 JSON 数组作为响应。

我是否正确理解我最终会将来自该方法的 JSON 响应以 word(json_encode($array)); 的形式传回？

回答：是的，我会将其作为callbackFunctionName(json_encode($array)); 传回。

是否需要设置标题as done here？

更新

我在上面的三个答案中包含了两个答案。如果有人可以彻底解释事情，我当然会将他们的答案标记为正确，否则我会在答案中详细说明我的绊脚石。我仍然不知道在哪里我在 JS 中编写回调函数以及我将用它做什么。

非常感谢您对此提供的任何帮助。

【问题讨论】：

标签： javascript json jsonp bookmarklet

【解决方案1】：

首先使用可以放在书签栏上的链接设置您的书签：

<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 来了。

在加载的脚本中，可以放一个函数 eg：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 并向用户显示结果。

【讨论】：

嘿麦克风，我有点困惑。这是我们正在谈论的书签，那么我如何将任一脚本放入正文中？任何我想用的东西，我都需要注入它，对吧？
希望第二次拍摄对您有所帮助。
嘿麦克风，你的帮助让我继续前进！在我的书签中，我通过一个自执行函数注入了我的辅助脚本，在那个辅助脚本中，我包含了我的所有 JS 和一个自执行函数来调用我的方法，它返回方法（{jsonData}）。在同一个辅助脚本中，我有一个名为 method(jsonp) 的函数，用于接收和解析数据。我剩下的唯一问题是，为什么在初始注入时使用回调函数？
如果你的JS没有依赖和/或自己启动，你不需要回调。
太好了，感谢您提供如此彻底和深思熟虑的答案，Mic。