用于跨站点书签指南的 JSONP

发布于 2024-09-19 12:09:20 字数 1086 浏览 1 评论 0原文

我希望构建一个跨站点书签，它获取突出显示的单词，将其传递给 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)); 传回。

我是否需要按照此处的操作设置标头？

更新

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏日落 2024-09-26 12:09:40

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

<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并向用户显示结果。

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.

However it sits now in the hosted page, and can't call your server with XMLHTTPRequest as the domains do not match.
Here comes JSONP.

In the loaded script, you can put a function eg: 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.

回复收藏 0 原文

~没有更多了~

关于作者

極樂鬼

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

用于跨站点书签指南的 JSONP

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

用于跨站点书签指南的 JSONP

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。