Question

我想编写一个简单的javascript embeddable小部件，它显示从我的应用程序的API中检索到的一些信息。

我正在构建的API是用Symfony2编写的，我试图简单地获取生成的JSON字符串，并使用javascript在演示HTML页面中显示它。

要获取JSON字符串，我正在尝试使用一些代码，我发现here on Stackoverflow。

我正在使用的完整Javascript代码如下：

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.body.className = 'ok';
        } else {
            document.body.className = 'error';
        }
    }
};

var url = 'http://127.0.0.1:8000/widget/1';

request.open("GET", url, true);
request.send(null);

document.getElementById('demo').innerHTML = request;

HTML是一个简单的页面：

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8" />
        <meta name="generator" content="Aerendir's Hands" />
        <title>Widget demo page</title>
    </head>
    <body>
        <h1>Pagina demo del widget di TrustBack.Me</h1>
    <p id="demo"></p>
        <script src="widget.js"></script>
    </body>
</html>

当我打开http://localhost/demo.html时，Chrome控制台会告诉我：

XMLHttpRequest无法加载http://127.0.0.1:8000/widget/1。没有请求中存在“Access-Control-Allow-Origin”标头资源。因此，不允许原点“http://localhost”访问。

据我所知，这是一种防止某种跨站点脚本的安全措施，但Facebook如何通过其小部件来处理这类请求？

幸运的是我正在使用http://127.0.0.1和http://localhost，所以此问题立即就出现了！（我认为这是错误的原因o.O）。

如何从我的应用程序中获取JSON字符串以在我的javascript代码中使用它？

我非常擅长PHP和Symfony2，但我不懂JavaScript，这是我第一次尝试学习它。

所以我希望这里有人可以帮助我更好地理解小部件背后的机制。

我已经在Stackoverflow和互联网上阅读了很多关于如何构建javascript小部件的帖子，但是我找不到最新的东西：我发现的所有资源都是旧的（2012年最大），我不是确保它们有用或相关。

通常我会阅读一些文档以了解该做什么，然后我开始尝试，但在这种情况下，因为我以前没有关于最佳实践的知识，因为我不知道Javascript语言，我无法识别良好的建议，不能将当前的好建议与旧的和无用的建议分开。

我知道Facebook使用iFrames，我的知识和理解在这里停止。

有人可以让我朝着正确的方向努力实现我的目标吗？

在这一刻，我的目标是使用我的远程API返回的json字符串的javascript变量。

提前谢谢！

如何从远程API（我已经构建）中获取JSON字符串，以便在javascript embeddable小部件中使用它（我正在尝试编写）

0 个答案: