Question

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

我知道我需要从远程位置加载脚本并将其注入当前上下文中。我相信我需要在页面上显示突出显示的字词，然后调用类似 domain.com/controller/method/word 的网址来获取该脚本。然后它变得模糊。

我认为我基本上有两个问题：

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

答案：这不是对XMLHTTPRequest的补充，这取代了它，因此完全删除了该步骤。新脚本调用该方法，通过查询字符串传递必要的信息，并接收响应的JSON数组。

我的理解是否正确我最终将该方法的JSON响应传递回word(json_encode($array));？

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

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

更新

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

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

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

在加载的脚本中，您可以输入一个函数，例如：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并将结果显示给用户。

JSONP用于跨站点书签指导

1 个答案: